Skip to content

Commit 2bb1731

Browse files
jakobpnjakobpn
committed
First commit of snippets written by Uma
1 parent 7728c71 commit 2bb1731

14 files changed

+792
-0
lines changed

‎samples/excel/chart/create-column-clustered-chart.yaml

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
$("#setup").click(setup);
2+
$("#create-column-clustered-chart").click(createChart);
3+
4+
async function createChart() {
5+
try {
6+
await Excel.run(async (context) => {
7+
8+
const sheet = context.workbook.worksheets.getItem("Sample");
9+
10+
const salesTable = sheet.tables.getItem("SalesTable");
11+
12+
const dataRange = salesTable.getDataBodyRange();
13+
14+
let chart = sheet.charts.add("ColumnClustered", dataRange, "auto");
15+
16+
chart.setPosition("A15", "F30");
17+
chart.title.text = "Quarterly sales chart";
18+
chart.legend.position = "right"
19+
chart.legend.format.fill.setSolidColor("white");
20+
chart.dataLabels.format.font.size = 15;
21+
chart.dataLabels.format.font.color = "black";
22+
let points = chart.series.getItemAt(0).points;
23+
points.getItemAt(0).format.fill.setSolidColor("pink");
24+
points.getItemAt(1).format.fill.setSolidColor("indigo");
25+
26+
await context.sync();
27+
});
28+
}
29+
catch (error) {
30+
OfficeHelpers.Utilities.log(error);
31+
}
32+
}
33+
34+
async function setup() {
35+
try {
36+
await Excel.run(async (context) => {
37+
38+
await OfficeHelpers.ExcelUtilities.forceCreateSheet(context.workbook, "Sample");
39+
40+
const sheet = context.workbook.worksheets.getItem("Sample");
41+
42+
let expensesTable = sheet.tables.add('A1:E1', true);
43+
44+
expensesTable.name = "SalesTable";
45+
46+
expensesTable.getHeaderRowRange().values = [["Product", "Qtr1", "Qtr2", "Qtr3", "Qtr4"]];
47+
48+
expensesTable.rows.add(null, [
49+
["Frames", 5000, 7000, 6544, 4377],
50+
["Saddles", 400, 323, 276, 651],
51+
["Brake levers", 12000, 8766, 8456, 9812],
52+
["Chains", 1550, 1088, 692, 853],
53+
["Mirrors", 225, 600, 923, 544],
54+
["Spokes", 6005, 7634, 4589, 8765]
55+
]);
56+
57+
if (Office.context.requirements.isSetSupported("ExcelApi", 1.2)) {
58+
sheet.getUsedRange().format.autofitColumns();
59+
sheet.getUsedRange().format.autofitRows();
60+
}
61+
62+
63+
sheet.activate();
64+
65+
await context.sync();
66+
});
67+
}
68+
catch (error) {
69+
OfficeHelpers.Utilities.log(error);
70+
}
71+
}
72+
73+

