This sample shows how to perform operations on the styles in the current document and how to add and delete custom styles.

ShadingTestGetSet- BugBash .WORD.yaml

name: 'ShadingTestGetSet- BugBash '
description: >-
  This sample shows how to perform operations on the styles in the current
  document and how to add and delete custom styles.
host: WORD
api_set: {}
script:
  content: >
    $("#shading").click(() => tryCatch(getShadingProperties));


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

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

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


    async function getShadingProperties() {
      // Gets the properties of the specified style.
      await Word.run(async (context) => {
        const styleName = $("#style-name-to-use").val() as string;
        if (styleName == "") {
          console.warn("Enter a style name to get properties.");
          return;
        }

        const style = context.document.getStyles().getByNameOrNullObject(styleName);
        style.load();
        await context.sync();

        if (style.isNullObject) {
          console.warn(`There's no existing style with the name '${styleName}'.`);
        } else {
          console.log(`Shading properties of the '${styleName}' style:`);

          //test style.borders
          const shading = style.shading;
          shading.load();
          await context.sync();
          console.log(JSON.stringify(shading));
        }
      });
    }


    async function setBackgroundPatternColor() {
      // Updates font properties (e.g., color, size) of the specified style.
      await Word.run(async (context) => {
        const styleName = $("#style-name").val() as string;
        if (styleName == "") {
          console.warn("Enter a style name to update font properties.");
          return;
        }

        const style = context.document.getStyles().getByNameOrNullObject(styleName);
        style.load();
        await context.sync();

        if (style.isNullObject) {
          console.warn(`There's no existing style with the name '${styleName}'.`);
        } else {
          //test style.shading
          style.shading.backgroundPatternColor = "Yellow";
          //style.shading.texTure = "Percent90";
          // style.shading.foregroundPatternColor = "Blue";

          await context.sync();
          console.log(`Successfully updated style.backgroundPatternColor of the '${styleName}' style.`);
        }
      });
    }


    async function setForegroundPatternColor() {
      // Updates font properties (e.g., color, size) of the specified style.
      await Word.run(async (context) => {
        const styleName = $("#style-name").val() as string;
        if (styleName == "") {
          console.warn("Enter a style name to update font properties.");
          return;
        }

        const style = context.document.getStyles().getByNameOrNullObject(styleName);
        style.load();
        await context.sync();

        if (style.isNullObject) {
          console.warn(`There's no existing style with the name '${styleName}'.`);
        } else {
          style.shading.texture = Word.ShadingTextureType.darkTrellis;
          style.shading.foregroundPatternColor = "blue";

          await context.sync();
          console.log(`Successfully updated style.foregroundPatternColor of the '${styleName}' style.`);
        }
      });
    }


    async function setTexture() {
      // Updates font properties (e.g., color, size) of the specified style.
      await Word.run(async (context) => {
        const styleName = $("#style-name").val() as string;
        if (styleName == "") {
          console.warn("Enter a style name to update font properties.");
          return;
        }

        const style = context.document.getStyles().getByNameOrNullObject(styleName);
        style.load();
        await context.sync();

        if (style.isNullObject) {
          console.warn(`There's no existing style with the name '${styleName}'.`);
        } else {
          style.shading.texture = Word.ShadingTextureType.darkVertical;

          await context.sync();
          console.log(`Successfully updated style.texTure of the '${styleName}' style.`);
        }
      });
    }


    /** 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\tThis sample demonstrates how to manage styles.\n</section>\n\n<h4>Use custom style</h4>\n<label style=\"margin-left: 20px\">Style name:</label>\n<input id=\"style-name-to-use\"/>\n<p />\n<button id=\"shading\" class=\"ms-Button\">\n      <span class=\"ms-Button-label\">Get the target Style's shading properties</span>\n    </button>\n\n<h4>Update custom style</h4>\n<label style=\"margin-left: 20px\">Style name:</label>\n<input id=\"style-name\"/>\n<p />\n<button id=\"setBackgroundPatternColor\" class=\"ms-Button\">\n    <span class=\"ms-Button-label\">Set style.shading.backgroundPatternColor</span>\n  </button>\n<p />\n<button id=\"setForegroundPatternColor\" class=\"ms-Button\">\n    <span class=\"ms-Button-label\">Set style.shading.foregroundPatternColor</span>\n  </button>\n<p />\n<button id=\"setTexture\" class=\"ms-Button\">\n    <span class=\"ms-Button-label\">Set style.shading.texture</span>\n  </button>\n<p />"
  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;
    }
  language: css
libraries: |-
  https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
  @types/office-js-preview

  @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