diff --git a/samples/excel/01-basics/basic-api-call-es5.yaml b/samples/excel/01-basics/basic-api-call-es5.yaml index d5c3fc8e0..e2baf785a 100644 --- a/samples/excel/01-basics/basic-api-call-es5.yaml +++ b/samples/excel/01-basics/basic-api-call-es5.yaml @@ -7,8 +7,8 @@ host: EXCEL api_set: ExcelApi: '1.1' script: - content: | - $("#run").on("click", () => tryCatch(run)); + content: |- + document.getElementById("run").addEventListener("click", () => tryCatch(run)); function run() { return Excel.run(function (context) { @@ -33,11 +33,10 @@ script: } language: typescript template: - content: | + content: |-

This sample demonstrates basic Excel API calls.

-

Try it out

Select some cells in the worksheet, then press Highlight selected range.

@@ -59,15 +58,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/01-basics/basic-api-call.yaml b/samples/excel/01-basics/basic-api-call.yaml index 48c4cd645..86ddf8c87 100644 --- a/samples/excel/01-basics/basic-api-call.yaml +++ b/samples/excel/01-basics/basic-api-call.yaml @@ -7,8 +7,8 @@ host: EXCEL api_set: ExcelApi: '1.1' script: - content: | - $("#run").on("click", () => tryCatch(run)); + content: |- + document.getElementById("run").addEventListener("click", () => tryCatch(run)); async function run() { await Excel.run(async (context) => { @@ -38,7 +38,6 @@ template:

This sample demonstrates basic Excel API calls.

-

Try it out

Select some cells in the worksheet, then press Highlight selected range.

@@ -60,15 +59,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/01-basics/basic-common-api-call.yaml b/samples/excel/01-basics/basic-common-api-call.yaml index fee0cc213..539bee657 100644 --- a/samples/excel/01-basics/basic-common-api-call.yaml +++ b/samples/excel/01-basics/basic-common-api-call.yaml @@ -7,8 +7,8 @@ host: EXCEL api_set: Selection: 1.1 script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { Office.context.document.getSelectedDataAsync( @@ -24,11 +24,10 @@ script: } language: typescript template: - content: | + content: |-

This sample uses the Common APIs compatible with Office 2013.

-

Try it out

Select a cell in the worksheet and press Write to console to see the contents of that cell in the console.

@@ -39,7 +38,7 @@ template:
language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -51,15 +50,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/10-chart/chart-axis-formatting.yaml b/samples/excel/10-chart/chart-axis-formatting.yaml index e2df678f1..d82d312b1 100644 --- a/samples/excel/10-chart/chart-axis-formatting.yaml +++ b/samples/excel/10-chart/chart-axis-formatting.yaml @@ -6,10 +6,10 @@ host: EXCEL api_set: ExcelApi: '1.8' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#format-horizontal-axis").on("click", () => tryCatch(formatHorizontalAxis)); - $("#format-vertical-axis").on("click", () => tryCatch(formatVerticalAxis)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("format-horizontal-axis").addEventListener("click", () => tryCatch(formatHorizontalAxis)); + document.getElementById("format-vertical-axis").addEventListener("click", () => tryCatch(formatVerticalAxis)); async function formatHorizontalAxis() { await Excel.run(async (context) => { @@ -118,25 +118,21 @@ script: language: typescript template: content: |- -

This sample shows how to format the vertical and horizontal axis in a chart.

-

Set up

-

Try it out

-
language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -158,13 +154,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/10-chart/chart-axis.yaml b/samples/excel/10-chart/chart-axis.yaml index 2dbd1eadf..a9c093176 100644 --- a/samples/excel/10-chart/chart-axis.yaml +++ b/samples/excel/10-chart/chart-axis.yaml @@ -7,12 +7,12 @@ api_set: ExcelApi: '1.7' script: content: |- - $("#setup").on("click", () => tryCatch(setup)); - $("#get-axis-unit").on("click", () => tryCatch(getAxisUnit)); - $("#change-axis-unit").on("click", () => tryCatch(changeAxisUnit)); - $("#remove-axis-label").on("click", () => tryCatch(removeAxisLabel)); - $("#show-axis-label").on("click", () => tryCatch(showAxisLabel)); - $("#set-axis-title").on("click", () => tryCatch(setAxisTitle)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("get-axis-unit").addEventListener("click", () => tryCatch(getAxisUnit)); + document.getElementById("change-axis-unit").addEventListener("click", () => tryCatch(changeAxisUnit)); + document.getElementById("remove-axis-label").addEventListener("click", () => tryCatch(removeAxisLabel)); + document.getElementById("show-axis-label").addEventListener("click", () => tryCatch(showAxisLabel)); + document.getElementById("set-axis-title").addEventListener("click", () => tryCatch(setAxisTitle)); async function getAxisUnit() { await Excel.run(async (context) => { @@ -173,39 +173,33 @@ template:

This sample shows how to get, set, and remove axis unit, label and title in a chart.

-

Set up

-

Try it out

-
-
-
-
language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -225,15 +219,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/10-chart/chart-bubble-chart.yaml b/samples/excel/10-chart/chart-bubble-chart.yaml index 26267ebf9..a9aa558ab 100644 --- a/samples/excel/10-chart/chart-bubble-chart.yaml +++ b/samples/excel/10-chart/chart-bubble-chart.yaml @@ -7,10 +7,11 @@ host: EXCEL api_set: ExcelApi: '1.12' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#create-bubble-chart").on("click", () => tryCatch(createBubbleChart)); - $("#get-chart-series-dimension-values").on("click", () => tryCatch(getChartSeriesDimensionValues)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("create-bubble-chart").addEventListener("click", () => tryCatch(createBubbleChart)); + document.getElementById("get-chart-series-dimension-values").addEventListener("click", () => tryCatch(getChartSeriesDimensionValues)); + async function createBubbleChart() { await Excel.run(async (context) => { /* @@ -57,6 +58,7 @@ script: await context.sync(); }); } + async function getChartSeriesDimensionValues() { await Excel.run(async (context) => { const sheet = context.workbook.worksheets.getItem("Sample"); @@ -120,14 +122,12 @@ template:

This sample shows how to create a bubble chart, with each chart series (or bubble) representing a single table row.

-

Set up

-

Try it out

language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -152,15 +152,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/10-chart/chart-create-several-charts.yaml b/samples/excel/10-chart/chart-create-several-charts.yaml index a9c77544c..a8113bff5 100644 --- a/samples/excel/10-chart/chart-create-several-charts.yaml +++ b/samples/excel/10-chart/chart-create-several-charts.yaml @@ -7,17 +7,17 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#create-column-clustered-chart").on("click", () => tryCatch(createColumnClusteredChart)); - $("#create-line-chart").on("click", () => tryCatch(createLineChart)); - $("#create-xy-scatter-chart").on("click", () => tryCatch(createXYScatterChart)); - $("#create-area-chart").on("click", () => tryCatch(createAreaStackedChart)); - $("#create-radar-chart").on("click", () => tryCatch(createRadarFilledChart)); - $("#create-pie-chart").on("click", () => tryCatch(createPieChart)); - $("#create-3d-chart").on("click", () => tryCatch(create3DChart)); - $("#create-cylinder-chart").on("click", () => tryCatch(createCylinderChart)); - $("#create-bar-100-chart").on("click", () => tryCatch(createBar100Chart)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("create-column-clustered-chart").addEventListener("click", () => tryCatch(createColumnClusteredChart)); + document.getElementById("create-line-chart").addEventListener("click", () => tryCatch(createLineChart)); + document.getElementById("create-xy-scatter-chart").addEventListener("click", () => tryCatch(createXYScatterChart)); + document.getElementById("create-area-chart").addEventListener("click", () => tryCatch(createAreaStackedChart)); + document.getElementById("create-radar-chart").addEventListener("click", () => tryCatch(createRadarFilledChart)); + document.getElementById("create-pie-chart").addEventListener("click", () => tryCatch(createPieChart)); + document.getElementById("create-3d-chart").addEventListener("click", () => tryCatch(create3DChart)); + document.getElementById("create-cylinder-chart").addEventListener("click", () => tryCatch(createCylinderChart)); + document.getElementById("create-bar-100-chart").addEventListener("click", () => tryCatch(createBar100Chart)); async function createColumnClusteredChart() { await Excel.run(async (context) => { @@ -253,63 +253,53 @@ template:

This sample shows how to create column-clustered, line, XY-scatter, area, radar, pie, 3D, cylinder, and 100% charts.

-

Set up

-

Try it out

-

-

-

-

-

-

-

-

language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -321,15 +311,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/10-chart/chart-data-source.yaml b/samples/excel/10-chart/chart-data-source.yaml index c89e78930..d4bb53742 100644 --- a/samples/excel/10-chart/chart-data-source.yaml +++ b/samples/excel/10-chart/chart-data-source.yaml @@ -6,9 +6,9 @@ host: EXCEL api_set: ExcelApi: '1.15' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#log-chart-series-source").on("click", () => tryCatch(logChartSeriesSource)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("log-chart-series-source").addEventListener("click", () => tryCatch(logChartSeriesSource)); async function logChartSeriesSource() { // This function retrieves the data source information of a chart series in the Sample worksheet. @@ -84,7 +84,6 @@ template:

This sample shows how to get information about the data source of a chart series.

-

Set up

Add a product table and line chart to a sample worksheet.

@@ -92,14 +91,13 @@ template: Add sample data
-

Try it out

Log information to the console about the data source of the chart series Frames.

-
+
language: html style: content: |- @@ -113,15 +111,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/10-chart/chart-data-table.yaml b/samples/excel/10-chart/chart-data-table.yaml index 527ff2b00..a48cae0f3 100644 --- a/samples/excel/10-chart/chart-data-table.yaml +++ b/samples/excel/10-chart/chart-data-table.yaml @@ -6,11 +6,11 @@ host: EXCEL api_set: ExcelApi: '1.14' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#create-column-clustered-chart").on("click", () => tryCatch(createColumnClusteredChart)); - $("#add-chart-data-table").on("click", () => tryCatch(addChartDataTable)); - $("#format-chart-data-table").on("click", () => tryCatch(formatChartDataTable)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("create-column-clustered-chart").addEventListener("click", () => tryCatch(createColumnClusteredChart)); + document.getElementById("add-chart-data-table").addEventListener("click", () => tryCatch(addChartDataTable)); + document.getElementById("format-chart-data-table").addEventListener("click", () => tryCatch(formatChartDataTable)); async function createColumnClusteredChart() { // This function creates a clustered column chart based on data from a table on @@ -117,7 +117,6 @@ template:

This sample shows how to add a data table to a chart and then format that data table.

-

Set up

-

Try it out

language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -152,12 +150,8 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.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 \ No newline at end of file + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/10-chart/chart-formatting.yaml b/samples/excel/10-chart/chart-formatting.yaml index a26e6d685..5027e5948 100644 --- a/samples/excel/10-chart/chart-formatting.yaml +++ b/samples/excel/10-chart/chart-formatting.yaml @@ -6,12 +6,12 @@ host: EXCEL api_set: ExcelApi: '1.8' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#format-chart").on("click", () => tryCatch(formatChart)); - $("#show-datalabels").on("click", () => tryCatch(dataLabels)); - $("#change-color").on("click", () => tryCatch(changeColor)); - $("#clear").on("click", () => tryCatch(clearChart)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("format-chart").addEventListener("click", () => tryCatch(formatChart)); + document.getElementById("show-datalabels").addEventListener("click", () => tryCatch(dataLabels)); + document.getElementById("change-color").addEventListener("click", () => tryCatch(changeColor)); + document.getElementById("clear").addEventListener("click", () => tryCatch(clearChart)); async function formatChart() { await Excel.run(async (context) => { @@ -174,14 +174,12 @@ template:

This sample shows how to format different aspects of a chart.

-

Set up

-

Try it out

-

Try it out

language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -131,15 +129,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/10-chart/chart-point.yaml b/samples/excel/10-chart/chart-point.yaml index f79c6ae8c..5eaef4fd7 100644 --- a/samples/excel/10-chart/chart-point.yaml +++ b/samples/excel/10-chart/chart-point.yaml @@ -6,9 +6,9 @@ host: EXCEL api_set: ExcelApi: '1.7' script: - content: |+ - $("#setup").on("click", () => tryCatch(setup)); - $("#set-chart-point-color").on("click", () => tryCatch(setChartPointColor)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("set-chart-point-color").addEventListener("click", () => tryCatch(setChartPointColor)); async function setChartPointColor() { await Excel.run(async (context) => { @@ -79,33 +79,27 @@ script: console.error(error); } } - - - language: typescript template: - content: |+ + content: |-

This sample shows how to set chart point color.

-

Set up

-

Try it out

- language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -117,15 +111,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css diff --git a/samples/excel/10-chart/chart-series-markers.yaml b/samples/excel/10-chart/chart-series-markers.yaml index 34e1c652f..8405b89cd 100644 --- a/samples/excel/10-chart/chart-series-markers.yaml +++ b/samples/excel/10-chart/chart-series-markers.yaml @@ -6,9 +6,9 @@ host: EXCEL api_set: ExcelApi: '1.7' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#set-markers").on("click", () => tryCatch(setMarkers)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("set-markers").addEventListener("click", () => tryCatch(setMarkers)); async function setMarkers() { await Excel.run(async (context) => { @@ -84,14 +84,12 @@ template:

This sample shows how to set chart series marker properties.

-

Set up

-

Try it out

language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -114,13 +112,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/10-chart/chart-series-plotorder.yaml b/samples/excel/10-chart/chart-series-plotorder.yaml index 8340b85e7..40ff375f7 100644 --- a/samples/excel/10-chart/chart-series-plotorder.yaml +++ b/samples/excel/10-chart/chart-series-plotorder.yaml @@ -6,9 +6,9 @@ host: EXCEL api_set: ExcelApi: '1.7' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#order-series-plot").on("click", () => tryCatch(addSeries)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("order-series-plot").addEventListener("click", () => tryCatch(addSeries)); async function addSeries() { await Excel.run(async (context) => { @@ -91,18 +91,16 @@ script: } language: typescript template: - content: | + content: |-

This sample shows how to change the plot order of series in a chart.

-

Set up

-

Try it out

-

Try it out

-
-

Try it out

- language: html style: content: |- @@ -148,15 +145,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css diff --git a/samples/excel/10-chart/chart-trendlines.yaml b/samples/excel/10-chart/chart-trendlines.yaml index 9fe36a845..5edbd97b9 100644 --- a/samples/excel/10-chart/chart-trendlines.yaml +++ b/samples/excel/10-chart/chart-trendlines.yaml @@ -6,12 +6,12 @@ host: EXCEL api_set: ExcelApi: '1.7' script: - content: |+ - $("#setup").on("click", () => tryCatch(setup)); - $("#add-trendline").on("click", () => tryCatch(addTrendline)); - $("#get-trendline").on("click", () => tryCatch(getTrendline)); - $("#get-trendline-color").on("click", () => tryCatch(getTrendlineColor)); - $("#set-trendline-color").on("click", () => tryCatch(setTrendlineColor)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("add-trendline").addEventListener("click", () => tryCatch(addTrendline)); + document.getElementById("get-trendline").addEventListener("click", () => tryCatch(getTrendline)); + document.getElementById("get-trendline-color").addEventListener("click", () => tryCatch(getTrendlineColor)); + document.getElementById("set-trendline-color").addEventListener("click", () => tryCatch(setTrendlineColor)); async function addTrendline() { await Excel.run(async (context) => { @@ -134,36 +134,29 @@ script: console.error(error); } } - - - language: typescript template: content: |-

This sample shows how to add, get, and format trendlines in a chart.

-

Set up

-

Try it out

-
-
-

Try it out

-

Try it out

@@ -224,15 +222,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml b/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml index 0fbb291df..23f0d65e7 100644 --- a/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml +++ b/samples/excel/14-conditional-formatting/conditional-formatting-basic.yaml @@ -7,17 +7,17 @@ api_set: ExcelApi: '1.6' script: content: |- - $("#setup").on("click", () => tryCatch(setup)); - $("#apply-color-scale-format").on("click", () => tryCatch(applyColorScaleFormat)); - $("#apply-preset-format").on("click", () => tryCatch(applyPresetFormat)); - $("#apply-databar-format").on("click", () => tryCatch(applyDataBarFormat)); - $("#apply-icon-set-format").on("click", () => tryCatch(applyIconSetFormat)); - $("#apply-text-format").on("click", () => tryCatch(applyTextFormat)); - $("#apply-cell-value-format").on("click", () => tryCatch(applyCellValueFormat)); - $("#apply-top-bottom-format").on("click", () => tryCatch(applyTopBottomFormat)); - $("#apply-custom-format").on("click", () => tryCatch(applyCustomFormat)); - $("#list-conditional-formats").on("click", () => tryCatch(listConditionalFormats)); - $("#clear-all-conditional-formats").on("click", () => tryCatch(clearAllConditionalFormats)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("apply-color-scale-format").addEventListener("click", () => tryCatch(applyColorScaleFormat)); + document.getElementById("apply-preset-format").addEventListener("click", () => tryCatch(applyPresetFormat)); + document.getElementById("apply-databar-format").addEventListener("click", () => tryCatch(applyDataBarFormat)); + document.getElementById("apply-icon-set-format").addEventListener("click", () => tryCatch(applyIconSetFormat)); + document.getElementById("apply-text-format").addEventListener("click", () => tryCatch(applyTextFormat)); + document.getElementById("apply-cell-value-format").addEventListener("click", () => tryCatch(applyCellValueFormat)); + document.getElementById("apply-top-bottom-format").addEventListener("click", () => tryCatch(applyTopBottomFormat)); + document.getElementById("apply-custom-format").addEventListener("click", () => tryCatch(applyCustomFormat)); + document.getElementById("list-conditional-formats").addEventListener("click", () => tryCatch(listConditionalFormats)); + document.getElementById("clear-all-conditional-formats").addEventListener("click", () => tryCatch(clearAllConditionalFormats)); async function applyColorScaleFormat() { await Excel.run(async (context) => { @@ -277,14 +277,12 @@ template:

This sample shows how to apply conditional formatting to ranges.

-

Set up

-

Try it out

@@ -341,15 +339,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/16-custom-functions/basic-function.yaml b/samples/excel/16-custom-functions/basic-function.yaml index c085f87e1..377ee85cb 100644 --- a/samples/excel/16-custom-functions/basic-function.yaml +++ b/samples/excel/16-custom-functions/basic-function.yaml @@ -20,4 +20,4 @@ script: libraries: | https://appsforoffice.microsoft.com/lib/1/hosted/office.js @types/office-js - core-js@2.4.1/client/core.min.js \ No newline at end of file + core-js@2.4.1/client/core.min.js diff --git a/samples/excel/16-custom-functions/streaming-function.yaml b/samples/excel/16-custom-functions/streaming-function.yaml index 1e9740051..cdaf1ccb0 100644 --- a/samples/excel/16-custom-functions/streaming-function.yaml +++ b/samples/excel/16-custom-functions/streaming-function.yaml @@ -30,4 +30,4 @@ script: libraries: | https://appsforoffice.microsoft.com/lib/1/hosted/office.js @types/office-js - core-js@2.4.1/client/core.min.js + core-js@2.4.1/client/core.min.js \ No newline at end of file diff --git a/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml b/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml index dcaf6a955..09f9e3bed 100644 --- a/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml +++ b/samples/excel/18-custom-xml-parts/create-set-get-and-delete-custom-xml-parts.yaml @@ -7,10 +7,10 @@ host: EXCEL api_set: ExcelApi: '1.5' script: - content: | - $("#create-custom-xml-part").on("click", () => tryCatch(createCustomXmlPart)); - $("#change-custom-xml-part").on("click", () => tryCatch(changeCustomXmlPart)); - $("#delete-custom-xml-part").on("click", () => tryCatch(deleteCustomXmlPart)); + content: |- + document.getElementById("create-custom-xml-part").addEventListener("click", () => tryCatch(createCustomXmlPart)); + document.getElementById("change-custom-xml-part").addEventListener("click", () => tryCatch(changeCustomXmlPart)); + document.getElementById("delete-custom-xml-part").addEventListener("click", () => tryCatch(deleteCustomXmlPart)); async function createCustomXmlPart() { await Excel.run(async (context) => { @@ -103,11 +103,10 @@ script: } language: typescript template: - content: |+ + content: |-

This sample shows how to create, set, get, and delete custom XML parts in the file.

-

Try it out

Press the button to create and display Contoso's Reviewer metadata.

@@ -124,16 +123,14 @@ template:
-

XML part display

- language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -145,15 +142,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml b/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml index 60a15efe9..b1ca11906 100644 --- a/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml +++ b/samples/excel/18-custom-xml-parts/test-xml-for-unique-namespace.yaml @@ -7,10 +7,10 @@ host: EXCEL api_set: ExcelApi: '1.5' script: - content: | - $("#create-custom-xml-part").on("click", () => tryCatch(createCustomXmlPart)); - $("#test-for-unique-namespace").on("click", () => tryCatch(testForUniqueNamespace)); - $("#delete-all-custom-xml-parts").on("click", () => tryCatch(deleteAllCustomXmlParts)); + content: |- + document.getElementById("create-custom-xml-part").addEventListener("click", () => tryCatch(createCustomXmlPart)); + document.getElementById("test-for-unique-namespace").addEventListener("click", () => tryCatch(testForUniqueNamespace)); + document.getElementById("delete-all-custom-xml-parts").addEventListener("click", () => tryCatch(deleteAllCustomXmlParts)); async function createCustomXmlPart() { await Excel.run(async (context) => { @@ -90,11 +90,10 @@ script: } language: typescript template: - content: |+ + content: |-

This sample shows how to determine if there is just one XML part for a specified namespace.

-

Try it out

Press the "Create XML part" button to create and display Contoso's Reviewer metadata. Press it more than once if you want to set up an error situation.

@@ -110,13 +109,11 @@ template: Delete all XML parts
-

XML part display

- language: html style: content: |- @@ -131,15 +128,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/20-data-types/data-types-entity-attribution.yaml b/samples/excel/20-data-types/data-types-entity-attribution.yaml index ded226769..46adc2e94 100644 --- a/samples/excel/20-data-types/data-types-entity-attribution.yaml +++ b/samples/excel/20-data-types/data-types-entity-attribution.yaml @@ -6,9 +6,9 @@ host: EXCEL api_set: ExcelApi: '1.16' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#add-entities-to-table").on("click", () => tryCatch(addEntitiesToTable)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("add-entities-to-table").addEventListener("click", () => tryCatch(addEntitiesToTable)); async function addEntitiesToTable() { // This function retrieves data for each of the existing products in the table, @@ -205,10 +205,10 @@ template:

To see the entity value's data attribution, click the icon to the left of the title in the Product column after selecting Add entity values.

The data attribution appears as a logo in the bottom left corner of the entity card. Hover over the logo to see the name of the data provider. Click on the logo to visit the data provider's URL.

-
+
language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -220,15 +220,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/20-data-types/data-types-entity-icons.yaml b/samples/excel/20-data-types/data-types-entity-icons.yaml index 89a06fafc..53cecd46b 100644 --- a/samples/excel/20-data-types/data-types-entity-icons.yaml +++ b/samples/excel/20-data-types/data-types-entity-icons.yaml @@ -6,9 +6,9 @@ host: EXCEL api_set: ExcelApi: '1.16' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#create-icons").on("click", () => tryCatch(createIcons)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("create-icons").addEventListener("click", () => tryCatch(createIcons)); // Retrieve the entity card icons enum. const iconNames = Excel.EntityCompactLayoutIcons; @@ -108,13 +108,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/20-data-types/data-types-entity-values.yaml b/samples/excel/20-data-types/data-types-entity-values.yaml index 2585f039d..9383863f7 100644 --- a/samples/excel/20-data-types/data-types-entity-values.yaml +++ b/samples/excel/20-data-types/data-types-entity-values.yaml @@ -7,8 +7,8 @@ api_set: ExcelApi: '1.16' script: content: |- - $("#setup").on("click", () => tryCatch(setup)); - $("#addEntitiesToTable").on("click", () => tryCatch(addEntitiesToTable)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("addEntitiesToTable").addEventListener("click", () => tryCatch(addEntitiesToTable)); async function addEntitiesToTable() { // This function retrieves data for each of the existing products in the table, @@ -581,7 +581,7 @@ template:
language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -593,15 +593,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/20-data-types/data-types-error-values.yaml b/samples/excel/20-data-types/data-types-error-values.yaml index ec1c9eeb6..bcf1d28f6 100644 --- a/samples/excel/20-data-types/data-types-error-values.yaml +++ b/samples/excel/20-data-types/data-types-error-values.yaml @@ -6,10 +6,10 @@ host: EXCEL api_set: ExcelApi: '1.16' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#set-busy-error").on("click", () => tryCatch(setBusyError)); - $("#change-busy-error").on("click", () => tryCatch(changeBusyError)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("set-busy-error").addEventListener("click", () => tryCatch(setBusyError)); + document.getElementById("change-busy-error").addEventListener("click", () => tryCatch(changeBusyError)); async function setBusyError() { // This function sets the value of cell A1 to a #BUSY! error using data types. @@ -105,15 +105,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/20-data-types/data-types-formatted-number.yaml b/samples/excel/20-data-types/data-types-formatted-number.yaml index a8ca4bc9c..dd362a38a 100644 --- a/samples/excel/20-data-types/data-types-formatted-number.yaml +++ b/samples/excel/20-data-types/data-types-formatted-number.yaml @@ -6,11 +6,11 @@ host: EXCEL api_set: ExcelApi: '1.16' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#set-formatted-number-date").on("click", () => tryCatch(setFormattedNumberDate)); - $("#set-formatted-number-currency").on("click", () => tryCatch(setFormattedNumberCurrency)); - $("#get-formatted-number").on("click", () => tryCatch(getFormattedNumber)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("set-formatted-number-date").addEventListener("click", () => tryCatch(setFormattedNumberDate)); + document.getElementById("set-formatted-number-currency").addEventListener("click", () => tryCatch(setFormattedNumberCurrency)); + document.getElementById("get-formatted-number").addEventListener("click", () => tryCatch(getFormattedNumber)); async function setFormattedNumberDate() { // This function creates a formatted number data type, @@ -143,15 +143,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/20-data-types/data-types-references.yaml b/samples/excel/20-data-types/data-types-references.yaml index 37f5673fd..89a45c742 100644 --- a/samples/excel/20-data-types/data-types-references.yaml +++ b/samples/excel/20-data-types/data-types-references.yaml @@ -6,9 +6,9 @@ host: EXCEL api_set: ExcelApi: '1.16' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#add-entities-to-table").on("click", () => tryCatch(addEntitiesToTable)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("add-entities-to-table").addEventListener("click", () => tryCatch(addEntitiesToTable)); async function addEntitiesToTable() { // This function creates entity values with references to other entity values. @@ -292,7 +292,7 @@ script: ]; language: typescript template: - content: | + content: |-

This sample shows how to create entity values with references to other entity values. An entity value is a container for data, and this container can reference (or contain) other entities within the original entity. One entity can contain multiple additional entities.

@@ -316,10 +316,10 @@ template:
  • To navigate back to the original Andrew Fuller entity, select the Back arrow in the top left corner of the entity card.

    • You can also use the Extract to grid button in the card modal window, to the right of the Manager or Direct Reports fields, to add the referenced entities to the table in new columns.

    - + language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -331,15 +331,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/20-data-types/data-types-web-image.yaml b/samples/excel/20-data-types/data-types-web-image.yaml index 3a6d8134d..9beed0017 100644 --- a/samples/excel/20-data-types/data-types-web-image.yaml +++ b/samples/excel/20-data-types/data-types-web-image.yaml @@ -6,12 +6,12 @@ host: EXCEL api_set: ExcelApi: '1.16' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#insert-image").on("click", () => tryCatch(insertImage)); - $("#retrieve-image-info").on("click", () => tryCatch(retrieveImageInfo)); - $("#open-image").on("click", () => tryCatch(openImage)); - $("#clear-form").on("click", () => tryCatch(clearForm)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("insert-image").addEventListener("click", () => tryCatch(insertImage)); + document.getElementById("retrieve-image-info").addEventListener("click", () => tryCatch(retrieveImageInfo)); + document.getElementById("open-image").addEventListener("click", () => tryCatch(openImage)); + document.getElementById("clear-form").addEventListener("click", () => tryCatch(clearForm)); async function insertImage() { // This function inserts a web image into the currently selected cell. @@ -125,7 +125,6 @@ template:

    This sample shows how to work with the web image data type. Insert an image into the selected cell and then retrieve information about that image.

    -

    Set up

    Add a new worksheet and then enter the URL and alt text for an image of your choice.

    @@ -137,24 +136,20 @@ template:
    -

    Try it out

    Select the cell you want to insert the web image into, and then select the Insert image button.

    -

    Select the cell containing the web image that you want to view the details of, and then select the Retrieve image details button. The image details will display here in the task pane, in the preceding Image URL and Alt text fields.

    -

    Select the cell with the image you want to view and then select the Open image in browser button. The image will open in a new web browser tab.

    -

    Clear the Image URL and Alt text fields in the task pane.

    -

    Try it out

    Press Require approved name and then click on a cell in the Baby Name column and use the drop down to enter an approved value.

    @@ -178,15 +176,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/26-document/custom-properties.yaml b/samples/excel/26-document/custom-properties.yaml index 332f28ad1..90c3ab73d 100644 --- a/samples/excel/26-document/custom-properties.yaml +++ b/samples/excel/26-document/custom-properties.yaml @@ -6,11 +6,11 @@ host: EXCEL api_set: ExcelAPI: '1.12' script: - content: | - $("#set-custom-doc-property").on("click", () => tryCatch(setCustomDocProperty)); - $("#get-custom-doc-properties").on("click", () => tryCatch(getCustomDocProperties)); - $("#set-custom-worksheet-property").on("click", () => tryCatch(setCustomWorksheetProperty)); - $("#get-custom-worksheet-properties").on("click", () => tryCatch(getCustomWorksheetProperties)); + content: |- + document.getElementById("set-custom-doc-property").addEventListener("click", () => tryCatch(setCustomDocProperty)); + document.getElementById("get-custom-doc-properties").addEventListener("click", () => tryCatch(getCustomDocProperties)); + document.getElementById("set-custom-worksheet-property").addEventListener("click", () => tryCatch(setCustomWorksheetProperty)); + document.getElementById("get-custom-worksheet-properties").addEventListener("click", () => tryCatch(getCustomWorksheetProperties)); /* To learn how to view document properties in the UI, * see https://support.microsoft.com/office/21D604C2-481E-4379-8E54-1DD4622C6B75 @@ -93,12 +93,10 @@ template:

    This sample shows how to set and get custom properties at both the document level and the worksheet level.

    -

    Enter the key/value pairs for your custom properties.

    Key:

    Value:

    -

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -130,15 +128,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/26-document/get-file-in-slices-async.yaml b/samples/excel/26-document/get-file-in-slices-async.yaml index f5288dfbe..3371746d2 100644 --- a/samples/excel/26-document/get-file-in-slices-async.yaml +++ b/samples/excel/26-document/get-file-in-slices-async.yaml @@ -7,9 +7,9 @@ api_set: ExcelApi: '1.4' script: content: |- - $("#setup").on("click", () => tryCatch(setup)); - $("#get-file").on("click", () => tryCatch(getCurrentFile)); - $("#new-workbook-from-file").on("click", () => tryCatch(newWorkbookFromFile)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("get-file").addEventListener("click", () => tryCatch(getCurrentFile)); + document.getElementById("new-workbook-from-file").addEventListener("click", () => tryCatch(newWorkbookFromFile)); function getCurrentFile() { const sliceSize = 4096; /*Bytes*/ @@ -153,18 +153,16 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to get the Base64-encoded string that represents the current document. It uses the getFileAsync() method to read the file in slices and then joins all slices back together to form the complete file.

    -

    Set up

    -

    Try it out

    -

    Create a new workbook

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -204,15 +201,10 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - core-js@2.4.1/client/core.min.js - @types/core-js + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - jquery@3.1.1 - @types/jquery@3.3.1 - https://unpkg.com/base64-js@1.2.1/base64js.min.js + https://unpkg.com/base64-js@1.2.1/base64js.min.js \ No newline at end of file diff --git a/samples/excel/26-document/properties.yaml b/samples/excel/26-document/properties.yaml index 210f2208f..41deb4f44 100644 --- a/samples/excel/26-document/properties.yaml +++ b/samples/excel/26-document/properties.yaml @@ -6,12 +6,12 @@ host: EXCEL api_set: ExcelApi: '1.7' script: - content: | - $("#set-doc-properties").on("click", () => tryCatch(setDocProperties)); - $("#get-doc-properties").on("click", () => tryCatch(getDocProperties)); - $("#set-custom-doc-properties").on("click", () => tryCatch(setCustomDocProperties)); - $("#get-custom-doc-properties").on("click", () => tryCatch(getCustomDocProperties)); - $("#get-count-custom-doc-properties").on("click", () => tryCatch(getCountCustomDocProperties)); + content: |- + document.getElementById("set-doc-properties").addEventListener("click", () => tryCatch(setDocProperties)); + document.getElementById("get-doc-properties").addEventListener("click", () => tryCatch(getDocProperties)); + document.getElementById("set-custom-doc-properties").addEventListener("click", () => tryCatch(setCustomDocProperties)); + document.getElementById("get-custom-doc-properties").addEventListener("click", () => tryCatch(getCustomDocProperties)); + document.getElementById("get-count-custom-doc-properties").addEventListener("click", () => tryCatch(getCountCustomDocProperties)); async function setDocProperties() { await Excel.run(async (context) => { @@ -123,45 +123,39 @@ script: } language: typescript template: - content: |+ + content: |-

    This sample shows how to set and get document properties.

    -

    Try it out

    -
    -
    -
    -
    - language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -173,15 +167,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/30-events/data-change-event-details.yaml b/samples/excel/30-events/data-change-event-details.yaml index 3a9724380..d395f6c0c 100644 --- a/samples/excel/30-events/data-change-event-details.yaml +++ b/samples/excel/30-events/data-change-event-details.yaml @@ -6,9 +6,9 @@ host: EXCEL api_set: ExcelApi: '1.9' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#register-handler").on("click", () => tryCatch(registerChangeEventHandler)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("register-handler").addEventListener("click", () => tryCatch(registerChangeEventHandler)); async function registerChangeEventHandler() { await Excel.run(async (context) => { @@ -73,7 +73,6 @@ template:

    This sample shows how to use table changed events.

    -

    Setup

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -102,15 +101,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/30-events/data-changed.yaml b/samples/excel/30-events/data-changed.yaml index 4671c08a4..6bf0e7f7b 100644 --- a/samples/excel/30-events/data-changed.yaml +++ b/samples/excel/30-events/data-changed.yaml @@ -7,9 +7,9 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#register-data-changed-handler").on("click", () => tryCatch(registerDataChangedHandler)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("register-data-changed-handler").addEventListener("click", () => tryCatch(registerDataChangedHandler)); async function registerDataChangedHandler() { await Excel.run(async (context) => { @@ -78,14 +78,12 @@ template:

    This sample shows how to register and use a handler for the data-changed event.

    -

    Set up

    -

    Try it out

    -

    Try it out

    -

    Try it out

    Click the button to register handlers for the pie chart's activated and deactivated events. Then click the chart to activate it. Watch the console. Finally, click the cylinder chart to deactivate the pie chart.

    @@ -168,15 +166,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/30-events/events-chartcollection-added-activated.yaml b/samples/excel/30-events/events-chartcollection-added-activated.yaml index 8e62d8909..49c754f27 100644 --- a/samples/excel/30-events/events-chartcollection-added-activated.yaml +++ b/samples/excel/30-events/events-chartcollection-added-activated.yaml @@ -7,9 +7,9 @@ api_set: ExcelApi: '1.8' script: content: |- - $("#setup").on("click", () => tryCatch(setup)); - $("#register-chartcollection-handlers").on("click", () => tryCatch(registerChartCollectionHandlers)); - $("#add-chart").on("click", () => tryCatch(createPieChart)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("register-chartcollection-handlers").addEventListener("click", () => tryCatch(registerChartCollectionHandlers)); + document.getElementById("add-chart").addEventListener("click", () => tryCatch(createPieChart)); async function registerChartCollectionHandlers() { await Excel.run(async (context) => { @@ -113,14 +113,12 @@ template:

    This sample shows how to register and use handlers for the ChartCollection onAdded, onDeleted, onActivated, and onDeactivated events.

    -

    Set up

    -

    Try it out

    Click the button to register and use handlers for the worksheet's ChartCollection events.

    @@ -149,15 +147,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/30-events/events-comment-event-handler.yaml b/samples/excel/30-events/events-comment-event-handler.yaml index 19daffab1..fbf4d77d1 100644 --- a/samples/excel/30-events/events-comment-event-handler.yaml +++ b/samples/excel/30-events/events-comment-event-handler.yaml @@ -6,12 +6,12 @@ host: EXCEL api_set: ExcelAPI: '1.12' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers)); - $("#add-comment").on("click", () => tryCatch(addComment)); - $("#edit-comment").on("click", () => tryCatch(editComment)); - $("#delete-comment").on("click", () => tryCatch(deleteComment)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers)); + document.getElementById("add-comment").addEventListener("click", () => tryCatch(addComment)); + document.getElementById("edit-comment").addEventListener("click", () => tryCatch(editComment)); + document.getElementById("delete-comment").addEventListener("click", () => tryCatch(deleteComment)); async function registerEventHandlers() { await Excel.run(async (context) => { @@ -152,7 +152,7 @@ template: -
    +
    language: html style: content: |- @@ -167,15 +167,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/30-events/events-disable-events.yaml b/samples/excel/30-events/events-disable-events.yaml index 9dfb2dfca..d7711daf1 100644 --- a/samples/excel/30-events/events-disable-events.yaml +++ b/samples/excel/30-events/events-disable-events.yaml @@ -6,11 +6,11 @@ host: EXCEL api_set: ExcelApi: '1.8' script: - content: | - $("#toggleEvents").on("click", () => tryCatch(toggleEvents)); - $("#setup").on("click", () => tryCatch(setup)); - $("#refreshData").on("click", () => tryCatch(addOrRefreshData)); - $("#registerSumChangedHandlers").on("click", () => tryCatch(registerSumChangedHandlers)); + content: |- + document.getElementById("toggleEvents").addEventListener("click", () => tryCatch(toggleEvents)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("refreshData").addEventListener("click", () => tryCatch(addOrRefreshData)); + document.getElementById("registerSumChangedHandlers").addEventListener("click", () => tryCatch(registerSumChangedHandlers)); async function toggleEvents() { await Excel.run(async (context) => { @@ -175,13 +175,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/30-events/events-formula-changed.yaml b/samples/excel/30-events/events-formula-changed.yaml index 6c10c734b..89e3f9d1f 100644 --- a/samples/excel/30-events/events-formula-changed.yaml +++ b/samples/excel/30-events/events-formula-changed.yaml @@ -6,10 +6,10 @@ host: EXCEL api_set: ExcelAPI: '1.13' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#register-formula-change-handler").on("click", () => tryCatch(registerFormulaChangeHandler)); - $("#trigger-formula-change").on("click", () => tryCatch(triggerFormulaChange)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("register-formula-change-handler").addEventListener("click", () => tryCatch(registerFormulaChangeHandler)); + document.getElementById("trigger-formula-change").addEventListener("click", () => tryCatch(triggerFormulaChange)); async function registerFormulaChangeHandler() { await Excel.run(async (context) => { @@ -117,15 +117,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/30-events/events-table-changed.yaml b/samples/excel/30-events/events-table-changed.yaml index 10dbe4a25..4f686e1ce 100644 --- a/samples/excel/30-events/events-table-changed.yaml +++ b/samples/excel/30-events/events-table-changed.yaml @@ -6,12 +6,12 @@ host: EXCEL api_set: ExcelApi: '1.7' script: - content: |+ - $("#setup").on("click", () => tryCatch(setup)); - $("#register-on-changed-handler").on("click", () => tryCatch(registerOnChangedHandler)); - $("#change-data").on("click", () => tryCatch(changeData)); - $("#register-on-selection-changed-handler").on("click", () => tryCatch(registerOnSelectionChangedHandler)); - $("#change-selection").on("click", () => tryCatch(changeSelection)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("register-on-changed-handler").addEventListener("click", () => tryCatch(registerOnChangedHandler)); + document.getElementById("change-data").addEventListener("click", () => tryCatch(changeData)); + document.getElementById("register-on-selection-changed-handler").addEventListener("click", () => tryCatch(registerOnSelectionChangedHandler)); + document.getElementById("change-selection").addEventListener("click", () => tryCatch(changeSelection)); async function registerOnChangedHandler() { await Excel.run(async (context) => { @@ -104,54 +104,44 @@ script: console.error(error); } } - - - language: typescript template: - content: |+ + content: |-

    This sample shows how to register and use event handlers for table onChanged and onSelectionChanged events.

    -

    Set up

    -

    Try it out

    -

    Changing data in a table triggers the data changed event. You can change the data manually or programmatically.

    -
    -

    Changing a range selection in a table triggers the table onSelectionChanged event. You can change selection manually or programmatically.

    - - language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -163,15 +153,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/30-events/events-tablecollection-changed.yaml b/samples/excel/30-events/events-tablecollection-changed.yaml index eaf9a1362..a382bcdf7 100644 --- a/samples/excel/30-events/events-tablecollection-changed.yaml +++ b/samples/excel/30-events/events-tablecollection-changed.yaml @@ -6,10 +6,10 @@ host: EXCEL api_set: ExcelApi: '1.7' script: - content: |+ - $("#setup").on("click", () => tryCatch(setup)); - $("#register-on-changed-handler").on("click", () => tryCatch(registerOnChangedHandler)); - $("#change-data").on("click", () => tryCatch(changeData)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("register-on-changed-handler").addEventListener("click", () => tryCatch(registerOnChangedHandler)); + document.getElementById("change-data").addEventListener("click", () => tryCatch(changeData)); async function registerOnChangedHandler() { await Excel.run(async (context) => { @@ -111,40 +111,33 @@ script: console.error(error); } } - - - language: typescript template: - content: |+ + content: |-

    This sample shows how to register and use an event handler for table collection onChanged event.

    -

    Set up

    -

    Try it out

    -

    Changing data in tables triggers the data changed event. You can change the data manually or programmatically.

    - language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -156,15 +149,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/30-events/events-workbook-activated.yaml b/samples/excel/30-events/events-workbook-activated.yaml index 63fc16bf2..72c944193 100644 --- a/samples/excel/30-events/events-workbook-activated.yaml +++ b/samples/excel/30-events/events-workbook-activated.yaml @@ -6,8 +6,8 @@ host: EXCEL api_set: ExcelAPI: '1.13' script: - content: | - $("#register-event-handler").on("click", () => tryCatch(registerEventHandler)); + content: |- + document.getElementById("register-event-handler").addEventListener("click", () => tryCatch(registerEventHandler)); async function workbookActivated(event: Excel.WorkbookActivatedEventArgs) { await Excel.run(async (context) => { @@ -45,7 +45,6 @@ template:

    Once the event handler is registered, a notification prints to the console when the workbook is activated. Try switching to another application and then switching back to Excel to see the console notification.

    -

    Try it out

    -

    Activated/Deactivated

    -

    Settings

    - + language: html style: content: |- @@ -97,15 +97,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/30-events/events-worksheet.yaml b/samples/excel/30-events/events-worksheet.yaml index 63ab3d364..cbba6505e 100644 --- a/samples/excel/30-events/events-worksheet.yaml +++ b/samples/excel/30-events/events-worksheet.yaml @@ -8,16 +8,16 @@ api_set: ExcelApi: '1.7' script: content: |- - $("#setup").on("click", () => tryCatch(setup)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); - $("#register-on-selection-changed-handler").on("click", () => tryCatch(registerSelectionChangedHandler)); - $("#select-range").on("click", () => tryCatch(selectRange)); + document.getElementById("register-on-selection-changed-handler").addEventListener("click", () => tryCatch(registerSelectionChangedHandler)); + document.getElementById("select-range").addEventListener("click", () => tryCatch(selectRange)); - $("#register-on-changed-handler").on("click", () => tryCatch(registerOnChangedHandler)); - $("#register-onCalculated-handler").on("click", () => tryCatch(registerOnCalculatedHandler)); - $("#recalculate").on("click", () => tryCatch(recalculate)); + document.getElementById("register-on-changed-handler").addEventListener("click", () => tryCatch(registerOnChangedHandler)); + document.getElementById("register-onCalculated-handler").addEventListener("click", () => tryCatch(registerOnCalculatedHandler)); + document.getElementById("recalculate").addEventListener("click", () => tryCatch(recalculate)); - $("#delete-data").on("click", () => tryCatch(deleteData)); + document.getElementById("delete-data").addEventListener("click", () => tryCatch(deleteData)); async function registerSelectionChangedHandler() { await Excel.run(async (context) => { @@ -172,17 +172,14 @@ template:

    This sample shows how to register and use an event handler for the worksheet onSelectionChanged event.

    -

    Set up

    -

    Try it out

    -

    Selection Changed

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -220,15 +217,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/30-events/selection-changed-events.yaml b/samples/excel/30-events/selection-changed-events.yaml index 8950cfb0b..7e8108677 100644 --- a/samples/excel/30-events/selection-changed-events.yaml +++ b/samples/excel/30-events/selection-changed-events.yaml @@ -7,9 +7,9 @@ host: EXCEL api_set: ExcelApi: '1.7' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers)); async function registerEventHandlers() { await Excel.run(async (context) => { @@ -101,11 +101,10 @@ script: } language: typescript template: - content: |+ + content: |-

    This sample shows how to register and use event handlers for table onChanged and onSelectionChanged events.

    -

    Set up

    -

    Try it out

    -

    The console will log the addresses reported by the different onSelectionChanged events. Change the cell or cells selected in the worksheet to see the results. Try selecting single cells, multiple cells, and multiple discontiguous cells.

    - - language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -146,15 +141,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/34-named-item/create-and-remove-named-item.yaml b/samples/excel/34-named-item/create-and-remove-named-item.yaml index d4c24ffbd..5cf8f5325 100644 --- a/samples/excel/34-named-item/create-and-remove-named-item.yaml +++ b/samples/excel/34-named-item/create-and-remove-named-item.yaml @@ -7,13 +7,13 @@ api_set: ExcelApi: '1.4' script: content: |- - $("#setup").on("click", () => tryCatch(setup)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); - $("#add-name-to-total").on("click", () => tryCatch(addNameToTotal)); - $("#add-name-to-header").on("click", () => tryCatch(addNameToHeader)); - $("#format-named-range").on("click", () => tryCatch(formatRangeByName)); - $("#remove-name").on("click", () => tryCatch(removeName)); - $("#list-named-items").on("click", () => tryCatch(listNamedItems)); + document.getElementById("add-name-to-total").addEventListener("click", () => tryCatch(addNameToTotal)); + document.getElementById("add-name-to-header").addEventListener("click", () => tryCatch(addNameToHeader)); + document.getElementById("format-named-range").addEventListener("click", () => tryCatch(formatRangeByName)); + document.getElementById("remove-name").addEventListener("click", () => tryCatch(removeName)); + document.getElementById("list-named-items").addEventListener("click", () => tryCatch(listNamedItems)); async function addNameToTotal() { await Excel.run(async (context) => { @@ -182,11 +182,10 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to create, access, and delete named items.

    -

    Setup

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -124,13 +123,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/38-pivottable/pivottable-calculations.yaml b/samples/excel/38-pivottable/pivottable-calculations.yaml index a105bd44d..8fb52a748 100644 --- a/samples/excel/38-pivottable/pivottable-calculations.yaml +++ b/samples/excel/38-pivottable/pivottable-calculations.yaml @@ -8,11 +8,11 @@ api_set: ExcelApi: '1.8' script: content: |- - $("#setup").on("click", () => tryCatch(setup)); - $("#deletePivot").on("click", () => tryCatch(deletePivot)); - $("#showPercentages").on("click", () => tryCatch(showPercentages)); - $("#showDifferenceFrom").on("click", () => tryCatch(showDifferenceFrom)); - $("#showSums").on("click", () => tryCatch(showSums)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("deletePivot").addEventListener("click", () => tryCatch(deletePivot)); + document.getElementById("showPercentages").addEventListener("click", () => tryCatch(showPercentages)); + document.getElementById("showDifferenceFrom").addEventListener("click", () => tryCatch(showDifferenceFrom)); + document.getElementById("showSums").addEventListener("click", () => tryCatch(showSums)); async function showPercentages() { await Excel.run(async (context) => { @@ -152,21 +152,19 @@ script: // 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: |-

    This sample shows how to change the calculations of PivotTable data hierarchies.

    -

    Set up

    -

    Try it out

    -

    Clean up

    -

    Adjust the PivotTable

    -

    Adjust formatting

    -

    Delete the PivotTable

    -

    Try it out

    -

    Change functions

    -

    Filtering

    After pressing the "Enable filter" button, manually select the classification filter for the PivotTable -

    Data Manipulation

    -

    Clean up

    -

    Set up

    This creates a data sheet and two PivotTables in two different worksheets. @@ -151,11 +150,9 @@ template: Set up sample

    -

    Try it out

    -
    -

    Try it out

    -

    Filters

    Manual filter

    @@ -289,7 +286,6 @@ template: -

    PivotTable Status

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -126,15 +125,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/38-pivottable/pivottable-slicer.yaml b/samples/excel/38-pivottable/pivottable-slicer.yaml index 05f37c4b8..587b6562b 100644 --- a/samples/excel/38-pivottable/pivottable-slicer.yaml +++ b/samples/excel/38-pivottable/pivottable-slicer.yaml @@ -6,15 +6,15 @@ host: EXCEL api_set: ExcelApi: '1.10' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#add-pivot-table").on("click", () => tryCatch(addPivotTable)); - $("#add-slicer").on("click", () => tryCatch(addSlicer)); - $("#format-slicer").on("click", () => tryCatch(formatSlicer)); - $("#apply-style").on("click", () => tryCatch(applyStyle)); - $("#add-filters").on("click", () => tryCatch(addFilters)); - $("#remove-filters").on("click", () => tryCatch(removeFilters)); - $("#remove-slicer").on("click", () => tryCatch(removeSlicer)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("add-pivot-table").addEventListener("click", () => tryCatch(addPivotTable)); + document.getElementById("add-slicer").addEventListener("click", () => tryCatch(addSlicer)); + document.getElementById("format-slicer").addEventListener("click", () => tryCatch(formatSlicer)); + document.getElementById("apply-style").addEventListener("click", () => tryCatch(applyStyle)); + document.getElementById("add-filters").addEventListener("click", () => tryCatch(addFilters)); + document.getElementById("remove-filters").addEventListener("click", () => tryCatch(removeFilters)); + document.getElementById("remove-slicer").addEventListener("click", () => tryCatch(removeSlicer)); async function addSlicer() { await Excel.run(async (context) => { @@ -145,7 +145,6 @@ template:

    This sample shows how to work with a slicer on a PivotTable.

    -

    Setup

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -200,15 +199,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/38-pivottable/pivottable-source-data.yaml b/samples/excel/38-pivottable/pivottable-source-data.yaml index f477ead82..2da0cde5e 100644 --- a/samples/excel/38-pivottable/pivottable-source-data.yaml +++ b/samples/excel/38-pivottable/pivottable-source-data.yaml @@ -6,9 +6,9 @@ host: EXCEL api_set: ExcelApi: '1.15' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#get-pivottable-data-source").on("click", () => tryCatch(getPivotTableDataSource)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("get-pivottable-data-source").addEventListener("click", () => tryCatch(getPivotTableDataSource)); async function getPivotTableDataSource() { // This function logs information about the data source of a PivotTable. @@ -93,20 +93,18 @@ template:

    This sample shows how to get information about the data source of a PivotTable. It returns the type and string representation of the data source.

    Note: This sample works in Excel on Windows and Excel on the web. It doesn't work in Excel on Mac; this is a known issue.

    -

    Set up

    -

    Try it out

    -
    +
    language: html style: content: |- @@ -121,15 +119,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/42-range/cell-properties.yaml b/samples/excel/42-range/cell-properties.yaml index 373060786..700c067bf 100644 --- a/samples/excel/42-range/cell-properties.yaml +++ b/samples/excel/42-range/cell-properties.yaml @@ -7,10 +7,10 @@ host: EXCEL api_set: ExcelApi: '1.9' script: - content: | - $("#set-cell-properties").on("click", () => tryCatch(setCellProperties)); - $("#get-cell-properties").on("click", () => tryCatch(getCellProperties)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("set-cell-properties").addEventListener("click", () => tryCatch(setCellProperties)); + document.getElementById("get-cell-properties").addEventListener("click", () => tryCatch(getCellProperties)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); async function setCellProperties() { await Excel.run(async (context) => { @@ -148,14 +148,12 @@ template:

    This sample shows how to format a range.

    -

    Set up

    -

    Try it out

    -

    Set up

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -171,15 +169,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/42-range/formatting.yaml b/samples/excel/42-range/formatting.yaml index 859c9621e..f4f5a4a91 100644 --- a/samples/excel/42-range/formatting.yaml +++ b/samples/excel/42-range/formatting.yaml @@ -7,11 +7,11 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); - $("#set-font-and-fill-color").on("click", () => tryCatch(setFontAndFillColor)); - $("#set-number-format").on("click", () => tryCatch(setNumberFormat)); + document.getElementById("set-font-and-fill-color").addEventListener("click", () => tryCatch(setFontAndFillColor)); + document.getElementById("set-number-format").addEventListener("click", () => tryCatch(setNumberFormat)); async function setFontAndFillColor() { await Excel.run(async (context) => { @@ -75,18 +75,16 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to format a range.

    -

    Set up

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -110,15 +108,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css diff --git a/samples/excel/42-range/insert-delete-clear-range.yaml b/samples/excel/42-range/insert-delete-clear-range.yaml index 4bda94935..7256c9820 100644 --- a/samples/excel/42-range/insert-delete-clear-range.yaml +++ b/samples/excel/42-range/insert-delete-clear-range.yaml @@ -7,12 +7,12 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); - $("#insert-range").on("click", () => tryCatch(insertRange)); - $("#delete-range").on("click", () => tryCatch(deleteRange)); - $("#clear-range").on("click", () => tryCatch(clearRange)); + document.getElementById("insert-range").addEventListener("click", () => tryCatch(insertRange)); + document.getElementById("delete-range").addEventListener("click", () => tryCatch(deleteRange)); + document.getElementById("clear-range").addEventListener("click", () => tryCatch(clearRange)); async function insertRange() { await Excel.run(async (context) => { @@ -85,18 +85,16 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to insert, delete and clear the contents of a range.

    -

    Set up

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -123,15 +121,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/42-range/outline.yaml b/samples/excel/42-range/outline.yaml index 25b6bb2af..206088be3 100644 --- a/samples/excel/42-range/outline.yaml +++ b/samples/excel/42-range/outline.yaml @@ -6,14 +6,14 @@ host: EXCEL api_set: ExcelApi: '1.10' script: - content: | - $("#setup-data").on("click", () => tryCatch(setupData)); - $("#setup-totals").on("click", () => tryCatch(setupTotals)); - $("#group-rows").on("click", () => tryCatch(groupRows)); - $("#group-columns").on("click", () => tryCatch(groupColumns)); - $("#collapse-outline").on("click", () => tryCatch(collapseOutline)); - $("#expand-outline").on("click", () => tryCatch(expandOutline)); - $("#ungroup").on("click", () => tryCatch(ungroup)); + content: |- + document.getElementById("setup-data").addEventListener("click", () => tryCatch(setupData)); + document.getElementById("setup-totals").addEventListener("click", () => tryCatch(setupTotals)); + document.getElementById("group-rows").addEventListener("click", () => tryCatch(groupRows)); + document.getElementById("group-columns").addEventListener("click", () => tryCatch(groupColumns)); + document.getElementById("collapse-outline").addEventListener("click", () => tryCatch(collapseOutline)); + document.getElementById("expand-outline").addEventListener("click", () => tryCatch(expandOutline)); + document.getElementById("ungroup").addEventListener("click", () => tryCatch(ungroup)); async function groupRows() { Excel.run(async (context) => { @@ -174,7 +174,6 @@ template:

    This sample shows how to group and ungroup rows and columns for an outline.

    -

    Set up

    -

    Try it out

    -
    + language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -201,15 +201,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/42-range/range-areas.yaml b/samples/excel/42-range/range-areas.yaml index 91f2cce7f..4b08ddc0a 100644 --- a/samples/excel/42-range/range-areas.yaml +++ b/samples/excel/42-range/range-areas.yaml @@ -6,13 +6,13 @@ host: EXCEL api_set: ExcelApi: '1.9' script: - content: | - $("#reset").on("click", () => tryCatch(reset)); - $("#color-selected-ranges").on("click", () => tryCatch(colorSelectedRanges)); - $("#color-specified-ranges").on("click", () => tryCatch(colorSpecifiedRanges)); - $("#color-all-formula-ranges").on("click", () => tryCatch(colorAllFormulaRanges)); - $("#color-all-logical-text-ranges").on("click", () => tryCatch(colorAllLogicalAndTextRanges)); - $("#read-properties-specified-ranges").on("click", () => tryCatch(readPropertiesOfSpecifiedRanges)); + content: |- + document.getElementById("reset").addEventListener("click", () => tryCatch(reset)); + document.getElementById("color-selected-ranges").addEventListener("click", () => tryCatch(colorSelectedRanges)); + document.getElementById("color-specified-ranges").addEventListener("click", () => tryCatch(colorSpecifiedRanges)); + document.getElementById("color-all-formula-ranges").addEventListener("click", () => tryCatch(colorAllFormulaRanges)); + document.getElementById("color-all-logical-text-ranges").addEventListener("click", () => tryCatch(colorAllLogicalAndTextRanges)); + document.getElementById("read-properties-specified-ranges").addEventListener("click", () => tryCatch(readPropertiesOfSpecifiedRanges)); async function colorSelectedRanges() { await Excel.run(async (context) => { @@ -123,11 +123,10 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to apply actions simultaneously to multiple, discontiguous ranges. Some of these ranges are found using the Range object's getSpecialCells method.

    -

    Set up

    -

    Try it out

    -
    + language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -160,15 +160,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/42-range/range-direct-dependents.yaml b/samples/excel/42-range/range-direct-dependents.yaml index b929a80b2..339653430 100644 --- a/samples/excel/42-range/range-direct-dependents.yaml +++ b/samples/excel/42-range/range-direct-dependents.yaml @@ -6,11 +6,11 @@ host: EXCEL api_set: ExcelAPI: '1.13' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#select-D3").on("click", () => tryCatch(selectD3)); - $("#select-E4").on("click", () => tryCatch(selectE4)); - $("#get-direct-dependents").on("click", () => tryCatch(getDirectDependents)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("select-D3").addEventListener("click", () => tryCatch(selectD3)); + document.getElementById("select-E4").addEventListener("click", () => tryCatch(selectE4)); + document.getElementById("get-direct-dependents").addEventListener("click", () => tryCatch(getDirectDependents)); /** Select a cell with direct dependents on the same worksheet. */ async function selectD3() { @@ -119,14 +119,12 @@ template:

    This sample shows how to find and highlight the dependents of the currently selected cell. Dependent cells contain formulas that refer to other cells.

    -

    Set up

    -

    Try it out

    Cells in the 'E' column have direct dependents on the same worksheet. Cells in the 'F' column have direct dependents on another worksheet.

    @@ -155,15 +153,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/42-range/range-find.yaml b/samples/excel/42-range/range-find.yaml index e447eceb7..4b0c31b63 100644 --- a/samples/excel/42-range/range-find.yaml +++ b/samples/excel/42-range/range-find.yaml @@ -7,12 +7,12 @@ api_set: ExcelApi: '1.9' script: content: |- - $("#setup").on("click", () => tryCatch(setup)); - $("#findText").on("click", () => tryCatch(findText)); - $("#findTextWithNullCheck").on("click", () => tryCatch(findTextWithNullCheck)); - $("#toggleComplete").on("click", () => tryCatch(toggleComplete)); - $("#toggleCase").on("click", () => tryCatch(toggleCase)); - $("#toggleDirection").on("click", () => tryCatch(toggleDirection)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("findText").addEventListener("click", () => tryCatch(findText)); + document.getElementById("findTextWithNullCheck").addEventListener("click", () => tryCatch(findTextWithNullCheck)); + document.getElementById("toggleComplete").addEventListener("click", () => tryCatch(toggleComplete)); + document.getElementById("toggleCase").addEventListener("click", () => tryCatch(toggleCase)); + document.getElementById("toggleDirection").addEventListener("click", () => tryCatch(toggleDirection)); let isCompleteMatchToggle = false; let isMatchCaseToggle = false; @@ -159,13 +159,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.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 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/42-range/range-get-range-edge.yaml b/samples/excel/42-range/range-get-range-edge.yaml index e279163c5..1f28f89a2 100644 --- a/samples/excel/42-range/range-get-range-edge.yaml +++ b/samples/excel/42-range/range-get-range-edge.yaml @@ -6,14 +6,14 @@ host: EXCEL api_set: ExcelAPI: '1.13' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#select-E9").on("click", () => tryCatch(selectE9)); - $("#select-D8-E9").on("click", () => tryCatch(selectD8E9)); - $("#get-range-edge-left").on("click", () => tryCatch(getRangeEdgeLeft)); - $("#get-range-edge-up").on("click", () => tryCatch(getRangeEdgeUp)); - $("#get-extended-range-right").on("click", () => tryCatch(getExtendedRangeRight)); - $("#get-extended-range-down").on("click", () => tryCatch(getExtendedRangeDown)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("select-E9").addEventListener("click", () => tryCatch(selectE9)); + document.getElementById("select-D8-E9").addEventListener("click", () => tryCatch(selectD8E9)); + document.getElementById("get-range-edge-left").addEventListener("click", () => tryCatch(getRangeEdgeLeft)); + document.getElementById("get-range-edge-up").addEventListener("click", () => tryCatch(getRangeEdgeUp)); + document.getElementById("get-extended-range-right").addEventListener("click", () => tryCatch(getExtendedRangeRight)); + document.getElementById("get-extended-range-down").addEventListener("click", () => tryCatch(getExtendedRangeDown)); async function getRangeEdgeLeft() { await Excel.run(async (context) => { @@ -179,7 +179,6 @@ template: Add sample data
    -

    Try it out

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -313,15 +311,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/42-range/range-merged-ranges.yaml b/samples/excel/42-range/range-merged-ranges.yaml index 9f38bbbb6..c43bd925a 100644 --- a/samples/excel/42-range/range-merged-ranges.yaml +++ b/samples/excel/42-range/range-merged-ranges.yaml @@ -6,10 +6,10 @@ host: EXCEL api_set: ExcelAPI: '1.13' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#create-merged-range").on("click", () => tryCatch(createMergedRange)); - $("#get-merged-range").on("click", () => tryCatch(getMergedRange)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("create-merged-range").addEventListener("click", () => tryCatch(createMergedRange)); + document.getElementById("get-merged-range").addEventListener("click", () => tryCatch(getMergedRange)); async function createMergedRange() { await Excel.run(async (context) => { @@ -95,14 +95,12 @@ template:

    This sample shows how to create and find merged ranges in a worksheet.

    -

    Set up

    -

    Try it out

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -248,15 +246,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/42-range/range-remove-duplicates.yaml b/samples/excel/42-range/range-remove-duplicates.yaml index e2a182d4a..f89dbda7c 100644 --- a/samples/excel/42-range/range-remove-duplicates.yaml +++ b/samples/excel/42-range/range-remove-duplicates.yaml @@ -6,11 +6,11 @@ host: EXCEL api_set: ExcelApi: '1.9' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); - $("#delete-name").on("click", () => tryCatch(deleteName)); - $("#delete-distributor").on("click", () => tryCatch(deleteDistributor)); + document.getElementById("delete-name").addEventListener("click", () => tryCatch(deleteName)); + document.getElementById("delete-distributor").addEventListener("click", () => tryCatch(deleteDistributor)); async function deleteName() { await Excel.run(async (context) => { @@ -83,18 +83,16 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to remove rows with duplicate column values from a range.

    -

    Set up

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -119,15 +117,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/42-range/range-text-orientation.yaml b/samples/excel/42-range/range-text-orientation.yaml index 9c6cc34ae..d10058503 100644 --- a/samples/excel/42-range/range-text-orientation.yaml +++ b/samples/excel/42-range/range-text-orientation.yaml @@ -7,10 +7,10 @@ host: EXCEL api_set: ExcelApi: '1.7' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#set-text-orientation").on("click", () => tryCatch(setTextOrientation)); - $("#get-text-orientation").on("click", () => tryCatch(getTextOrientation)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("set-text-orientation").addEventListener("click", () => tryCatch(setTextOrientation)); + document.getElementById("get-text-orientation").addEventListener("click", () => tryCatch(getTextOrientation)); async function setTextOrientation() { await Excel.run(async (context) => { @@ -75,18 +75,16 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to set and get the text orientation within a range.

    -

    Set up

    -

    Try it out

    @@ -101,7 +99,7 @@ template:
    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -113,15 +111,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/42-range/selected-range.yaml b/samples/excel/42-range/selected-range.yaml index de07de00d..6ae16734d 100644 --- a/samples/excel/42-range/selected-range.yaml +++ b/samples/excel/42-range/selected-range.yaml @@ -7,9 +7,9 @@ host: EXCEL api_set: ExcelApi: '1.1' script: - content: | - $("#get-selection").on("click", () => tryCatch(getSelection)); - $("#set-selection").on("click", () => tryCatch(setSelection)); + content: |- + document.getElementById("get-selection").addEventListener("click", () => tryCatch(getSelection)); + document.getElementById("set-selection").addEventListener("click", () => tryCatch(setSelection)); async function getSelection() { await Excel.run(async (context) => { @@ -45,11 +45,10 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to get and set the currently selected range.

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -73,15 +72,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/42-range/set-get-values.yaml b/samples/excel/42-range/set-get-values.yaml index c6647d0ca..5e44ab46d 100644 --- a/samples/excel/42-range/set-get-values.yaml +++ b/samples/excel/42-range/set-get-values.yaml @@ -7,17 +7,17 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - - $("#set-value").on("click", () => tryCatch(setValue)); - $("#set-values").on("click", () => tryCatch(setValues)); - $("#set-formula").on("click", () => tryCatch(setFormula)); - $("#set-formulas").on("click", () => tryCatch(setFormulas)); - $("#set-formulas-r1c1").on("click", () => tryCatch(setFormulasR1C1)); - $("#get-values").on("click", () => tryCatch(getValues)); - $("#get-texts").on("click", () => tryCatch(getTexts)); - $("#get-formulas").on("click", () => tryCatch(getFormulas)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + + document.getElementById("set-value").addEventListener("click", () => tryCatch(setValue)); + document.getElementById("set-values").addEventListener("click", () => tryCatch(setValues)); + document.getElementById("set-formula").addEventListener("click", () => tryCatch(setFormula)); + document.getElementById("set-formulas").addEventListener("click", () => tryCatch(setFormulas)); + document.getElementById("set-formulas-r1c1").addEventListener("click", () => tryCatch(setFormulasR1C1)); + document.getElementById("get-values").addEventListener("click", () => tryCatch(getValues)); + document.getElementById("get-texts").addEventListener("click", () => tryCatch(getTexts)); + document.getElementById("get-formulas").addEventListener("click", () => tryCatch(getFormulas)); async function setValue() { await Excel.run(async (context) => { @@ -173,21 +173,18 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to set and get values and formulas for a range.

    -

    Set up

    -

    Try it out

    - @@ -203,9 +200,7 @@ template: -
    - @@ -218,7 +213,7 @@ template:
    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -230,15 +225,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/42-range/style.yaml b/samples/excel/42-range/style.yaml index f322a2d58..67e2fdaaa 100644 --- a/samples/excel/42-range/style.yaml +++ b/samples/excel/42-range/style.yaml @@ -7,14 +7,14 @@ host: EXCEL api_set: ExcelApi: '1.7' script: - content: |+ - $("#setup").on("click", () => tryCatch(setup)); - $("#add-new-style").on("click", () => tryCatch(addNewStyle)); - $("#apply-new-style").on("click", () => tryCatch(applyNewStyle)); - $("#apply-built-in-style").on("click", () => tryCatch(applyBuiltInStyle)); - $("#get-style-font").on("click", () => tryCatch(getStyleFontProperties)); - $("#get-style-alignment").on("click", () => tryCatch(getStyleAlignmentProperties)); - $("#delete-new-style").on("click", () => tryCatch(deleteNewStyle)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("add-new-style").addEventListener("click", () => tryCatch(addNewStyle)); + document.getElementById("apply-new-style").addEventListener("click", () => tryCatch(applyNewStyle)); + document.getElementById("apply-built-in-style").addEventListener("click", () => tryCatch(applyBuiltInStyle)); + document.getElementById("get-style-font").addEventListener("click", () => tryCatch(getStyleFontProperties)); + document.getElementById("get-style-alignment").addEventListener("click", () => tryCatch(getStyleAlignmentProperties)); + document.getElementById("delete-new-style").addEventListener("click", () => tryCatch(deleteNewStyle)); async function addNewStyle() { await Excel.run(async (context) => { @@ -151,23 +151,18 @@ script: console.error(error); } } - - - language: typescript template: - content: | + content: |-

    This sample shows how to add, apply, get and delete styles.

    -

    Set up

    -

    Try it out

    Add new style will throw an error if the style has already been added.

    @@ -175,31 +170,26 @@ template: Add new style
    -
    -
    -
    -
    -

    Clean up

    Delete new style throws an error if the style doesn't exist (that is, hasn't been added). Deleting the style also causes the other buttons using the style to fail.

    @@ -221,15 +211,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/42-range/used-range.yaml b/samples/excel/42-range/used-range.yaml index 542ddab5b..d1761bbfe 100644 --- a/samples/excel/42-range/used-range.yaml +++ b/samples/excel/42-range/used-range.yaml @@ -7,10 +7,10 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#try-create-chart-from-table").on("click", () => tryCatch(tryCreateChartFromEmptyTable)); - $("#fill-table").on("click", () => tryCatch(fillTable)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("try-create-chart-from-table").addEventListener("click", () => tryCatch(tryCreateChartFromEmptyTable)); + document.getElementById("fill-table").addEventListener("click", () => tryCatch(fillTable)); async function tryCreateChartFromEmptyTable() { await Excel.run(async (context) => { @@ -100,18 +100,16 @@ script: } language: typescript template: - content: | + content: |-

    This sample creates a chart from a table, but only if there's data in the table.

    -

    Set up

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -135,15 +133,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/44-shape/shape-create-and-delete.yaml b/samples/excel/44-shape/shape-create-and-delete.yaml index 524efc7d6..2c07a8a7f 100644 --- a/samples/excel/44-shape/shape-create-and-delete.yaml +++ b/samples/excel/44-shape/shape-create-and-delete.yaml @@ -6,12 +6,12 @@ host: EXCEL api_set: ExcelApi: '1.9' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#createHexagon").on("click", () => tryCatch(createHexagon)); - $("#createTriangle").on("click", () => tryCatch(createTriangle)); - $("#createSmileyFace").on("click", () => tryCatch(createSmileyFace)); - $("#removeAll").on("click", () => tryCatch(removeAll)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("createHexagon").addEventListener("click", () => tryCatch(createHexagon)); + document.getElementById("createTriangle").addEventListener("click", () => tryCatch(createTriangle)); + document.getElementById("createSmileyFace").addEventListener("click", () => tryCatch(createSmileyFace)); + document.getElementById("removeAll").addEventListener("click", () => tryCatch(removeAll)); async function createHexagon() { await Excel.run(async (context) => { @@ -128,15 +128,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/44-shape/shape-groups.yaml b/samples/excel/44-shape/shape-groups.yaml index 743bac069..aa3b2d605 100644 --- a/samples/excel/44-shape/shape-groups.yaml +++ b/samples/excel/44-shape/shape-groups.yaml @@ -6,12 +6,12 @@ host: EXCEL api_set: ExcelApi: '1.9' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#createShapes").on("click", () => tryCatch(createShapes)); - $("#groupShapes").on("click", () => tryCatch(groupShapes)); - $("#moveGroup").on("click", () => tryCatch(moveGroup)); - $("#ungroupShapes").on("click", () => tryCatch(ungroupShapes)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("createShapes").addEventListener("click", () => tryCatch(createShapes)); + document.getElementById("groupShapes").addEventListener("click", () => tryCatch(groupShapes)); + document.getElementById("moveGroup").addEventListener("click", () => tryCatch(moveGroup)); + document.getElementById("ungroupShapes").addEventListener("click", () => tryCatch(ungroupShapes)); async function groupShapes() { await Excel.run(async (context) => { @@ -143,15 +143,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/44-shape/shape-images.yaml b/samples/excel/44-shape/shape-images.yaml index e02210f49..e931e3fd3 100644 --- a/samples/excel/44-shape/shape-images.yaml +++ b/samples/excel/44-shape/shape-images.yaml @@ -6,12 +6,12 @@ host: EXCEL api_set: ExcelApi: '1.9' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); $("#selectedFile").on("change", () => tryCatch(readImageFromFile)); - $("#flipImage").on("click", () => tryCatch(flipImage)); - $("#getImageFormat").on("click", () => tryCatch(getImageFormat)); - $("#writeOutImageString").on("click", () => tryCatch(writeOutImageString)); + document.getElementById("flipImage").addEventListener("click", () => tryCatch(flipImage)); + document.getElementById("getImageFormat").addEventListener("click", () => tryCatch(getImageFormat)); + document.getElementById("writeOutImageString").addEventListener("click", () => tryCatch(writeOutImageString)); async function readImageFromFile() { const myFile = document.getElementById("selectedFile"); @@ -127,15 +127,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/44-shape/shape-lines.yaml b/samples/excel/44-shape/shape-lines.yaml index 396bdf0b5..58577bab0 100644 --- a/samples/excel/44-shape/shape-lines.yaml +++ b/samples/excel/44-shape/shape-lines.yaml @@ -7,17 +7,17 @@ api_set: ExcelApi: '1.9' script: content: |- - $("#setup").on("click", () => tryCatch(setup)); - $("#createShapes").on("click", () => tryCatch(createShapes)); - $("#addStraightLine").on("click", () => tryCatch(addStraightLine)); - $("#addCurvedLine").on("click", () => tryCatch(addCurvedLine)); - $("#arrowLine").on("click", () => tryCatch(arrowLine)); - $("#diamondLine").on("click", () => tryCatch(diamondLine)); - $("#connectStraightLine").on("click", () => tryCatch(connectStraightLine)); - $("#disconnectStraightLine").on("click", () => tryCatch(disconnectStraightLine)); - $("#connectCurvedLine").on("click", () => tryCatch(connectCurvedLine)); - $("#disconnectCurvedLine").on("click", () => tryCatch(disconnectCurvedLine)); - $("#deleteLines").on("click", () => tryCatch(deleteLines)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("createShapes").addEventListener("click", () => tryCatch(createShapes)); + document.getElementById("addStraightLine").addEventListener("click", () => tryCatch(addStraightLine)); + document.getElementById("addCurvedLine").addEventListener("click", () => tryCatch(addCurvedLine)); + document.getElementById("arrowLine").addEventListener("click", () => tryCatch(arrowLine)); + document.getElementById("diamondLine").addEventListener("click", () => tryCatch(diamondLine)); + document.getElementById("connectStraightLine").addEventListener("click", () => tryCatch(connectStraightLine)); + document.getElementById("disconnectStraightLine").addEventListener("click", () => tryCatch(disconnectStraightLine)); + document.getElementById("connectCurvedLine").addEventListener("click", () => tryCatch(connectCurvedLine)); + document.getElementById("disconnectCurvedLine").addEventListener("click", () => tryCatch(disconnectCurvedLine)); + document.getElementById("deleteLines").addEventListener("click", () => tryCatch(deleteLines)); async function addStraightLine() { await Excel.run(async (context) => { @@ -219,13 +219,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.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 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css diff --git a/samples/excel/44-shape/shape-move-and-order.yaml b/samples/excel/44-shape/shape-move-and-order.yaml index a5e6c3d1b..b674aded7 100644 --- a/samples/excel/44-shape/shape-move-and-order.yaml +++ b/samples/excel/44-shape/shape-move-and-order.yaml @@ -6,14 +6,14 @@ host: EXCEL api_set: ExcelApi: '1.9' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#moveLeft").on("click", () => tryCatch(moveLeft)); - $("#moveDown").on("click", () => tryCatch(moveDown)); - $("#rotate").on("click", () => tryCatch(rotate)); - $("#scaleUp").on("click", () => tryCatch(scaleUp)); - $("#moveZOrderDown").on("click", () => tryCatch(moveZOrderDown)); - $("#createShapes").on("click", () => tryCatch(createShapes)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("moveLeft").addEventListener("click", () => tryCatch(moveLeft)); + document.getElementById("moveDown").addEventListener("click", () => tryCatch(moveDown)); + document.getElementById("rotate").addEventListener("click", () => tryCatch(rotate)); + document.getElementById("scaleUp").addEventListener("click", () => tryCatch(scaleUp)); + document.getElementById("moveZOrderDown").addEventListener("click", () => tryCatch(moveZOrderDown)); + document.getElementById("createShapes").addEventListener("click", () => tryCatch(createShapes)); async function moveLeft() { await Excel.run(async (context) => { @@ -158,15 +158,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/44-shape/shape-textboxes.yaml b/samples/excel/44-shape/shape-textboxes.yaml index 12e7bcdee..412051e0e 100644 --- a/samples/excel/44-shape/shape-textboxes.yaml +++ b/samples/excel/44-shape/shape-textboxes.yaml @@ -6,13 +6,13 @@ host: EXCEL api_set: ExcelApi: '1.9' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#createGeometricShape").on("click", () => tryCatch(createGeometricShape)); - $("#createTextbox").on("click", () => tryCatch(createTextbox)); - $("#centerTextbox").on("click", () => tryCatch(centerTextbox)); - $("#autoSizeText").on("click", () => tryCatch(autoSizeText)); - $("#deleteText").on("click", () => tryCatch(deleteText)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("createGeometricShape").addEventListener("click", () => tryCatch(createGeometricShape)); + document.getElementById("createTextbox").addEventListener("click", () => tryCatch(createTextbox)); + document.getElementById("centerTextbox").addEventListener("click", () => tryCatch(centerTextbox)); + document.getElementById("autoSizeText").addEventListener("click", () => tryCatch(autoSizeText)); + document.getElementById("deleteText").addEventListener("click", () => tryCatch(deleteText)); async function createTextbox() { @@ -133,15 +133,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/46-table/add-rows-and-columns-to-a-table.yaml b/samples/excel/46-table/add-rows-and-columns-to-a-table.yaml index 14d38ec3d..4b5cf701f 100644 --- a/samples/excel/46-table/add-rows-and-columns-to-a-table.yaml +++ b/samples/excel/46-table/add-rows-and-columns-to-a-table.yaml @@ -7,12 +7,12 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); - $("#add-row").on("click", () => tryCatch(addRow)); - $("#add-column").on("click", () => tryCatch(addColumn)); - $("#add-calculated-column").on("click", () => tryCatch(addCalculatedColumn)); + document.getElementById("add-row").addEventListener("click", () => tryCatch(addRow)); + document.getElementById("add-column").addEventListener("click", () => tryCatch(addColumn)); + document.getElementById("add-calculated-column").addEventListener("click", () => tryCatch(addCalculatedColumn)); async function addRow() { await Excel.run(async (context) => { @@ -126,18 +126,16 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to add columns and rows to a table.

    -

    Set up

    -

    Try it out

    Press the following buttons in order, so rows and columns of appropriate sizes are added.

    @@ -153,7 +151,7 @@ template:
    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -165,15 +163,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/46-table/convert-range-to-table.yaml b/samples/excel/46-table/convert-range-to-table.yaml index c0e31603c..2476e7886 100644 --- a/samples/excel/46-table/convert-range-to-table.yaml +++ b/samples/excel/46-table/convert-range-to-table.yaml @@ -7,9 +7,9 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#convert-range-to-table").on("click", () => tryCatch(convertRangeToTable)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("convert-range-to-table").addEventListener("click", () => tryCatch(convertRangeToTable)); async function convertRangeToTable() { await Excel.run(async (context) => { @@ -59,18 +59,16 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to convert a range to a table.

    -

    Set up

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -91,15 +89,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css diff --git a/samples/excel/46-table/create-table.yaml b/samples/excel/46-table/create-table.yaml index 2b4f00bc9..7c458bb57 100644 --- a/samples/excel/46-table/create-table.yaml +++ b/samples/excel/46-table/create-table.yaml @@ -7,8 +7,8 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#create-table").on("click", () => tryCatch(createTable)); + content: |- + document.getElementById("create-table").addEventListener("click", () => tryCatch(createTable)); async function createTable() { await Excel.run(async (context) => { @@ -51,11 +51,10 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to create a table.

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -76,15 +75,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/46-table/filter-data.yaml b/samples/excel/46-table/filter-data.yaml index e55d41ca1..781dc4ac6 100644 --- a/samples/excel/46-table/filter-data.yaml +++ b/samples/excel/46-table/filter-data.yaml @@ -7,10 +7,10 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#filter-table").on("click", () => tryCatch(filterTable)); - $("#clear-filters").on("click", () => tryCatch(clearFilters)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("filter-table").addEventListener("click", () => tryCatch(filterTable)); + document.getElementById("clear-filters").addEventListener("click", () => tryCatch(clearFilters)); async function filterTable() { await Excel.run(async (context) => { @@ -87,18 +87,16 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to filter the data in a table using different filter types.

    -

    Set up

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -122,15 +120,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/46-table/formatting.yaml b/samples/excel/46-table/formatting.yaml index 87e629d4f..521c164d6 100644 --- a/samples/excel/46-table/formatting.yaml +++ b/samples/excel/46-table/formatting.yaml @@ -7,9 +7,9 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#format-table").on("click", () => tryCatch(formatTable)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("format-table").addEventListener("click", () => tryCatch(formatTable)); async function formatTable() { await Excel.run(async (context) => { @@ -66,18 +66,16 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to format the different components of a table.

    -

    Set up

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -98,15 +96,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/46-table/get-data-from-table.yaml b/samples/excel/46-table/get-data-from-table.yaml index 7620680aa..118e50b13 100644 --- a/samples/excel/46-table/get-data-from-table.yaml +++ b/samples/excel/46-table/get-data-from-table.yaml @@ -7,9 +7,9 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#get-data-from-table").on("click", () => tryCatch(getData)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("get-data-from-table").addEventListener("click", () => tryCatch(getData)); async function getData() { await Excel.run(async (context) => { @@ -79,29 +79,25 @@ script: } language: typescript template: - content: |+ + content: |-

    This sample shows how to get data from a table and write it to the sheet.

    -

    Set up

    -

    Try it out

    - - language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -113,15 +109,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/46-table/get-visible-range-of-a-filtered-table.yaml b/samples/excel/46-table/get-visible-range-of-a-filtered-table.yaml index 33af4d50e..027847e85 100644 --- a/samples/excel/46-table/get-visible-range-of-a-filtered-table.yaml +++ b/samples/excel/46-table/get-visible-range-of-a-filtered-table.yaml @@ -7,11 +7,11 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: |+ - $("#create-table").on("click", () => tryCatch(createTable)); - $("#filter-table").on("click", () => tryCatch(filterTable)); - $("#get-range").on("click", () => tryCatch(getRange)); - $("#get-visible-range").on("click", () => tryCatch(getVisibleRange)); + content: |- + document.getElementById("create-table").addEventListener("click", () => tryCatch(createTable)); + document.getElementById("filter-table").addEventListener("click", () => tryCatch(filterTable)); + document.getElementById("get-range").addEventListener("click", () => tryCatch(getRange)); + document.getElementById("get-visible-range").addEventListener("click", () => tryCatch(getVisibleRange)); async function getVisibleRange() { await Excel.run(async (context) => { @@ -94,14 +94,12 @@ script: console.error(error); } } - language: typescript template: - content: |+ + content: |-

    This sample shows how to filter the data in a table using different filter types.

    -

    Set up

    -

    Try it out

    - language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -136,15 +132,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/46-table/import-json-data.yaml b/samples/excel/46-table/import-json-data.yaml index 35786a451..30e9bb971 100644 --- a/samples/excel/46-table/import-json-data.yaml +++ b/samples/excel/46-table/import-json-data.yaml @@ -7,8 +7,8 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#import-json-data").on("click", () => tryCatch(importJsonData)); + content: |- + document.getElementById("import-json-data").addEventListener("click", () => tryCatch(importJsonData)); async function importJsonData() { await Excel.run(async (context) => { @@ -113,21 +113,19 @@ script: } language: typescript template: - content: |+ + content: |-

    This sample shows how to import json data into a new table.

    -

    Try it out

    - language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -139,15 +137,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/46-table/resize-table.yaml b/samples/excel/46-table/resize-table.yaml index dd3dbec90..1001e0bf0 100644 --- a/samples/excel/46-table/resize-table.yaml +++ b/samples/excel/46-table/resize-table.yaml @@ -6,9 +6,9 @@ host: EXCEL api_set: ExcelAPI: '1.13' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#resize-table").on("click", () => tryCatch(resizeTable)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("resize-table").addEventListener("click", () => tryCatch(resizeTable)); async function resizeTable() { await Excel.run(async (context) => { @@ -67,14 +67,12 @@ template:

    This sample shows how to resize a table.

    -

    Set up

    -

    Try it out

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -105,15 +103,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/50-workbook/create-get-change-delete-settings.yaml b/samples/excel/50-workbook/create-get-change-delete-settings.yaml index 51f102ebf..6c5dcc12d 100644 --- a/samples/excel/50-workbook/create-get-change-delete-settings.yaml +++ b/samples/excel/50-workbook/create-get-change-delete-settings.yaml @@ -7,10 +7,10 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#create-setting").on("click", () => tryCatch(createSetting)); - $("#change-setting").on("click", () => tryCatch(changeSetting)); - $("#delete-setting").on("click", () => tryCatch(deleteSetting)); + content: |- + document.getElementById("create-setting").addEventListener("click", () => tryCatch(createSetting)); + document.getElementById("change-setting").addEventListener("click", () => tryCatch(changeSetting)); + document.getElementById("delete-setting").addEventListener("click", () => tryCatch(deleteSetting)); async function createSetting() { await Excel.run(async (context) => { @@ -77,7 +77,6 @@ template:

    This sample shows how to create, get, change, and delete settings in the workbook.

    -

    Try it out

    Press the button to create and display a setting.

    @@ -95,7 +94,7 @@ template:
    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -107,15 +106,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/50-workbook/create-workbook.yaml b/samples/excel/50-workbook/create-workbook.yaml index e3df092fb..5bb4f7f73 100644 --- a/samples/excel/50-workbook/create-workbook.yaml +++ b/samples/excel/50-workbook/create-workbook.yaml @@ -7,8 +7,8 @@ host: EXCEL api_set: ExcelApi: '1.8' script: - content: | - $("#create-new-blank-workbook").on("click", () => tryCatch(createBlankWorkbook)); + content: |- + document.getElementById("create-new-blank-workbook").addEventListener("click", () => tryCatch(createBlankWorkbook)); $("#file").on("change", () => tryCatch(createWorkbookFromExisting)); async function createBlankWorkbook() { @@ -51,7 +51,6 @@ template:

    This sample shows how to create a new, empty workbook and how to create a new workbook by copying an existing one.

    -

    Try it out

    Create empty workbook

    @@ -78,15 +77,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/50-workbook/culture-info-date-time.yaml b/samples/excel/50-workbook/culture-info-date-time.yaml index d460268f5..cde8c9289 100644 --- a/samples/excel/50-workbook/culture-info-date-time.yaml +++ b/samples/excel/50-workbook/culture-info-date-time.yaml @@ -6,10 +6,10 @@ host: EXCEL api_set: ExcelAPI: '1.12' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#display-date-time-setting").on("click", () => tryCatch(displayDateTimeSetting)); - $("#write-date-time-setting").on("click", () => tryCatch(writeDateTimeSetting)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("display-date-time-setting").addEventListener("click", () => tryCatch(displayDateTimeSetting)); + document.getElementById("write-date-time-setting").addEventListener("click", () => tryCatch(writeDateTimeSetting)); async function displayDateTimeSetting() { await Excel.run(async (context) => { @@ -116,10 +116,10 @@ template:

    -
    +
    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -131,15 +131,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/50-workbook/culture-info.yaml b/samples/excel/50-workbook/culture-info.yaml index 92c0950c2..8de992922 100644 --- a/samples/excel/50-workbook/culture-info.yaml +++ b/samples/excel/50-workbook/culture-info.yaml @@ -6,11 +6,11 @@ host: EXCEL api_set: ExcelApi: '1.11' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#display-culture-info").on("click", () => tryCatch(displayCultureInfo)); - $("#write-decimal").on("click", () => tryCatch(writeDecimal)); - $("#write-big-number").on("click", () => tryCatch(writeBigNumber)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("display-culture-info").addEventListener("click", () => tryCatch(displayCultureInfo)); + document.getElementById("write-decimal").addEventListener("click", () => tryCatch(writeDecimal)); + document.getElementById("write-big-number").addEventListener("click", () => tryCatch(writeBigNumber)); async function displayCultureInfo() { await Excel.run(async (context) => { @@ -111,14 +111,12 @@ template:

    This sample shows how to apply the cultural settings APIs to help normalize data.

    -

    Setup

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -145,15 +143,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/50-workbook/data-protection.yaml b/samples/excel/50-workbook/data-protection.yaml index a1156ca55..e22d27213 100644 --- a/samples/excel/50-workbook/data-protection.yaml +++ b/samples/excel/50-workbook/data-protection.yaml @@ -6,16 +6,16 @@ host: EXCEL api_set: ExcelApi: '1.7' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#protect-data-in-worksheet").on("click", () => tryCatch(protectDataInWorksheet)); - $("#unprotect-data-in-worksheet").on("click", () => tryCatch(unprotectDataInWorksheet)); - $("#protect-workbook-structure").on("click", () => tryCatch(protectWorkbookStructure)); - $("#unprotect-workbook-structure").on("click", () => tryCatch(unprotectWorkbookStructure)); - $("#password-protect-data-in-worksheet").on("click", () => tryCatch(passwordProtectDataInWorksheet)); - $("#password-unprotect-data-in-worksheet").on("click", () => tryCatch(passwordUnprotectDataInWorksheet)); - $("#password-protect-workbook-structure").on("click", () => tryCatch(passwordProtectWorkbookStructure)); - $("#password-unprotect-workbook-structure").on("click", () => tryCatch(passwordUnprotectWorkbookStructure)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("protect-data-in-worksheet").addEventListener("click", () => tryCatch(protectDataInWorksheet)); + document.getElementById("unprotect-data-in-worksheet").addEventListener("click", () => tryCatch(unprotectDataInWorksheet)); + document.getElementById("protect-workbook-structure").addEventListener("click", () => tryCatch(protectWorkbookStructure)); + document.getElementById("unprotect-workbook-structure").addEventListener("click", () => tryCatch(unprotectWorkbookStructure)); + document.getElementById("password-protect-data-in-worksheet").addEventListener("click", () => tryCatch(passwordProtectDataInWorksheet)); + document.getElementById("password-unprotect-data-in-worksheet").addEventListener("click", () => tryCatch(passwordUnprotectDataInWorksheet)); + document.getElementById("password-protect-workbook-structure").addEventListener("click", () => tryCatch(passwordProtectWorkbookStructure)); + document.getElementById("password-unprotect-workbook-structure").addEventListener("click", () => tryCatch(passwordUnprotectWorkbookStructure)); async function protectDataInWorksheet() { await Excel.run(async (context) => { @@ -178,14 +178,12 @@ template:

    This sample shows how to protect a worksheet's data and the workbook's structure.

    -

    Set up

    -

    Try it out

    Protect without password

    @@ -251,15 +249,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/50-workbook/workbook-built-in-functions.yaml b/samples/excel/50-workbook/workbook-built-in-functions.yaml index e3a260e1c..3490d043b 100644 --- a/samples/excel/50-workbook/workbook-built-in-functions.yaml +++ b/samples/excel/50-workbook/workbook-built-in-functions.yaml @@ -6,10 +6,10 @@ host: EXCEL api_set: ExcelAPI: '1.2' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#call-vlookup").on("click", () => tryCatch(callVlookup)); - $("#nest-functions").on("click", () => tryCatch(nestFunctions)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("call-vlookup").addEventListener("click", () => tryCatch(callVlookup)); + document.getElementById("nest-functions").addEventListener("click", () => tryCatch(nestFunctions)); async function callVlookup() { await Excel.run(async (context) => { @@ -83,7 +83,6 @@ template:

    This sample shows how to use and nest the built-in Excel functions VLOOKUP and SUM. The sample uses VLOOKUP to return data, and then it uses SUM to combine data returned by VLOOKUP.

    -

    Setup

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -113,15 +112,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/50-workbook/workbook-calculation.yaml b/samples/excel/50-workbook/workbook-calculation.yaml index 5c19fab32..2d3b8aaea 100644 --- a/samples/excel/50-workbook/workbook-calculation.yaml +++ b/samples/excel/50-workbook/workbook-calculation.yaml @@ -6,14 +6,14 @@ host: EXCEL api_set: ExcelApi: '1.11' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#register-onCalculated-handler").on("click", () => tryCatch(registerOnCalculatedHandler)); - $("#recalculate-single").on("click", () => tryCatch(recalculateSingle)); - $("#recalculate-column").on("click", () => tryCatch(recalculateColumn)); - $("#manual-calculations").on("click", () => tryCatch(switchToManualCalculations)); - $("#automatic-calculations").on("click", () => tryCatch(switchToAutomaticCalculations)); - $("#force-calculation").on("click", () => tryCatch(forceCalculation)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("register-onCalculated-handler").addEventListener("click", () => tryCatch(registerOnCalculatedHandler)); + document.getElementById("recalculate-single").addEventListener("click", () => tryCatch(recalculateSingle)); + document.getElementById("recalculate-column").addEventListener("click", () => tryCatch(recalculateColumn)); + document.getElementById("manual-calculations").addEventListener("click", () => tryCatch(switchToManualCalculations)); + document.getElementById("automatic-calculations").addEventListener("click", () => tryCatch(switchToAutomaticCalculations)); + document.getElementById("force-calculation").addEventListener("click", () => tryCatch(forceCalculation)); async function registerOnCalculatedHandler() { await Excel.run(async (context) => { let sheet = context.workbook.worksheets.getItem("Sample"); @@ -137,7 +137,6 @@ template:

    This sample shows how to use the calculation APIs.

    -

    Set up

    -

    Manual calculations

    Try switching to manual calculation, then editing the workbook.

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -186,15 +183,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/50-workbook/workbook-get-active-cell.yaml b/samples/excel/50-workbook/workbook-get-active-cell.yaml index 3d452bd3c..66b67a49c 100644 --- a/samples/excel/50-workbook/workbook-get-active-cell.yaml +++ b/samples/excel/50-workbook/workbook-get-active-cell.yaml @@ -6,8 +6,8 @@ host: EXCEL api_set: ExcelApi: '1.7' script: - content: | - $("#get-active-cell").on("click", () => tryCatch(run)); + content: |- + document.getElementById("get-active-cell").addEventListener("click", () => tryCatch(run)); async function run() { await Excel.run(async (context) => { @@ -34,11 +34,10 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to get the active cell of the entire workbook.

    -

    Try it out

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -118,15 +116,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css diff --git a/samples/excel/54-worksheet/add-delete-rename-move-worksheet.yaml b/samples/excel/54-worksheet/add-delete-rename-move-worksheet.yaml index 2bc16606d..1c09d834a 100644 --- a/samples/excel/54-worksheet/add-delete-rename-move-worksheet.yaml +++ b/samples/excel/54-worksheet/add-delete-rename-move-worksheet.yaml @@ -7,11 +7,11 @@ host: EXCEL api_set: ExcelApi: '1.1' script: - content: | - $("#add-worksheet").on("click", () => tryCatch(addWorksheet)); - $("#delete-worksheet").on("click", () => tryCatch(deleteWorksheet)); - $("#rename-worksheet").on("click", () => tryCatch(renameWorksheet)); - $("#move-worksheet").on("click", () => tryCatch(moveWorksheet)); + content: |- + document.getElementById("add-worksheet").addEventListener("click", () => tryCatch(addWorksheet)); + document.getElementById("delete-worksheet").addEventListener("click", () => tryCatch(deleteWorksheet)); + document.getElementById("rename-worksheet").addEventListener("click", () => tryCatch(renameWorksheet)); + document.getElementById("move-worksheet").addEventListener("click", () => tryCatch(moveWorksheet)); async function addWorksheet() { await Excel.run(async (context) => { @@ -103,11 +103,10 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to add, delete, rename and change the position of a worksheet.

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -137,15 +136,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/54-worksheet/gridlines.yaml b/samples/excel/54-worksheet/gridlines.yaml index a33001240..bc359b69d 100644 --- a/samples/excel/54-worksheet/gridlines.yaml +++ b/samples/excel/54-worksheet/gridlines.yaml @@ -7,9 +7,9 @@ host: EXCEL api_set: ExcelApi: '1.8' script: - content: | - $("#hide-gridlines").on("click", () => tryCatch(hideGridlines)); - $("#show-gridlines").on("click", () => tryCatch(showGridlines)); + content: |- + document.getElementById("hide-gridlines").addEventListener("click", () => tryCatch(hideGridlines)); + document.getElementById("show-gridlines").addEventListener("click", () => tryCatch(showGridlines)); async function hideGridlines() { await Excel.run(async (context) => { @@ -41,11 +41,10 @@ script: } language: typescript template: - content: |+ + content: |-

    This sample shows how to hide and show gridlines within a worksheet.

    -

    Try it out

    @@ -57,10 +56,9 @@ template: Show gridlines
    - language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -72,15 +70,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/54-worksheet/list-worksheets.yaml b/samples/excel/54-worksheet/list-worksheets.yaml index 82cf87258..d179c4d50 100644 --- a/samples/excel/54-worksheet/list-worksheets.yaml +++ b/samples/excel/54-worksheet/list-worksheets.yaml @@ -7,8 +7,8 @@ host: EXCEL api_set: ExcelApi: '1.1' script: - content: | - $("#list-worksheets").on("click", () => tryCatch(listWorksheets)); + content: |- + document.getElementById("list-worksheets").addEventListener("click", () => tryCatch(listWorksheets)); async function listWorksheets() { await Excel.run(async (context) => { @@ -40,11 +40,10 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to list the names of the worksheets in the workbook.

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -65,15 +64,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/54-worksheet/reference-worksheets-by-relative-position.yaml b/samples/excel/54-worksheet/reference-worksheets-by-relative-position.yaml index 686ff762f..3bf6f0473 100644 --- a/samples/excel/54-worksheet/reference-worksheets-by-relative-position.yaml +++ b/samples/excel/54-worksheet/reference-worksheets-by-relative-position.yaml @@ -7,10 +7,10 @@ host: EXCEL api_set: ExcelApi: '1.5' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#compare-current-and-previous-year").on("click", () => tryCatch(compareCurrentWithPreviousTax)); - $("#compare-first-and-last-year").on("click", () => tryCatch(compareFirstWithMostRecentTaxRate)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("compare-current-and-previous-year").addEventListener("click", () => tryCatch(compareCurrentWithPreviousTax)); + document.getElementById("compare-first-and-last-year").addEventListener("click", () => tryCatch(compareFirstWithMostRecentTaxRate)); async function setup() { await Excel.run(async (context) => { @@ -119,18 +119,16 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to get a reference to a sheet using its relative worksheet position.

    -

    Set up

    -

    Try it out

    Select any of the three worksheets for 2015, 1016, or 2017 and press the button to compare the tax due on the current sheet with the previous sheet.

    @@ -144,7 +142,7 @@ template:
    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -156,15 +154,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/54-worksheet/tab-color.yaml b/samples/excel/54-worksheet/tab-color.yaml index 8c0b98681..11f1917e8 100644 --- a/samples/excel/54-worksheet/tab-color.yaml +++ b/samples/excel/54-worksheet/tab-color.yaml @@ -7,11 +7,11 @@ host: EXCEL api_set: ExcelApi: '1.7' script: - content: | - $("#set-tab-color-to-hex-color").on("click", () => tryCatch(setTabColorToHexColor)); - $("#set-tab-color-to-named-color").on("click", () => tryCatch(setTabColorToNamedColor)); - $("#set-tab-color-to-default-color").on("click", () => tryCatch(setTabColorToDefaultColor)); - $("#get-tab-color").on("click", () => tryCatch(getTabColor)); + content: |- + document.getElementById("set-tab-color-to-hex-color").addEventListener("click", () => tryCatch(setTabColorToHexColor)); + document.getElementById("set-tab-color-to-named-color").addEventListener("click", () => tryCatch(setTabColorToNamedColor)); + document.getElementById("set-tab-color-to-default-color").addEventListener("click", () => tryCatch(setTabColorToDefaultColor)); + document.getElementById("get-tab-color").addEventListener("click", () => tryCatch(getTabColor)); async function setTabColorToHexColor() { await Excel.run(async (context) => { @@ -68,7 +68,6 @@ template:

    This sample shows how to set and get the tab color of a worksheet.

    -

    Try it out

    @@ -89,7 +88,7 @@ template:
    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -101,15 +100,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/54-worksheet/worksheet-auto-filter.yaml b/samples/excel/54-worksheet/worksheet-auto-filter.yaml index c3659372e..a4e887a21 100644 --- a/samples/excel/54-worksheet/worksheet-auto-filter.yaml +++ b/samples/excel/54-worksheet/worksheet-auto-filter.yaml @@ -6,14 +6,14 @@ host: EXCEL api_set: ExcelApi: '1.9' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#add-percent-auto-filter").on("click", () => tryCatch(addPercentAutoFilter)); - $("#add-custom-auto-filter").on("click", () => tryCatch(addCustomAutoFilter)); - $("#randomize-data").on("click", () => tryCatch(randomizeData)); - $("#refresh-auto-filter").on("click", () => tryCatch(refreshAutoFilter)); - $("#clear-single-auto-filter").on("click", () => tryCatch(clearSingleAutoFilter)); - $("#remove-all-auto-filters").on("click", () => tryCatch(removeAllAutoFilters)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("add-percent-auto-filter").addEventListener("click", () => tryCatch(addPercentAutoFilter)); + document.getElementById("add-custom-auto-filter").addEventListener("click", () => tryCatch(addCustomAutoFilter)); + document.getElementById("randomize-data").addEventListener("click", () => tryCatch(randomizeData)); + document.getElementById("refresh-auto-filter").addEventListener("click", () => tryCatch(refreshAutoFilter)); + document.getElementById("clear-single-auto-filter").addEventListener("click", () => tryCatch(clearSingleAutoFilter)); + document.getElementById("remove-all-auto-filters").addEventListener("click", () => tryCatch(removeAllAutoFilters)); async function addPercentAutoFilter() { // This function adds a percentage AutoFilter to the active worksheet @@ -156,14 +156,12 @@ template:

    This sample shows how to work with an AutoFilter on a worksheet.

    -

    Setup

    -

    Try it out

    Add two filters. One shows only the top half of sales and the other shows only fruits that end with the letter 'e'.

    @@ -194,7 +192,7 @@ template:
    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -206,15 +204,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/54-worksheet/worksheet-copy.yaml b/samples/excel/54-worksheet/worksheet-copy.yaml index 3e69dfe43..1fe3d9318 100644 --- a/samples/excel/54-worksheet/worksheet-copy.yaml +++ b/samples/excel/54-worksheet/worksheet-copy.yaml @@ -6,9 +6,9 @@ host: EXCEL api_set: ExcelApi: '1.7' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#copy-worksheet").on("click", () => tryCatch(run)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("copy-worksheet").addEventListener("click", () => tryCatch(run)); async function run() { await Excel.run(async (context) => { @@ -69,14 +69,12 @@ template:

    This sample shows how to copy a worksheet.

    -

    Set up

    -

    Try it out

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -171,15 +169,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/54-worksheet/worksheet-page-layout.yaml b/samples/excel/54-worksheet/worksheet-page-layout.yaml index 597ad0518..3d4a283ae 100644 --- a/samples/excel/54-worksheet/worksheet-page-layout.yaml +++ b/samples/excel/54-worksheet/worksheet-page-layout.yaml @@ -6,15 +6,15 @@ host: EXCEL api_set: ExcelApi: '1.9' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#setPageBreaks").on("click", () => tryCatch(setPageBreaks)); - $("#center").on("click", () => tryCatch(center)); - $("#setBlackAndWhite").on("click", () => tryCatch(setBlackAndWhite)); - $("#setPrintTitleRow").on("click", () => tryCatch(setPrintTitleRow)); - $("#setPrintArea").on("click", () => tryCatch(setPrintArea)); - $("#changeOrientation").on("click", () => tryCatch(changeOrientation)); - $("#setZoom").on("click", () => tryCatch(setZoom)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("setPageBreaks").addEventListener("click", () => tryCatch(setPageBreaks)); + document.getElementById("center").addEventListener("click", () => tryCatch(center)); + document.getElementById("setBlackAndWhite").addEventListener("click", () => tryCatch(setBlackAndWhite)); + document.getElementById("setPrintTitleRow").addEventListener("click", () => tryCatch(setPrintTitleRow)); + document.getElementById("setPrintArea").addEventListener("click", () => tryCatch(setPrintArea)); + document.getElementById("changeOrientation").addEventListener("click", () => tryCatch(changeOrientation)); + document.getElementById("setZoom").addEventListener("click", () => tryCatch(setZoom)); async function setPageBreaks() { await Excel.run(async (context) => { @@ -202,15 +202,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/54-worksheet/worksheet-range-cell.yaml b/samples/excel/54-worksheet/worksheet-range-cell.yaml index b9a2c8040..a26ccb9e3 100644 --- a/samples/excel/54-worksheet/worksheet-range-cell.yaml +++ b/samples/excel/54-worksheet/worksheet-range-cell.yaml @@ -7,13 +7,13 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); - $("#get-used-range").on("click", () => tryCatch(getUsedRange)); - $("#get-entire-range").on("click", () => tryCatch(getEntireRange)); - $("#get-range").on("click", () => tryCatch(getRange)); - $("#get-cell").on("click", () => tryCatch(getCell)); + document.getElementById("get-used-range").addEventListener("click", () => tryCatch(getUsedRange)); + document.getElementById("get-entire-range").addEventListener("click", () => tryCatch(getEntireRange)); + document.getElementById("get-range").addEventListener("click", () => tryCatch(getRange)); + document.getElementById("get-cell").addEventListener("click", () => tryCatch(getCell)); async function getUsedRange() { await Excel.run(async (context) => { @@ -101,18 +101,16 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to get a range or a cell in a worksheet.

    -

    Set up

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -142,15 +140,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/54-worksheet/worksheet-visibility.yaml b/samples/excel/54-worksheet/worksheet-visibility.yaml index 821aa6009..928d8a2fe 100644 --- a/samples/excel/54-worksheet/worksheet-visibility.yaml +++ b/samples/excel/54-worksheet/worksheet-visibility.yaml @@ -7,9 +7,9 @@ host: EXCEL api_set: ExcelApi: '1.1' script: - content: | - $("#hide-worksheet").on("click", () => tryCatch(hideWorksheet)); - $("#unhide-worksheet").on("click", () => tryCatch(unhideWorksheet)); + content: |- + document.getElementById("hide-worksheet").addEventListener("click", () => tryCatch(hideWorksheet)); + document.getElementById("unhide-worksheet").addEventListener("click", () => tryCatch(unhideWorksheet)); async function hideWorksheet() { await Excel.run(async (context) => { @@ -82,18 +82,16 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to change the visbility of a worksheet.

    -

    Set up

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -117,15 +115,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/90-scenarios/currency-converter.yaml b/samples/excel/90-scenarios/currency-converter.yaml index f5cf82a87..a8ba2aa1b 100644 --- a/samples/excel/90-scenarios/currency-converter.yaml +++ b/samples/excel/90-scenarios/currency-converter.yaml @@ -7,7 +7,7 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | + content: |- /* * Copyright (c) Riwut Libinuko. All rights reserved. Licensed under the MIT license. */ @@ -17,8 +17,8 @@ script: let tableSetup: Record = {}; - $("#convert").on("click", () => tryCatch(convert)); - $("#setup").on("click", () => tryCatch(setupSample)); + document.getElementById("convert").addEventListener("click", () => tryCatch(convert)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setupSample)); /** Main converting function **/ async function convert() { @@ -141,25 +141,22 @@ script: } language: typescript template: - content: | + content: |-

    Simple Currency Converter

    -

    Simple currency converter shows how to read data from a transaction table, and uses currency converter API to calculate the amount in base currency.

    The code also performs table validation and identify if the table has predefined headers. You can try to to rearrange the the column, and see by yourself!

    -

    Set up

    -

    Try it out

    The currency conversion is provided by exchangeratesapi.io which uses @@ -183,12 +180,8 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.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 - moment@2.18.1 + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css + moment@2.18.1 moment-msdate@0.2.2 \ No newline at end of file diff --git a/samples/excel/90-scenarios/multiple-property-set.yaml b/samples/excel/90-scenarios/multiple-property-set.yaml index 7efba6254..e74a52b5c 100644 --- a/samples/excel/90-scenarios/multiple-property-set.yaml +++ b/samples/excel/90-scenarios/multiple-property-set.yaml @@ -7,10 +7,10 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#set-multiple-properties-with-object").on("click", () => tryCatch(setMultiplePropertiesWithObject)); - $("#copy-properties-from-range").on("click", () => tryCatch(copyPropertiesFromRange)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("set-multiple-properties-with-object").addEventListener("click", () => tryCatch(setMultiplePropertiesWithObject)); + document.getElementById("copy-properties-from-range").addEventListener("click", () => tryCatch(copyPropertiesFromRange)); async function setMultiplePropertiesWithObject() { await Excel.run(async (context) => { @@ -94,18 +94,16 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to format a range.

    -

    Set up

    -

    Try it out

    -

    Setup

    -

    Performance settings

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -129,18 +127,13 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - core-js@2.4.1/client/core.min.js - @types/core-js + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - jquery@3.1.1 - @types/jquery@3.3.1 - moment@2.18.1 + moment@2.18.1 moment-msdate@0.2.2 \ No newline at end of file diff --git a/samples/excel/99-just-for-fun/color-wheel.yaml b/samples/excel/99-just-for-fun/color-wheel.yaml index 6417065de..456c044bc 100644 --- a/samples/excel/99-just-for-fun/color-wheel.yaml +++ b/samples/excel/99-just-for-fun/color-wheel.yaml @@ -7,9 +7,9 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#wheel").on("click", wheelGo); - $("#stop").on("click", wheelStop); + content: |- + document.getElementById("wheel").addEventListener("click", wheelGo); + document.getElementById("stop").addEventListener("click", wheelStop); let isStopped: boolean @@ -111,7 +111,7 @@ script: } language: typescript template: - content: |+ + content: |-

    Spin the rainbow wheel

    @@ -124,10 +124,9 @@ template: - language: html style: - content: | + content: |- h2:not(:first-child) { margin-top: 35px; } @@ -144,15 +143,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/99-just-for-fun/gradient.yaml b/samples/excel/99-just-for-fun/gradient.yaml index 11a3b84fa..09b075b38 100644 --- a/samples/excel/99-just-for-fun/gradient.yaml +++ b/samples/excel/99-just-for-fun/gradient.yaml @@ -12,7 +12,7 @@ script: // Set up the click handler: const $drawButton = $("#draw-gradient").on("click", drawGradient); - $("#random").on("click", randomizeColors); + document.getElementById("random").addEventListener("click", randomizeColors); /** Click-handler for drawing the gradient */ async function drawGradient() { @@ -133,7 +133,6 @@ template:

    Color configuration

    -
    Top left
    @@ -151,20 +150,16 @@ template: Bottom right
    - -

    Size (width x height)

    - -
    Uses the Spectrum color picker, and the TinyColor libraries. @@ -212,19 +207,14 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - core-js@2.4.1/client/core.min.js - @types/core-js + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - jquery@3.1.1 - @types/jquery@3.3.1 - tinycolor2@1.4.1/tinycolor.js + https://unpkg.com/tinycolor2@1.4.1/tinycolor.js @types/tinycolor2 - spectrum-colorpicker@1.8.0/spectrum.js - spectrum-colorpicker@1.8.0/spectrum.css - @types/spectrum + https://unpkg.com/spectrum-colorpicker@1.8.0/spectrum.js + https://unpkg.com/spectrum-colorpicker@1.8.0/spectrum.css + @types/spectrum \ No newline at end of file diff --git a/samples/excel/99-just-for-fun/path-finder-game.yaml b/samples/excel/99-just-for-fun/path-finder-game.yaml index 0602b549d..6dd28e9a0 100644 --- a/samples/excel/99-just-for-fun/path-finder-game.yaml +++ b/samples/excel/99-just-for-fun/path-finder-game.yaml @@ -7,9 +7,9 @@ host: EXCEL api_set: ExcelApi: '1.4' script: - content: | - $("#setup").on("click", setup); - $("#repeat").on("click", repeat); + content: |- + document.getElementById("setup").addEventListener("click", setup); + document.getElementById("repeat").addEventListener("click", repeat); const $pruneTheGrid = $("#step-by-step").on("click", pruneTheGrid); const $allAtOnce = $("#all-at-once").on("click", allAtOnce); @@ -174,11 +174,10 @@ script: } language: typescript template: - content: | + content: |-

    Check whether there is a path from left to right, moving forward one cell at a time (and only straight or diagonally).

    -

    Set up

    Circle density (%)
    @@ -191,14 +190,12 @@ template:

    -

    Find the path:


    - @@ -221,15 +218,9 @@ style: margin-bottom: 0; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/99-just-for-fun/patterns.yaml b/samples/excel/99-just-for-fun/patterns.yaml index e29e1f0a0..8e0f74ec5 100644 --- a/samples/excel/99-just-for-fun/patterns.yaml +++ b/samples/excel/99-just-for-fun/patterns.yaml @@ -8,9 +8,9 @@ api_set: ExcelApi: '1.4' script: content: |- - $("#squares").on("click", () => tryCatch(drawSquares)); - $("#spiral").on("click", () => tryCatch(drawSpiral)); - $("#decoration").on("click", () => tryCatch(drawDecoration)); + document.getElementById("squares").addEventListener("click", () => tryCatch(drawSquares)); + document.getElementById("spiral").addEventListener("click", () => tryCatch(drawSpiral)); + document.getElementById("decoration").addEventListener("click", () => tryCatch(drawDecoration)); async function drawSquares() { await Excel.run(async (context) => { @@ -156,30 +156,26 @@ script: template: content: |-

    Draw colorful patterns

    -
    Choose size:
    -


    -

    -
    language: html style: - content: | + content: |- h2:not(:first-child) { margin-top: 35px; } @@ -188,15 +184,9 @@ style: width: 100%; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/excel/99-just-for-fun/tetrominos.yaml b/samples/excel/99-just-for-fun/tetrominos.yaml index 7f025bfd2..20b36299b 100644 --- a/samples/excel/99-just-for-fun/tetrominos.yaml +++ b/samples/excel/99-just-for-fun/tetrominos.yaml @@ -14,7 +14,7 @@ script: }); $("#selectedFile").on("change", () => tryCatch(readImageFromFile)); - $("#focusButton").on("click", () => tryCatch(focus)); + document.getElementById("focusButton").addEventListener("click", () => tryCatch(focus)); let backgroundPicture = getDefaultBackgroundPicture(); @@ -649,7 +649,6 @@ template:

    This sample lets you repeatedly stack tetrominos, which are represented by Shapes. Select a background image (or leave blank for the default) and Start!. The controls will then be displayed.

    -

    Select Background Image

    @@ -784,17 +783,12 @@ style: border: 1px solid black; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - core-js@2.4.1/client/core.min.js - @types/core-js + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - jquery@3.1.1 - @types/jquery@3.3.1 - https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js + https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js \ No newline at end of file diff --git a/samples/excel/default.yaml b/samples/excel/default.yaml index 27bfc38f6..c68f87b37 100644 --- a/samples/excel/default.yaml +++ b/samples/excel/default.yaml @@ -6,8 +6,8 @@ host: EXCEL api_set: ExcelApi: '1.1' script: - content: | - $("#run").on("click", () => tryCatch(run)); + content: |- + document.getElementById("run").addEventListener("click", () => tryCatch(run)); async function run() { await Excel.run(async (context) => { @@ -31,7 +31,7 @@ script: } language: typescript template: - content: | + content: |- @@ -49,15 +49,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/onenote/default.yaml b/samples/onenote/default.yaml index 6c419de50..603dd6062 100644 --- a/samples/onenote/default.yaml +++ b/samples/onenote/default.yaml @@ -6,8 +6,8 @@ host: ONENOTE api_set: OneNoteApi: '1.1' script: - content: | - $("#run").on("click", () => tryCatch(run)); + content: |- + document.getElementById("run").addEventListener("click", () => tryCatch(run)); async function run() { await OneNote.run(async (context) => { @@ -29,7 +29,7 @@ script: } language: typescript template: - content: | + content: |- @@ -47,15 +47,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/10-roaming-settings/roaming-settings.yaml b/samples/outlook/10-roaming-settings/roaming-settings.yaml index 30d3b22fa..0e1bc28f1 100644 --- a/samples/outlook/10-roaming-settings/roaming-settings.yaml +++ b/samples/outlook/10-roaming-settings/roaming-settings.yaml @@ -5,10 +5,10 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#get").on("click", get); - $("#set").on("click", set); - $("#save").on("click", save); + content: |- + document.getElementById("get").addEventListener("click", get); + document.getElementById("set").addEventListener("click", set); + document.getElementById("save").addEventListener("click", save); function get() { const settingName = $("#settingName").val(); @@ -36,11 +36,10 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to set, save, and get add-in properties that can be accessed the next time the add-in is opened.

    -

    Try it out

    @@ -75,15 +74,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/15-item-custom-properties/load-set-get-save.yaml b/samples/outlook/15-item-custom-properties/load-set-get-save.yaml index c772c4025..8cd1a84f4 100644 --- a/samples/outlook/15-item-custom-properties/load-set-get-save.yaml +++ b/samples/outlook/15-item-custom-properties/load-set-get-save.yaml @@ -5,15 +5,15 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | + content: |- let customProps; - $("#load").on("click", load); - $("#get").on("click", get); - $("#get-all").on("click", getAll); - $("#set").on("click", set); - $("#remove").on("click", remove); - $("#save").on("click", save); + document.getElementById("load").addEventListener("click", load); + document.getElementById("get").addEventListener("click", get); + document.getElementById("get-all").addEventListener("click", getAll); + document.getElementById("set").addEventListener("click", set); + document.getElementById("remove").addEventListener("click", remove); + document.getElementById("save").addEventListener("click", save); function load() { Office.context.mailbox.item.loadCustomPropertiesAsync((result) => { @@ -73,7 +73,6 @@ template:

    This sample shows how to set, save, and get the custom per-item properties of an add-in.

    -

    Try it out

    First load the This sample adds an inline Base64-encoded image to the body of the message or appointment being composed.

    Required mode: Compose

    -

    Try it out

    -

    Try it out

    Important: To use appendOnSendAsync, you must set AppendOnSend as an extended permission in the ExtendedPermissions manifest element. To learn more about append-on-send and its configuration, see Implement append-on-send in your Outlook add-in.

    @@ -65,15 +64,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/20-item-body/get-body-format.yaml b/samples/outlook/20-item-body/get-body-format.yaml index af52a05ae..b1cbc7506 100644 --- a/samples/outlook/20-item-body/get-body-format.yaml +++ b/samples/outlook/20-item-body/get-body-format.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#get-body-format").on("click", getBodyFormat); + content: |- + document.getElementById("get-body-format").addEventListener("click", getBodyFormat); function getBodyFormat() { // Get the mail item's body format (plain text or HTML) and log it to the console. @@ -27,7 +27,6 @@ template:

    This sample gets the message or appointment's body format (plain text or HTML).

    Required mode: Compose

    -

    Try it out

    -

    Try it out

    Select text in the item body or subject then push the Get selected text button.

    @@ -49,15 +48,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/20-item-body/prepend-text-on-send.yaml b/samples/outlook/20-item-body/prepend-text-on-send.yaml index f20f8639d..32cb1a236 100644 --- a/samples/outlook/20-item-body/prepend-text-on-send.yaml +++ b/samples/outlook/20-item-body/prepend-text-on-send.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.13' script: - content: | - $("#prepend-on-send").on("click", prependOnSend); + content: |- + document.getElementById("prepend-on-send").addEventListener("click", prependOnSend); function prependOnSend() { // This snippet prepends text to the beginning of the message or appointment's body once it's sent. @@ -38,7 +38,6 @@ template:

    This sample prepends text to the beginning of the message or appointment's body once it's sent.

    Required mode: Compose

    -

    Try it out

    Important: To use prependOnSendAsync, you must set AppendOnSend as an extended permission in the ExtendedPermissions manifest element. appendOnSendAsync and prependOnSendAsync both use the AppendOnSend extended permission. To learn more about prepend-on-send, see Prepend or append content to a message or appointment body on send.

    @@ -65,15 +64,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/20-item-body/prepend-text-to-item-body.yaml b/samples/outlook/20-item-body/prepend-text-to-item-body.yaml index ab8438edf..eae94ef5a 100644 --- a/samples/outlook/20-item-body/prepend-text-to-item-body.yaml +++ b/samples/outlook/20-item-body/prepend-text-to-item-body.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#prepend").on("click", prependText); + content: |- + document.getElementById("prepend").addEventListener("click", prependText); function prependText() { /* This snippet adds text to the beginning of the message or appointment's body. @@ -41,7 +41,6 @@ template:

    This sample adds text to the beginning of the message or appointment's body.

    Required mode: Compose

    -

    Try it out

    @@ -67,15 +66,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/20-item-body/replace-selected-text.yaml b/samples/outlook/20-item-body/replace-selected-text.yaml index 06ea6cb38..cdd8b6b04 100644 --- a/samples/outlook/20-item-body/replace-selected-text.yaml +++ b/samples/outlook/20-item-body/replace-selected-text.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#replace-selection").on("click", replaceSelection); + content: |- + document.getElementById("replace-selection").addEventListener("click", replaceSelection); function replaceSelection() { /* This snippet replaces selected text in a message or appointment's body with specified text. @@ -41,7 +41,6 @@ template:

    This sample replaces selected text in a message or appointment's body with specified text.

    Required mode: Compose

    -

    Try it out

      @@ -71,15 +70,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/25-item-save-and-close/close-async.yaml b/samples/outlook/25-item-save-and-close/close-async.yaml index 674ab7b12..109be2bbd 100644 --- a/samples/outlook/25-item-save-and-close/close-async.yaml +++ b/samples/outlook/25-item-save-and-close/close-async.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.14' script: - content: | - $("#close-async").on("click", closeAsync); + content: |- + document.getElementById("close-async").addEventListener("click", closeAsync); function closeAsync() { // This snippet closes the current message being composed and discards any unsaved changes when the optional property, discardItem, is set to true. @@ -24,12 +24,11 @@ script: } language: typescript template: - content: | + content: |-

      This sample shows how to close the current message being composed and discard any unsaved changes.

      Required mode: Message Compose

      -

      Try it out

      language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -39,15 +38,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css diff --git a/samples/outlook/25-item-save-and-close/save.yaml b/samples/outlook/25-item-save-and-close/save.yaml index cc5e032c8..0acf244d8 100644 --- a/samples/outlook/25-item-save-and-close/save.yaml +++ b/samples/outlook/25-item-save-and-close/save.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.3' script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { Office.context.mailbox.item.saveAsync(function (result) { @@ -21,11 +21,10 @@ script: } language: typescript template: - content: | + content: |-

      This sample shows how to save the item in compose mode.

      -

      Try it out

      language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -46,15 +45,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/30-recipients-and-attendees/get-all-attendees.yaml b/samples/outlook/30-recipients-and-attendees/get-all-attendees.yaml index a586403fb..0854d08d0 100644 --- a/samples/outlook/30-recipients-and-attendees/get-all-attendees.yaml +++ b/samples/outlook/30-recipients-and-attendees/get-all-attendees.yaml @@ -7,7 +7,7 @@ api_set: Mailbox: '1.7' script: content: |- - $("#get-attendees").on("click", getAttendees); + document.getElementById("get-attendees").addEventListener("click", getAttendees); function getAttendees() { // This snippet gets an appointment's required and optional attendees and groups them by their response. @@ -96,7 +96,6 @@ template:

      This sample shows how to get all appointment attendees and organize them by their response.

      Required mode: Appointment Organizer, Appointment Read

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -

    Try it out

    @@ -72,15 +71,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml b/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml index 5d183929f..a550e0b14 100644 --- a/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml +++ b/samples/outlook/30-recipients-and-attendees/get-set-cc-message-compose.yaml @@ -6,9 +6,9 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#get-cc").on("click", getCc); - $("#set-cc").on("click", setCc); + content: |- + document.getElementById("get-cc").addEventListener("click", getCc); + document.getElementById("set-cc").addEventListener("click", setCc); function getCc() { Office.context.mailbox.item.cc.getAsync(function(asyncResult) { @@ -44,7 +44,6 @@ template:

    This sample shows how to get and set the Cc line recipients of the email.

    Required mode: Message Compose

    -

    Try it out

    @@ -72,15 +71,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml b/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml index 6b487a1d6..e8f961373 100644 --- a/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml +++ b/samples/outlook/30-recipients-and-attendees/get-set-optional-attendees-appointment-organizer.yaml @@ -6,9 +6,9 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#get-optional-attendees").on("click", getOptionalAttendees); - $("#set-optional-attendees").on("click", setOptionalAttendees); + content: |- + document.getElementById("get-optional-attendees").addEventListener("click", getOptionalAttendees); + document.getElementById("set-optional-attendees").addEventListener("click", setOptionalAttendees); function getOptionalAttendees() { Office.context.mailbox.item.optionalAttendees.getAsync(function(asyncResult) { @@ -50,7 +50,6 @@ template:

    This sample shows how to get and set the optional attendees.

    Required mode: Appointment Organizer

    -

    Try it out

    @@ -78,15 +77,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml b/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml index c6d80e8e3..c7deebc20 100644 --- a/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml +++ b/samples/outlook/30-recipients-and-attendees/get-set-required-attendees-appointment-organizer.yaml @@ -6,9 +6,9 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#get-required-attendees").on("click", getRequiredAttendees); - $("#set-required-attendees").on("click", setRequiredAttendees); + content: |- + document.getElementById("get-required-attendees").addEventListener("click", getRequiredAttendees); + document.getElementById("set-required-attendees").addEventListener("click", setRequiredAttendees); function getRequiredAttendees() { Office.context.mailbox.item.requiredAttendees.getAsync(function(asyncResult) { @@ -50,7 +50,6 @@ template:

    This sample shows how to get and set the required attendees.

    Required mode: Appointment Organizer

    -

    Try it out

    @@ -78,15 +77,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml b/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml index beba09e5e..3164d9d20 100644 --- a/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml +++ b/samples/outlook/30-recipients-and-attendees/get-set-to-message-compose.yaml @@ -6,9 +6,9 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#get-to").on("click", getTo); - $("#set-to").on("click", setTo); + content: |- + document.getElementById("get-to").addEventListener("click", getTo); + document.getElementById("set-to").addEventListener("click", setTo); function getTo() { Office.context.mailbox.item.to.getAsync(function(asyncResult) { @@ -44,7 +44,6 @@ template:

    This sample shows how to get and set the To line recipients of the email.

    Required mode: Message Compose

    -

    Try it out

    @@ -72,15 +71,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/30-recipients-and-attendees/get-to-message-read.yaml b/samples/outlook/30-recipients-and-attendees/get-to-message-read.yaml index 67512875c..37807769a 100644 --- a/samples/outlook/30-recipients-and-attendees/get-to-message-read.yaml +++ b/samples/outlook/30-recipients-and-attendees/get-to-message-read.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#get-to").on("click", getTo); + content: |- + document.getElementById("get-to").addEventListener("click", getTo); function getTo() { const msgTo = Office.context.mailbox.item.to; @@ -58,7 +58,6 @@ template:

    This sample shows how to get the To line recipients of the email.

    Required mode: Message Read

    -

    Try it out

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -52,15 +51,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/45-categories/work-with-categories.yaml b/samples/outlook/45-categories/work-with-categories.yaml index 1a27e0edc..6fcbcedc6 100644 --- a/samples/outlook/45-categories/work-with-categories.yaml +++ b/samples/outlook/45-categories/work-with-categories.yaml @@ -6,10 +6,10 @@ host: OUTLOOK api_set: Mailbox: '1.8' script: - content: | - $("#get-categories").on("click", getCategories); - $("#add-categories").on("click", addCategories); - $("#remove-categories").on("click", removeCategories); + content: |- + document.getElementById("get-categories").addEventListener("click", getCategories); + document.getElementById("add-categories").addEventListener("click", addCategories); + document.getElementById("remove-categories").addEventListener("click", removeCategories); function getCategories() { Office.context.mailbox.item.categories.getAsync(function(asyncResult) { @@ -81,7 +81,6 @@ template:

    This sample shows how to get, add, and remove categories assigned to the item.

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -
    +
    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -61,15 +60,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/55-display-items/display-new-appointment.yaml b/samples/outlook/55-display-items/display-new-appointment.yaml index 60c7f18ef..7b55e2860 100644 --- a/samples/outlook/55-display-items/display-new-appointment.yaml +++ b/samples/outlook/55-display-items/display-new-appointment.yaml @@ -6,9 +6,9 @@ host: OUTLOOK api_set: Mailbox: '1.9' script: - content: | - $("#run").on("click", run); - $("#run-async").on("click", runAsync); + content: |- + document.getElementById("run").addEventListener("click", run); + document.getElementById("run-async").addEventListener("click", runAsync); function run() { const start = new Date(); @@ -57,7 +57,6 @@ template:

    This sample shows how to display a new appointment and populate attendees, location, body, and a few other properties.

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -81,15 +80,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/55-display-items/display-new-message.yaml b/samples/outlook/55-display-items/display-new-message.yaml index 2cb258e7c..7ec9c407c 100644 --- a/samples/outlook/55-display-items/display-new-message.yaml +++ b/samples/outlook/55-display-items/display-new-message.yaml @@ -6,9 +6,9 @@ host: OUTLOOK api_set: Mailbox: '1.9' script: - content: | - $("#run").on("click", run); - $("#run-async").on("click", runAsync); + content: |- + document.getElementById("run").addEventListener("click", run); + document.getElementById("run-async").addEventListener("click", runAsync); function run() { Office.context.mailbox.displayNewMessageForm({ @@ -52,11 +52,10 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to display a new message, populate recipients, subject, and body, and add an inline image attachment.

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -80,15 +79,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/55-display-items/display-reply-forms.yaml b/samples/outlook/55-display-items/display-reply-forms.yaml index ace941dc9..4f8dd7af6 100644 --- a/samples/outlook/55-display-items/display-reply-forms.yaml +++ b/samples/outlook/55-display-items/display-reply-forms.yaml @@ -6,11 +6,11 @@ host: OUTLOOK api_set: Mailbox: '1.9' script: - content: | - $("#display-reply-form").on("click", displayReplyForm); - $("#display-reply-form-async").on("click", displayReplyFormAsync); - $("#display-reply-all-form").on("click", displayReplyAllForm); - $("#display-reply-all-form-async").on("click", displayReplyAllFormAsync); + content: |- + document.getElementById("display-reply-form").addEventListener("click", displayReplyForm); + document.getElementById("display-reply-form-async").addEventListener("click", displayReplyFormAsync); + document.getElementById("display-reply-all-form").addEventListener("click", displayReplyAllForm); + document.getElementById("display-reply-all-form-async").addEventListener("click", displayReplyAllFormAsync); // The async version is only available starting with requirement set 1.9. function displayReplyForm() { @@ -42,7 +42,6 @@ template:

    This sample shows how to create reply or reply-all messages and populate the body of the reply.

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -73,15 +72,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/55-display-items/display-reply-with-attachments.yaml b/samples/outlook/55-display-items/display-reply-with-attachments.yaml index 91b1ae33b..f6a140f8e 100644 --- a/samples/outlook/55-display-items/display-reply-with-attachments.yaml +++ b/samples/outlook/55-display-items/display-reply-with-attachments.yaml @@ -6,11 +6,11 @@ host: OUTLOOK api_set: Mailbox: '1.9' script: - content: | - $("#reply").on("click", reply); - $("#reply-async").on("click", replyAsync); - $("#reply-all").on("click", replyAll); - $("#reply-all-async").on("click", replyAllAsync); + content: |- + document.getElementById("reply").addEventListener("click", reply); + document.getElementById("reply-async").addEventListener("click", replyAsync); + document.getElementById("reply-all").addEventListener("click", replyAll); + document.getElementById("reply-all-async").addEventListener("click", replyAllAsync); function reply() { // Define attachments. @@ -172,7 +172,6 @@ template:

    This sample shows how to create a reply message and add an inline image attachment and an item attachment.

    Required mode: Compose

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -

    Try it out on a message or appointment from a shared folder or shared mailbox.

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -53,15 +52,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/70-mime-headers/get-internet-headers-message-read.yaml b/samples/outlook/70-mime-headers/get-internet-headers-message-read.yaml index af91e6505..2c6432fe6 100644 --- a/samples/outlook/70-mime-headers/get-internet-headers-message-read.yaml +++ b/samples/outlook/70-mime-headers/get-internet-headers-message-read.yaml @@ -5,8 +5,8 @@ host: OUTLOOK api_set: Mailbox: '1.8' script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { Office.context.mailbox.item.getAllInternetHeadersAsync(function (asyncResult) { @@ -61,15 +61,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml b/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml index 9b93155a8..9a82619a5 100644 --- a/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml +++ b/samples/outlook/70-mime-headers/manage-custom-internet-headers-message-compose.yaml @@ -5,10 +5,10 @@ host: OUTLOOK api_set: Mailbox: '1.8' script: - content: | - $("#set-custom-headers").on("click", setCustomHeaders); - $("#get-selected-custom-headers").on("click", getSelectedCustomHeaders); - $("#remove-selected-custom-headers").on("click", removeSelectedCustomHeaders); + content: |- + document.getElementById("set-custom-headers").addEventListener("click", setCustomHeaders); + document.getElementById("get-selected-custom-headers").addEventListener("click", getSelectedCustomHeaders); + document.getElementById("remove-selected-custom-headers").addEventListener("click", removeSelectedCustomHeaders); // Set custom internet headers. function setCustomHeaders() { @@ -92,15 +92,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/75-regex-matches/contextual.yaml b/samples/outlook/75-regex-matches/contextual.yaml index 40918affc..f83c31234 100644 --- a/samples/outlook/75-regex-matches/contextual.yaml +++ b/samples/outlook/75-regex-matches/contextual.yaml @@ -5,10 +5,10 @@ host: OUTLOOK api_set: Mailbox: '1.6' script: - content: | - $("#getRegExMatches").on("click", getRegExMatches); - $("#getRegExMatchesByName").on("click", getRegExMatchesByName); - $("#getSelectedRegExMatches").on("click", getSelectedRegExMatches); + content: |- + document.getElementById("getRegExMatches").addEventListener("click", getRegExMatches); + document.getElementById("getRegExMatchesByName").addEventListener("click", getRegExMatchesByName); + document.getElementById("getSelectedRegExMatches").addEventListener("click", getSelectedRegExMatches); function getRegExMatches() { // This API only works when you click on the highlighted word "ScriptLab". @@ -50,7 +50,6 @@ template: for Microsoft 365.

    Required mode: Item Read, contextual add-in

    -

    Tip: Try this out as a contextual add-in.

    @@ -66,7 +65,7 @@ template:
    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -78,15 +77,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-attendee.yaml b/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-attendee.yaml index 8b2cf4938..c7cba1a0c 100644 --- a/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-attendee.yaml +++ b/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-attendee.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { const ewsId = Office.context.mailbox.item.itemId; @@ -42,7 +42,7 @@ script: } language: typescript template: - content: | + content: |-

    This sample uses Exchange Web Services (EWS) to get an appointment's iCalUId value if the user is an attendee.

    Important: Exchange user identity and callback tokens are only supported in Exchange on-premises environments. @@ -50,7 +50,6 @@ template: to get an access token. Then, use Microsoft Graph to get the iCalUId property.

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -71,15 +70,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-organizer.yaml b/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-organizer.yaml index 8ac65f4b0..c0744d2be 100644 --- a/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-organizer.yaml +++ b/samples/outlook/85-tokens-and-service-calls/get-icaluid-as-organizer.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.3' script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { Office.context.mailbox.item.saveAsync((result) => { @@ -49,7 +49,7 @@ script: } language: typescript template: - content: | + content: |-

    This sample uses Exchange Web Services (EWS) to get an appointment's iCalUId value if the user is the organizer.

    Important: Exchange user identity and callback tokens are only supported in Exchange on-premises environments. @@ -57,7 +57,6 @@ template: to get an access token. Then, use Microsoft Graph to get the iCalUId property.

    - @@ -75,15 +74,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml b/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml index d7b4df2ac..7b05c488c 100644 --- a/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml +++ b/samples/outlook/85-tokens-and-service-calls/ids-and-urls.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.5' script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { // Get the EWS URL and EWS item ID. @@ -25,7 +25,7 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to retrieve the EWS endpoint URL and item IDs, and convert item IDs for different protocols.

    Important: Exchange user identity and callback tokens are only supported in Exchange on-premises environments. @@ -33,7 +33,6 @@ template: to get an access token.

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -54,15 +53,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/85-tokens-and-service-calls/make-ews-request-async.yaml b/samples/outlook/85-tokens-and-service-calls/make-ews-request-async.yaml index df2c26980..1b023e5a6 100644 --- a/samples/outlook/85-tokens-and-service-calls/make-ews-request-async.yaml +++ b/samples/outlook/85-tokens-and-service-calls/make-ews-request-async.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { const ewsId = Office.context.mailbox.item.itemId; @@ -31,7 +31,7 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to get a message using EWS, without any back-end code.

    Important: This API is only supported in Exchange on-premises environments. @@ -39,7 +39,6 @@ template: to get an access token. Then, use Microsoft Graph to get the message.

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -60,15 +59,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/85-tokens-and-service-calls/send-message-using-make-ews-request-async.yaml b/samples/outlook/85-tokens-and-service-calls/send-message-using-make-ews-request-async.yaml index 227e2cd0b..e008862db 100644 --- a/samples/outlook/85-tokens-and-service-calls/send-message-using-make-ews-request-async.yaml +++ b/samples/outlook/85-tokens-and-service-calls/send-message-using-make-ews-request-async.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { const request = ''+ @@ -34,7 +34,7 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to send a message using EWS, without any back-end code.

    Important: This API is only supported in Exchange on-premises environments. @@ -42,7 +42,6 @@ template: to get an access token. Then, use Microsoft Graph to send the message.

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -63,15 +62,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/85-tokens-and-service-calls/user-callback-token.yaml b/samples/outlook/85-tokens-and-service-calls/user-callback-token.yaml index 9e342b5f6..e7e7e9cb3 100644 --- a/samples/outlook/85-tokens-and-service-calls/user-callback-token.yaml +++ b/samples/outlook/85-tokens-and-service-calls/user-callback-token.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { Office.context.mailbox.getCallbackTokenAsync((result) => { @@ -21,7 +21,7 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to get a callback token to call Outlook services from an add-in's backend service.

    Important: Exchange user identity and callback tokens are only supported in Exchange on-premises environments. @@ -30,7 +30,6 @@ template: to get an access token instead.

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -51,15 +50,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/85-tokens-and-service-calls/user-identity-token.yaml b/samples/outlook/85-tokens-and-service-calls/user-identity-token.yaml index 169118cd9..4ccdc8fd4 100644 --- a/samples/outlook/85-tokens-and-service-calls/user-identity-token.yaml +++ b/samples/outlook/85-tokens-and-service-calls/user-identity-token.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { Office.context.mailbox.getUserIdentityTokenAsync((result) => { @@ -21,7 +21,7 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to get a user identity token to use in authentication flows.

    Important: This API is only supported in Exchange on-premises environments. @@ -29,7 +29,6 @@ template: to get an access token.

    -

    Try it out

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -50,15 +49,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/90-other-item-apis/delay-message-delivery.yaml b/samples/outlook/90-other-item-apis/delay-message-delivery.yaml index b58289c80..186e35414 100644 --- a/samples/outlook/90-other-item-apis/delay-message-delivery.yaml +++ b/samples/outlook/90-other-item-apis/delay-message-delivery.yaml @@ -6,13 +6,13 @@ host: OUTLOOK api_set: Mailbox: '1.13' script: - content: | - $("#get-date").on("click", getDeliveryDate); - $("#set-time-five-minutes").on("click", () => computeDelay("set-time-five-minutes")); - $("#set-time-fifteen-minutes").on("click", () => computeDelay("set-time-fifteen-minutes")); - $("#set-time-thirty-minutes").on("click", () => computeDelay("set-time-thirty-minutes")); - $("#set-time-sixty-minutes").on("click", () => computeDelay("set-time-sixty-minutes")); - $("#set-time-one-day").on("click", () => computeDelay("set-time-one-day")); + content: |- + document.getElementById("get-date").addEventListener("click", getDeliveryDate); + document.getElementById("set-time-five-minutes").addEventListener("click", () => computeDelay("set-time-five-minutes")); + document.getElementById("set-time-fifteen-minutes").addEventListener("click", () => computeDelay("set-time-fifteen-minutes")); + document.getElementById("set-time-thirty-minutes").addEventListener("click", () => computeDelay("set-time-thirty-minutes")); + document.getElementById("set-time-sixty-minutes").addEventListener("click", () => computeDelay("set-time-sixty-minutes")); + document.getElementById("set-time-one-day").addEventListener("click", () => computeDelay("set-time-one-day")); let totalDelay = 0; @@ -69,7 +69,6 @@ template:

    This sample gets and sets the delivery date and time of a message in compose mode. To learn more about this API, see Manage the delivery date and time of a message.

    Required mode: Compose

    -

    Try it out

    @@ -108,15 +107,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml b/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml index b18fd4901..e03300997 100644 --- a/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml +++ b/samples/outlook/90-other-item-apis/get-add-remove-enhancedlocation-appointment.yaml @@ -6,10 +6,10 @@ host: OUTLOOK api_set: Mailbox: '1.8' script: - content: | - $("#get").on("click", get); - $("#add").on("click", add); - $("#remove").on("click", remove); + content: |- + document.getElementById("get").addEventListener("click", get); + document.getElementById("add").addEventListener("click", add); + document.getElementById("remove").addEventListener("click", remove); function get() { Office.context.mailbox.item.enhancedLocation.getAsync((result) => { @@ -106,15 +106,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/90-other-item-apis/get-conversation-id-message.yaml b/samples/outlook/90-other-item-apis/get-conversation-id-message.yaml index 520c48474..047455858 100644 --- a/samples/outlook/90-other-item-apis/get-conversation-id-message.yaml +++ b/samples/outlook/90-other-item-apis/get-conversation-id-message.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.1' script: - content: | - $("#get").on("click", get); + content: |- + document.getElementById("get").addEventListener("click", get); function get() { console.log(`Conversation ID: ${Office.context.mailbox.item.conversationId}`); @@ -39,15 +39,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/90-other-item-apis/get-conversation-index.yaml b/samples/outlook/90-other-item-apis/get-conversation-index.yaml index e7f797ce5..f3ed7d215 100644 --- a/samples/outlook/90-other-item-apis/get-conversation-index.yaml +++ b/samples/outlook/90-other-item-apis/get-conversation-index.yaml @@ -6,8 +6,8 @@ host: OUTLOOK api_set: Mailbox: '1.14' script: - content: | - $("#get-conversation-index").click(getConversationIndex); + content: |- + document.getElementById("get-conversation-index").addEventListener("click", getConversationIndex); function getConversationIndex() { // This snippet returns the Base64-encoded position of the current message in a conversation thread (PR_CONVERSATION_INDEX). @@ -33,7 +33,6 @@ template:

    This sample shows how to get the Base64-encoded position of the current message in a conversation thread.

    Required mode: Message Compose

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -
    -

    Try it out

    -

    Try it out

    Select text in the item body or subject then push the Replace selected text button.

    @@ -47,15 +46,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml b/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml index 7cbaccb5a..8e8612592 100644 --- a/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml +++ b/samples/outlook/90-other-item-apis/work-with-client-signatures.yaml @@ -6,12 +6,12 @@ host: OUTLOOK api_set: Mailbox: '1.10' script: - content: | - $("#isClientSignatureEnabled").on("click", isClientSignatureEnabled); - $("#disableClientSignature").on("click", disableClientSignature); - $("#getComposeType").on("click", getComposeType); - $("#setSignature").on("click", setSignature); - $("#setSignatureWithInlineImage").on("click", setSignatureWithInlineImage); + content: |- + document.getElementById("isClientSignatureEnabled").addEventListener("click", isClientSignatureEnabled); + document.getElementById("disableClientSignature").addEventListener("click", disableClientSignature); + document.getElementById("getComposeType").addEventListener("click", getComposeType); + document.getElementById("setSignature").addEventListener("click", setSignature); + document.getElementById("setSignatureWithInlineImage").addEventListener("click", setSignatureWithInlineImage); function isClientSignatureEnabled() { // Check if the client signature is currently enabled. @@ -99,7 +99,6 @@ template:

    -

    Try it out

    -
    -

    Try it out

    @@ -83,15 +82,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/beta/hosted/office.js @types/office-js-preview - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.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 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/outlook/default.yaml b/samples/outlook/default.yaml index 215d8fa86..7d8729c82 100644 --- a/samples/outlook/default.yaml +++ b/samples/outlook/default.yaml @@ -5,8 +5,8 @@ author: OfficeDev host: OUTLOOK api_set: null script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { const userProfile = Office.context.mailbox.userProfile; @@ -14,7 +14,7 @@ script: } language: typescript template: - content: | + content: |- @@ -32,15 +32,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css diff --git a/samples/powerpoint/basics/basic-api-call-js.yaml b/samples/powerpoint/basics/basic-api-call-js.yaml index 440196ff2..a07f9456e 100644 --- a/samples/powerpoint/basics/basic-api-call-js.yaml +++ b/samples/powerpoint/basics/basic-api-call-js.yaml @@ -6,8 +6,8 @@ host: POWERPOINT api_set: PowerPointApi: '1.4' script: - content: | - $("#run").on("click", () => tryCatch(run)); + content: |- + document.getElementById("run").addEventListener("click", () => tryCatch(run)); function run() { // This function gets the collection of shapes on the first slide, @@ -59,15 +59,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/powerpoint/basics/basic-api-call-ts.yaml b/samples/powerpoint/basics/basic-api-call-ts.yaml index 0b3db65ff..2ca0fd607 100644 --- a/samples/powerpoint/basics/basic-api-call-ts.yaml +++ b/samples/powerpoint/basics/basic-api-call-ts.yaml @@ -6,8 +6,8 @@ host: POWERPOINT api_set: PowerPointApi: '1.4' script: - content: | - $("#run").on("click", () => tryCatch(run)); + content: |- + document.getElementById("run").addEventListener("click", () => tryCatch(run)); const run: Function = async () => { // This function gets the collection of shapes on the first slide, @@ -59,15 +59,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/powerpoint/basics/basic-common-api-call.yaml b/samples/powerpoint/basics/basic-common-api-call.yaml index 869630269..c3107a43e 100644 --- a/samples/powerpoint/basics/basic-common-api-call.yaml +++ b/samples/powerpoint/basics/basic-common-api-call.yaml @@ -7,8 +7,8 @@ host: POWERPOINT api_set: Selection: '1.1' script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => { @@ -21,7 +21,7 @@ script: } language: typescript template: - content: | + content: |- @@ -39,15 +39,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/powerpoint/default.yaml b/samples/powerpoint/default.yaml index 7b3f697fc..0a15973de 100644 --- a/samples/powerpoint/default.yaml +++ b/samples/powerpoint/default.yaml @@ -5,8 +5,8 @@ author: OfficeDev host: POWERPOINT api_set: {} script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => { @@ -19,7 +19,7 @@ script: } language: typescript template: - content: | + content: |- @@ -37,15 +37,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/powerpoint/document/create-presentation.yaml b/samples/powerpoint/document/create-presentation.yaml index d2aba3d06..6011dfb8b 100644 --- a/samples/powerpoint/document/create-presentation.yaml +++ b/samples/powerpoint/document/create-presentation.yaml @@ -6,8 +6,8 @@ host: POWERPOINT api_set: PowerPoint: '1.1' script: - content: | - $("#create-new-blank-presentation").on("click", () => tryCatch(createBlankPresentation)); + content: |- + document.getElementById("create-new-blank-presentation").addEventListener("click", () => tryCatch(createBlankPresentation)); $("#file").on("change", () => tryCatch(createPresentationFromExisting)); function createBlankPresentation() { @@ -45,7 +45,6 @@ template:

    This sample shows how to create a new, empty presentation and how to create a new presentation by copying an existing one.

    -

    Try it out

    Create empty presentation

    @@ -72,15 +71,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/powerpoint/hyperlinks/manage-hyperlinks.yaml b/samples/powerpoint/hyperlinks/manage-hyperlinks.yaml index 37790cb38..f8f486309 100644 --- a/samples/powerpoint/hyperlinks/manage-hyperlinks.yaml +++ b/samples/powerpoint/hyperlinks/manage-hyperlinks.yaml @@ -5,8 +5,8 @@ host: POWERPOINT api_set: PowerPointApi: '1.6' script: - content: | - $("#get-hyperlinks").on("click", () => tryCatch(getHyperlinks)); + content: |- + document.getElementById("get-hyperlinks").addEventListener("click", () => tryCatch(getHyperlinks)); async function getHyperlinks() { // Gets the hyperlinks found in the first selected slide. @@ -38,7 +38,6 @@ template:

    Demonstrates how to get the hyperlinks located in a slide.

    -

    Try it out

    First, add at least one hyperlink to a slide then select at least one slide.

    @@ -58,17 +57,11 @@ style: margin-bottom: 5px; margin-left: 20px; min-width: 80px; - } + } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/powerpoint/images/insert-image.yaml b/samples/powerpoint/images/insert-image.yaml index 9c4a0af2e..a42fb4a33 100644 --- a/samples/powerpoint/images/insert-image.yaml +++ b/samples/powerpoint/images/insert-image.yaml @@ -6,7 +6,7 @@ author: OfficeDev host: POWERPOINT api_set: {} script: - content: | + content: |- $('#insert').on("click", run); function run() { @@ -35,7 +35,6 @@ template:

    Insert an image into the current slide.

    - @@ -53,15 +52,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/powerpoint/images/insert-svg.yaml b/samples/powerpoint/images/insert-svg.yaml index fb17d3eb0..ced98b544 100644 --- a/samples/powerpoint/images/insert-svg.yaml +++ b/samples/powerpoint/images/insert-svg.yaml @@ -6,7 +6,7 @@ author: OfficeDev host: POWERPOINT api_set: {} script: - content: | + content: |- $('#insert').on("click", newImage); function newImage() { @@ -36,7 +36,6 @@ template:

    This sample shows how to insert an SVG image using an XML string as the source.

    -

    Try it out

    language: html style: content: |- @@ -221,17 +218,12 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - core-js@2.4.1/client/core.min.js - @types/core-js + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - jquery@3.1.1 - @types/jquery@3.3.1 https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js \ No newline at end of file diff --git a/samples/powerpoint/shapes/get-set-shapes.yaml b/samples/powerpoint/shapes/get-set-shapes.yaml index c7c18a673..3a6dc8d9f 100644 --- a/samples/powerpoint/shapes/get-set-shapes.yaml +++ b/samples/powerpoint/shapes/get-set-shapes.yaml @@ -6,14 +6,14 @@ host: POWERPOINT api_set: PowerPointApi: '1.5' script: - content: | - $("#getSelectedShapes").on("click", () => tryCatch(getSelectedShapes)); - $("#setSelectedShapes").on("click", () => tryCatch(setSelectedShapes)); - $("#changeFill").on("click", () => tryCatch(changeFill)); - $("#saveShapeSelection").on("click", () => tryCatch(saveShapeSelection)); - $("#loadShapeSelection").on("click", () => tryCatch(loadShapeSelection)); - $("#createShapes").on("click", () => tryCatch(createShapes)); - $("#arrangeSelected").on("click", () => tryCatch(arrangeSelected)); + content: |- + document.getElementById("getSelectedShapes").addEventListener("click", () => tryCatch(getSelectedShapes)); + document.getElementById("setSelectedShapes").addEventListener("click", () => tryCatch(setSelectedShapes)); + document.getElementById("changeFill").addEventListener("click", () => tryCatch(changeFill)); + document.getElementById("saveShapeSelection").addEventListener("click", () => tryCatch(saveShapeSelection)); + document.getElementById("loadShapeSelection").addEventListener("click", () => tryCatch(loadShapeSelection)); + document.getElementById("createShapes").addEventListener("click", () => tryCatch(createShapes)); + document.getElementById("arrangeSelected").addEventListener("click", () => tryCatch(arrangeSelected)); async function getSelectedShapes() { // Gets the shapes you selected on the slide and displays their IDs on the task pane. @@ -176,11 +176,10 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to get selected shapes, and how to select and change specific shapes.

    -

    Try it out

    @@ -194,7 +193,7 @@ template:
    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -213,15 +212,9 @@ style: transition: max-height 0.2s ease-out; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/powerpoint/shapes/get-shapes-by-type.yaml b/samples/powerpoint/shapes/get-shapes-by-type.yaml index 112edce73..9bca1519a 100644 --- a/samples/powerpoint/shapes/get-shapes-by-type.yaml +++ b/samples/powerpoint/shapes/get-shapes-by-type.yaml @@ -6,10 +6,10 @@ host: POWERPOINT api_set: PowerPointApi: '1.4' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#change-lines").on("click", () => tryCatch(changeLines)); - $("#change-geometric-shapes").on("click", () => tryCatch(changeGeometricShapes)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("change-lines").addEventListener("click", () => tryCatch(changeLines)); + document.getElementById("change-geometric-shapes").addEventListener("click", () => tryCatch(changeGeometricShapes)); async function changeLines() { // Changes the dash style of every line in the slide. @@ -99,12 +99,10 @@ template:

    This sample shows how select and change shapes based on their types.

    -

    Setup

    Create some shapes in a new, blank presentation.

    - @@ -134,15 +132,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/powerpoint/shapes/shapes.yaml b/samples/powerpoint/shapes/shapes.yaml index 7310e0336..8685c527e 100644 --- a/samples/powerpoint/shapes/shapes.yaml +++ b/samples/powerpoint/shapes/shapes.yaml @@ -5,14 +5,14 @@ host: POWERPOINT api_set: PowerPointApi: '1.4' script: - content: | - $("#create-hexagon").on("click", () => tryCatch(createHexagon)); - $("#shrink-hexagon").on("click", () => tryCatch(shrinkHexagon)); - $("#move-hexagon").on("click", () => tryCatch(moveHexagon)); - $("#create-line").on("click", () => tryCatch(createLine)); - $("#create-text-box").on("click", () => tryCatch(createTextBox)); - $("#create-shape-with-text").on("click", () => tryCatch(createShapeWithText)); - $("#remove-all").on("click", () => tryCatch(removeAll)); + content: |- + document.getElementById("create-hexagon").addEventListener("click", () => tryCatch(createHexagon)); + document.getElementById("shrink-hexagon").addEventListener("click", () => tryCatch(shrinkHexagon)); + document.getElementById("move-hexagon").addEventListener("click", () => tryCatch(moveHexagon)); + document.getElementById("create-line").addEventListener("click", () => tryCatch(createLine)); + document.getElementById("create-text-box").addEventListener("click", () => tryCatch(createTextBox)); + document.getElementById("create-shape-with-text").addEventListener("click", () => tryCatch(createShapeWithText)); + document.getElementById("remove-all").addEventListener("click", () => tryCatch(removeAll)); async function createHexagon() { // This function gets the collection of shapes on the first slide, @@ -155,7 +155,6 @@ template:

    This sample shows how to create, resize, move, and delete shapes.

    -

    Try it out

    Begin by deleting all shapes that are currently on the slide.

    @@ -165,20 +164,16 @@ template: Remove all shapes

    -

    Create, shrink, and move a shape.

    -

    -

    - @@ -186,21 +181,17 @@ template:

    Create other shapes.

    -

    -

    - -

    language: html style: @@ -216,15 +207,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/powerpoint/slide-management/add-slides.yaml b/samples/powerpoint/slide-management/add-slides.yaml index e69f9354f..74e68bd1e 100644 --- a/samples/powerpoint/slide-management/add-slides.yaml +++ b/samples/powerpoint/slide-management/add-slides.yaml @@ -6,9 +6,9 @@ host: POWERPOINT api_set: PowerPointApi: '1.3' script: - content: | - $("#slide-masters").on("click", () => tryCatch(logSlideMasters)); - $("#add-slide").on("click", () => tryCatch(addSlide)); + content: |- + document.getElementById("slide-masters").addEventListener("click", () => tryCatch(logSlideMasters)); + document.getElementById("add-slide").addEventListener("click", () => tryCatch(addSlide)); async function addSlide() { const chosenMaster = $("#master-id").val() as string; @@ -60,31 +60,26 @@ template:

    This sample shows how to add a slide and optionally to specify the slide master and layout of the slide.

    -

    Try it out

    On the Home ribbon, open the New Slide drop down menu to see the slide masters and slide layouts in the presentation. Be sure there are at least two slide masters. To add a master, see Use multiple slide masters in one presentation. The page will open in your browser.

    -

    Press Add slide to add a slide with the default layout of the default slide master to the end of the presentation.

    -

    Press Log slide masters info to log to the console a list of all the slide masters, their child layouts, and the IDs of the masters and the layouts.

    -

    Copy one of the slide master IDs from the console and enter it in the Master ID text box. (Example: 6147483651#7142061614)

    -

    Copy one of the layout IDs from the console, under the same master you choose above, and enter it in the Layout ID text box. (Example: 2147483651#3142061614)

    -

    Press Add slide again to add a slide with the corresponding master and layout.

    +
    language: html @@ -101,15 +96,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/powerpoint/slide-management/get-set-slides.yaml b/samples/powerpoint/slide-management/get-set-slides.yaml index 4d359b9d8..d797ed57b 100644 --- a/samples/powerpoint/slide-management/get-set-slides.yaml +++ b/samples/powerpoint/slide-management/get-set-slides.yaml @@ -7,11 +7,11 @@ api_set: PowerPointApi: '1.5' script: content: |- - $("#getSelectedSlides").on("click", () => tryCatch(getSelectedSlides)); - $("#setSelectedSlides").on("click", () => tryCatch(setSelectedSlides)); - $("#deleteSlides").on("click", () => tryCatch(deleteSlides)); - $("#saveSlideSelection").on("click", () => tryCatch(saveSlideSelection)); - $("#loadSlideSelection").on("click", () => tryCatch(loadSlideSelection)); + document.getElementById("getSelectedSlides").addEventListener("click", () => tryCatch(getSelectedSlides)); + document.getElementById("setSelectedSlides").addEventListener("click", () => tryCatch(setSelectedSlides)); + document.getElementById("deleteSlides").addEventListener("click", () => tryCatch(deleteSlides)); + document.getElementById("saveSlideSelection").addEventListener("click", () => tryCatch(saveSlideSelection)); + document.getElementById("loadSlideSelection").addEventListener("click", () => tryCatch(loadSlideSelection)); async function getSelectedSlides() { // Gets the selected slides and displays their IDs on the task pane. @@ -129,11 +129,10 @@ script: } language: typescript template: - content: | + content: |-

    This sample shows how to get selected slides, and how to select specific slides.

    -

    Try it out

    @@ -145,7 +144,7 @@ template:
    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -164,15 +163,9 @@ style: transition: max-height 0.2s ease-out; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/powerpoint/slide-management/get-slide-metadata.yaml b/samples/powerpoint/slide-management/get-slide-metadata.yaml index f84c6043b..1e86a7752 100644 --- a/samples/powerpoint/slide-management/get-slide-metadata.yaml +++ b/samples/powerpoint/slide-management/get-slide-metadata.yaml @@ -7,7 +7,7 @@ host: POWERPOINT api_set: {} script: content: |- - $("#get-slide-metadata").on("click", getSlideMetadata); + document.getElementById("get-slide-metadata").addEventListener("click", getSlideMetadata); function getSlideMetadata() { Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange, @@ -27,7 +27,6 @@ template:

    Demonstrates how to get slide metadata.

    Select one or more slides and click Get slide metadata to get the ID, title, and index of the slide(s).

    - @@ -43,17 +42,11 @@ style: margin-bottom: 5px; margin-left: 20px; min-width: 80px; - } + } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/powerpoint/slide-management/insert-slides.yaml b/samples/powerpoint/slide-management/insert-slides.yaml index 67e2b85ed..d247a007a 100644 --- a/samples/powerpoint/slide-management/insert-slides.yaml +++ b/samples/powerpoint/slide-management/insert-slides.yaml @@ -6,9 +6,9 @@ host: POWERPOINT api_set: PowerPointApi: '1.5' script: - content: | - $("#insert-all-slides").on("click", () => tryCatch(insertAllSlides)); - $("#insert-after-target-slide").on("click", () => tryCatch(insertAfterSelectedSlide)); + content: |- + document.getElementById("insert-all-slides").addEventListener("click", () => tryCatch(insertAllSlides)); + document.getElementById("insert-after-target-slide").addEventListener("click", () => tryCatch(insertAfterSelectedSlide)); $("#file").on("change", () => tryCatch(storeFileAsBase64)); let chosenFileBase64; @@ -71,7 +71,6 @@ template:

    This sample shows how to insert slides from another presentation into the current presentation.

    -

    Try it out

    @@ -109,15 +108,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/powerpoint/tags/tags.yaml b/samples/powerpoint/tags/tags.yaml index 4153e3973..94b85c9c3 100644 --- a/samples/powerpoint/tags/tags.yaml +++ b/samples/powerpoint/tags/tags.yaml @@ -5,13 +5,13 @@ host: POWERPOINT api_set: PowerPointApi: '1.3' script: - content: | - $("#add-selected-slide-tag").on("click", () => tryCatch(addTagToSelectedSlide)); - $("#delete-slides-by-audience").on("click", () => tryCatch(deleteSlidesByAudience)); - $("#add-slide-tags").on("click", () => tryCatch(addMultipleSlideTags)); - $("#add-shape-tag").on("click", () => tryCatch(addShapeTag)); - $("#add-presentation-tag").on("click", () => tryCatch(addPresentationTag)); - $("#delete-presentation-tag").on("click", () => tryCatch(deletePresentationTag)); + content: |- + document.getElementById("add-selected-slide-tag").addEventListener("click", () => tryCatch(addTagToSelectedSlide)); + document.getElementById("delete-slides-by-audience").addEventListener("click", () => tryCatch(deleteSlidesByAudience)); + document.getElementById("add-slide-tags").addEventListener("click", () => tryCatch(addMultipleSlideTags)); + document.getElementById("add-shape-tag").addEventListener("click", () => tryCatch(addShapeTag)); + document.getElementById("add-presentation-tag").addEventListener("click", () => tryCatch(addPresentationTag)); + document.getElementById("delete-presentation-tag").addEventListener("click", () => tryCatch(deletePresentationTag)); async function addTagToSelectedSlide() { await PowerPoint.run(async function(context) { @@ -153,39 +153,30 @@ template: content: |-

    These snippets show how to use tags with the presentation and its slides and shapes.

    -

    Try it out

    -

    1. Add several slides to the deck. Add content to each so they are visually distinct in the thumbnail pane.

    -

    2. Select a single slide and press Add tag to tag the slide to be shown only to premium customers.

    -

    3. Repeat step 2 for another slide.

    -

    4. Press Delete premium customer slides to remove from the presentation slides that should only be shown to premium customers.

    -

    5. Press Add slide tags to add mulitiple tags to the first slide of the presentation.

    -

    6. Select the first slide and on the ribbon, navigate Insert > Illustrations > Shapes to add a shape to it. Press Add shape tag.

    -

    7. Press Add presentation tag.

    -

    8. Press Delete presentation tag.

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -182,15 +182,9 @@ style: transition: max-height 0.2s ease-out; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.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 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/project/basics/basic-common-api-call.yaml b/samples/project/basics/basic-common-api-call.yaml index e069060b8..f8d4d189a 100644 --- a/samples/project/basics/basic-common-api-call.yaml +++ b/samples/project/basics/basic-common-api-call.yaml @@ -7,8 +7,8 @@ host: PROJECT api_set: Selection: 1.1 script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => { @@ -21,24 +21,17 @@ script: } language: typescript template: - content: | + content: |- language: html style: - content: | - /* Your style goes here */ + content: /* Your style goes here */ language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.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 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/project/default.yaml b/samples/project/default.yaml index 7f5b087a5..c73af1eeb 100644 --- a/samples/project/default.yaml +++ b/samples/project/default.yaml @@ -5,8 +5,8 @@ author: OfficeDev host: PROJECT api_set: {} script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => { @@ -19,7 +19,7 @@ script: } language: typescript template: - content: | + content: |- @@ -37,15 +37,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/web/default.yaml b/samples/web/default.yaml index 12d365a1d..dba053526 100644 --- a/samples/web/default.yaml +++ b/samples/web/default.yaml @@ -5,15 +5,15 @@ author: OfficeDev host: WEB api_set: {} script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { console.log("Your code goes here"); } language: typescript template: - content: | + content: |- @@ -31,12 +31,6 @@ style: min-width: 80px; } language: css -libraries: | - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.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 \ No newline at end of file +libraries: |- + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css diff --git a/samples/word/01-basics/basic-api-call-es5.yaml b/samples/word/01-basics/basic-api-call-es5.yaml index 0886ad057..a9cdf506b 100644 --- a/samples/word/01-basics/basic-api-call-es5.yaml +++ b/samples/word/01-basics/basic-api-call-es5.yaml @@ -8,7 +8,7 @@ api_set: WordApi: '1.1' script: content: |- - $("#run").on("click", () => tryCatch(run)); + document.getElementById("run").addEventListener("click", () => tryCatch(run)); function run() { return Word.run(function (context) { @@ -55,15 +55,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.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 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/01-basics/basic-api-call.yaml b/samples/word/01-basics/basic-api-call.yaml index 4128b7967..6aab3ed8e 100644 --- a/samples/word/01-basics/basic-api-call.yaml +++ b/samples/word/01-basics/basic-api-call.yaml @@ -8,7 +8,7 @@ api_set: WordApi: '1.1' script: content: |- - $("#run").on("click", () => tryCatch(run)); + document.getElementById("run").addEventListener("click", () => tryCatch(run)); async function run() { // Gets the current selection and changes the font color to red. @@ -56,15 +56,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.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 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/01-basics/basic-common-api-call.yaml b/samples/word/01-basics/basic-common-api-call.yaml index c71ebb2e5..d1b374d41 100644 --- a/samples/word/01-basics/basic-common-api-call.yaml +++ b/samples/word/01-basics/basic-common-api-call.yaml @@ -7,8 +7,8 @@ host: WORD api_set: Selection: 1.1 script: - content: | - $("#run").on("click", run); + content: |- + document.getElementById("run").addEventListener("click", run); function run() { Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, (asyncResult) => { @@ -21,7 +21,7 @@ script: } language: typescript template: - content: | + content: |-
    This sample executes a code snippet that prints the selected text to the console. Make sure to enter and select text before clicking "Print selection".
    @@ -42,15 +42,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/10-content-controls/content-control-onadded-event.yaml b/samples/word/10-content-controls/content-control-onadded-event.yaml index 47fd52025..2ee82194f 100644 --- a/samples/word/10-content-controls/content-control-onadded-event.yaml +++ b/samples/word/10-content-controls/content-control-onadded-event.yaml @@ -6,11 +6,11 @@ host: WORD api_set: WordApi: '1.5' script: - content: | - $("#register-event-handler").on("click", () => tryCatch(registerEventHandler)); - $("#insert-content-controls").on("click", () => tryCatch(insertContentControls)); - $("#deregister-event-handler").on("click", () => tryCatch(deregisterEventHandler)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("register-event-handler").addEventListener("click", () => tryCatch(registerEventHandler)); + document.getElementById("insert-content-controls").addEventListener("click", () => tryCatch(insertContentControls)); + document.getElementById("deregister-event-handler").addEventListener("click", () => tryCatch(deregisterEventHandler)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); let eventContext; @@ -93,14 +93,12 @@ template:
    This sample demonstrates how to use the onAdded event with content controls.
    -

    Set up

    -

    Try it out

    Register event handler. @@ -132,13 +130,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/10-content-controls/content-control-ondatachanged-event.yaml b/samples/word/10-content-controls/content-control-ondatachanged-event.yaml index 8e7df83e6..976769d1a 100644 --- a/samples/word/10-content-controls/content-control-ondatachanged-event.yaml +++ b/samples/word/10-content-controls/content-control-ondatachanged-event.yaml @@ -6,11 +6,11 @@ host: WORD api_set: WordApi: '1.5' script: - content: | - $("#insert-content-controls").on("click", () => tryCatch(insertContentControls)); - $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers)); - $("#deregister-event-handlers").on("click", () => tryCatch(deregisterEventHandlers)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("insert-content-controls").addEventListener("click", () => tryCatch(insertContentControls)); + document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers)); + document.getElementById("deregister-event-handlers").addEventListener("click", () => tryCatch(deregisterEventHandlers)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); let eventContexts = []; @@ -110,14 +110,12 @@ template:
    This sample demonstrates how to use the onDataChanged event on content controls.
    -

    Set up

    -

    Try it out

    1. Insert content controls. @@ -150,13 +148,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/10-content-controls/content-control-ondeleted-event.yaml b/samples/word/10-content-controls/content-control-ondeleted-event.yaml index 535ecd315..e98eec7af 100644 --- a/samples/word/10-content-controls/content-control-ondeleted-event.yaml +++ b/samples/word/10-content-controls/content-control-ondeleted-event.yaml @@ -6,12 +6,12 @@ host: WORD api_set: WordApi: '1.5' script: - content: | - $("#insert-content-controls").on("click", () => tryCatch(insertContentControls)); - $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers)); - $("#delete-content-control").on("click", () => tryCatch(deleteContentControl)); - $("#deregister-event-handlers").on("click", () => tryCatch(deregisterEventHandlers)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("insert-content-controls").addEventListener("click", () => tryCatch(insertContentControls)); + document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers)); + document.getElementById("delete-content-control").addEventListener("click", () => tryCatch(deleteContentControl)); + document.getElementById("deregister-event-handlers").addEventListener("click", () => tryCatch(deregisterEventHandlers)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); let eventContexts = []; @@ -127,14 +127,12 @@ template:
    This sample demonstrates how to use the onDeleted event on content controls.
    -

    Set up

    -

    Try it out

    Insert content controls. @@ -170,13 +168,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/10-content-controls/content-control-onentered-event.yaml b/samples/word/10-content-controls/content-control-onentered-event.yaml index a1e2e93cb..4c7128dc0 100644 --- a/samples/word/10-content-controls/content-control-onentered-event.yaml +++ b/samples/word/10-content-controls/content-control-onentered-event.yaml @@ -6,11 +6,11 @@ host: WORD api_set: WordApi: '1.5' script: - content: | - $("#insert-content-controls").on("click", () => tryCatch(insertContentControls)); - $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers)); - $("#deregister-event-handlers").on("click", () => tryCatch(deregisterEventHandlers)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("insert-content-controls").addEventListener("click", () => tryCatch(insertContentControls)); + document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers)); + document.getElementById("deregister-event-handlers").addEventListener("click", () => tryCatch(deregisterEventHandlers)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); let eventContexts = []; @@ -110,14 +110,12 @@ template:
    This sample demonstrates how to use the onEntered event on content controls.
    -

    Set up

    -

    Try it out

    1. Insert content controls. @@ -150,13 +148,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/10-content-controls/content-control-onexited-event.yaml b/samples/word/10-content-controls/content-control-onexited-event.yaml index 242550f03..c2e5b4eab 100644 --- a/samples/word/10-content-controls/content-control-onexited-event.yaml +++ b/samples/word/10-content-controls/content-control-onexited-event.yaml @@ -6,11 +6,11 @@ host: WORD api_set: WordApi: '1.5' script: - content: | - $("#insert-content-controls").on("click", () => tryCatch(insertContentControls)); - $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers)); - $("#deregister-event-handlers").on("click", () => tryCatch(deregisterEventHandlers)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("insert-content-controls").addEventListener("click", () => tryCatch(insertContentControls)); + document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers)); + document.getElementById("deregister-event-handlers").addEventListener("click", () => tryCatch(deregisterEventHandlers)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); let eventContexts = []; @@ -110,14 +110,12 @@ template:
    This sample demonstrates how to use the onExited event on content controls.
    -

    Set up

    -

    Try it out

    1. Insert content controls. @@ -151,13 +149,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml b/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml index 7f04b743d..989a07ac1 100644 --- a/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml +++ b/samples/word/10-content-controls/content-control-onselectionchanged-event.yaml @@ -6,11 +6,11 @@ host: WORD api_set: WordApi: '1.5' script: - content: | - $("#insert-content-controls").on("click", () => tryCatch(insertContentControls)); - $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers)); - $("#deregister-event-handlers").on("click", () => tryCatch(deregisterEventHandlers)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("insert-content-controls").addEventListener("click", () => tryCatch(insertContentControls)); + document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers)); + document.getElementById("deregister-event-handlers").addEventListener("click", () => tryCatch(deregisterEventHandlers)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); let eventContexts = []; @@ -109,14 +109,12 @@ template:
    This sample demonstrates how to use the onSelectionChanged event on content controls.
    -

    Set up

    -

    Try it out

    1. Insert content controls. @@ -149,13 +147,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/10-content-controls/get-change-tracking-states.yaml b/samples/word/10-content-controls/get-change-tracking-states.yaml index 59c3e7901..b59d84146 100644 --- a/samples/word/10-content-controls/get-change-tracking-states.yaml +++ b/samples/word/10-content-controls/get-change-tracking-states.yaml @@ -7,13 +7,13 @@ host: WORD api_set: WordApi: '1.5' script: - content: | - $("#turn-on-change-tracking").on("click", () => tryCatch(turnOnChangeTracking)); - $("#insert-content-control").on("click", () => tryCatch(insertContentControlOnLastParagraph)); - $("#delete-content-control").on("click", () => tryCatch(deleteFirstContentControl)); - $("#turn-off-change-tracking").on("click", () => tryCatch(turnOffChangeTracking)); - $("#log-change-tracking-states").on("click", () => tryCatch(logChangeTrackingStates)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("turn-on-change-tracking").addEventListener("click", () => tryCatch(turnOnChangeTracking)); + document.getElementById("insert-content-control").addEventListener("click", () => tryCatch(insertContentControlOnLastParagraph)); + document.getElementById("delete-content-control").addEventListener("click", () => tryCatch(deleteFirstContentControl)); + document.getElementById("turn-off-change-tracking").addEventListener("click", () => tryCatch(turnOffChangeTracking)); + document.getElementById("log-change-tracking-states").addEventListener("click", () => tryCatch(logChangeTrackingStates)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); async function turnOnChangeTracking() { // Turns on change tracking. @@ -121,14 +121,12 @@ template:
    This sample demonstrates how to insert and delete control controls then get their change tracking state.
    -

    Set up

    -

    Try it out

    -

    Try it out

    @@ -236,13 +234,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml b/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml index a0660bfaf..a0fee9f6f 100644 --- a/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml +++ b/samples/word/10-content-controls/insert-and-change-combo-box-content-control.yaml @@ -6,14 +6,14 @@ host: WORD api_set: WordApi: '1.9' script: - content: | - $("#insert-control").on("click", () => tryCatch(insertComboBoxContentControl)); - $("#add-item").on("click", () => tryCatch(addItemToComboBoxContentControl)); - $("#get-items").on("click", () => tryCatch(getListFromComboBoxContentControl)); - $("#delete-item").on("click", () => tryCatch(deleteItemFromComboBoxContentControl)); - $("#delete-list").on("click", () => tryCatch(deleteListFromComboBoxContentControl)); - $("#delete-control").on("click", () => tryCatch(deleteComboBoxContentControl)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("insert-control").addEventListener("click", () => tryCatch(insertComboBoxContentControl)); + document.getElementById("add-item").addEventListener("click", () => tryCatch(addItemToComboBoxContentControl)); + document.getElementById("get-items").addEventListener("click", () => tryCatch(getListFromComboBoxContentControl)); + document.getElementById("delete-item").addEventListener("click", () => tryCatch(deleteItemFromComboBoxContentControl)); + document.getElementById("delete-list").addEventListener("click", () => tryCatch(deleteListFromComboBoxContentControl)); + document.getElementById("delete-control").addEventListener("click", () => tryCatch(deleteComboBoxContentControl)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); async function insertComboBoxContentControl() { // Places a combo box content control at the end of the selection. @@ -247,14 +247,12 @@ template:

    This sample demonstrates how to insert, change, and delete combo box content controls.
    -

    Set up

    -

    Try it out

    @@ -318,13 +316,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/10-content-controls/insert-and-change-content-controls.yaml b/samples/word/10-content-controls/insert-and-change-content-controls.yaml index ae89ef06a..961b5d982 100644 --- a/samples/word/10-content-controls/insert-and-change-content-controls.yaml +++ b/samples/word/10-content-controls/insert-and-change-content-controls.yaml @@ -7,10 +7,10 @@ host: WORD api_set: WordApi: '1.1' script: - content: | - $("#insert-controls").on("click", () => tryCatch(insertContentControls)); - $("#change-controls").on("click", () => tryCatch(modifyContentControls)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("insert-controls").addEventListener("click", () => tryCatch(insertContentControls)); + document.getElementById("change-controls").addEventListener("click", () => tryCatch(modifyContentControls)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); async function insertContentControls() { // Traverses each paragraph of the document and wraps a content control on each with either a even or odd tags. @@ -104,14 +104,12 @@ template:

    This sample demonstrates how to insert and change content control properties.
    -

    Set up

    -

    Try it out

    Insert content controls on each paragraph. @@ -139,13 +137,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml b/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml index cb99d13e3..36532629e 100644 --- a/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml +++ b/samples/word/10-content-controls/insert-and-change-dropdown-list-content-control.yaml @@ -6,14 +6,14 @@ host: WORD api_set: WordApi: '1.9' script: - content: | - $("#insert-control").on("click", () => tryCatch(insertDropdownListContentControl)); - $("#add-item").on("click", () => tryCatch(addItemToDropdownListContentControl)); - $("#get-items").on("click", () => tryCatch(getListFromDropdownListContentControl)); - $("#delete-item").on("click", () => tryCatch(deleteItemFromDropdownListContentControl)); - $("#delete-list").on("click", () => tryCatch(deleteListFromDropdownListContentControl)); - $("#delete-control").on("click", () => tryCatch(deleteDropdownListContentControl)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("insert-control").addEventListener("click", () => tryCatch(insertDropdownListContentControl)); + document.getElementById("add-item").addEventListener("click", () => tryCatch(addItemToDropdownListContentControl)); + document.getElementById("get-items").addEventListener("click", () => tryCatch(getListFromDropdownListContentControl)); + document.getElementById("delete-item").addEventListener("click", () => tryCatch(deleteItemFromDropdownListContentControl)); + document.getElementById("delete-list").addEventListener("click", () => tryCatch(deleteListFromDropdownListContentControl)); + document.getElementById("delete-control").addEventListener("click", () => tryCatch(deleteDropdownListContentControl)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); async function insertDropdownListContentControl() { // Places a dropdown list content control at the end of the selection. @@ -249,14 +249,12 @@ template:
    This sample demonstrates how to insert, change, and delete dropdown list content controls.
    -

    Set up

    -

    Try it out

    @@ -320,13 +318,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/15-images/insert-and-get-pictures.yaml b/samples/word/15-images/insert-and-get-pictures.yaml index 1c3c3e08a..ee39795ab 100644 --- a/samples/word/15-images/insert-and-get-pictures.yaml +++ b/samples/word/15-images/insert-and-get-pictures.yaml @@ -6,10 +6,10 @@ host: WORD api_set: WordApiDesktop: '1.1' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#insert").on("click", () => tryCatch(insertImage)); - $("#get").on("click", () => tryCatch(getImage)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("insert").addEventListener("click", () => tryCatch(insertImage)); + document.getElementById("get").addEventListener("click", () => tryCatch(getImage)); async function insertImage() { // Inserts an image anchored to the last paragraph. @@ -75,14 +75,12 @@ template:

    This sample demonstrates how to insert and get inline pictures in a document.
    -

    Set up

    -

    Try it out

    -

    Try it out

    -
    language: html style: @@ -107,10 +105,6 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.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 \ No newline at end of file + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/20-lists/organize-list.yaml b/samples/word/20-lists/organize-list.yaml index 28eaa77ab..ccfef74ef 100644 --- a/samples/word/20-lists/organize-list.yaml +++ b/samples/word/20-lists/organize-list.yaml @@ -7,10 +7,10 @@ host: WORD api_set: WordApi: '1.3' script: - content: | - $("#insert-list").on("click", () => tryCatch(insertOrganizeList)); - $("#get-list-props").on("click", () => tryCatch(getListProps)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("insert-list").addEventListener("click", () => tryCatch(insertOrganizeList)); + document.getElementById("get-list-props").addEventListener("click", () => tryCatch(getListProps)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); async function insertOrganizeList() { // Inserts a list starting with the first paragraph then set numbering and bullet types of the list items. @@ -104,14 +104,12 @@ template:
    This sample demonstrates how to create and organize a list.
    -

    Set up

    -

    Try it out

    -

    Try it out

    Select an insertion point in the document.

    @@ -117,13 +115,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/25-paragraph/get-text.yaml b/samples/word/25-paragraph/get-text.yaml index ebd2d19e3..06c427331 100644 --- a/samples/word/25-paragraph/get-text.yaml +++ b/samples/word/25-paragraph/get-text.yaml @@ -7,9 +7,9 @@ host: WORD api_set: WordApi: '1.7' script: - content: | - $("#run").on("click", () => tryCatch(run)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("run").addEventListener("click", () => tryCatch(run)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); async function run() { await Word.run(async (context) => { @@ -67,14 +67,12 @@ template: Word.

    -

    Set up

    -

    Try it out

    -

    Try it out

    Get the word/term count. @@ -122,15 +120,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/25-paragraph/insert-formatted-text.yaml b/samples/word/25-paragraph/insert-formatted-text.yaml index fc7c89344..66b2fe227 100644 --- a/samples/word/25-paragraph/insert-formatted-text.yaml +++ b/samples/word/25-paragraph/insert-formatted-text.yaml @@ -8,9 +8,9 @@ api_set: WordApi: '1.1' script: content: |- - $("#add-text").on("click", () => tryCatch(addFormattedText)); - $("#add-paragraph").on("click", () => tryCatch(addFormattedParagraph)); - $("#add-preset").on("click", () => tryCatch(addPreStyledFormattedText)); + document.getElementById("add-text").addEventListener("click", () => tryCatch(addFormattedText)); + document.getElementById("add-paragraph").addEventListener("click", () => tryCatch(addFormattedParagraph)); + document.getElementById("add-preset").addEventListener("click", () => tryCatch(addPreStyledFormattedText)); async function addFormattedText() { await Word.run(async (context) => { @@ -79,7 +79,6 @@ template:
    This sample shows how to insert basic formatted text and apply built-in styles.
    -

    Try it out

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -

    Try it out

    -

    Try it out

    Compare location of first paragraph with location of second paragraph

    @@ -119,15 +117,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/35-ranges/scroll-to-range.yaml b/samples/word/35-ranges/scroll-to-range.yaml index a113fde70..bc4ec0029 100644 --- a/samples/word/35-ranges/scroll-to-range.yaml +++ b/samples/word/35-ranges/scroll-to-range.yaml @@ -7,10 +7,10 @@ host: WORD api_set: WordApi: '1.2' script: - content: | - $("#setup").on("click", () => tryCatch(setup)); - $("#scroll").on("click", () => tryCatch(scroll)); - $("#scroll-end").on("click", () => tryCatch(scrollEnd)); + content: |- + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); + document.getElementById("scroll").addEventListener("click", () => tryCatch(scroll)); + document.getElementById("scroll-end").addEventListener("click", () => tryCatch(scrollEnd)); async function scroll() { await Word.run(async (context) => { @@ -63,14 +63,12 @@ template:
    This sample demonstrates how to scroll to a range.
    -

    Set up

    -

    Try it out

    -

    Try it out

    -

    Try it out

    Add a new table style

    @@ -362,7 +361,6 @@ template: Display style properties
    -

    Update custom style

    @@ -390,7 +387,6 @@ template: Set allowBreakAcrossPage property
    -
    @@ -399,7 +395,6 @@ template: Set top cell margin
    -
    @@ -408,7 +403,6 @@ template: Set bottom cell margin
    -
    @@ -417,7 +411,6 @@ template: Set left cell margin
    -
    @@ -426,7 +419,6 @@ template: Set right cell margin
    -
    @@ -435,7 +427,6 @@ template: Set cell spacing
    -

    Delete custom style

    @@ -445,7 +436,6 @@ template: Delete style
    -

    Import styles from JSON string

    language: html style: - content: | + content: |- section.samples { margin-top: 20px; } @@ -471,15 +461,9 @@ style: margin-bottom: 5px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/40-tables/manage-formatting.yaml b/samples/word/40-tables/manage-formatting.yaml index 23b2855b5..303649fb2 100644 --- a/samples/word/40-tables/manage-formatting.yaml +++ b/samples/word/40-tables/manage-formatting.yaml @@ -7,17 +7,17 @@ host: WORD api_set: WordApi: '1.3' script: - content: | - $("#get-table-alignment").on("click", () => tryCatch(getTableAlignment)); - $("#get-table-border").on("click", () => tryCatch(getTableBorder)); - $("#get-table-cell-padding").on("click", () => tryCatch(getTableCellPadding)); - $("#get-table-row-alignment").on("click", () => tryCatch(getTableRowAlignment)); - $("#get-table-row-border").on("click", () => tryCatch(getTableRowBorder)); - $("#get-table-row-cell-padding").on("click", () => tryCatch(getTableRowCellPadding)); - $("#get-table-cell-alignment").on("click", () => tryCatch(getTableCellAlignment)); - $("#get-table-cell-border").on("click", () => tryCatch(getTableCellBorder)); - $("#get-table-cell-cell-padding").on("click", () => tryCatch(getTableCellCellPadding)); - $("#setup").on("click", () => tryCatch(insertTable)); + content: |- + document.getElementById("get-table-alignment").addEventListener("click", () => tryCatch(getTableAlignment)); + document.getElementById("get-table-border").addEventListener("click", () => tryCatch(getTableBorder)); + document.getElementById("get-table-cell-padding").addEventListener("click", () => tryCatch(getTableCellPadding)); + document.getElementById("get-table-row-alignment").addEventListener("click", () => tryCatch(getTableRowAlignment)); + document.getElementById("get-table-row-border").addEventListener("click", () => tryCatch(getTableRowBorder)); + document.getElementById("get-table-row-cell-padding").addEventListener("click", () => tryCatch(getTableRowCellPadding)); + document.getElementById("get-table-cell-alignment").addEventListener("click", () => tryCatch(getTableCellAlignment)); + document.getElementById("get-table-cell-border").addEventListener("click", () => tryCatch(getTableCellBorder)); + document.getElementById("get-table-cell-cell-padding").addEventListener("click", () => tryCatch(getTableCellCellPadding)); + document.getElementById("setup").addEventListener("click", () => tryCatch(insertTable)); async function getTableAlignment() { // Gets alignment details about the first table in the document. @@ -171,7 +171,6 @@ template: This sample shows how to get various formatting details about a table, a table row, and a table cell, including borders, alignment, and cell padding.
    -

    Set up

    -

    Try it out

    You should also show the formatting marks to see the section indicators. To learn more, refer to Show or hide tab marks in Word

    -

    Try it out

    -

    Set up

    -

    Try it out

    -

    Try it out

    -

    Try it out

    Get current change tracking mode

    @@ -140,15 +138,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/50-document/manage-comments.yaml b/samples/word/50-document/manage-comments.yaml index b630ddcfd..7593ebb46 100644 --- a/samples/word/50-document/manage-comments.yaml +++ b/samples/word/50-document/manage-comments.yaml @@ -6,17 +6,17 @@ host: WORD api_set: WordApi: '1.4' script: - content: | - $("#insert").on("click", () => tryCatch(insertComment)); - $("#edit").on("click", () => tryCatch(editFirstCommentInSelection)); - $("#reply").on("click", () => tryCatch(replyToFirstActiveCommentInSelection)); - $("#resolve").on("click", () => tryCatch(toggleResolvedStatusOfFirstCommentInSelection)); - $("#range").on("click", () => tryCatch(getFirstCommentRangeInSelection)); - $("#get-comments-in-selection").on("click", () => tryCatch(getCommentsInSelection)); - $("#get-replies-to-first-comment-in-selection").on("click", () => tryCatch(getRepliesToFirstCommentInSelection)); - $("#delete").on("click", () => tryCatch(deleteFirstCommentInSelection)); - $("#get-comments").on("click", () => tryCatch(getComments)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("insert").addEventListener("click", () => tryCatch(insertComment)); + document.getElementById("edit").addEventListener("click", () => tryCatch(editFirstCommentInSelection)); + document.getElementById("reply").addEventListener("click", () => tryCatch(replyToFirstActiveCommentInSelection)); + document.getElementById("resolve").addEventListener("click", () => tryCatch(toggleResolvedStatusOfFirstCommentInSelection)); + document.getElementById("range").addEventListener("click", () => tryCatch(getFirstCommentRangeInSelection)); + document.getElementById("get-comments-in-selection").addEventListener("click", () => tryCatch(getCommentsInSelection)); + document.getElementById("get-replies-to-first-comment-in-selection").addEventListener("click", () => tryCatch(getRepliesToFirstCommentInSelection)); + document.getElementById("delete").addEventListener("click", () => tryCatch(deleteFirstCommentInSelection)); + document.getElementById("get-comments").addEventListener("click", () => tryCatch(getComments)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); async function insertComment() { // Sets a comment on the selected content. @@ -218,14 +218,12 @@ template:

    This sample shows basic operations using comments.

    -

    Set up

    -

    Try it out

    Manage comments in selection

    @@ -297,15 +295,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/50-document/manage-custom-xml-part-ns.yaml b/samples/word/50-document/manage-custom-xml-part-ns.yaml index ba6380115..84d012fdb 100644 --- a/samples/word/50-document/manage-custom-xml-part-ns.yaml +++ b/samples/word/50-document/manage-custom-xml-part-ns.yaml @@ -6,15 +6,15 @@ host: WORD api_set: WordApi: '1.4' script: - content: | - $("#add-custom-xml-part").on("click", () => tryCatch(addCustomXmlPart)); - $("#query").on("click", () => tryCatch(query)); - $("#get-namespace").on("click", () => tryCatch(getNamespace)); - $("#get-by-namespace").on("click", () => tryCatch(getByNamespaceUri)); - $("#replace-custom-xml-part").on("click", () => tryCatch(replace)); - $("#insert-attribute").on("click", () => tryCatch(insertAttribute)); - $("#insert-element").on("click", () => tryCatch(insertElement)); - $("#delete-custom-xml-part").on("click", () => tryCatch(deleteCustomXmlPart)); + content: |- + document.getElementById("add-custom-xml-part").addEventListener("click", () => tryCatch(addCustomXmlPart)); + document.getElementById("query").addEventListener("click", () => tryCatch(query)); + document.getElementById("get-namespace").addEventListener("click", () => tryCatch(getNamespace)); + document.getElementById("get-by-namespace").addEventListener("click", () => tryCatch(getByNamespaceUri)); + document.getElementById("replace-custom-xml-part").addEventListener("click", () => tryCatch(replace)); + document.getElementById("insert-attribute").addEventListener("click", () => tryCatch(insertAttribute)); + document.getElementById("insert-element").addEventListener("click", () => tryCatch(insertElement)); + document.getElementById("delete-custom-xml-part").addEventListener("click", () => tryCatch(deleteCustomXmlPart)); async function addCustomXmlPart() { // Adds a custom XML part. @@ -257,7 +257,6 @@ template:

    This sample shows how to add, query, replace, edit, and delete a custom XML part in a document.

    Note: For your production add-in, make sure to create and host your own XML schema.

    -

    Try it out

    -

    Try it out

    -

    Set up

    -

    Try it out

    Insert fields

    @@ -197,7 +195,6 @@ template: Insert Date field

    -

    Get and update fields

    -

    Delete fields

    -

    Try it out

    Insert footnote

    @@ -238,15 +236,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/50-document/manage-settings.yaml b/samples/word/50-document/manage-settings.yaml index 2dc50e3f5..b80adc658 100644 --- a/samples/word/50-document/manage-settings.yaml +++ b/samples/word/50-document/manage-settings.yaml @@ -6,10 +6,10 @@ host: WORD api_set: WordApi: '1.4' script: - content: | - $("#add-edit-setting").on("click", () => tryCatch(addEditSetting)); - $("#get-all-settings").on("click", () => tryCatch(getAllSettings)); - $("#delete-all-settings").on("click", () => tryCatch(deleteAllSettings)); + content: |- + document.getElementById("add-edit-setting").addEventListener("click", () => tryCatch(addEditSetting)); + document.getElementById("get-all-settings").addEventListener("click", () => tryCatch(getAllSettings)); + document.getElementById("delete-all-settings").addEventListener("click", () => tryCatch(deleteAllSettings)); async function addEditSetting() { // Adds a new custom setting or @@ -82,7 +82,6 @@ template: can only be managed by that add-in.

    -

    Try it out

    Add a new setting, or edit an existing one

    @@ -120,15 +119,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/50-document/manage-styles.yaml b/samples/word/50-document/manage-styles.yaml index daf6afd8c..f798edc85 100644 --- a/samples/word/50-document/manage-styles.yaml +++ b/samples/word/50-document/manage-styles.yaml @@ -6,16 +6,16 @@ host: WORD api_set: WordApiDesktop: '1.1' script: - content: | - $("#count").on("click", () => tryCatch(getCount)); - $("#add-style").on("click", () => tryCatch(addStyle)); - $("#properties").on("click", () => tryCatch(getProperties)); - $("#apply-style").on("click", () => tryCatch(applyStyle)); - $("#font-properties").on("click", () => tryCatch(setFontProperties)); - $("#paragraph-format").on("click", () => tryCatch(setParagraphFormat)); - $("#border-properties").on("click", () => tryCatch(setBorderProperties)); - $("#shading-properties").on("click", () => tryCatch(setShadingProperties)); - $("#delete-style").on("click", () => tryCatch(deleteStyle)); + content: |- + document.getElementById("count").addEventListener("click", () => tryCatch(getCount)); + document.getElementById("add-style").addEventListener("click", () => tryCatch(addStyle)); + document.getElementById("properties").addEventListener("click", () => tryCatch(getProperties)); + document.getElementById("apply-style").addEventListener("click", () => tryCatch(applyStyle)); + document.getElementById("font-properties").addEventListener("click", () => tryCatch(setFontProperties)); + document.getElementById("paragraph-format").addEventListener("click", () => tryCatch(setParagraphFormat)); + document.getElementById("border-properties").addEventListener("click", () => tryCatch(setBorderProperties)); + document.getElementById("shading-properties").addEventListener("click", () => tryCatch(setShadingProperties)); + document.getElementById("delete-style").addEventListener("click", () => tryCatch(deleteStyle)); async function getCount() { // Gets the number of available styles stored with the document. @@ -253,7 +253,6 @@ template:
    This sample demonstrates how to manage styles.
    -

    Try it out

    @@ -262,7 +261,6 @@ template: Get count

    -

    Add a custom style

    Give the style an alphanumeric name. Must start with a letter. Examples: NewName, newname1

    @@ -281,7 +279,6 @@ template: -

    Use custom style

    @@ -293,7 +290,6 @@ template: -

    Update custom style

    @@ -317,7 +313,6 @@ template: -

    Delete custom style

    @@ -342,10 +337,6 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.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 \ No newline at end of file + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/50-document/manage-tracked-changes.yaml b/samples/word/50-document/manage-tracked-changes.yaml index 31796b541..f692ef0e9 100644 --- a/samples/word/50-document/manage-tracked-changes.yaml +++ b/samples/word/50-document/manage-tracked-changes.yaml @@ -6,15 +6,15 @@ host: WORD api_set: WordApi: '1.6' script: - content: | - $("#get-all-tracked-changes").on("click", () => tryCatch(getAllTrackedChanges)); - $("#get-first-tracked-change-range").on("click", () => tryCatch(getFirstTrackedChangeRange)); - $("#get-next-tracked-change").on("click", () => tryCatch(getNextTrackedChange)); - $("#accept-first-tracked-change").on("click", () => tryCatch(acceptFirstTrackedChange)); - $("#reject-first-tracked-change").on("click", () => tryCatch(rejectFirstTrackedChange)); - $("#accept-all-tracked-changes").on("click", () => tryCatch(acceptAllTrackedChanges)); - $("#reject-all-tracked-changes").on("click", () => tryCatch(rejectAllTrackedChanges)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("get-all-tracked-changes").addEventListener("click", () => tryCatch(getAllTrackedChanges)); + document.getElementById("get-first-tracked-change-range").addEventListener("click", () => tryCatch(getFirstTrackedChangeRange)); + document.getElementById("get-next-tracked-change").addEventListener("click", () => tryCatch(getNextTrackedChange)); + document.getElementById("accept-first-tracked-change").addEventListener("click", () => tryCatch(acceptFirstTrackedChange)); + document.getElementById("reject-first-tracked-change").addEventListener("click", () => tryCatch(rejectFirstTrackedChange)); + document.getElementById("accept-all-tracked-changes").addEventListener("click", () => tryCatch(acceptAllTrackedChanges)); + document.getElementById("reject-all-tracked-changes").addEventListener("click", () => tryCatch(rejectAllTrackedChanges)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); async function getAllTrackedChanges() { // Gets all tracked changes. @@ -152,14 +152,12 @@ template:

    This sample shows how to manage tracked changes.
    -

    Set up

    -

    Try it out

    -

    Replace placeholder text

    -

    Try it out

    -

    Try it out

    Set the styling of the first paragraph.

    @@ -108,13 +106,7 @@ style: language: css libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/99-preview-apis/insert-and-change-content-controls.yaml b/samples/word/99-preview-apis/insert-and-change-content-controls.yaml index 70b694d4a..d74455158 100644 --- a/samples/word/99-preview-apis/insert-and-change-content-controls.yaml +++ b/samples/word/99-preview-apis/insert-and-change-content-controls.yaml @@ -6,12 +6,12 @@ host: WORD api_set: WordApi: '1.9' script: - content: | - $("#insert-controls").on("click", () => tryCatch(insertContentControls)); - $("#change-controls").on("click", () => tryCatch(modifyContentControls)); - $("#set-state").on("click", () => tryCatch(setState)); - $("#reset-state").on("click", () => tryCatch(resetState)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("insert-controls").addEventListener("click", () => tryCatch(insertContentControls)); + document.getElementById("change-controls").addEventListener("click", () => tryCatch(modifyContentControls)); + document.getElementById("set-state").addEventListener("click", () => tryCatch(setState)); + document.getElementById("reset-state").addEventListener("click", () => tryCatch(resetState)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); async function insertContentControls() { // Traverses each paragraph of the document and wraps a content control on each with either a even or odd tags. @@ -144,14 +144,12 @@ template:
    This sample demonstrates how to insert content controls and change their properties.
    -

    Set up

    -

    Try it out

    Insert content controls on each paragraph. @@ -198,11 +196,5 @@ libraries: |- https://appsforoffice.microsoft.com/lib/beta/hosted/office.js @types/office-js-preview - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.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 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/99-preview-apis/manage-comments.yaml b/samples/word/99-preview-apis/manage-comments.yaml index b3eeefb61..679effec6 100644 --- a/samples/word/99-preview-apis/manage-comments.yaml +++ b/samples/word/99-preview-apis/manage-comments.yaml @@ -5,19 +5,19 @@ host: WORD api_set: WordApi: '1.9' script: - content: | - $("#register-event-handlers").on("click", () => tryCatch(registerEventHandlers)); - $("#insert").on("click", () => tryCatch(insertComment)); - $("#edit").on("click", () => tryCatch(editFirstCommentInSelection)); - $("#reply").on("click", () => tryCatch(replyToFirstActiveCommentInSelection)); - $("#resolve").on("click", () => tryCatch(toggleResolvedStatusOfFirstCommentInSelection)); - $("#range").on("click", () => tryCatch(getFirstCommentRangeInSelection)); - $("#get-comments-in-selection").on("click", () => tryCatch(getCommentsInSelection)); - $("#get-replies-to-first-comment-in-selection").on("click", () => tryCatch(getRepliesToFirstCommentInSelection)); - $("#delete").on("click", () => tryCatch(deleteFirstCommentInSelection)); - $("#get-comments").on("click", () => tryCatch(getComments)); - $("#deregister-event-handlers").on("click", () => tryCatch(deregisterEventHandlers)); - $("#setup").on("click", () => tryCatch(setup)); + content: |- + document.getElementById("register-event-handlers").addEventListener("click", () => tryCatch(registerEventHandlers)); + document.getElementById("insert").addEventListener("click", () => tryCatch(insertComment)); + document.getElementById("edit").addEventListener("click", () => tryCatch(editFirstCommentInSelection)); + document.getElementById("reply").addEventListener("click", () => tryCatch(replyToFirstActiveCommentInSelection)); + document.getElementById("resolve").addEventListener("click", () => tryCatch(toggleResolvedStatusOfFirstCommentInSelection)); + document.getElementById("range").addEventListener("click", () => tryCatch(getFirstCommentRangeInSelection)); + document.getElementById("get-comments-in-selection").addEventListener("click", () => tryCatch(getCommentsInSelection)); + document.getElementById("get-replies-to-first-comment-in-selection").addEventListener("click", () => tryCatch(getRepliesToFirstCommentInSelection)); + document.getElementById("delete").addEventListener("click", () => tryCatch(deleteFirstCommentInSelection)); + document.getElementById("get-comments").addEventListener("click", () => tryCatch(getComments)); + document.getElementById("deregister-event-handlers").addEventListener("click", () => tryCatch(deregisterEventHandlers)); + document.getElementById("setup").addEventListener("click", () => tryCatch(setup)); let eventContexts = []; @@ -273,14 +273,12 @@ template: Word on a different platform.

    -

    Set up

    -

    Try it out

    @@ -362,15 +360,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/beta/hosted/office.js @types/office-js-preview - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.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 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/samples/word/default.yaml b/samples/word/default.yaml index afde4ef92..9d45b151a 100644 --- a/samples/word/default.yaml +++ b/samples/word/default.yaml @@ -6,8 +6,8 @@ host: WORD api_set: WordApi: '1.1' script: - content: | - $("#run").on("click", () => tryCatch(run)); + content: |- + document.getElementById("run").addEventListener("click", () => tryCatch(run)); async function run() { await Word.run(async (context) => { @@ -31,7 +31,7 @@ script: } language: typescript template: - content: | + content: |- @@ -49,15 +49,9 @@ style: min-width: 80px; } language: css -libraries: | +libraries: |- https://appsforoffice.microsoft.com/lib/1/hosted/office.js - @types/office-js - - office-ui-fabric-core@11.1.0/dist/css/fabric.min.css - office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css - - core-js@2.4.1/client/core.min.js - @types/core-js + https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts - jquery@3.1.1 - @types/jquery@3.3.1 \ No newline at end of file + https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css + https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css \ No newline at end of file diff --git a/scripts/.gitattributes b/scripts/.gitattributes deleted file mode 100644 index 638b85721..000000000 --- a/scripts/.gitattributes +++ /dev/null @@ -1,24 +0,0 @@ -* text=auto -.gitattributes text -*.css text eol=lf -*.html text eol=lf -*.js text eol=lf -*.json text eol=lf -*.xml text eol=lf -*.kql text eol=lf -*.lock text eol=lf -*.md text eol=lf -*.ts text eol=lf -*.tsx text eol=lf -*.txt text eol=lf -*.yaml text eol=lf -*.yml text eol=lf -.npmrc text eol=lf - -*.cs text eol=crlf -*.sln text eol=crlf -*.csproj text eol=crlf - - -*.png binary -*.jpg binary \ No newline at end of file diff --git a/scripts/.gitignore b/scripts/.gitignore deleted file mode 100644 index dbf082131..000000000 --- a/scripts/.gitignore +++ /dev/null @@ -1 +0,0 @@ -node_modules/* \ No newline at end of file diff --git a/scripts/README.md b/scripts/README.md deleted file mode 100644 index be81caa85..000000000 --- a/scripts/README.md +++ /dev/null @@ -1,27 +0,0 @@ -# Scripts - -These scripts used to help maintain this repository. - -## Setup - -> npm install - -## Edit Script - -This script is used to bulk edit samples. - -To run this script: - -> npm run edit - -The edit targets all prod samples listed in `playlists-prod` and all default samples. - -Under the src folder the transform* files contain the specific JavaScript transforms that will run. - -To develop new transforms: - -1. Make changes the transform* functions -2. Run the transforms (npm run edit) -3. Check using the git diff to make sure the changes are what you expect -4. If you don't like the changes run the following in the **samples** folder: - > git checkout -- * diff --git a/scripts/config/prettier.json b/scripts/config/prettier.json deleted file mode 100644 index f485b3e4c..000000000 --- a/scripts/config/prettier.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "trailingComma": "all", - "arrowParens": "always", - "endOfLine": "lf", - "proseWrap": "preserve", - "printWidth": 100, - "tabWidth": 4 -} \ No newline at end of file diff --git a/scripts/package-lock.json b/scripts/package-lock.json deleted file mode 100644 index 25f3bb4a1..000000000 --- a/scripts/package-lock.json +++ /dev/null @@ -1,249 +0,0 @@ -{ - "name": "scripts", - "version": "0.0.0", - "lockfileVersion": 3, - "requires": true, - "packages": { - "": { - "name": "scripts", - "version": "0.0.0", - "license": "Unlicense", - "devDependencies": { - "@types/node": "^18.19.80", - "prettier": "^3.5.3", - "ts-node": "^10.9.2", - "typescript": "^5.8.2", - "yaml": "^2.7.0" - }, - "engines": { - "node": ">=18.0", - "npm": ">=10.0" - } - }, - "node_modules/@cspotcode/source-map-support": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", - "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", - "dev": true, - "dependencies": { - "@jridgewell/trace-mapping": "0.3.9" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/@jridgewell/resolve-uri": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", - "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", - "dev": true, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", - "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", - "dev": true - }, - "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.9", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", - "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", - "dev": true, - "dependencies": { - "@jridgewell/resolve-uri": "^3.0.3", - "@jridgewell/sourcemap-codec": "^1.4.10" - } - }, - "node_modules/@tsconfig/node10": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", - "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==", - "dev": true - }, - "node_modules/@tsconfig/node12": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", - "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", - "dev": true - }, - "node_modules/@tsconfig/node14": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", - "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", - "dev": true - }, - "node_modules/@tsconfig/node16": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", - "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", - "dev": true - }, - "node_modules/@types/node": { - "version": "18.19.80", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.80.tgz", - "integrity": "sha512-kEWeMwMeIvxYkeg1gTc01awpwLbfMRZXdIhwRcakd/KlK53jmRC26LqcbIt7fnAQTu5GzlnWmzA3H6+l1u6xxQ==", - "dev": true, - "dependencies": { - "undici-types": "~5.26.4" - } - }, - "node_modules/acorn": { - "version": "8.14.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz", - "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==", - "dev": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/acorn-walk": { - "version": "8.3.4", - "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz", - "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==", - "dev": true, - "dependencies": { - "acorn": "^8.11.0" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/arg": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", - "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", - "dev": true - }, - "node_modules/create-require": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", - "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", - "dev": true - }, - "node_modules/diff": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", - "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", - "dev": true, - "engines": { - "node": ">=0.3.1" - } - }, - "node_modules/make-error": { - "version": "1.3.6", - "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", - "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", - "dev": true - }, - "node_modules/prettier": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz", - "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==", - "dev": true, - "bin": { - "prettier": "bin/prettier.cjs" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/prettier/prettier?sponsor=1" - } - }, - "node_modules/ts-node": { - "version": "10.9.2", - "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", - "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", - "dev": true, - "dependencies": { - "@cspotcode/source-map-support": "^0.8.0", - "@tsconfig/node10": "^1.0.7", - "@tsconfig/node12": "^1.0.7", - "@tsconfig/node14": "^1.0.0", - "@tsconfig/node16": "^1.0.2", - "acorn": "^8.4.1", - "acorn-walk": "^8.1.1", - "arg": "^4.1.0", - "create-require": "^1.1.0", - "diff": "^4.0.1", - "make-error": "^1.1.1", - "v8-compile-cache-lib": "^3.0.1", - "yn": "3.1.1" - }, - "bin": { - "ts-node": "dist/bin.js", - "ts-node-cwd": "dist/bin-cwd.js", - "ts-node-esm": "dist/bin-esm.js", - "ts-node-script": "dist/bin-script.js", - "ts-node-transpile-only": "dist/bin-transpile.js", - "ts-script": "dist/bin-script-deprecated.js" - }, - "peerDependencies": { - "@swc/core": ">=1.2.50", - "@swc/wasm": ">=1.2.50", - "@types/node": "*", - "typescript": ">=2.7" - }, - "peerDependenciesMeta": { - "@swc/core": { - "optional": true - }, - "@swc/wasm": { - "optional": true - } - } - }, - "node_modules/typescript": { - "version": "5.8.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz", - "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==", - "dev": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=14.17" - } - }, - "node_modules/undici-types": { - "version": "5.26.5", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", - "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", - "dev": true - }, - "node_modules/v8-compile-cache-lib": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", - "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", - "dev": true - }, - "node_modules/yaml": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz", - "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==", - "dev": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14" - } - }, - "node_modules/yn": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", - "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", - "dev": true, - "engines": { - "node": ">=6" - } - } - } -} diff --git a/scripts/package.json b/scripts/package.json deleted file mode 100644 index 455d76af6..000000000 --- a/scripts/package.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "scripts", - "version": "0.0.0", - "description": "Scripts to transform samples", - "private": true, - "engines": { - "node": ">=18.0", - "npm": ">=10.0" - }, - "scripts": { - "edit": "ts-node src/main.ts", - "style": "prettier --config ./config/prettier.json --write \"@(src|test|scripts)/**/*.@(ts|tsx|js|md|html|css|json)\"" - }, - "author": "wandyezj", - "license": "Unlicense", - "devDependencies": { - "@types/node": "^18.19.80", - "prettier": "^3.5.3", - "ts-node": "^10.9.2", - "typescript": "^5.8.2", - "yaml": "^2.7.0" - } -} diff --git a/scripts/src/RawPlaylist.ts b/scripts/src/RawPlaylist.ts deleted file mode 100644 index 0f3f4495c..000000000 --- a/scripts/src/RawPlaylist.ts +++ /dev/null @@ -1,3 +0,0 @@ -import type { RawPlaylistItem } from "./RawPlaylistItem"; - -export type RawPlaylist = RawPlaylistItem[]; diff --git a/scripts/src/RawPlaylistItem.ts b/scripts/src/RawPlaylistItem.ts deleted file mode 100644 index 0e9cc280f..000000000 --- a/scripts/src/RawPlaylistItem.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * YAML - */ -export interface RawPlaylistItem { - name: string; - description: string; - rawUrl: string; -} diff --git a/scripts/src/RawSample.ts b/scripts/src/RawSample.ts deleted file mode 100644 index 147d8d4c4..000000000 --- a/scripts/src/RawSample.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * YAML - */ -export interface RawSample { - name: string; - description: string; - script: { - content: string; - language: string; - }; - template: { - content: string; - language: string; - }; - style: { - content: string; - language: string; - }; - libraries: string; -} diff --git a/scripts/src/SampleTypes.ts b/scripts/src/SampleTypes.ts deleted file mode 100644 index e69de29bb..000000000 diff --git a/scripts/src/main.ts b/scripts/src/main.ts deleted file mode 100644 index d03c0eb22..000000000 --- a/scripts/src/main.ts +++ /dev/null @@ -1,118 +0,0 @@ -// -// main entry point for the application -// - -import * as fs from "fs"; -import { readFileText } from "./utils/readFileText"; -import { parseRawPlaylist } from "./parseRawPlaylist"; -import { parseRawSample } from "./parseRawSample"; -import { transformRawSample } from "./transformSample"; -import yaml from "yaml"; - -console.log("Start edit sample yaml"); - -// (1) Read the playlist YAML file from sample -// (2) Read each sample YAML file -// (3) Pase the YAML file -// (4) Transform the YAML file -// (5) Write the YAML file over the original file - -const sampleDirectory = "../samples"; -const playlistDirectory = "../playlists-prod"; - -// -// Get sample files -// - -const playlistFiles = fs.readdirSync(playlistDirectory); -console.log(`Playlist files: - ${playlistFiles.join("\n ")}`); - -const playlists = playlistFiles.map((file) => { - const filePath = `${playlistDirectory}/${file}`; - const fileText = readFileText(filePath); - const playlist = parseRawPlaylist(fileText); - return playlist; -}); - -const playlistSamplePaths = playlists - .map((playlist) => { - const sampleFilePaths = playlist.map((item) => { - const { rawUrl } = item; - - // flip raw url to the file path - // https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/project/basics/basic-common-api-call.yaml - const filePath = rawUrl.replace( - "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/", - "../", - ); - return filePath; - }); - - return sampleFilePaths; - }) - .flat(); - -const defaultSamplePaths = fs.readdirSync(sampleDirectory).map((file) => { - const filePath = `${sampleDirectory}/${file}/default.yaml`; - return filePath; -}); - -const samplePaths = [...defaultSamplePaths, ...playlistSamplePaths]; - -console.log(`Sample files: - ${samplePaths.join("\n ")}`); - -// Check that all of the sample files exist -const checkSampleFiles = samplePaths.map((path) => { - const present = fs.existsSync(path); - return { present, path }; -}); - -const missingSampleFiles = checkSampleFiles - .filter(({ present }) => !present) - .map(({ path }) => path); - -if (missingSampleFiles.length > 0) { - console.log("=".repeat(80)); - console.error(`Missing sample files: - ${missingSampleFiles.join("\n")}`); -} - -// -// Transform each sample file -// -console.log("=".repeat(80)); -console.log("Transforming sample files..."); -const transformSampleSuccess = samplePaths.map((path) => { - console.log(`${path}`); - let success = true; - try { - const fileText = readFileText(path); - const sample = parseRawSample(fileText); - const transformedSample = transformRawSample(path, sample); - - const transformedSampleYaml = yaml.stringify(transformedSample, { - indent: 4, - singleQuote: true, - }); - - fs.writeFileSync(path, transformedSampleYaml); - console.log(`success`); - } catch (error) { - console.error(`ERROR\n${error}`); - success = false; - } - - return { - path, - success, - }; -}); - -const transformSampleErrors = transformSampleSuccess.filter(({ success }) => !success); -if (transformSampleErrors.length > 0) { - console.log("=".repeat(80)); - console.log(`Error: Transforming sample files: - ${transformSampleErrors.map((x) => x.path).join("\n ")}`); -} diff --git a/scripts/src/parseRawPlaylist.ts b/scripts/src/parseRawPlaylist.ts deleted file mode 100644 index da3fd72a1..000000000 --- a/scripts/src/parseRawPlaylist.ts +++ /dev/null @@ -1,7 +0,0 @@ -import yaml from "yaml"; -import type { RawPlaylist } from "./RawPlaylist"; - -export function parseRawPlaylist(data: string): RawPlaylist { - const items = yaml.parse(data) as RawPlaylist; - return items; -} diff --git a/scripts/src/parseRawSample.ts b/scripts/src/parseRawSample.ts deleted file mode 100644 index d8765c7c6..000000000 --- a/scripts/src/parseRawSample.ts +++ /dev/null @@ -1,7 +0,0 @@ -import yaml from "yaml"; -import type { RawSample } from "./RawSample"; - -export function parseRawSample(data: string): RawSample { - const rawSample = yaml.parse(data) as RawSample; - return rawSample; -} diff --git a/scripts/src/transformCss.ts b/scripts/src/transformCss.ts deleted file mode 100644 index c52849def..000000000 --- a/scripts/src/transformCss.ts +++ /dev/null @@ -1,3 +0,0 @@ -export function transformCss(data: string): string { - return data; -} diff --git a/scripts/src/transformHtml.ts b/scripts/src/transformHtml.ts deleted file mode 100644 index 4b0449df7..000000000 --- a/scripts/src/transformHtml.ts +++ /dev/null @@ -1,3 +0,0 @@ -export function transformHtml(data: string): string { - return data.replace(/\n\n/g, "\n").trim(); -} diff --git a/scripts/src/transformLibraries.ts b/scripts/src/transformLibraries.ts deleted file mode 100644 index 1b6c34511..000000000 --- a/scripts/src/transformLibraries.ts +++ /dev/null @@ -1,63 +0,0 @@ -/** - * Transform library references. - * - Remove jquery & core-js - * - Reference CDN for office.js types - * - Directly reference unpkg for npm packages - * @returns transformed libraries - */ -export function transformLibraries(data: string): string { - function getLinkFromPackageReference(packageReference: string): string | undefined { - const reg = /^(?.*)@(?\d+\.\d+\.\d+)\/(?.*)$/; - const groups = reg.exec(packageReference)?.groups; - if (groups === undefined) { - return packageReference; - } - - const { packageName, packageVersion, packageFile } = groups; - - return `https://unpkg.com/${packageName}@${packageVersion}/${packageFile}`; - } - - const cleanLibraries = data - .split("\n") - .map((line) => { - line = line.trim(); - - // Empty line - if (line === "") { - return ""; - } - - // Comment - if (line.startsWith("//") || line.startsWith("#")) { - return line; - } - - // direct reference - if (line.startsWith("https://") || line.startsWith("http://")) { - return line; - } - - // office.js - if (line === "@types/office-js") { - return `https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts`; - } - - // Remove packages - const packageNamesIgnore = ["jquery", "@types/jquery", "core-js", "@types/core-js"]; - const isExcluded = packageNamesIgnore.some((packageName) => - line.startsWith(packageName), - ); - if (isExcluded) { - return undefined; - } - - // npm reference - const link = getLinkFromPackageReference(line); - return link; - }) - .filter((line) => line !== undefined) as string[]; - - const cleanData = cleanLibraries.join("\n").replace(/\n\n\n/, "\n\n"); - return cleanData; -} diff --git a/scripts/src/transformSample.ts b/scripts/src/transformSample.ts deleted file mode 100644 index 643b9fe22..000000000 --- a/scripts/src/transformSample.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { RawSample } from "./RawSample"; -import { transformCss } from "./transformCss"; -import { transformHtml } from "./transformHtml"; -import { transformLibraries } from "./transformLibraries"; -import { transformTypeScript } from "./transformTypeScript"; - -export function transformRawSample(id: string, rawSample: RawSample): RawSample { - const typescriptRaw = rawSample?.script?.content; - const htmlRaw = rawSample?.template?.content; - const cssRaw = rawSample?.style?.content; - const librariesRaw = rawSample?.libraries; - - if ([typescriptRaw, htmlRaw, cssRaw, librariesRaw].some((content) => content === undefined)) { - console.log(`ERROR: Empty content [${rawSample.name}] ${id}`); - // happens for custom functions - return rawSample; - } - - const typescriptContent = transformTypeScript(typescriptRaw).trim(); - const htmlContent = transformHtml(htmlRaw).trim(); - const cssContent = transformCss(cssRaw).trim(); - const librariesContent = transformLibraries(librariesRaw).trim(); - - // Update the raw sample with the transformed content - rawSample.script.content = typescriptContent; - rawSample.template.content = htmlContent; - rawSample.style.content = cssContent; - rawSample.libraries = librariesContent; - - return rawSample; -} diff --git a/scripts/src/transformTypeScript.ts b/scripts/src/transformTypeScript.ts deleted file mode 100644 index 1a8e025b2..000000000 --- a/scripts/src/transformTypeScript.ts +++ /dev/null @@ -1,50 +0,0 @@ -/** - * Transform TypeScript code. - * - remove JQuery handlers - * - Add Office on ready. - */ -export function transformTypeScript(data: string): string { - // remove jquery - // $("#id").on("click", () => tryCatch(handler));`; - const jqueryReg = /^\$\("#(?.*)"\)\.on\("click", \(\) => tryCatch\((?.*)\)\);$/; - - // Outlook specific - // $("#id").on("click", handler); - const jqueryAlt = /^\$\("#(?.*)"\)\.on\("click", (?.*)\);$/; - // $("#id").click(handler); - const jqueryAlt2 = /^\$\("#(?.*)"\)\.click\((?.*)\);$/; - - const cleanData = data - .split("\n") - .map((line) => { - const trimLine = line.trim(); - - if (trimLine.startsWith("$")) { - // JQuery - const match = jqueryReg.exec(trimLine); - if (match !== null) { - const groups = match?.groups; - if (groups) { - const { id, handler } = groups; - return `document.getElementById("${id}").addEventListener("click", () => tryCatch(${handler}));`; - } - } - - const matchAlt = jqueryAlt.exec(trimLine) || jqueryAlt2.exec(trimLine); - if (matchAlt !== null) { - const groups = matchAlt?.groups; - if (groups) { - const { id, handler } = groups; - return `document.getElementById("${id}").addEventListener("click", ${handler});`; - } - } - } - - return line; - }) - .join("\n"); - - const code = cleanData; - - return code; -} diff --git a/scripts/src/utils/capitalize.ts b/scripts/src/utils/capitalize.ts deleted file mode 100644 index 30198b274..000000000 --- a/scripts/src/utils/capitalize.ts +++ /dev/null @@ -1,18 +0,0 @@ -/** - * uppercases the first character in a string. - * in the case that the first character in the string can not be upper cased (for example a white space character or an empty string) the string is unmodified. - * @param word - string to capitalize - * @returns the string with it's first character upper cased. - * - */ -export function capitalize(word: string): string { - if (!word || word.length === 0) { - return word; - } - - if (word.length === 1) { - return word.toUpperCase(); - } - - return word.substring(0, 1).toUpperCase() + word.substring(1); -} diff --git a/scripts/src/utils/decapitalize.ts b/scripts/src/utils/decapitalize.ts deleted file mode 100644 index 35c7ed38c..000000000 --- a/scripts/src/utils/decapitalize.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * decapitalize a string - * @param string - string to decapitalize - */ -export function decapitalize(string: string): string { - if (string.length === 0) { - return string; - } - return string.charAt(0).toLowerCase() + string.slice(1); -} diff --git a/scripts/src/utils/directoryFileNames.ts b/scripts/src/utils/directoryFileNames.ts deleted file mode 100644 index f05b3e725..000000000 --- a/scripts/src/utils/directoryFileNames.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { readdirSync } from "fs"; -import { isFile } from "./isFile"; -import { join } from "path"; - -/** - * retrieves the file names present in the directory - * @param path - path of the directory to get the files in - * @returns list of file names in the directory - */ -export function directoryFileNames(path: string): string[] { - const all = readdirSync(path); - const files = all.filter((file: string) => isFile(join(path, file))); - // paths are sorted because determinism is convenient for testing and reproduction of issues. - return files.sort(); -} diff --git a/scripts/src/utils/equivalentLists.ts b/scripts/src/utils/equivalentLists.ts deleted file mode 100644 index 8cce71c17..000000000 --- a/scripts/src/utils/equivalentLists.ts +++ /dev/null @@ -1,20 +0,0 @@ -/** - * checks if two lists have the same values in the same order using the default comparison operator. - * - * @param a - a list - * @param b - a list - * @returns true if both lists have the same values in the same order. - */ -export function equivalentLists(a: string[], b: string[]): boolean { - if (a.length !== b.length) { - return false; - } - - for (let i = 0; i < a.length; i++) { - if (a[i] !== b[i]) { - return false; - } - } - - return true; -} diff --git a/scripts/src/utils/indent.ts b/scripts/src/utils/indent.ts deleted file mode 100644 index abbb1f32a..000000000 --- a/scripts/src/utils/indent.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { lineSplit } from "./lineSplit"; -import { mergeWithDefaults } from "./mergeWithDefaults"; - -/** - * describe a single level of indent - */ -export interface IndentOptions { - /** - * the value to use for the indent - * default of four spaces - */ - value: string; - - /** - * the number of the value to use for a single level of indent - * default of 1 - */ - count: number; - - /** - * the number of times to indent - * default of 1 - */ - level: number; -} - -const defaultIndent: IndentOptions = { - value: " ", - count: 4, - level: 1, -}; - -/** - * indent all lines with the specified level of indent. - * @param string - string to indent - * @param indent - indent options - * @returns a version of the string indented according to the indent options - */ -export function indent(string: string, indent: Partial = defaultIndent): string { - const settings: IndentOptions = mergeWithDefaults(indent, defaultIndent); - - const indentString = settings.value.repeat(settings.count).repeat(settings.level); - - // this also indents any empty lines - return indentString + lineSplit(string).join(`\n${indentString}`); -} diff --git a/scripts/src/utils/isFile.ts b/scripts/src/utils/isFile.ts deleted file mode 100644 index d38c56869..000000000 --- a/scripts/src/utils/isFile.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { lstatSync } from "fs"; - -/** - * is the path a file? - * - * @param path - path to test - * @returns true when the path is a file - */ -export function isFile(path: string): boolean { - return lstatSync(path).isFile(); -} diff --git a/scripts/src/utils/joinWords.ts b/scripts/src/utils/joinWords.ts deleted file mode 100644 index be3b3b81d..000000000 --- a/scripts/src/utils/joinWords.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { capitalize } from "./capitalize"; - -/** - * splits on whitespaces and -, capitalizes words, and joins them - * @param words - */ -export function joinWords(words: string): string { - return words - .split(/(\s|-)/) - .map((word) => capitalize(word)) - .join(""); -} diff --git a/scripts/src/utils/lineSplit.ts b/scripts/src/utils/lineSplit.ts deleted file mode 100644 index 0332f14d9..000000000 --- a/scripts/src/utils/lineSplit.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { standardizeNewlines } from "./standardizeNewlines"; - -/** - * split a string into a list of lines - * @param string - string to split - * @returns list of the individual lines in the string - */ -export function lineSplit(string: string): string[] { - return standardizeNewlines(string).split("\n"); -} diff --git a/scripts/src/utils/listWithoutDuplicateElements.ts b/scripts/src/utils/listWithoutDuplicateElements.ts deleted file mode 100644 index da57f3363..000000000 --- a/scripts/src/utils/listWithoutDuplicateElements.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * creates list without duplicates from an original list, comparing using the default comparison operator, keeping only the first occurrence. - * @param original - list to - * @returns new list without the duplicates present in the original - */ -export function listWithoutDuplicateElements(original: readonly T[]): T[] { - // only take the first item - return original.filter( - (value: T, index: number, array: readonly T[]) => array.indexOf(value) === index, - ); -} diff --git a/scripts/src/utils/mergeWithDefaults.ts b/scripts/src/utils/mergeWithDefaults.ts deleted file mode 100644 index 859a83758..000000000 --- a/scripts/src/utils/mergeWithDefaults.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ - -/** - * create a new object that ensure all default properties are present - * @param original - original object - * @param defaults - default object - */ -export function mergeWithDefaults(original: Partial, defaults: T): T { - const o: any = original; - const d: any = defaults; - const merge: any = {}; //shallowCopyOwnProperties(original); - - Object.getOwnPropertyNames(defaults).forEach((name) => { - merge[name] = Object.getOwnPropertyDescriptor(o, name) ? o[name] : d[name]; - }); - - return merge; -} diff --git a/scripts/src/utils/pascalCase.ts b/scripts/src/utils/pascalCase.ts deleted file mode 100644 index 715c1bcb2..000000000 --- a/scripts/src/utils/pascalCase.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { joinWords } from "./joinWords"; -import { capitalize } from "./capitalize"; - -/** - * PascalCase - * splits on spaces and capitalizes words in between - * @param string - string to pascalCase - */ -export function pascalCase(string: string): string { - string = joinWords(string); - return capitalize(string); -} diff --git a/scripts/src/utils/readFileJson.ts b/scripts/src/utils/readFileJson.ts deleted file mode 100644 index 39f722bc7..000000000 --- a/scripts/src/utils/readFileJson.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { readFileText } from "./readFileText"; - -/** - * Read a file that contains JSON and turn it into an object - * - * Note: no validation is done on the data. - * - * @param path - path to the JSON file - */ -export function readFileJson(path: string): T { - const data: string = readFileText(path); - const object: T = JSON.parse(data); - return object; -} diff --git a/scripts/src/utils/readFileList.ts b/scripts/src/utils/readFileList.ts deleted file mode 100644 index 05e5ce413..000000000 --- a/scripts/src/utils/readFileList.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { lineSplit } from "./lineSplit"; -import { listWithoutDuplicateElements } from "./listWithoutDuplicateElements"; -import { readFileText } from "./readFileText"; - -/** - * reads lines from a file and removes the ones that are whitespace. - * @param path - path to read the file from - */ -export function readFileList(path: string): string[] { - const data: string = readFileText(path); - return listWithoutDuplicateElements(lineSplit(data)); -} diff --git a/scripts/src/utils/readFileText.ts b/scripts/src/utils/readFileText.ts deleted file mode 100644 index a9060c643..000000000 --- a/scripts/src/utils/readFileText.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { standardizeNewlines } from "./standardizeNewlines"; -import { readFileSync } from "fs"; - -/** - * Read utf-8 file and transform to standard new lines. - * @param path - path of the file to read - */ -export function readFileText(path: string): string { - let string: string = readFileSync(path, "utf-8"); - - // remove the BOM - // https://en.wikipedia.org/wiki/Byte_order_mark - // The BOM is generally unexpected in text files and causes JSON.parse to fail. - // U+FEFF is the Byte Order Mark for UTF-8 - string = string.replace(/^\uFEFF/, ""); - - const clean = standardizeNewlines(string); - return clean; -} diff --git a/scripts/src/utils/standardizeNewlines.ts b/scripts/src/utils/standardizeNewlines.ts deleted file mode 100644 index 6bc516e82..000000000 --- a/scripts/src/utils/standardizeNewlines.ts +++ /dev/null @@ -1,7 +0,0 @@ -/** - * standardize newlines to proper unix line endings - * @param string - string to standardize - */ -export function standardizeNewlines(string: string): string { - return string.replace(/\r/gm, ""); -} diff --git a/scripts/src/utils/writeFileJson.ts b/scripts/src/utils/writeFileJson.ts deleted file mode 100644 index 1b35c6cb4..000000000 --- a/scripts/src/utils/writeFileJson.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { writeFileText } from "./writeFileText"; - -/** - * Transform a data object to a string and write it to the specified path. - * @param path - path to write the file to - * @param object - object to transform to JSON and write - */ -export function writeFileJson(path: string, object: object): void { - const json: string = JSON.stringify(object, undefined, 4); - - // add new line at end of file if it doesn't exist - let data = json; - if (!data.endsWith("\n")) { - data += "\n"; - } - - // write file - writeFileText(path, data); -} diff --git a/scripts/src/utils/writeFileList.ts b/scripts/src/utils/writeFileList.ts deleted file mode 100644 index 317655174..000000000 --- a/scripts/src/utils/writeFileList.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { writeFileText } from "./writeFileText"; - -/** - * write a list to a file - * @param path - path to write the file to - * @param list - string list to write to the file - */ -export function writeFileList(path: string, list: readonly string[]): void { - const joined: string = list.join("\n"); - writeFileText(path, joined); -} diff --git a/scripts/src/utils/writeFileText.ts b/scripts/src/utils/writeFileText.ts deleted file mode 100644 index 7ca1fb6eb..000000000 --- a/scripts/src/utils/writeFileText.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { writeFileSync } from "fs"; -import { standardizeNewlines } from "./standardizeNewlines"; - -/** - * write data to path with standard newlines. - * @param path - file path - * @param data - string data to write - */ -export function writeFileText(path: string, string: string): void { - const clean = standardizeNewlines(string); - writeFileSync(path, clean); -} diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json deleted file mode 100644 index 937ffabe1..000000000 --- a/scripts/tsconfig.json +++ /dev/null @@ -1,71 +0,0 @@ -{ - "compilerOptions": { - /* Visit https://aka.ms/tsconfig.json to read more about this file */ - - /* Basic Options */ - // "incremental": true, /* Enable incremental compilation */ - "target": "ESNext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */, - "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */, - "moduleResolution": "node", - // "lib": [], /* Specify library files to be included in the compilation. */ - // "allowJs": true, /* Allow javascript files to be compiled. */ - // "checkJs": true, /* Report errors in .js files. */ - //"jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */, - // "declaration": true, /* Generates corresponding '.d.ts' file. */ - // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ - // "sourceMap": true, /* Generates corresponding '.map' file. */ - // "outFile": "./", /* Concatenate and emit output to single file. */ - // "outDir": "./", /* Redirect output structure to the directory. */ - // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ - // "composite": true, /* Enable project compilation */ - // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ - // "removeComments": true, /* Do not emit comments to output. */ - // "noEmit": true, /* Do not emit outputs. */ - // "importHelpers": true, /* Import emit helpers from 'tslib'. */ - // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ - // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ - - /* Strict Type-Checking Options */ - "strict": true /* Enable all strict type-checking options. */, - // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ - // "strictNullChecks": true, /* Enable strict null checks. */ - // "strictFunctionTypes": true, /* Enable strict checking of function types. */ - // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ - // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ - // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ - // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ - - /* Additional Checks */ - // "noUnusedLocals": true, /* Report errors on unused locals. */ - // "noUnusedParameters": true, /* Report errors on unused parameters. */ - // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ - // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ - // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ - - /* Module Resolution Options */ - // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ - // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ - // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ - // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ - // "typeRoots": [], /* List of folders to include type definitions from. */ - // "types": [], /* Type declaration files to be included in compilation. */ - // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ - "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */, - // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ - // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ - - /* Source Map Options */ - // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ - // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ - // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ - // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ - - /* Experimental Options */ - // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ - // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ - - /* Advanced Options */ - "skipLibCheck": true /* Skip type checking of declaration files. */, - "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ - } -} \ No newline at end of file