Bug bash gist for: 1. Border object 2. TableStyle 3. Retrieve Styles as Json

Border_TableStyle_RetrieveJson.WORD.yaml

name: Border_TableStyle_RetrieveJson
description: |-
  Bug bash gist for:
  1. Border object
  2. TableStyle
  3. Retrieve Styles as Json
host: WORD
api_set: {}
script:
  content: >
    $("#getBorderProperties").click(() => tryCatch(getBorderProperties));

    $("#getBorder_By_PositionType").click(() =>
    tryCatch(getBorder_By_PositionType));

    $("#getTableStyle").click(() => tryCatch(getTableStyle));


    $("#setAlignment").click(() => setTableStyle("alignment"));

    $("#setAllow").click(() => setTableStyle("allowBreakAcrossPage"));

    $("#setTopCellMargin").click(() => setTableStyle("topCellMargin"));

    $("#setLeftCellMargin").click(() => setTableStyle("leftCellMargin"));

    $("#setBottomCellMargin").click(() => setTableStyle("bottomCellMargin"));

    $("#setRightCellMargin").click(() => setTableStyle("rightCellMargin"));

    $("#setCellSpacing").click(() => setTableStyle("cellSpacing"));


    $("#setLineColor").click(() => setBorder("lineColor"));

    $("#setLineStyle").click(() => setBorder("lineStyle"));

    $("#setLineWidth").click(() => setBorder("lineWidth"));

    $("#setVisible").click(() => setBorder("visible"));


    async function setBorder(propName: string) {
      var obj: Object;
      switch (propName) {
        case "lineColor":
          const lineColor = document.getElementById(propName).value.toString();
          obj = { lineColor: lineColor };
          break;
        case "lineStyle":
          const lineStyle = document.getElementById(propName).value.toString();
          obj = { lineStyle: lineStyle };
          break;
        case "lineWidth":
          const lineWidth = document.getElementById(propName).value.toString();
          obj = { lineWidth: lineWidth };
          break;
        case "visible":
          const visible = document.getElementById(propName).value == "true";
          obj = { visible: visible };
          break;
      }
      await setBorderImpl(obj);
    }


    async function setBorderImpl(obj: Object) {
      var position = document.getElementById("positionTypeId").value.toString();
      const styleName = $("#styleId")
        .val()
        .toString();
      if (position == "" || styleName == "") {
        alert("please input the style name");
        return;
      }
      await Word.run(async (context) => {
        const borderCollection = context.document.getStyles().getByName(styleName).borders;
        borderCollection.load();
        await context.sync();
        const border = borderCollection.getByPositionType(position);
        border.load();
        await context.sync();
        border.set(obj);
        await context.sync();

        // retrieve border to console log
        border.load();
        await context.sync();
        console.log(border);
      });
    }


    async function setTableStyle(propName: string) {
      const styleName = $("#styleId")
        .val()
        .toString();
      if (styleName == "") {
        alert("please input the style name");
        return;
      }

      var obj;
      switch (propName) {
        case "alignment":
          const alignment = document.getElementById(propName).value.toString();
          obj = { alignment: alignment };
          break;
        case "allowBreakAcrossPage":
          const allowBreakAcrossPage = document.getElementById("allowBreakAcrossPage").value.toString() == "true";
          obj = { allowBreakAcrossPage: allowBreakAcrossPage };
          break;
        case "topCellMargin":
          const topCellMargin = Number(document.getElementById("topCellMargin").value);
          obj = { topCellMargin: topCellMargin };
          break;
        case "leftCellMargin":
          const leftCellMargin = Number(document.getElementById("leftCellMargin").value);
          obj = { leftCellMargin: leftCellMargin };
          break;
        case "bottomCellMargin":
          const bottomCellMargin = Number(document.getElementById("bottomCellMargin").value);
          obj = { bottomCellMargin: bottomCellMargin };
          break;
        case "rightCellMargin":
          const rightCellMargin = Number(document.getElementById("rightCellMargin").value);
          obj = { rightCellMargin: rightCellMargin };
          break;
        case "cellSpacing":
          const cellSpacing = Number(document.getElementById("cellSpacing").value);
          obj = { cellSpacing: cellSpacing };
          break;
        default:
          alert("invalid prop name");
      }
      try {
        await setTableStyleImp(obj);
      } catch (error) {
        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
        console.error(error);
      }
    }


    async function setTableStyleImp(obj: Object) {
      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.set(obj);
        await context.sync();
        tableStyle.load();
        await context.sync();
        console.log(tableStyle);
      });
    }


    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 getBorderProperties() {
      await Word.run(async (context) => {
        const styleName = $("#styleId")
          .val()
          .toString();
        if (styleName == "") {
          alert("please input the style name");
          return;
        }
        const borders = context.document.getStyles().getByName(styleName).borders;
        borders.load();
        await context.sync();
        console.log(borders);
      });
    }


    async function getBorder_By_PositionType() {
      await Word.run(async (context) => {
        var position = document.getElementById("positionTypeId").value.toString();
        const styleName = $("#styleId")
          .val()
          .toString();
        if (position == "" || styleName == "") {
          alert("please input the style name");
          return;
        }
        const borderCollection = context.document.getStyles().getByName(styleName).borders;
        borderCollection.load();
        await context.sync();
        const border = borderCollection.getByPositionType(position);
        border.load();
        await context.sync();
        console.log(`Border of style ${styleName} positon ${position}:`);
        console.log(border);

        document.getElementById("lineColor").value = border.lineColor.toString();
        document.getElementById("lineStyle").value = border.lineStyle.toString();
        document.getElementById("lineWidth").value = border.lineWidth.toString();
        document.getElementById("positionType").value = border.positionType.toString();
        document.getElementById("visible").value = border.visible;
      });
    }


    /** Default helper for invoking an action and handling errors. */

    async function tryCatch(callback) {
      try {
        await callback();
      } catch (error) {
        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
        console.error(error);
      }
    }
  language: typescript
