Executes a basic call using the Operational API

Basic Operational Call - 1.EXCEL.yaml

name: Basic Operational Call - 1
description: Executes a basic call using the Operational API
host: EXCEL
api_set: {}
script:
  content: >
    // Get the Operational workbook

    // In a true NPM world, this will be:

    // import Excel from 'excel';

    // const { workbook } = new Excel();

    const { workbook } = new ExcelOp.Excel();

    var sampleWorksheet: ExcelOp.Worksheet;


    // Bind button handler to run function

    $("#run").click(run);

    $("#task1").click(createWorksheet);

    $("#task2").click(fillA1D5.bind(sampleWorksheet));

    $("#task3").click(addSampleTable.bind(sampleWorksheet));


    async function run() {
      // YOUR CODE HERE
      var worksheet = await createWorksheet();
      await fillA1D5(worksheet);
      var table = await addSampleTable(worksheet);
      var table = await changeTablename(table);
      var chart = await addChart(worksheet);
      var chart = await repositionChart(chart);
      await showChartStatus(chart);
      var chart = await updateCategoryAxis(chart);
      var chart = await updateValueAxis(chart);
    }


    async function createWorksheet(): Promise<ExcelOp.Worksheet> {
      if (workbook.worksheets.getItem("sample").exists()) {
        await workbook.worksheets.getItem("sample").delete();
      }
      sampleWorksheet = await workbook.worksheets.add("sample");
      return sampleWorksheet;
    }


    async function getWorksheets() {
      console.log(await workbook.worksheets.retrieve("name"));
    }


    async function fillA1D5(worksheet: ExcelOp.Worksheet) {
      //let range = workbook.worksheets.getItem("sample").getRange("A1:D5");
      let range = worksheet.getRange("A1:D5");
      await range.update({
        values: [
          ["Month", "Phones", "Tablets", "Tablets"],
          ["Jan", 8, 150, 90],
          ["Feb", 54, 77, 54],
          ["Mar", 93, 32, 100],
          ["Apr", 84, 14, 10]
        ]
      });
    }


    async function addSampleTable(worksheet: ExcelOp.Worksheet):
    Promise<ExcelOp.Table> {
      let table = await worksheet.tables.add("A1:D5", true);
      return table;
    }


    async function changeTablename(table: ExcelOp.Table): Promise<ExcelOp.Table>
    {
      await table.update({
        name: "SampleTable"
      });
      return table;
    }


    async function addChart(worksheet: ExcelOp.Worksheet):
    Promise<ExcelOp.Chart> {
      let chart = await worksheet.charts.add(ExcelOp.ChartType.lineMarkers, worksheet.getRange("A1:D5"));
      await chart.update({
        name: "SampleChart"
      });
      return chart;
    }


    async function repositionChart(chart: ExcelOp.Chart): Promise<ExcelOp.Chart>
    {
      await chart.setPosition("F1");
      return chart;
    }


    async function showChartStatus(chart: ExcelOp.Chart): Promise<void> {
      let { height, width } = await chart.retrieve("height", "width");
      console.log("Width: " + width + ", Height: " + height);
    }


    async function updateCategoryAxis(chart: ExcelOp.Chart):
    Promise<ExcelOp.Chart> {
      await chart.update({
        axes: {
          categoryAxis: {
            title: {
              text: "Month"
            }
          }
        }
      });
      return chart;
    }


    async function updateValueAxis(chart: ExcelOp.Chart): Promise<ExcelOp.Chart>
    {
      await chart.update({
        axes: {
          valueAxis: {
            title: {
              text: "Devices sold"
            }
          }
        }
      });
      return chart;
    }
  language: typescript
template:
  content: |-
    <p class="ms-font-m">Usability Study Test:</p>
    <button id="run" class="ms-Button">
        <span class="ms-Button-label">Run Task</span>
    </button>
    <button id="task1" class="ms-Button">
        <span class="ms-Button-label">Run Task</span>
    </button>
    <button id="task2" class="ms-Button">
        <span class="ms-Button-label">Run Task</span>
    </button>
    <button id="task3" class="ms-Button">
        <span class="ms-Button-label">Run Task</span>
    </button>
  language: html
style:
  content: ''
  language: css
libraries: >
  https://unpkg.com/@microsoft/office-js@operational/dist/office.experimental.js

  https://unpkg.com/@microsoft/office-js@operational/dist/office.experimental.d.ts


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

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


  [email protected]/client/core.min.js

  @types/core-js


  @microsoft/[email protected]/dist/office.helpers.min.js

  @microsoft/[email protected]/dist/office.helpers.d.ts


  [email protected]

  @types/[email protected]


  whatwg-fetch

  @types/whatwg-fetch