Save and Load CustomXMLParts.WORD.yaml

name: Save and Load CustomXMLParts
description: ''
host: WORD
api_set: {}
script:
  content: >
    $("#set-xml").click(() => tryCatch(setCustomJson));

    $("#get-all-xml").click(() => tryCatch(getAllCustomJson));

    $("#get-xml").click(() => tryCatch(() => {
    getCustomJson('Smz-Token-MinPayment'); }));


    async function setCustomJson() {
      await Word.run(async (context) => {
        const json = {
          tokenId: "MinPayment",
          tokenType: "condsection",
          questionText: "What is the value?",
          options: ["1", "2", "3", "None"]
        };
        const xmlString = `<SmzToken xmlns='https://schemas.summze.com/token/1.0'><json>${encodeHtml(
          JSON.stringify(json)
        )}</json>
        </SmzToken>`;

        const result = await Office.context.document.customXmlParts.addAsync(xmlString, async function(result) {
          console.log("Saving Smz-Token-MinPayment " + result.value.id);
          context.document.properties.customProperties.add("Smz-Token-MaxPayment", result.value.id);

          await context.sync();
        });
      });
    }


    async function getCustomJsonWithContext(
      context: Word.RequestContext, 
      name: string) {

      await Office.context.document.customXmlParts.getByIdAsync(name, async function(result) {
        const xmlPart = result.value;

        xmlPart.getNodesAsync("*", async (result) => {
          // This doesn't feel right, but I can't get the xpath working. So, hey ho.
          const nodes = result.value.filter((x) => x.baseName === "json");
          if (nodes.length > 0) {
            await nodes[0].getTextAsync(function(nodeText) {
              const json = JSON.parse(decodeHtml(nodeText.value));
              console.log(JSON.stringify(json, null, 2));

              return json;
            });
          }
        });
      });
    }


    async function getCustomJson(name: string) {
      await Word.run(async (context) => {
        let properties = context.document.properties.customProperties;
        properties.load("key,type,value");

        await context.sync();

        let value = properties.items.find((i) => i.key === name);

        if (value === null) {
          return null;
        }

        await getCustomJsonWithContext(context, value.value);
      });
    }


    async function getAllCustomJson() {
      await Word.run(async (context) => {
        let properties = context.document.properties.customProperties;
        properties.load("key,type,value");

        await context.sync();

        let values = properties.items.filter((i) => i.key.startsWith("Smz-Token-"));

        console.log(JSON.stringify(values));

        for (let i = 0; i < values.length; i++) {
          await getCustomJsonWithContext(context, values[i].value);
        }
      });
    }


    function encodeHtml(html: string) {
      return html.replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&apos;");
    }


    function decodeHtml(encodedHtml: string) {
      return encodedHtml.replace(/&apos;/g, "'")
        .replace(/&quot;/g, '"')
        .replace(/&gt;/g, ">")
        .replace(/&lt;/g, "<")
        .replace(/&amp;/g, "&");
    }


    /** 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=\"samples ms-font-m\">\n\t<h3>Custom XML</h3>\n\t<span class=\"ms-font-m\">Set</span>\n\t<button id=\"set-xml\" class=\"ms-Button\">\n    <span class=\"ms-Button-label\">Set XML</span>\n  </button>\n\t\t<span class=\"ms-font-m\">Get All</span>\n\t\t<button id=\"get-all-xml\" class=\"ms-Button\">\n    <span class=\"ms-Button-label\">Get XML</span>\n  </button>\n\t\t<span class=\"ms-font-m\">Get</span>\n\t\t<button id=\"get-xml\" class=\"ms-Button\">\n\t\t    <span class=\"ms-Button-label\">Get XML</span>\n\t\t  </button>\n</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;
    }
  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