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) => {
        // https://stackoverflow.com/questions/48371446/find-bold-words-in-selection-using-office-addin-javascript-api
        let tsr = context.document.body.getRange("Whole").getTextRanges([" "], true);
        // console.log(tsr);
        tsr.load("font/bold, font/italic, text, style");
        await context.sync();
        tsr.items.forEach(function (word, index){
          if (word.font.bold) {
            console.log(word.text);
            word.font.bold = false;
            // word.insertText("kk", "Replace")
            // Doesn't work because it sets the style of the whole paragraph
            word.style = "Intensive Hervorhebung";
          }
        });
        await context.sync();
      return;

        let identifyingFeaturesCCs = context.document.contentControls.getByTag("identifyingFeatures");
        identifyingFeaturesCCs.load("items");
        await context.sync();
        for (let i = 0; i < identifyingFeaturesCCs.items.length; i++)
        {
          let identifyingFeaturesCC = identifyingFeaturesCCs.items[i];
          let ccs = identifyingFeaturesCC.contentControls;
          ccs.load("items");
          await context.sync();
          for (let j = 0; j < ccs.items.length; j++) {
            let cc = ccs.items[j];
            var text = cc.text;
            cc.insertHtml(text, 'Replace');        
          }

        }
        return;
        // 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].clear();
           var text = authorContentControls.items[i].text;
           authorContentControls.items[i].insertHtml(text, 'Replace');
           /*
          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"
      
          }
      */    

      /*
           const tableCollection = context.document.body.tables;
           // Queue a commmand to load the results.
           context.load(tableCollection);
           await context.sync();

             for (var k = 0; k < tableCollection.items.length; k++) {
             var theTable = null;
             theTable = tableCollection.items[k];
             var cell1 = theTable.values[0][0];
             console.log(theTable.values);
             if (cell1 == "Insects") {
               //once found, load the table in memory and add a row
               context.load(theTable, '');
               await context.sync();
               let numRows = theTable.rowCount.toString()
             }
               context.load(theTable, '');
               await context.sync();
               var cell2 = theTable.getCell(0, 1);
               cell2.value = "kkk";

              theTable.deleteRows(0);
               theTable.addRows("Start", 1, [["x", "y"]]);
               console.log("Clerared");         //theTable.clear();

           }
      */

         
          // 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