Inserts, updates, and retrieves content controls.

Content control basics (1).WORD.yaml

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

    $("#change-controls").click(() => tryCatch(modifyContentControls));

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


    enum Appearance {
      BoundingBox,
      Tags,
      Hidden
    }


    async function insertContentControls() {  
      insertContentControl("q12345", "First Name | E9899009", Appearance.BoundingBox);  
    }



    /**
     * Insert Content Control 
     * tag:  QuestionID | Element ID | Clause ID
     * title:  Question Name | Bookmark
     * appearance: Apprearnace of content control
     */
    async function insertContentControl(tag: string, title: string, appearance:
    Appearance){
      await Word.run(async (context) => {
        var selectdRng = context.document.getSelection();
        context.load(selectdRng);
        const contentControls = selectdRng.contentControls;
        contentControls.load('text');
        await context.sync();
        if (contentControls.items.length == 0) {
          let contentControl = selectdRng.insertContentControl();
          contentControl.tag = tag;
          contentControl.title = title;
          setApearance(contentControl, appearance);      
        }
        else {
          console.log("There isn't a content control in this selected range.");
        }
      });
    }


    function setApearance(cc: Word.ContentControl, appearance: Appearance){
      switch (appearance) {
        case Appearance.BoundingBox:
          cc.appearance = 'BoundingBox';
          break;
        case Appearance.Tags:
          cc.appearance = 'Tags';
          break;
        case Appearance.Hidden:
          cc.appearance = 'Hidden';
          break;
      }
    }


    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 evenContentControls = context.document.contentControls.getByTag("even");
        let oddContentControls = context.document.contentControls.getByTag("odd");
        evenContentControls.load("length");
        oddContentControls.load("length");

        await context.sync();

        for (let i = 0; i < evenContentControls.items.length; i++) {
          // Change a few properties and append a paragraph
          evenContentControls.items[i].set({
            color: "red",
            title: "Odd ContentControl #" + (i + 1),
            appearance: "Tags"
          });
          evenContentControls.items[i].insertParagraph("This is an odd content control", "End");
        }

        for (let j = 0; j < oddContentControls.items.length; j++) {
          // Change a few properties and append a paragraph
          oddContentControls.items[j].set({
            color: "green",
            title: "Even ContentControl #" + (j + 1),
            appearance: "Tags"
          });
          oddContentControls.items[j].insertHtml("This is an <b>even</b> content control", "End");
        }

        await context.sync();
      });
    }


    async function setup() {
      await Word.run(async (context) => {
        context.document.body.clear();
        context.document.body.insertParagraph("One more paragraph. ", "Start");
        context.document.body.insertParagraph("Inserting another paragraph. ", "Start");
        context.document.body.insertParagraph(
          "Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.",
          "Start"
        );
        context.document.body.paragraphs
          .getLast()
          .insertText(
            "To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries. ",
            "Replace"
          );
      });
    }


    /** 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">
      This sample demonstrates how to insert and change content control properties.
    </section>

    <section class="setup ms-font-m">
        <h3>Set up</h3>
        <button id="setup" class="ms-Button">
          <span class="ms-Button-label">Setup</span>
      </button>
    </section>

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

  [email protected]/dist/css/fabric.min.css
  [email protected]/dist/css/fabric.components.min.css

  [email protected]/client/core.min.js
  @types/core-js

  [email protected]
  @types/[email protected]

Leaflet - Content Control .WORD.yaml

name: 'Leaflet - Content Control '
description: 'Inserts, updates, and retrieves content controls.'
host: WORD
api_set: {}
script:
  content: >
    $("#insert-controls").click(() => tryCatch(insertContentControls));

    $("#validate-controls").click(() => tryCatch(containsContentControl));

    $("#reset-controls").click(() => tryCatch(resetContentControl));

    $("#highlight-controls").click(() => tryCatch(highlightContentControl));


    $("#highlightBookmark-controls").click(() =>
    tryCatch(highlightBookmarkContentControl));


    $("#deletefalse-controls").click(() => tryCatch(deleteFalseContentControl));

    $("#deletetrue-controls").click(() => tryCatch(deleteTrueContentControl));

    $("#deletebktrue-controls").click(() =>
    tryCatch(deleteBKTrueContentControl));

    $("#deletebkfalse-controls").click(() =>
    tryCatch(deleteBKFalseContentControl));

    $("#settext-controls").click(() => tryCatch(setTextContentControl));


    $("#getooxml-controls").click(() => tryCatch(getOOXMLContentControl));


    enum Appearance {
      BoundingBox,
      Tags,
      Hidden
    }


    class LFControl {
      id: number;
      tag: string;
      title: string;
      constructor(controlId: number, controlTag: string, controlTitle: string) {
        this.id = controlId;
        this.tag = controlTag;
        this.title = controlTitle;
      }

      get bookmark(): string {
        return this.title;
      }
    }


    async function insertContentControls() {
      let bookmark = "E" + Math.floor(Math.random() * 10000);
      insertContentControl("q12345", "First Name | " + bookmark, Appearance.BoundingBox);
    }


    async function containsContentControl() {
      await Word.run(async (context) => {
        const lfControl = await getParnetContentControl(context, context.document.getSelection());
        if (lfControl) {
          console.log(lfControl);
          console.log(lfControl.bookmark);
        } else {
          console.log("Could not found any prent control");
        }
      });
    }


    async function highlightContentControl() {
      highlightByTag("q12345", "#ffea9b", Appearance.Tags);
    }


    async function highlightBookmarkContentControl() {
      highlightByBookmark("q12345", "E9899008", "#ffea9b", Appearance.Tags);
    }

    async function resetContentControl() {
      resetAllContentControl("gray", Appearance.BoundingBox);
    }


    async function deleteTrueContentControl() {
      deleteByTag("q12345", true);
    }


    async function deleteFalseContentControl() {
      deleteByTag("q12345", false);
    }


    async function deleteBKTrueContentControl() {
      deleteByBookmark("q12345", "E3127", true);
    }


    async function deleteBKFalseContentControl() {
      deleteByBookmark("q12345", "E3127", false);
    }


    async function setTextContentControl() {
      setContent("q12345", "E7899", "<b>hello</b><br/>cool");
    }


    async function getOOXMLContentControl() {
      let xml =  await getOOXML("q12345", "E2303");
      let val = await setOOXML("q12345", "E2303", xml);
      console.log(val);
    }

    //===============================================


    /**
     * Insert Content Control
     * tag:  QuestionID | Element ID | Clause ID
     * title:  Question Name | Bookmark
     * appearance: Apprearnace of content control
     */
    async function insertContentControl(tag: string, title: string, appearance:
    Appearance) {
      await Word.run(async (context) => {
        var selectdRng = context.document.getSelection();
        context.load(selectdRng);
        const contentControls = selectdRng.contentControls;
        contentControls.load("text");
        await context.sync();
        if (contentControls.items.length == 0) {
          let contentControl = selectdRng.insertContentControl();
          contentControl.tag = tag;
          contentControl.title = title;
          setApearance(contentControl, appearance);
        } else {
          console.log("There isn't a content control in this selected range.");
        }
      });
    }


    /**
     * Find the parent content control on given range.
     * rng: Range to check
     */
    async function getParnetContentControl(context: Word.RequestContext, rng:
    Word.Range): Promise<LFControl | undefined> {
      context.load(rng);
      var praentCC = rng.parentContentControlOrNullObject;
      praentCC.load("tag,id,title");
      await context.sync();
      if (praentCC.id) {
        let lfControl = new LFControl(praentCC.id, praentCC.tag, praentCC.title);
        return lfControl;
      }
      return undefined;
    }


    /**
     * Highlight Content control by tag
     * tag: Tag id
     * color: Highlight color
     */
    async function highlightByTag(tag: string, color: string, appearance:
    Appearance) {
      await Word.run(async (context) => {
        let tagControls = await getAllContentControlByTag(context, tag, "length");
        for (let i = 0; i < tagControls.items.length; i++) {
          highlight(tagControls.items[i], color, appearance);
        }
      });
    }


    /**
     * Highlight Content control by bookmark
     * tag: Tag id
     * color: Highlight color
     */
    async function highlightByBookmark(tag: string, bookmark: string, color:
    string, appearance: Appearance) {
      await Word.run(async (context) => {
        let tagControls = await getAllContentControlByTag(context, tag, "length,title");
        for (let i = 0; i < tagControls.items.length; i++) {
          let control = tagControls.items[i];
          if (hasBookmark(control.title, bookmark)) {
            highlight(control, color, appearance);
          }
        }
      });
    }


    /**
     * Reset all control control
     * color: Color
     * appearnce: Appearance
     */
    async function resetAllContentControl(color: string, appearance: Appearance)
    {
      await Word.run(async (context) => {
        let ccControls = context.document.contentControls;
        ccControls.load("length");
        await context.sync();
        for (let i = 0; i < ccControls.items.length; i++) {
          let control = ccControls.items[i];
          highlight(control, color, appearance);
        }
      });
    }


    /**
     * Delete content control by Tag
     * tag: tag name
     * keepContent: Delete or keep the content control text
     */
    async function deleteByTag(tag: string, keepContent: boolean) {
      await Word.run(async (context) => {
        let tagControls = await getAllContentControlByTag(context, tag, "length");
        let length = tagControls.items.length;
        for (let i = 0; i < length; i++) {
          tagControls.items[i].delete(keepContent);
        }
      });
    }


    /**
     * Delete content control by Bookmark
     * tag: tag name
     * bookmark: Bookmark name
     * keepContent: Delete or keep the content control text
     */
    async function deleteByBookmark(tag: string, bookmark: string, keepContent:
    boolean) {
      await Word.run(async (context) => {
        let tagControls = await getAllContentControlByTag(context, tag, "length,title");
        let length = tagControls.items.length;
        for (let i = 0; i < length; i++) {
          let control = tagControls.items[i];
          if (hasBookmark(control.title, bookmark)) {
            control.delete(keepContent);
          }
        }
      });
    }


    /**
     * Set content control text
     * tag: tag name
     * bookmark: bookmark
     * content: plain text or html text
     */
    async function setContent(tag: string, bookmark: string, content: string) {
      await Word.run(async (context) => {
        let tagControls = await getAllContentControlByTag(context, tag, "length,title");
        let length = tagControls.items.length;
        for (let i = 0; i < length; i++) {
          let control = tagControls.items[i];
          if (hasBookmark(control.title, bookmark)) {
            control.insertHtml(content, Word.InsertLocation.replace);
          }
        }
      });
    }


    /**
     * Set content control text
     * tag: tag name
     * bookmark: bookmark
     * content: plain text or html text
     */
    async function setOOXML(tag: string, bookmark: string, xml: string):
    Promise<boolean>{
      return await Word.run(async (context) => {
        let tagControls = await getAllContentControlByTag(context, tag, "length,title");
        let length = tagControls.items.length;
        for (let i = 0; i < length; i++) {
          let control = tagControls.items[i];
          if (hasBookmark(control.title, bookmark)) {
            control.insertOoxml(xml, Word.InsertLocation.replace);
            return true;
          }
        }
        return false
      });
    }


    /**
     * Get XML of content control
     * tag: tag name
     * bookmark: bookmark
     */
    async function getOOXML(tag: string, bookmark: string):
    Promise<string|undefined> {
      return await Word.run(async (context) => {
        let tagControls = await getAllContentControlByTag(context, tag, "length,title");
        let length = tagControls.items.length;
        for (let i = 0; i < length; i++) {
          let control = tagControls.items[i];
          if (hasBookmark(control.title, bookmark)) {
            let xml = control.getOoxml();
            await context.sync();
            return xml.value;        
          }      
        }
        return undefined;
      });
    }


    //<=====Util=======START=============>

    function hasBookmark(title: string, bookmark: string) {
      return title.includes(bookmark);
    }

    //<=====Util=======START=============>


    //<=====Core Office Functionality=======START=============>


    async function getAllContentControlByTag(
      context: Word.RequestContext,
      tag: string,
      properties: string
    ): Promise<Word.ContentControlCollection> {
      let controls = context.document.contentControls.getByTag(tag);
      controls.load(properties);
      await context.sync();
      return controls;
    }


    /**
     * Set Contontent control appearance.
     */
    function setApearance(cc: Word.ContentControl, appearance: Appearance): void
    {
      switch (appearance) {
        case Appearance.BoundingBox:
          cc.appearance = "BoundingBox";
          break;
        case Appearance.Tags:
          cc.appearance = "Tags";
          break;
        case Appearance.Hidden:
          cc.appearance = "Hidden";
          break;
      }
    }


    /**
     * Highlight content control
     * cc: Content Control
     * color: Hex Color
     * appearance: Appreance enum
     */
    function highlight(cc: Word.ContentControl, color: string, appearance:
    Appearance): void {
      cc.set({
        color: color
      });
      setApearance(cc, appearance);
    }


    //<=====Core Office Functionality=======END=============>


    /** 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\tContent COntrol\n</section>\n\n\n<section class=\"samples ms-font-m\">\n\t<h3>Try it out</h3>\n\t<span class=\"ms-font-m\">Insert content controls on selection.</span>\n\t<button id=\"insert-controls\" class=\"ms-Button\">\n    <span class=\"ms-Button-label\">Insert</span>\n  </button>\n\t<p>\n\t\t<span class=\"ms-font-m\">Validate selection contains content control.</span>\n\t\t<button id=\"validate-controls\" class=\"ms-Button\">\n    <span class=\"ms-Button-label\">Validate</span>\n  </button>\n\t\t<p>\n\t\t\t<span class=\"ms-font-m\">Reset content control.</span>\n\t\t\t<button id=\"reset-controls\" class=\"ms-Button\">\n\t    <span class=\"ms-Button-label\">Reset</span>\n\t  </button>\n\n\t\t\t<p>\n\t\t\t\t<span class=\"ms-font-m\">Highlight content control.</span>\n\t\t\t\t<button id=\"highlight-controls\" class=\"ms-Button\">\n\t\t    <span class=\"ms-Button-label\">Highlight By Tag</span>\n\t\t  </button>\n\t\t\t\t<button id=\"highlightBookmark-controls\" class=\"ms-Button\">\n\t\t\t\t\t<span class=\"ms-Button-label\">Highlight by Bookmark</span>\n\t\t\t</button>\n\n\t\t\t\t<p>\n\t\t\t\t\t<span class=\"ms-font-m\">Delete content control.</span>\n\t\t\t\t\t<button id=\"deletetrue-controls\" class=\"ms-Button\">\n\t\t\t    <span class=\"ms-Button-label\">Delete by Tag (true)</span>\n\t\t\t  </button>\n\t\t\t\t\t<button id=\"deletefalse-controls\" class=\"ms-Button\">\n\t\t\t\t\t\t\t\t\t<span class=\"ms-Button-label\">Delete by Tag (false)</span>\n\t\t\t\t</button>\n\t\t\t\t\t<button id=\"deletebktrue-controls\" class=\"ms-Button\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ms-Button-label\">Delete by BK (true)</span>\n\t\t\t\t</button>\n\t\t\t\t\t<button id=\"deletebkfalse-controls\" class=\"ms-Button\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ms-Button-label\">Delete by BK (false)</span>\n\t\t\t\t</button>\n\n\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<span class=\"ms-font-m\">Set text on content control.</span>\n\t\t\t\t\t\t<button id=\"settext-controls\" class=\"ms-Button\">\n\t\t\t\t\t\t    <span class=\"ms-Button-label\">Set Content</span>\n\t\t\t\t\t\t  </button>\n\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<span class=\"ms-font-m\">Get OOXML content control.</span>\n\t\t\t\t\t\t<button id=\"getooxml-controls\" class=\"ms-Button\">\n\t\t\t\t\t\t\t\t<span class=\"ms-Button-label\">Get OOXML</span>\n\t\t\t\t\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

  [email protected]/dist/css/fabric.min.css
  [email protected]/dist/css/fabric.components.min.css

  [email protected]/client/core.min.js
  @types/core-js

  [email protected]
  @types/[email protected]