‎samples/excel/chart/create-doughnut-chart.yaml

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
name: Create a doughnut chart
2+
description: Create a doughnut chart
3+
author: jakobpn
4+
api_set: {}
5+
script:
6+
content: |
7+
$("#setup").click(setup);
8+
$("#create-doughnut-chart").click(createChart);
9+
10+
async function createChart() {
11+
try {
12+
Excel.run(async (context) => {
13+
14+
const sheet = context.workbook.worksheets.getItem("Sample");
15+
16+
const expensesByCategoryTable = sheet.tables.getItem("ExpensesByCategoryTable");
17+
18+
const dataRange = expensesByCategoryTable.getDataBodyRange();
19+
20+
let categoryChart = sheet.charts.add(Excel.ChartType.doughnut, dataRange, "auto");
21+
22+
categoryChart.setPosition("A15", "F25");
23+
categoryChart.title.text = "Expenses By Category";
24+
categoryChart.title.format.font.size = 10;
25+
categoryChart.title.format.font.name = "Corbel";
26+
categoryChart.title.format.font.color = "#41AEBD";
27+
categoryChart.legend.format.font.name = "Corbel";
28+
categoryChart.legend.format.font.size = 8;
29+
categoryChart.legend.position = "right";
30+
categoryChart.dataLabels.showPercentage = true;
31+
categoryChart.dataLabels.format.font.size = 8;
32+
categoryChart.dataLabels.format.font.color = "white";
33+
let points = categoryChart.series.getItemAt(0).points;
34+
points.getItemAt(0).format.fill.setSolidColor("#0C8DB9");
35+
points.getItemAt(1).format.fill.setSolidColor("#B1D9F7");
36+
points.getItemAt(2).format.fill.setSolidColor("#4C66C5");
37+
points.getItemAt(3).format.fill.setSolidColor("#5CC9EF");
38+
points.getItemAt(4).format.fill.setSolidColor("#5CCBAD");
39+
points.getItemAt(5).format.fill.setSolidColor("#A5E750");
40+
41+
await context.sync();
42+
});
43+
}
44+
catch (error) {
45+
OfficeHelpers.Utilities.log(error);
46+
}
47+
}
48+
49+
async function setup() {
50+
try {
51+
await Excel.run(async (context) => {
52+
53+
await OfficeHelpers.ExcelUtilities.forceCreateSheet(context.workbook, "Sample");
54+
55+
const sheet = context.workbook.worksheets.getItem("Sample");
56+
57+
58+
const expensesTable = sheet.tables.add('A1:B1', true);
59+
expensesTable.name = "ExpensesByCategoryTable";
60+
61+
expensesTable.getHeaderRowRange().values = [["Category", "Expense"]];
62+
63+
expensesTable.rows.add(null, [
64+
["Groceries", 5000],
65+
["Entertaiment", 400],
66+
["Education", 12000],
67+
["Charity", 1550],
68+
["Transportation", 225],
69+
["Other", 6005]
70+
]);
71+
72+
sheet.getUsedRange().getEntireColumn().format.autofitColumns();
73+
sheet.getUsedRange().getEntireRow().format.autofitRows();
74+
75+
sheet.activate();
76+
77+
await context.sync();
78+
});
79+
}
80+
catch (error) {
81+
OfficeHelpers.Utilities.log(error);
82+
}
83+
}
84+
language: typescript
85+
template:
86+
content: |-
87+
<section class="ms-font-m">
88+
<p>This sample shows how to create a doughnut chart using the Excel JavaScript API.</p>
89+
</section>
90+
91+
<section class="setup ms-font-m">
92+
<h3>Set up</h3>
93+
<button id="setup" class="ms-Button">
94+
<span class="ms-Button-label">Create table</span>
95+
</button>
96+
</section>
97+
98+
<section class="samples ms-font-m">
99+
<h3>Try it out</h3>
100+
<button id="create-doughnut-chart" class="ms-Button">
101+
<span class="ms-Button-label">Create a doughnut chart</span>
102+
</button>
103+
</section>
104+
language: html
105+
style:
106+
content: "section.samples {\r\n margin-top: 20px;\r\n}\r\n\r\nsection.samples .ms-Button, section.setup .ms-Button {\r\n display: block;\r\n margin-bottom: 5px;\r\n margin-left: 20px;\r\n min-width: 80px;\r\n}\r\n"
107+
language: css
108+
libraries: |
109+
// Office.js
110+
https://appsforoffice.microsoft.com/lib/1/hosted/office.js
111+
112+
// CSS Libraries
113+
[email protected]/dist/css/fabric.min.css
114+
[email protected]/dist/css/fabric.components.min.css
115+
116+
// NPM libraries
117+
[email protected]/client/core.min.js
118+
@microsoft/[email protected]/dist/office.helpers.min.js
119+
[email protected]
120+
121+
// IntelliSense: @types/library or node_modules paths or URL to d.ts files
122+
@types/office-js
123+
@types/core-js
124+
@@microsoft/office-js-helpers/dist/office.helpers.d.ts
125+
@types/jquery

