TableStyle basics.WORD.yaml

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));


    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);
        })
    }


    /** 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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
  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/beta/hosted/office.js
  @types/office-js-preview

  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