Inserts, updates, and retrieves content controls.

Content control basics (3).WORD.yaml

name: Content control basics (3)
description: 'Inserts, updates, and retrieves content controls.'
host: WORD
api_set: {}
script:
  content: >
    $("#change-controls").click(() => tryCatch(modifyContentControls));



    async function modifyContentControls() {
      // Adds title and colors to odd and even content controls and changes their appearance.
      await Word.run(async (context) => {
        // Gets the complete sentence (as range) associated with the insertion point.
        let authorContentControls = context.document.contentControls.getByTag("author");
        authorContentControls.load("items");
        await context.sync();

         for (let i = 0; i < authorContentControls.items.length; i++) {
          console.log(authorContentControls.items[i].text);

          authorContentControls.items[i].delete(true);
    /*
          authorContentControls.items[i].load("paragraphs");
          await context.sync();
          
          let paragraphs = authorContentControls.items[i].paragraphs;

          for (let j = 0; j < paragraphs.items.length; j++) {
            console.log(paragraphs.items[i].text);
            console.log(paragraphs.items[i].style)
            paragraphs.items[i].style = "Inhaltssteuerelementeabsatz"
      
          }
          */
          /*
          authorContentControls.items[i].style = "Inhaltssteuerelementeabsatz";
          Generiert eine Fehlermeldung notAllowed

    H1: Permission?

    https://stackoverflow.com/questions/44293918/the-action-isn-t-supported-in-word-online


    H2: NotSupported

    https://stackoverflow.com/questions/43786014/word-addin-doesnt-work-on-word-online

    https://github.com/OfficeDev/office-js/issues/785


          */
        }

        await context.sync();
      });
    }


    /** 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 insert and change content control properties.\n</section>\n\n<section class=\"samples ms-font-m\">\n\t<h3>Try it out</h3>\n\t<p>\n\t\t<span class=\"ms-font-m\">Modify content control appearance and content.</span>\n\t\t<button id=\"change-controls\" class=\"ms-Button\">\n    <span class=\"ms-Button-label\">Modify content controls</span>\n  </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