‎samples/excel/named-item/create-named-item.yaml

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
name: Create a named item
2+
description: Create a named item for a formula
3+
api_set: {"ExcelApi": 1.4}
4+
script:
5+
content: "$(\"#add-name\").click(addName);\n\nasync function addName() {\n try {\n Excel.run(async (context) => {\n\n await OfficeHelpers.ExcelUtilities.forceCreateSheet(context.workbook, \"Sample\");\n\n const sheet = context.workbook.worksheets.getItem(\"Sample\");\n\n let expensesTable = sheet.tables.add(\"A1:D1\", true);\n expensesTable.name = \"ExpensesTable\";\n\n expensesTable.getHeaderRowRange().values = [[\"DATE\", \"MERCHANT\", \"CATEGORY\", \"AMOUNT\"]];\n\n let newData = transactions.map(item =>\n [item.DATE, item.MERCHANT, item.CATEGORY, item.AMOUNT]);\n\n expensesTable.rows.add(null, newData);\n\n sheet.names.add(\"TotalAmount\", \"=SUM(ExpensesTable[AMOUNT])\");\n\n sheet.getRange(\"D11\").values = [[\"=TotalAmount\"]];\n\n\t\t if (Office.context.requirements.isSetSupported(\"ExcelApi\", 1.2)) {\n\t\t\t sheet.getUsedRange().format.autofitColumns();\n\t\t\t sheet.getUsedRange().format.autofitRows();\n\t\t }\n\n sheet.activate();\n\n await context.sync();\n });\n }\n catch (error) {\n OfficeHelpers.Utilities.log(error);\n }\n}\n\nconst transactions = [ \n {\n \"DATE\":\"1/1/2017\",\n \"MERCHANT\":\"The Phone Company\",\n \"CATEGORY\":\"Communications\",\n \"AMOUNT\":\"$120\"\n },\n {\n \"DATE\":\"1/1/2017\",\n \"MERCHANT\":\"SouthRidge Video\",\n \"CATEGORY\":\"Entertainment\",\n \"AMOUNT\":\"$40\"\n },\n {\n \"DATE\":\"1/1/2017\",\n \"MERCHANT\":\"Coho Winery\",\n \"CATEGORY\":\"Restaurant\",\n \"AMOUNT\":\"$47\"\n },\n {\n \"DATE\":\"1/2/2017\",\n \"MERCHANT\":\"Contoso, Ltd\",\n \"CATEGORY\":\"Shopping\",\n \"AMOUNT\":\"$56\"\n },\n {\n \"DATE\":\"1/2/2017\",\n \"MERCHANT\":\"Contoso, Ltd\",\n \"CATEGORY\":\"Shopping\",\n \"AMOUNT\":\"$110\"\n },\n {\n \"DATE\":\"1/2/2017\",\n \"MERCHANT\":\"Liberty Bakery & Cafe\",\n \"CATEGORY\":\"Groceries\",\n \"AMOUNT\":\"$27\"\n },\n {\n \"DATE\":\"1/2/2017\",\n \"MERCHANT\":\"Liberty Bakery & Cafe\",\n \"CATEGORY\":\"Groceries\",\n \"AMOUNT\":\"$38\"\n },\n {\n \"DATE\":\"1/2/2017\",\n \"MERCHANT\":\"Northwind Electric Cars\",\n \"CATEGORY\":\"Transportation\",\n \"AMOUNT\":\"$42\"\n },\n {\n \"DATE\":\"1/2/2017\",\n \"MERCHANT\":\"Best For You Organics Company\",\n \"CATEGORY\":\"Groceries\",\n \"AMOUNT\":\"$27\"\n }\n];\n\n\n"
6+
language: typescript
7+
template:
8+
content: |+
9+
<section class="ms-font-m">
10+
<p>This sample shows how to create a named item using the Excel JavaScript API. Note that this API requires the Excel 1.4 requirement set.</p>
11+
</section>
12+
13+
<section class="samples ms-font-m">
14+
<h3>Try it out</h3>
15+
<button id="add-name" class="ms-Button">
16+
<span class="ms-Button-label">Create a named item for a formula</span>
17+
</button>
18+
</section>
19+
20+
language: html
21+
style:
22+
content: "section.samples {\r\n margin-top: 20px;\r\n}\r\n\r\nsection.samples .ms-Button, section.setup .ms-Button {\r\n display: block;\r\n margin-bottom: 5px;\r\n margin-left: 20px;\r\n min-width: 80px;\r\n}\r\n"
23+
language: css
24+
libraries: |
25+
// Office.js
26+
https://appsforoffice.microsoft.com/lib/1/hosted/office.js
27+
28+
// CSS Libraries
29+
[email protected]/dist/css/fabric.min.css
30+
[email protected]/dist/css/fabric.components.min.css
31+
32+
// NPM libraries
33+
[email protected]/client/core.min.js
34+
@microsoft/[email protected]/dist/office.helpers.min.js
35+
[email protected]
36+
37+
// IntelliSense: @types/library or node_modules paths or URL to d.ts files
38+
@types/office-js
39+
@types/core-js
40+
@microsoft/office-js-helpers/dist/office.helpers.d.ts
41+
@types/jquery