template:
  content: "<section class=\"ms-font-m\">\n\t<h3>This is the sample for Border/TableStyle/RetrieveJson bug bash.\n\t</h3>\n</section>\n\n<section class=\"setup ms-font-m\">\n\t<h3>Setup</h3>\n\t<p>For example: Normal(Paragraph Style), Strong(Character Style), Table Grid(Table Style)</p>\n\t<span class=\"ms-Button-label\">input styleName:</span><input type=\"text\" name=\"styleName\" id=\"styleId\"/>\n</section>\n\n\t<section class=\"samples ms-font-m\">\n\t\t<button id=\"getBorderProperties\" class=\"ms-Button\">\n\t\t<span class=\"ms-Button-label\">getBorderProps</span>\n\t\t</button>\n\t</section>\n\n\t<section class=\"samples ms-font-m\">\n\t\t<button id=\"getTableStyle\" class=\"ms-Button\">\n\t\t\t\t\t\t<span class=\"ms-Button-label\">getTableStyle</span>\n\t\t\t\t\t\t</button>\n\t</section>\n\t<section class=\"setField\">\n\t\t<span>alignment:</span><input id=\"alignment\" type=\"text\"/><button id=\"setAlignment\"><span>setAlignment</span></button></br>\n\t\t<span>allowBreakAcrossPage:</span><input id=\"allowBreakAcrossPage\" type=\"text\"/><button id=\"setAllow\"><span>setAllow</span></button></br>\n\t\t<span>topCellMargin:</span><input id=\"topCellMargin\" type=\"text\"/><button id=\"setTopCellMargin\"><span>setTopCellMargin</span></button></br>\n\t\t<span>leftCellMargin:</span><input id=\"leftCellMargin\" type=\"text\"/><button id=\"setLeftCellMargin\"><span>setLeftCellMargin</span></button></br>\n\t\t<span>bottomCellMargin:</span><input id=\"bottomCellMargin\" type=\"text\"/><button id=\"setBottomCellMargin\"><span>setBottomCellMargin</span></button></br>\n\t\t<span>rightCellMargin:</span><input id=\"rightCellMargin\" type=\"text\"/><button id=\"setRightCellMargin\"><span>setRightCellMargin</span></button></br>\n\t\t<span>cellSpacing:</span><input id=\"cellSpacing\" type=\"text\"/><button id=\"setCellSpacing\"><span>setCellSpacing</span></button></br>\n\t</section>\n\n\t<section class=\"samples ms-font-m\">\n\t\t<span class=\"ms-Button-label\">choose PositionType:</span>\n\t\t<select id=\"positionTypeId\">\n\t\t<option value=\"Top\">Top</option>\n\t\t<option value=\"Left\">Left</option>\n\t\t<option value=\"Bottom\">Bottom</option>\n\t\t<option value=\"Right\">Right</option>\n\t\t<option value=\"Horizontal\">Horizontal</option>\n\t\t<option value=\"Vertical\">Vertical</option>\n\t\t<option value=\"DiagonalDown\">DiagonalDown</option>\n\t\t<option value=\"DiagonalUp\">DiagonalUp</option>\n\t\t</select>\n\t</section>\n\t<section class=\"samples ms-font-m\">\n\t\t<button id=\"getBorder_By_PositionType\" class=\"ms-Button\">\n\t\t\t\t<span class=\"ms-Button-label\">getBorderProps_By_PositionType</span>\n\t\t\t\t</button>\n\t</section>\n\t<section class=\"setField\">\n\t\t<a href=\"https://www.w3schools.com/colors/colors_picker.asp\">color picker</a></br>\n\t\t<a href=\"https://learn.microsoft.com/en-us/javascript/api/word/word.linestyle?view=word-js-preview\">line styles</a></br>\n\t\t<a href=\"https://learn.microsoft.com/en-us/javascript/api/word/word.linewidth?view=word-js-preview\">line width</a></br>\n\t\t<span>lineColor:</span><input id=\"lineColor\" type=\"text\"/><button id=\"setLineColor\"><span>setLineColor</span></button></br>\n\t\t<span>lineStyle:</span><input id=\"lineStyle\" type=\"text\"/><button id=\"setLineStyle\"><span>setLineStyle</span></button></br>\n\t\t<span>lineWidth:</span><input id=\"lineWidth\" type=\"text\"/><button id=\"setLineWidth\"><span>setLineWidth</span></button></br>\n\t\t<span>positionType:</span><input id=\"positionType\" type=\"text\"/></br>\n\t\t<span>visible:</span><input id=\"visible\" type=\"text\"/><button id=\"setVisible\"><span>setVisible</span></button></br>\n\t</section>"
  language: html
style:
  content: |-
    section.samples {
        margin-top: 20px;
    }

    section.samples .ms-Button, section.setup .ms-Button {
        display: block;
        margin-bottom: 5px;
        margin-left: 20px;
        min-width: 80px;
    }

    section.setField {
      margin-bottom: 10px;
      margin-left: 30px;
      margin-top: 5px
    }

    section.fieldSpan {
      width: 200px
    }
  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