Executes a basic Excel API call

Shape - Demo.EXCEL.yaml

name: Shape - Demo
description: Executes a basic Excel API call
host: EXCEL
api_set: {}
script:
  content: >
    $("#InsertShape").click(() => tryCatch(InsertShape));

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

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

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

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


    async function InsertShape() {
      await Excel.run(async (context) => {
        let sheet = context.workbook.worksheets.getActiveWorksheet();
        let shapes = sheet.shapes;
        shape = shapes.addGeometricShape(shapeType, left, top, width, height);
        shape.load();
        await context.sync();
        console.log(`Succeed to insert Shape. Name:${shape.name}, Left:${shape.left};`);
      });
    }


    async function AddText() {
      await Excel.run(async (context) => {
        let sheet = context.workbook.worksheets.getActiveWorksheet();
        let shapes = sheet.shapes;
        let count = shapes.getCount();
        shapes.load("items");
        await context.sync();
        let shape;
        if (count.value > 0) {
          shape = shapes.items[0];
        } else {
          shape = shapes.addGeometricShape(shapeType, left, top, width, height);
          await context.sync();
          console.log(`Insert a shape because there is none.`);
        }

        let txfm = shape.textFrame;
        let range = txfm.textRange;
        range.text = "What can you do for text in shape?";
        range.font.size = 18;
        range.load("text");
        await context.sync();

        console.log(`Add Text: ${range.text}`);
      });
    }


    async function SetMargin() {
      await Excel.run(async (context) => {
        let sheet = context.workbook.worksheets.getActiveWorksheet();
        let shapes = sheet.shapes;
        let count = shapes.getCount();
        shapes.load("items");
        await context.sync();
        let shape;
        if (count.value > 0) {
          shape = shapes.items[0];
        } else {
          console.log(`This is no shape. Please run "Insert Shape" First.`);
          return;
        }

        let txfm = shape.textFrame;
        txfm.leftMargin = 20;
        txfm.topMargin = 20;
        txfm.rightMargin = 5;
        txfm.bottomMargin = 5;
        await context.sync();

        console.log(`Succeed to set margins.`);
      });
    }


    async function FormatText() {
      await Excel.run(async (context) => {
        let sheet = context.workbook.worksheets.getActiveWorksheet();
        let shapes = sheet.shapes;
        let count = shapes.getCount();
        shapes.load("items");
        await context.sync();
        let shape;
        if (count.value > 0) {
          shape = shapes.items[0];
        } else {
          console.log(`This is no shape. Please run "Insert Shape" First.`);
          return;
        }

        let txfm = shape.textFrame;
        let range = txfm.textRange;
        range.text = questionStr + boldStr + italicStr + underlineStr + redStr + fontStr + sizeStr;
        range.font.size = 18;

        let boldRange = range.getCharacters(boldPos, boldLength);
        boldRange.font.bold = true;

        let italicRange = range.getCharacters(italicPos, italicLength);
        italicRange.font.italic = true;

        let underlineRange = range.getCharacters(underlinePos, underlineLength);
        underlineRange.font.underline = "dotDash"; //Excel.ShapeFontUnderlineStyle.dotDash;

        let redRange = range.getCharacters(redPos, redLength);
        redRange.font.color = "red";

        let fontRange = range.getCharacters(fontPos, fontLength);
        fontRange.font.name = "Cooper Black";

        let sizeRange1 = range.getCharacters(sizePos1, sizeLength1);
        sizeRange1.font.size = 22;
        let sizeRange2 = range.getCharacters(sizePos2, sizeLength2);
        sizeRange2.font.size = 26;
        await context.sync();

        console.log("Succed to format text.");
      });
    }


    async function AddSVG() {
      await Excel.run(async (context) => {
        let shapes = context.workbook.worksheets.getActiveWorksheet().shapes;
        let img = shapes.addSVG(svgStr);
        await context.sync();
      });
    }


    let shapeType = Excel.GeometricShapeType.roundRectangle;

    let left = 100,
      top = 100,
      height = 250,
      width = 300;
    let questionStr = "What can you do for text in shape?\r"; //

    let boldStr = "Set to Bold!\r"; // length = 14

    let italicStr = "Set to Italic!\r";

    let underlineStr = "Add Underline!\r";

    let redStr = "Change color!\r";

    let fontStr = "Change font Cooper Black!\r";

    let sizeStr = "Set Bigger and Bigger!\r";


    let svgStr = `<svg width='100' height='100'
    xmlns="http://www.w3.org/2000/svg"><circle cx='50' cy='50' r='40'
    stroke='green' stroke-width='4' fill='yellow' />Sorry, your browser does not
    support inline SVG.</svg>`;



    let boldPos = questionStr.length + 7;

    let boldLength = 4;


    let beforeItalic = questionStr + boldStr;

    let italicPos = beforeItalic.length + 7;

    let italicLength = 6;


    let beforeUnderline = beforeItalic + italicStr;

    let underlinePos = (questionStr + boldStr + italicStr).length + 4;

    let underlineLength = 9;


    let beforeRed = beforeUnderline + underlineStr;

    let redPos = beforeRed.length + 7;

    let redLength = 5;


    let beforeFont = beforeRed + redStr;

    let fontPos = beforeFont.length + 12;

    let fontLength = 12;


    let beforeSize = beforeFont + fontStr;

    let sizePos1 = beforeSize.length + 4;

    let sizeLength1 = 6;

    let sizePos2 = sizePos1 + sizeLength1 + 5;

    let sizeLength2 = 6;


    /** Default helper for invoking an action and handling errors. */

    async function tryCatch(callback) {
      try {
        await callback();
      } catch (error) {
        OfficeHelpers.UI.notify(error);
        OfficeHelpers.Utilities.log(error);
      }
    }
  language: typescript
template:
  content: |
    <h2>Shape API Demo</h2>
    <button id="InsertShape" class="ms-Button">
        <span class="ms-Button-label">A Shape</span>
    </button>
    <br>
    <button id="AddText" class="ms-Button">
        <span class="ms-Button-label">What can you do?</span>
    </button>
    <br>
    <button id="FormatText" class="ms-Button">
        <span class="ms-Button-label">Set your own style!</span>
    </button><br>
    <button id="SetMargin" class="ms-Button">
        <span class="ms-Button-label">And a better margin.</span>
    </button><br>
    <!-- <button id="AddSVG" class="ms-Button">
      <span class="ms-Button-label">Yeah!</span>
    </button> -->
  language: html
style:
  content: ''
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
  https://appsforoffice.microsoft.com/lib/beta/hosted/office.d.ts

  //https://unpkg.com/@microsoft/office-js@1.1.9-adhoc.21/dist/office.js
  //https://unpkg.com/@microsoft/office-js@1.1.9-adhoc.21/dist/office.d.ts

  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

  @microsoft/office-js-helpers@0.7.4/dist/office.helpers.min.js
  @microsoft/office-js-helpers@0.7.4/dist/office.helpers.d.ts

  jquery@3.1.1
  @types/jquery

Shape - Demo.yaml

name: Shape - Demo
description: Executes a basic Excel API call
author: MiaofeiWang
host: EXCEL
api_set: {}
script:
    content: |-
        $("#InsertShape").click(() => tryCatch(InsertShape));
        $("#AddText").click(() => tryCatch(AddText));
        $("#FormatText").click(() => tryCatch(FormatText));
        $("#SetMargin").click(() => tryCatch(SetMargin));

        async function InsertShape() {
            await Excel.run(async (context) => {
                let sheet = context.workbook.worksheets.getActiveWorksheet();
                let shapes = sheet.shapes;
                shape = shapes.addGeometricShape(shapeType, left, top, width, height);
                shape.load();
                await context.sync();
                console.log(`Succeed to insert Shape. Name:${shape.name}, Left:${shape.left};`);
            });
        }

        async function AddText() {
            await Excel.run(async (context) => {
                let sheet = context.workbook.worksheets.getActiveWorksheet();
                let shapes = sheet.shapes;
                let count = shapes.getCount();
                shapes.load("items");
                await context.sync();
                let shape;
                if (count.value > 0) {
                    shape = shapes.items[0];
                }
                else {
                    shape = shapes.addGeometricShape(shapeType, left, top, width, height);
                    await context.sync();
                    console.log(`Insert a shape because there is none.`);
                }

                let txfm = shape.textFrame;
                let range = txfm.textRange;
                range.text = "What can you do to text in shape?";
                range.font.size = 14;
                range.load("text");
                await context.sync();

                console.log(`Add Text: ${range.text}`);
            });
        }

        async function SetMargin() {
            await Excel.run(async (context) => {
                let sheet = context.workbook.worksheets.getActiveWorksheet();
                let shapes = sheet.shapes;
                let count = shapes.getCount();
                shapes.load("items");
                await context.sync();
                let shape;
                if (count.value > 0) {
                    shape = shapes.items[0];
                }
                else {
                    console.log(`This is no shape. Please run "Insert Shape" First.`);
                    return;
                }

                let txfm = shape.textFrame;
                txfm.leftMargin = 20;
                txfm.topMargin = 20;
                txfm.rightMargin = 5;
                txfm.bottomMargin = 5;
                await context.sync();

                console.log(`Succeed to set margins.`);
            });
        }

        async function FormatText() {
            await Excel.run(async (context) => {
                let sheet = context.workbook.worksheets.getActiveWorksheet();
                let shapes = sheet.shapes;
                let count = shapes.getCount();
                shapes.load("items");
                await context.sync();
                let shape;
                if (count.value > 0) {
                    shape = shapes.items[0];
                }
                else {
                    console.log(`This is no shape. Please run "Insert Shape" First.`);
                    return;
                }

                let txfm = shape.textFrame;
                let range = txfm.textRange;
                range.text = questionStr + boldStr + italicStr + underlineStr
                    + redStr + fontStr + sizeStr;
                range.font.size = 14;

                let boldRange = range.getCharacters(boldPos, boldLength);
                boldRange.font.bold = true;

                let italicRange = range.getCharacters(italicPos, italicLength);
                italicRange.font.italic = true;

                let underlineRange = range.getCharacters(underlinePos, underlineLength);
                underlineRange.font.underline = "dotDash"; //Excel.ShapeFontUnderlineStyle.dotDash;

                let redRange = range.getCharacters(redPos, redLength);
                redRange.font.color = "red";

                let fontRange = range.getCharacters(fontPos, fontLength);
                fontRange.font.name = "Cooper Black";

                let sizeRange1 = range.getCharacters(sizePos1, sizeLength1);
                sizeRange1.font.size = 18;
                let sizeRange2 = range.getCharacters(sizePos2, sizeLength2);
                sizeRange2.font.size = 22;
                await context.sync();

                console.log("Succed to format text.");
            });
        }

        let shapeType = Excel.GeometricShapeType.roundRectangle;
        let left = 100, top = 100, height = 200, width = 250;
        let questionStr = "What can you do to text in shape?\r"; // 
        let boldStr = "Set to Bold!\r"; // length = 14
        let italicStr = "Set to Italic!\r";
        let underlineStr = "Add Underline!\r";
        let redStr = "Change color!\r";
        let fontStr = "Change font Cooper Black!\r";
        let sizeStr = "Get Bigger and Bigger!\r";

        let boldPos = questionStr.length + 7;
        let boldLength = 4;

        let beforeItalic = questionStr + boldStr;
        let italicPos = beforeItalic.length + 7;
        let italicLength = 6;

        let beforeUnderline = beforeItalic + italicStr;
        let underlinePos = (questionStr + boldStr + italicStr).length + 4;
        let underlineLength = 9;

        let beforeRed = beforeUnderline + underlineStr;
        let redPos = beforeRed.length + 7;
        let redLength = 5;

        let beforeFont = beforeRed + redStr;
        let fontPos = beforeFont.length + 12;
        let fontLength = 12;

        let beforeSize = beforeFont + fontStr;
        let sizePos1 = beforeSize.length + 4;
        let sizeLength1 = 6;
        let sizePos2 = sizePos1 + sizeLength1 + 5;
        let sizeLength2 = 6;

        /** Default helper for invoking an action and handling errors. */
        async function tryCatch(callback) {
            try {
                await callback();
            }
            catch (error) {
                OfficeHelpers.UI.notify(error);
                OfficeHelpers.Utilities.log(error);
            }
        }
    language: typescript
template:
    content: |
        <h2>Shape API Demo</h2>
        <button id="InsertShape" class="ms-Button">
            <span class="ms-Button-label">Insert Shape</span>
        </button>
        <br>
        <button id="AddText" class="ms-Button">
            <span class="ms-Button-label">Add Text</span>
        </button>
        <br>
        <button id="FormatText" class="ms-Button">
            <span class="ms-Button-label">Format Text</span>
        </button><br>
        <button id="SetMargin" class="ms-Button">
            <span class="ms-Button-label">Set Margin</span>
        </button>
    language: html
style:
    content: ''
    language: css
libraries: |
    //https://appsforoffice.microsoft.com/lib/1/hosted/office.js
    //https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts

    https://unpkg.com/@microsoft/office-js@1.1.9-adhoc.21/dist/office.js
    https://unpkg.com/@microsoft/office-js@1.1.9-adhoc.21/dist/office.d.ts

    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

    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.min.js
    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.d.ts

    jquery@3.1.1
    @types/jquery