Created
October 29, 2023 09:46
-
-
Save xuruiyao-msft/5ba589786fb045c3ad190556f05db5b8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name: TableStyle basics | |
description: '' | |
host: WORD | |
api_set: {} | |
script: | |
content: > | |
$("#getTableStyle").click(() => tryCatch(getTableStyle)); | |
$("#setAlignment").click(() => tryCatch(setAlignment)); | |
$("#setAllowBreakAcrossPage").click(() => | |
tryCatch(setAllowBreakAcrossPage)); | |
$("#setTopCellMargin").click(() => tryCatch(setTopCellMargin)); | |
$("#setLeftCellMargin").click(() => tryCatch(setLeftCellMargin)); | |
$("#setBottomCellMargin").click(() => tryCatch(setBottomCellMargin)); | |
$("#setRightCellMargin").click(() => tryCatch(setRightCellMargin)); | |
$("#setCellSpacing").click(() => tryCatch(setCellSpacing)); | |
$("#importStylesFromJson").click(() => tryCatch(importStylesFromJson)); | |
async function getTableStyle() { | |
await Word.run(async (context) => { | |
const styleName = $("#styleId") | |
.val() | |
.toString(); | |
if (styleName == "") { | |
alert("please input the style name"); | |
return; | |
} | |
const tableStyle = context.document.getStyles().getByName(styleName).tableStyle; | |
tableStyle.load(); | |
await context.sync(); | |
console.log(tableStyle); | |
document.getElementById("alignment").value = tableStyle.alignment.toString(); | |
document.getElementById("allowBreakAcrossPage").value = tableStyle.allowBreakAcrossPage; | |
document.getElementById("topCellMargin").value = tableStyle.topCellMargin; | |
document.getElementById("leftCellMargin").value = tableStyle.leftCellMargin; | |
document.getElementById("bottomCellMargin").value = tableStyle.bottomCellMargin; | |
document.getElementById("rightCellMargin").value = tableStyle.rightCellMargin; | |
document.getElementById("cellSpacing").value = tableStyle.cellSpacing; | |
}); | |
} | |
async function setAlignment() { | |
const styleName = $("#styleId") | |
.val() | |
.toString(); | |
if (styleName == "") { | |
alert("please input the style name"); | |
return; | |
} | |
await Word.run(async (context) => { | |
const alignment = document.getElementById("alignment").value.toString(); | |
const tableStyle = context.document.getStyles().getByName(styleName).tableStyle; | |
tableStyle.alignment = alignment; | |
await context.sync(); | |
tableStyle.load(); | |
await context.sync(); | |
console.log("alignment: " + tableStyle.alignment); | |
}); | |
} | |
async function setAllowBreakAcrossPage() { | |
const styleName = $("#styleId") | |
.val() | |
.toString(); | |
if (styleName == "") { | |
alert("please input the style name"); | |
return; | |
} | |
await Word.run(async (context) => { | |
const allowBreakAcrossPage = document.getElementById("allowBreakAcrossPage").value.toString(); | |
if (allowBreakAcrossPage != "true" && allowBreakAcrossPage != "false") { | |
alert("please input true or false"); | |
return; | |
} | |
const tableStyle = context.document.getStyles().getByName(styleName).tableStyle; | |
tableStyle.allowBreakAcrossPage = allowBreakAcrossPage == "true"; | |
await context.sync(); | |
tableStyle.load(); | |
await context.sync(); | |
console.log("allowBreakAcrossPage: " + tableStyle.allowBreakAcrossPage); | |
}); | |
} | |
async function setTopCellMargin() { | |
const styleName = $("#styleId") | |
.val() | |
.toString(); | |
if (styleName == "") { | |
alert("please input the style name"); | |
return; | |
} | |
await Word.run(async (context) => { | |
const topCellMargin = Number(document.getElementById("topCellMargin").value.toString()); | |
const tableStyle = context.document.getStyles().getByName(styleName).tableStyle; | |
tableStyle.topCellMargin = topCellMargin; | |
await context.sync(); | |
tableStyle.load(); | |
await context.sync(); | |
console.log("topCellMargin: " + tableStyle.topCellMargin); | |
}); | |
} | |
async function setLeftCellMargin() { | |
const styleName = $("#styleId") | |
.val() | |
.toString(); | |
if (styleName == "") { | |
alert("please input the style name"); | |
return; | |
} | |
await Word.run(async (context) => { | |
const leftCellMargin = Number(document.getElementById("leftCellMargin").value.toString()); | |
const tableStyle = context.document.getStyles().getByName(styleName).tableStyle; | |
tableStyle.leftCellMargin = leftCellMargin; | |
await context.sync(); | |
tableStyle.load(); | |
await context.sync(); | |
console.log("leftCellMargin: " + tableStyle.leftCellMargin); | |
}); | |
} | |
async function setBottomCellMargin() { | |
const styleName = $("#styleId") | |
.val() | |
.toString(); | |
if (styleName == "") { | |
alert("please input the style name"); | |
return; | |
} | |
await Word.run(async (context) => { | |
const bottomCellMargin = Number(document.getElementById("bottomCellMargin").value.toString()); | |
const tableStyle = context.document.getStyles().getByName(styleName).tableStyle; | |
tableStyle.bottomCellMargin = bottomCellMargin; | |
await context.sync(); | |
tableStyle.load(); | |
await context.sync(); | |
console.log("bottomCellMargin: " + tableStyle.bottomCellMargin); | |
}); | |
} | |
async function setRightCellMargin() { | |
const styleName = $("#styleId") | |
.val() | |
.toString(); | |
if (styleName == "") { | |
alert("please input the style name"); | |
return; | |
} | |
await Word.run(async (context) => { | |
const rightCellMargin = Number(document.getElementById("rightCellMargin").value.toString()); | |
const tableStyle = context.document.getStyles().getByName(styleName).tableStyle; | |
tableStyle.rightCellMargin = rightCellMargin; | |
await context.sync(); | |
tableStyle.load(); | |
await context.sync(); | |
console.log("rightCellMargin: " + tableStyle.rightCellMargin); | |
}); | |
} | |
async function setCellSpacing() { | |
const styleName = $("#styleId") | |
.val() | |
.toString(); | |
if (styleName == "") { | |
alert("please input the style name"); | |
return; | |
} | |
await Word.run(async (context) => { | |
const cellSpacing = Number(document.getElementById("cellSpacing").value.toString()); | |
const tableStyle = context.document.getStyles().getByName(styleName).tableStyle; | |
tableStyle.cellSpacing = cellSpacing; | |
await context.sync(); | |
tableStyle.load(); | |
await context.sync(); | |
console.log("cellSpacing: " + tableStyle.cellSpacing); | |
}); | |
} | |
async function importStylesFromJson() { | |
await Word.run(async (context) => { | |
const str = | |
'{"styles":[{"baseStyle":"Default Paragraph Font","builtIn":false,"inUse":true,"linked":false,"nameLocal":"NewCharStyle","priority":2,"quickStyle":true,"type":"Character","unhideWhenUsed":false,"visibility":false,"paragraphFormat":null,"font":{"name":"DengXian Light","size":16.0,"bold":true,"italic":false,"color":"#F1A983","underline":"None","subscript":false,"superscript":true,"strikeThrough":true,"doubleStrikeThrough":false,"highlightColor":null,"hidden":false},"shading":{"backgroundPatternColor":"#FF0000"}},{"baseStyle":"Normal","builtIn":false,"inUse":true,"linked":false,"nextParagraphStyle":"NewParaStyle","nameLocal":"NewParaStyle","priority":1,"quickStyle":true,"type":"Paragraph","unhideWhenUsed":false,"visibility":false,"paragraphFormat":{"alignment":"Centered","firstLineIndent":0.0,"keepTogether":false,"keepWithNext":false,"leftIndent":72.0,"lineSpacing":18.0,"lineUnitAfter":0.0,"lineUnitBefore":0.0,"mirrorIndents":false,"outlineLevel":"OutlineLevelBodyText","rightIndent":72.0,"spaceAfter":30.0,"spaceBefore":30.0,"widowControl":true},"font":{"name":"DengXian","size":14.0,"bold":true,"italic":true,"color":"#8DD873","underline":"Single","subscript":false,"superscript":false,"strikeThrough":false,"doubleStrikeThrough":true,"highlightColor":null,"hidden":false},"shading":{"backgroundPatternColor":"#00FF00"}},{"baseStyle":"Table Normal","builtIn":false,"inUse":true,"linked":false,"nextParagraphStyle":"NewTableStyle","nameLocal":"NewTableStyle","priority":100,"type":"Table","unhideWhenUsed":false,"visibility":false,"paragraphFormat":{"alignment":"Left","firstLineIndent":0.0,"keepTogether":false,"keepWithNext":false,"leftIndent":0.0,"lineSpacing":12.0,"lineUnitAfter":0.0,"lineUnitBefore":0.0,"mirrorIndents":false,"outlineLevel":"OutlineLevelBodyText","rightIndent":0.0,"spaceAfter":0.0,"spaceBefore":0.0,"widowControl":true},"font":{"name":"DengXian","size":20.0,"bold":false,"italic":true,"color":"#D86DCB","underline":"None","subscript":false,"superscript":false,"strikeThrough":false,"doubleStrikeThrough":false,"highlightColor":null,"hidden":false},"tableStyle":{"allowBreakAcrossPage":true,"alignment":"Left","bottomCellMargin":0.0,"leftCellMargin":0.08,"rightCellMargin":0.08,"topCellMargin":0.0,"cellSpacing":0.0},"shading":{"backgroundPatternColor":"#60CAF3"}}]}'; | |
const styles = context.document.importStylesFromJson(str); | |
await context.sync(); | |
console.log(styles); | |
}); | |
} | |
/** Default helper for invoking an action and handling errors. */ | |
async function tryCatch(callback) { | |
try { | |
await callback(); | |
} catch (error) { | |
console.error(error); | |
} | |
} | |
language: TypeScript | |
template: | |
content: |- | |
<section class="ms-font-m"> | |
<p>The sample code about TableStyle and Document.importStylesFromJson. | |
</p> | |
</section> | |
<section class="setup ms-font-m"> | |
<h3>Setup</h3> | |
<p>Input a style name of Table type to get the properties. Insert a table with the style. Change the properties and | |
observe the changes reflected on the table.</p> | |
</section> | |
<section class="samples ms-font-m"> | |
<label class="msLabel">Input style of Table type:</label> | |
<input type="text" name="styleName" id="styleId" /> | |
<br/> | |
<button id="getTableStyle" class="ms-Button margin"> | |
<span class="ms-Button-label">getTableStyle</span> | |
</button> | |
</section> | |
<section class="samples ms-font-m"> | |
<label class="msLabel">alignment:</label> | |
<input id="alignment" type="text" /> | |
</br> | |
<button id="setAlignment" class="ms-Button margin"> | |
<span class="ms-Button-label">setAlignment</span> | |
</button> | |
</section> | |
<section class="samples ms-font-m"> | |
<label class="msLabel">allowBreakAcrossPage:</label> | |
<input id="allowBreakAcrossPage" type="text" /> | |
</br> | |
<button id="setAllowBreakAcrossPage" class="ms-Button margin"> | |
<span class="ms-Button-label">setAllowBreakAcrossPage</span> | |
</button> | |
</section> | |
<section class="samples ms-font-m"> | |
<label class="msLabel">topCellMargin:</label> | |
<input id="topCellMargin" type="text" /> | |
</br> | |
<button id="setTopCellMargin" class="ms-Button margin"> | |
<span class="ms-Button-label">setTopCellMargin</span> | |
</button> | |
</section> | |
<section class="samples ms-font-m"> | |
<label class="msLabel">leftCellMargin:</label> | |
<input id="leftCellMargin" type="text" /> | |
</br> | |
<button id="setLeftCellMargin" class="ms-Button margin"> | |
<span class="ms-Button-label">setLeftCellMargin</span> | |
</button> | |
</section> | |
<section class="samples ms-font-m"> | |
<label class="msLabel">bottomCellMargin:</label> | |
<input id="bottomCellMargin" type="text" /> | |
</br> | |
<button id="setBottomCellMargin" class="ms-Button margin"> | |
<span class="ms-Button-label">setBottomCellMargin</span> | |
</button> | |
</section> | |
<section class="samples ms-font-m"> | |
<label class="msLabel">rightCellMargin:</label> | |
<input id="rightCellMargin" type="text" /> | |
</br> | |
<button id="setRightCellMargin" class="ms-Button margin"> | |
<span class="ms-Button-label">setRightCellMargin</span> | |
</button> | |
</section> | |
<section class="samples ms-font-m"> | |
<label class="msLabel">cellSpacing:</label> | |
<input id="cellSpacing" type="text" /> | |
</br> | |
<button id="setCellSpacing" class="ms-Button margin"> | |
<span class="ms-Button-label">setCellSpacing</span> | |
</button> | |
</section> | |
<section class="setup ms-font-m"> | |
<p>Impot styles from json string.</p> | |
<button id="importStylesFromJson" class="ms-Button margin"> | |
<span class="ms-Button-label">importStylesFromJson</span> | |
</button> | |
<section> | |
language: HTML | |
style: | |
content: "section.samples {\r\n margin-top: 20px;\r\n}\r\n\r\nsection.samples .ms-Button, section.setup .ms-Button {\r\n display: block;\r\n margin-bottom: 5px;\r\n margin-left: 20px;\r\n min-width: 80px;\r\n}\r\n\r\n.margin {\r\n margin-top: 5px;\r\n margin-bottom: 5px;\r\n}" | |
language: CSS | |
libraries: |- | |
https://appsforoffice.microsoft.com/lib/1/hosted/office.js | |
@types/office-js | |
office-ui-fabric-js@1.4.0/dist/css/fabric.min.css | |
office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css | |
core-js@2.4.1/client/core.min.js | |
@types/core-js | |
jquery@3.1.1 | |
@types/jquery@3.3.1 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment