Excel - Write and Read

Excel - Write and Read.EXCEL.yaml

name: Excel - Write and Read
description: Excel - Write and Read
host: EXCEL
api_set: {}
script:
  content: |
    $("#insert").click(() => tryCatch(insertViaCommonApi));
    $("#insert2").click(() => tryCatch(insertViaShapes));
    $("#getData").click(() => tryCatch(getImageIdsViaExcelShapes));
    $("#delete").click(() => tryCatch(deleteFirstShape));
    $("#clone").click(() => tryCatch(cloneFirstShape));

    var id = 0;
    var message = "";

    function getDataviaShapes() {
      Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getActiveWorksheet();
        sheet.load(
          "shapes/items/id, shapes/items/name, shapes/items/top, shapes/items/left, shapes/items/width, shapes/items/height"
        );
        return context.sync().then(function() {
          message = "";
          sheet.shapes.items.forEach(getItemData);
          write(message);
        });
      });
    }

    function deleteFirstShape() {
      Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getActiveWorksheet();
        sheet.load("shapes/items/id, shapes/items/top, shapes/items/left, shapes/items/width, shapes/items/height");
        return context.sync().then(function() {
          message = "try to delete";
          sheet.shapes.items[0].delete();
          write(message);
        });
      });
    }

    function cloneFirstShape() {
      Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getActiveWorksheet();
        sheet.load("shapes/items/id, shapes/items/top, shapes/items/left, shapes/items/width, shapes/items/height");
        return context.sync().then(function () {
          message = "shape id:" + sheet.shapes.items[0].id;
          var clone = sheet.shapes.items[0].copyTo();
          message += " cloned to id:";
          clone.load("id");
          context.sync().then(function ()  {
            message += clone.id;
            write(message);
          })

        });
      });
    }

    function getItemData(item: Excel.Shape, index: number) {
      message += "id of item " + index + ": " + item.id + "\n";
      message += "name: " + item.name + "\n";
      message += "positon: top " + item.top + " : left " + item.left + "\n";
      message += "\n";
    }

    function insertViaShapes() {
      if (Office.context.platform == Office.PlatformType.OfficeOnline) {
        insertPngViaShapes();
      } else {
        insertSvgViaShapes();
      }
    }

    function insertSvgViaShapes() {
      Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getActiveWorksheet();
        const shape = sheet.shapes.addSvg(getSvg());
        shape.left = 15;
        shape.top = 15;
        shape.height = 100;
        shape.width = 100;
        return await context.sync();
      });
    }

    function insertPngViaShapes() {
      Excel.run(async (context) => {
        const sheet = context.workbook.worksheets.getActiveWorksheet();
        const shape = sheet.shapes.addImage(getImageAsBase64String());
        shape.name = "DEADBEEF";
        shape.left = 15;
        shape.top = 15;
        shape.height = 100;
        shape.width = 100;
        return await context.sync();
      });
    }

    function insertViaCommonApi() {
      if (Office.context.platform == Office.PlatformType.OfficeOnline) {
        insertPngCommonApi();
      } else {
        insertSvgCommonApi();
      }
    }

    function insertSvgCommonApi() {
      Office.context.document.setSelectedDataAsync(
        getSvg(),
        {
          coercionType: Office.CoercionType.XmlSvg
        },
        function(asyncResult) {
          if (asyncResult.status === Office.AsyncResultStatus.Failed) {
            console.log("Action failed with error: " + asyncResult.error.message);
          } else {
            write("added");
          }
        }
      );
    }

    function insertPngCommonApi() {
      Office.context.document.setSelectedDataAsync(
        getImageAsBase64String(),
        {
          coercionType: Office.CoercionType.Image
        },
        function(asyncResult) {
          if (asyncResult.status === Office.AsyncResultStatus.Failed) {
            console.log("Action failed with error: " + asyncResult.error.message);
          } else {
            write("added");
          }
        }
      );
    }

    async function getImageIdsViaExcelShapes() {
      message = "";
      await Excel.run(async (context) => {
        const workSheets = context.workbook.worksheets;
        workSheets.load("items/shapes/items/id");

        return context.sync().then(function() {
          workSheets.items.forEach((worksheet: Excel.Worksheet) =>
            worksheet.shapes.items.forEach((shape: Excel.Shape) => (message += shape.id))
          );
        });
      });
      write(message);
    }

    /** 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);
      }
    }

    // Function that writes to a div with id='message' on the page.
    function write(message) {
      document.getElementById("message").innerText = message;
    }

    function getImageAsBase64String() {
      return "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";
    }

    function getSvg() {
      // A production add-in code could get an image from an
      // online source and pass it to a library function that
      // converts to base 64.
      var svg =
        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100">  <title>SVG Logo</title>  <a xlink:href="http://www.w3.org/Graphics/SVG/" target="_parent"     xlink:title="W3C SVG Working Group home page">    <rect        id="background"        fill="#FF9900"        width="100"        height="100"        rx="4"        ry="4"/>    <rect        id="top-left"        fill="#FFB13B"        width="50"        height="50"        rx="4"        ry="4"/>    <rect        id="bottom-right"        x="50"        y="50"        fill="#DE8500"        width="50"        height="50"        rx="4"        ry="4"/>    <g id="circles" fill="#FF9900">        <circle            id="n"            cx="50"            cy="18.4"            r="18.4"/>        <circle            id="ne"            cx="72.4"            cy="27.6"            r="18.4"/>        <circle            id="e"            cx="81.6"            cy="50"            r="18.4"/>        <circle            id="se"            cx="72.4"            cy="72.4"            r="18.4"/>        <circle            id="s"            cx="50"            cy="81.6"            r="18.4"/>        <circle            id="sw"            cx="27.6"            cy="72.4"            r="18.4"/>        <circle            id="w"            cx="18.4"            cy="50"            r="18.4"/>        <circle            id="nw"            cx="27.6"            cy="27.6"            r="18.4"/>    </g>    <g id="stars">        <path            id="black-star"            d="M  63.086, 18.385               c  0.000, -7.227  -5.859,-13.086 -13.100,-13.086               c -7.235,  0.000 -13.096,  5.859 -13.096, 13.086               c -5.100, -5.110 -13.395, -5.110 -18.497,  0.000               c -5.119,  5.120  -5.119, 13.408   0.000, 18.524               c -7.234,  0.000 -13.103,  5.859 -13.103, 13.085               c  0.000,  7.230   5.870, 13.098  13.103, 13.098               c -5.119,  5.110  -5.119, 13.395   0.000, 18.515               c  5.102,  5.104  13.397,  5.104  18.497,  0.000               c  0.000,  7.228   5.860, 13.083  13.096, 13.083               c  7.240,  0.000  13.100, -5.855  13.100,-13.083               c  5.118,  5.104  13.416,  5.104  18.513,  0.000               c  5.101, -5.120   5.101,-13.410   0.000,-18.515               c  7.216,  0.000  13.081, -5.869  13.081,-13.098               c  0.000, -7.227  -5.865,-13.085 -13.081,-13.085               c  5.101, -5.119   5.101,-13.406   0.000,-18.524               C 76.502, 13.275  68.206, 13.275  63.086, 18.385 z"/>        <path            id="white-star"            fill="#FFFFFF"            d="M 55.003, 23.405               v 14.488               L 65.260, 27.640               c  0.000, -1.812  0.691,-3.618   2.066, -5.005               c  2.780, -2.771  7.275,-2.771  10.024,  0.000               c  2.771,  2.766  2.771, 7.255   0.000, 10.027               c -1.377,  1.375 -3.195, 2.072  -5.015,  2.072               L 62.101, 44.982               H 76.590               c  1.290, -1.280  3.054,-2.076   5.011, -2.076               c  3.900,  0.000  7.078, 3.179   7.078,  7.087               c  0.000,  3.906 -3.178, 7.088  -7.078,  7.088               c -1.957,  0.000 -3.721,-0.798  -5.011, -2.072               H 62.100               l 10.229, 10.244               c  1.824,  0.000  3.642, 0.694   5.015,  2.086               c  2.774,  2.759  2.774, 7.250   0.000, 10.010               c -2.750,  2.774 -7.239, 2.774 -10.025,  0.000               c -1.372, -1.372 -2.064,-3.192  -2.064, -5.003               L 55.000, 62.094               v 14.499               c  1.271,  1.276  2.084, 3.054   2.084,  5.013               c  0.000,  3.906 -3.177, 7.077  -7.098,  7.077               c -3.919,  0.000 -7.094,-3.167  -7.094, -7.077               c  0.000, -1.959  0.811,-3.732   2.081, -5.013               V 62.094               L 34.738, 72.346               c  0.000,  1.812 -0.705, 3.627  -2.084,  5.003               c -2.769,  2.772 -7.251, 2.772 -10.024,  0.000               c -2.775, -2.764 -2.775,-7.253   0.000,-10.012               c  1.377, -1.390  3.214,-2.086   5.012, -2.086               l 10.257,-10.242               H 23.414               c -1.289,  1.276 -3.072, 2.072  -5.015,  2.072               c -3.917,  0.000 -7.096,-3.180  -7.096, -7.088               s  3.177, -7.087  7.096,-7.087               c  1.940,  0.000  3.725, 0.796   5.015,  2.076               h 14.488               L 27.646, 34.736               c -1.797,  0.000 -3.632,-0.697  -5.012, -2.071               c -2.775, -2.772 -2.775,-7.260   0.000,-10.027               c  2.773, -2.771  7.256,-2.771  10.027,  0.000               c  1.375,  1.386  2.083, 3.195   2.083,  5.005               l 10.235, 10.252               V 23.407               c -1.270, -1.287 -2.082,-3.053  -2.082, -5.023               c  0.000, -3.908  3.175,-7.079   7.096, -7.079               c  3.919,  0.000  7.097, 3.168   7.097,  7.079               C 57.088, 20.356 56.274,22.119  55.003, 23.405 z"/>    </g>    <g id="svg-textbox">        <path            id="text-backdrop"            fill="black"            d="M  5.30,50.00               H 94.68               V 90.00               Q 94.68,95.00 89.68,95.00               H 10.30               Q  5.30,95.00  5.30,90.00 Z"/>        <path             id="shine"            fill="#3F3F3F"            d="M  14.657,54.211               h  71.394               c   2.908, 0.000   5.312, 2.385   5.312, 5.315               v  17.910               c -27.584,-3.403 -54.926,-8.125 -82.011,-7.683               V  59.526               C   9.353,56.596  11.743,54.211  14.657,54.211               L  14.657,54.211 z"/>        <g id="svg-text">            <title>SVG</title>            <path                id="S"                fill="#FFFFFF"                stroke="#000000"                stroke-width="0.5035"                d="M 18.312,72.927                   c -2.103,-2.107  -3.407, -5.028  -3.407, -8.253                   c  0.000,-6.445   5.223,-11.672  11.666,-11.672                   c  6.446, 0.000  11.667,  5.225  11.667, 11.672                   h -6.832                   c  0.000,-2.674  -2.168, -4.837  -4.835, -4.837                   c -2.663, 0.000  -4.838,  2.163  -4.838,  4.837                   c  0.000, 1.338   0.549,  2.536   1.415,  3.420                   l  0.000, 0.000                   c  0.883, 0.874   2.101,  1.405   3.423,  1.405                   v  0.012                   c  3.232, 0.000   6.145,  1.309   8.243,  3.416                   l  0.000, 0.000                   c  2.118, 2.111   3.424,  5.034   3.424,  8.248                   c  0.000, 6.454  -5.221, 11.680 -11.667, 11.680                   c -6.442, 0.000 -11.666, -5.222 -11.666,-11.680                   h  6.828                   c  0.000, 2.679   2.175,  4.835   4.838,  4.835                   c  2.667, 0.000   4.835, -2.156   4.835, -4.835                   c  0.000,-1.329  -0.545, -2.527  -1.429, -3.407                   l  0.000, 0.000                   c -0.864,-0.880  -2.082, -1.418  -3.406, -1.418                   l  0.000, 0.000                   C 23.341,76.350  20.429, 75.036  18.312, 72.927                   L 18.312,72.927                   L 18.312,72.927 z"/>            <polygon                id="V"                fill="#FFFFFF"                stroke="#000000"                stroke-width="0.5035"                points="61.588,53.005                        53.344,92.854                        46.494,92.854                        38.236,53.005                        45.082,53.005                        49.920,76.342                        54.755,53.005"/>         <path             id="G"            fill="#FFFFFF"            stroke="#000000"            stroke-width="0.5035"            d="M 73.255,69.513               h 11.683               v 11.664               l  0.000, 0.000               c  0.000, 6.452  -5.226,11.678 -11.669, 11.678               c -6.441, 0.000 -11.666,-5.226 -11.666,-11.678               l  0.000, 0.000               V 64.676               h -0.017               C 61.586,58.229  66.827,53.000  73.253, 53.000               c  6.459, 0.000  11.683, 5.225  11.683, 11.676               h -6.849               c  0.000,-2.674  -2.152,-4.837  -4.834, -4.837               c -2.647, 0.000  -4.820, 2.163  -4.820,  4.837               v 16.501               l  0.000, 0.000               c  0.000, 2.675   2.173, 4.837   4.820,  4.837               c  2.682, 0.000   4.834,-2.162   4.834, -4.827               v -0.012               v -4.827               h -4.834               L 73.255,69.513               L 73.255,69.513 z"/>        </g>    </g>  </a></svg>';
      return svg;
    }
  language: typescript
template:
  content: "<section class=\"ms-font-m\">\n\t<p>This sample shows how to insert an SVG image using an XML string as the source.</p>\n</section>\n\n<section class=\"samples ms-font-m\">\n\t<h3>Try it out</h3>\n\t<button id=\"insert\" class=\"ms-Button\">\n        <span class=\"ms-Button-label\">Insert new SVG via Common</span>\n    </button>\n\t<button id=\"insert2\" class=\"ms-Button\">\n\t\t\t        <span class=\"ms-Button-label\">Insert new SVG via Shapes</span>\n\t\t\t    </button>\n\t<button id=\"getData\" class=\"ms-Button\">\n\t\t        <span class=\"ms-Button-label\">Get Data on Inserted SVGs</span>\n\t\t    </button>\n\t<button id=\"delete\" class=\"ms-Button\">\n\t\t\t\t\t\t\t<span class=\"ms-Button-label\">Delete First Svg it finds</span>\n\t</button>\n\t<button id=\"clone\" class=\"ms-Button\">\n\t\t\t\t\t\t\t\t<span class=\"ms-Button-label\">Clone First Image it finds</span>\n\t\t</button>\n\t<h5 id=\"message\">\n\t\t\n\t</h5>\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/beta/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