Shows basic and advanced search capabilities.

Search.WORD.yaml

name: Search
description: Shows basic and advanced search capabilities.
host: WORD
api_set: {}
script:
  content: |
    $("#setup").click(() => tryCatch(setup));
    $("#basic-search").click(() => tryCatch(basicSearch));
    $("#wildcard-search").click(() => tryCatch(wildcardSearch));

    async function basicSearch() {
      await Word.run(async (context) => {
        let results = context.document.body.search("Online");
        results.load("length");

        await context.sync();

        // Let's traverse the search results... and highlight...
        for (let i = 0; i < results.items.length; i++) {
          results.items[i].font.highlightColor = "yellow";
        }

        await context.sync();
      });
    }

    async function wildcardSearch() {
      await Word.run(async (context) => {
        // Check out how wildcard expression are built, also use the second parameter of the search method to include search modes
        // (i.e. use wildcards).
        let results = context.document.body.search("[[]Insert Text |*[]]", { matchWildcards: true });
        results.load("length");

        await context.sync();

        // Let's traverse the search results... and highlight...
        for (let i = 0; i < results.items.length; i++) {
          results.items[i].set.text = '';
          results.items[i].font.highlightColor = "blue";
          results.items[i].font.color = "white";
        }

        await context.sync();
      });
    }

    async function setup() {
      await Word.run(async (context) => {
        const body = context.document.body;
        body.clear();
        body.insertParagraph(
          "Video provides a powerful way to help you prove your point. When you click Online Video ($10,000.00), 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"
        );
        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 Online cover page, header, and sidebar. Click Insert and then choose the Online elements you want from the different Online galleries.",
            "Replace"
          );

        await context.sync();
      });
    }

    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 basic and advanced search capabilities of the API.
    </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>
        <button id="basic-search" class="ms-Button">
        <span class="ms-Button-label">Basic search</span>
      </button><p>
        <button id="wildcard-search" class="ms-Button">
        <span class="ms-Button-label">Wildcard search</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]