1+ order : 5
2+ id : excel-note-basics
3+ name : Notes
4+ description : ' Adds, edits, and removes notes.'
5+ host : EXCEL
6+ api_set :
7+ ExcelApi : ' 1.18'
8+ script :
9+ content : |-
10+ document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
11+ document.getElementById("add-note-to-selected-cell").addEventListener("click", () => tryCatch(addNoteToSelectedCell));
12+ document.getElementById("add-note-to-cell").addEventListener("click", () => tryCatch(addNoteToCell));
13+ document.getElementById("change-note-visibility").addEventListener("click", () => tryCatch(changeNoteVisibility));
14+ document.getElementById("edit-note-content").addEventListener("click", () => tryCatch(editNoteContent));
15+ document.getElementById("edit-note-size").addEventListener("click", () => tryCatch(editNoteSize));
16+ document.getElementById("delete-note").addEventListener("click", () => tryCatch(deleteNote));
17+
18+ async function addNoteToSelectedCell() {
19+ // This function adds a note to the selected cell.
20+ await Excel.run(async (context) => {
21+ const selectedRange = context.workbook.getSelectedRange();
22+
23+ // Note that an InvalidArgument error is thrown if multiple cells are selected.
24+ context.workbook.notes.add(selectedRange, "The first note.");
25+ await context.sync();
26+ });
27+ }
28+
29+ async function addNoteToCell() {
30+ // This function adds a note to cell A2.
31+ await Excel.run(async (context) => {
32+ const sheet = context.workbook.worksheets.getItem("Notes");
33+
34+ // Note that an InvalidArgument error is thrown if multiple cells are passed to `notes.add`.
35+ sheet.notes.add("A2", "The second note.");
36+ await context.sync();
37+ });
38+ }
39+
40+ async function changeNoteVisibility() {
41+ // This function sets the note on cell A1 to visible.
42+ await Excel.run(async (context) => {
43+ const sheet = context.workbook.worksheets.getItem("Notes");
44+ const firstNote = sheet.notes.getItem("A1");
45+
46+ firstNote.load();
47+ await context.sync();
48+
49+ firstNote.visible = true;
50+ });
51+ }
52+
53+ async function editNoteContent() {
54+ // This function changes the content in the first note.
55+ await Excel.run(async (context) => {
56+ const sheet = context.workbook.worksheets.getItem("Notes");
57+ const note = sheet.notes.getItemAt(0);
58+ note.content = "Changing the content of the first note.";
59+ await context.sync();
60+ });
61+ }
62+
63+ async function editNoteSize() {
64+ // This function changes the height and width of the first note.
65+ await Excel.run(async (context) => {
66+ const sheet = context.workbook.worksheets.getItem("Notes");
67+ const note = sheet.notes.getItemAt(0);
68+ note.height = 200;
69+ note.width = 400;
70+ await context.sync();
71+ });
72+ }
73+
74+ async function deleteNote() {
75+ // This function deletes the note from cell A2.
76+ await Excel.run(async (context) => {
77+ const sheet = context.workbook.worksheets.getItem("Notes");
78+ const note = sheet.notes.getItem("A2");
79+ note.delete();
80+
81+ await context.sync();
82+ });
83+ }
84+
85+ /** Set up Sample worksheet. */
86+ async function setup() {
87+ await Excel.run(async (context) => {
88+ context.workbook.worksheets.getItemOrNullObject("Notes").delete();
89+ const sheet = context.workbook.worksheets.add("Notes");
90+
91+ sheet.activate();
92+ await context.sync();
93+ });
94+ }
95+
96+ /** Default helper for invoking an action and handling errors. */
97+ async function tryCatch(callback) {
98+ try {
99+ await callback();
100+ } catch (error) {
101+ // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
102+ console.error(error);
103+ }
104+ }
105+ language : typescript
106+ template :
107+ content : |-
108+ <section class="ms-Fabric ms-font-m">
109+ <p>This sample shows how to work with notes: Add notes, edit content, size, and visibility, and remove notes.</p>
110+ </section>
111+ <section class="ms-Fabric setup ms-font-m">
112+ <h3>Setup</h3>
113+ <button id="setup" class="ms-Button">
114+ <span class="ms-Button-label">Create a worksheet</span>
115+ </button>
116+ </section>
117+ <section class="ms-Fabric samples ms-font-m">
118+ <h3>Try it out</h3>
119+ <button id="add-note-to-selected-cell" class="ms-Button">
120+ <span class="ms-Button-label">Add a note to selected cell</span>
121+ </button>
122+ <p />
123+ <button id="add-note-to-cell" class="ms-Button">
124+ <span class="ms-Button-label">Add a note to cell A2</span>
125+ </button>
126+ <p />
127+ <button id="change-note-visibility" class="ms-Button">
128+ <span class="ms-Button-label">Make first note visible</span>
129+ </button>
130+ <p />
131+ <button id="edit-note-content" class="ms-Button">
132+ <span class="ms-Button-label">Edit content of first note</span>
133+ </button>
134+ <p />
135+ <button id="edit-note-size" class="ms-Button">
136+ <span class="ms-Button-label">Edit size of first note</span>
137+ </button>
138+ <p />
139+ <button id="delete-note" class="ms-Button">
140+ <span class="ms-Button-label">Remove note at A2</span>
141+ </button>
142+ </section>
143+ language : html
144+ style :
145+ content : |-
146+ section.samples {
147+ margin-top: 20px;
148+ }
149+
150+ section.samples .ms-Button, section.setup .ms-Button {
151+ display: block;
152+ margin-bottom: 5px;
153+ margin-left: 20px;
154+ min-width: 80px;
155+ }
156+ language : css
157+ libraries : |-
158+ https://appsforoffice.microsoft.com/lib/1/hosted/office.js
159+ https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts
160+
161+ https://unpkg.com/[email protected] /dist/css/fabric.min.css 162+ https://unpkg.com/[email protected] /dist/css/fabric.components.min.css 
0 commit comments