‎samples/excel/named-item/list-named-items.yaml

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
name: List all named items in a workbook
2+
description: List all named items in a workbook
3+
api_set: {"ExcelApi": 1.3}
4+
script:
5+
content: |-
6+
$("#list-named-items").click(listNamedItems);
7+
8+
async function listNamedItems() {
9+
try {
10+
await Excel.run(async (context) => {
11+
12+
const namedItems = context.workbook.names.load();
13+
await context.sync();
14+
15+
console.log("This workbook contains " + namedItems.items.length + " named items.");
16+
17+
for (let i = 0; i < namedItems.items.length; i++) {
18+
console.log(JSON.stringify(namedItems.items[i])) + "\n";
19+
}
20+
await context.sync();
21+
})
22+
}
23+
catch (error) {
24+
OfficeHelpers.Utilities.log(error);
25+
}
26+
}
27+
language: typescript
28+
template:
29+
content: |-
30+
<section class="ms-font-m">
31+
<p>This sample shows how to list all the defined named ranges using the Excel JavaScript API. Note that this snippet lists the results in the console below.</p>
32+
</section>
33+
34+
<section class="samples ms-font-m">
35+
<h3>Try it out</h3>
36+
<button id="list-named-items" class="ms-Button">
37+
<span class="ms-Button-label">List named ranges</span>
38+
</button>
39+
</section>
40+
language: html
41+
style:
42+
content: "section.samples {\r\n margin-top: 20px;\r\n}\r\n\r\nsection.samples .ms-Button, section.setup .ms-Button {\r\n display: block;\r\n margin-bottom: 5px;\r\n margin-left: 20px;\r\n min-width: 80px;\r\n}\r\n"
43+
language: css
44+
libraries: |
45+
// Office.js
46+
https://appsforoffice.microsoft.com/lib/1/hosted/office.js
47+
48+
// CSS Libraries
49+
[email protected]/dist/css/fabric.min.css
50+
[email protected]/dist/css/fabric.components.min.css
51+
52+
// NPM libraries
53+
[email protected]/client/core.min.js
54+
@microsoft/[email protected]/dist/office.helpers.min.js
55+
[email protected]
56+
57+
// IntelliSense: @types/library or node_modules paths or URL to d.ts files
58+
@types/office-js
59+
@types/core-js
60+
@microsoft/office-js-helpers/dist/office.helpers.d.ts
61+
@types/jquery

‎samples/excel/pivottable/refresh-pivot-table.yaml

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
name: Refresh pivot table
2+
description: |
3+
Refresh pivot table
4+
api_set: {"ExcelApi": 1.3}
5+
script:
6+
content: "$(\"#setup\").click(setup);\n$(\"#refresh-pivot-table\").click(refreshPivotTable);\n\nasync function refreshPivotTable() {\n await Excel.run(async (context) => {\n try {\n\t\t\tconst sheet = context.workbook.worksheets.getItem(\"Sample\");\n\n // First, force a change in the table data by setting the value of Amount in the third row to $500\n const expensesTable = sheet.tables.getItem(\"ExpensesTable\");\n\n const range = expensesTable.columns.getItem(\"Amount\").getDataBodyRange().getRow(2).values = [[\"$500\"]];\n\n await sheet.context.sync();\n\n\t\t\t// Now, refresh the pivot table. This should pick up our changes made with code as well as any changes made in the UI\n\t\t\tconst expensesPivot = sheet.pivotTables.getItem(\"PivotTable1\");\n\n expensesPivot.refresh();\n\n await context.sync();\n }\n catch (error) {\n OfficeHelpers.Utilities.log(error);\n }\n })\n}\n\n/** Create a new table with some sample data */\nasync function setup() {\n try {\n \tawait Excel.run(async (context) => {\n\n\t\t\tawait OfficeHelpers.ExcelUtilities.forceCreateSheet(context.workbook, \"Sample\");\n\n\t\t\tconst sheet = context.workbook.worksheets.getItem(\"Sample\");\n\n\t\t\tconst expensesTable = sheet.tables.add('A1:D1', true /*hasHeaders*/);\n\t\t\t expensesTable.name = \"ExpensesTable\";\n\n\t\t\texpensesTable.getHeaderRowRange().values = [[\"Date\", \"Merchant\", \"Category\", \"Amount\"]];\n\n\t\t\texpensesTable.rows.add(null /*add at the end*/, [\n\t\t\t[\"1/1/2017\", \"The Phone Company\", \"Communications\", \"$120\"],\n\t\t\t[\"1/2/2017\", \"Northwind Electric Cars\", \"Transportation\", \"$142\"],\n\t\t\t[\"1/5/2017\", \"Best For You Organics Company\", \"Groceries\", \"$27\"],\n\t\t\t[\"1/10/2017\", \"Coho Vineyard\", \"Restaurant\", \"$33\"],\n\t\t\t[\"1/11/2017\", \"Bellows College\", \"Education\", \"$350\"],\n\t\t\t[\"1/15/2017\", \"Trey Research\", \"Other\", \"$135\"],\n\t\t\t[\"1/15/2017\", \"Best For You Organics Company\", \"Groceries\", \"$97\"]\n\t\t]);\n\n\t\tif (Office.context.requirements.isSetSupported(\"ExcelApi\", 1.2)) {\n\t\t\tsheet.getUsedRange().format.autofitColumns();\n\t\t\tsheet.getUsedRange().format.autofitRows();\n\t\t}\n\n\t sheet.activate();\n\n\t\tawait context.sync();\n\t\t});\n }\n\tcatch (error) {\n\t\tOfficeHelpers.Utilities.log(error);\n\t}\n}\n\n"
7+
language: typescript
8+
template:
9+
content: |+
10+
<section class="ms-font-m">
11+
<p>This sample shows how to refresh a PivotTable using the Excel JavaScript API. Note that this API requires the Excel 1.3 requirement set.</p>
12+
</section>
13+
14+
<section class="setup ms-font-m">
15+
<h3>Set up</h3>
16+
<button id="setup" class="ms-Button">
17+
<span class="ms-Button-label">Create table</span>
18+
</button>
19+
<p>Next, click inside the table and insert a PivotTable using the Insert menu in Excel, specifying the following options.<p>
20+
<ol>
21+
<li>Choose Existing sheet.</li>
22+
<li>Specify A15 as the location.</li>
23+
<li>Select the Amount and Category columns.</li>
24+
<li>Make sure the name of the PivotTable in the UI matches with the name specified in code.</li>
25+
</ol>
26+
</section>
27+
28+
<section class="samples ms-font-m">
29+
<h3>Try it out</h3>
30+
<button id="refresh-pivot-table" class="ms-Button">
31+
<span class="ms-Button-label">Refresh PivotTable</span>
32+
</button>
33+
</section>
34+
35+
36+
language: html
37+
style:
38+
content: "section.samples {\r\n margin-top: 20px;\r\n}\r\n\r\nsection.samples .ms-Button, section.setup .ms-Button {\r\n display: block;\r\n margin-bottom: 5px;\r\n margin-left: 20px;\r\n min-width: 80px;\r\n}\r\n"
39+
language: css
40+
libraries: |
41+
// Office.js
42+
https://appsforoffice.microsoft.com/lib/1/hosted/office.js
43+
44+
// CSS Libraries
45+
[email protected]/dist/css/fabric.min.css
46+
[email protected]/dist/css/fabric.components.min.css
47+
48+
// NPM libraries
49+
[email protected]/client/core.min.js
50+
@microsoft/[email protected]/dist/office.helpers.min.js
51+
[email protected]
52+
53+
// IntelliSense: @types/library or node_modules paths or URL to d.ts files
54+
@types/office-js
55+
@types/core-js
56+
@microsoft/office-js-helpers/dist/office.helpers.d.ts
57+
@types/jquery

0 commit comments

Comments
 (0)