[Excel] (Range) Add cell control and notes snippets

playlists-prod/excel.yaml

@@ -173,37 +173,46 @@
   fileName: comment-basics.yaml
   description: 'Adds, edits, and removes comments.'
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-basics.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-basics.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.10'
 - id: excel-comment-mentions
   name: Comment mentions
   fileName: comment-mentions.yaml
   description: Mentions someone in a comment.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-mentions.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-mentions.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.11'
 - id: excel-comment-replies
   name: Comment replies
   fileName: comment-replies.yaml
   description: 'Adds, edits, and removes comment replies.'
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-replies.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-replies.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.10'
 - id: excel-comment-resolution
   name: Comment resolution
   fileName: comment-resolution.yaml
   description: Resolves and reopens a comment thread.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comment/comment-resolution.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/comment-resolution.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.10'
+- id: excel-note-basics
+  name: Notes
+  fileName: excel-note-basics.yaml
+  description: 'Adds, edits, and removes notes.'
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/12-comments-and-notes/excel-note-basics.yaml
+  group: Comments And Notes
+  api_set:
+    ExcelApi: '1.18'
 - id: excel-range-conditional-formatting-basic
   name: Basic conditional formatting
   fileName: conditional-formatting-basic.yaml
@@ -896,6 +905,15 @@
   group: Range
   api_set:
     ExcelAPI: '1.15'
+- id: excel-cell-controls
+  name: Checkboxes
+  fileName: range-cell-control.yaml
+  description: This sample shows how to add and remove checkboxes from a table.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/42-range/range-cell-control.yaml
+  group: Range
+  api_set:
+    ExcelApi: '1.18'
 - id: excel-shape-create-and-delete
   name: Create and delete geometric shapes
   fileName: shape-create-and-delete.yaml

playlists/excel.yaml

@@ -173,37 +173,46 @@
   fileName: comment-basics.yaml
   description: 'Adds, edits, and removes comments.'
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comment/comment-basics.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/comment-basics.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.10'
 - id: excel-comment-mentions
   name: Comment mentions
   fileName: comment-mentions.yaml
   description: Mentions someone in a comment.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comment/comment-mentions.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/comment-mentions.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.11'
 - id: excel-comment-replies
   name: Comment replies
   fileName: comment-replies.yaml
   description: 'Adds, edits, and removes comment replies.'
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comment/comment-replies.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/comment-replies.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.10'
 - id: excel-comment-resolution
   name: Comment resolution
   fileName: comment-resolution.yaml
   description: Resolves and reopens a comment thread.
   rawUrl: >-
-    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comment/comment-resolution.yaml
-  group: Comment
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/comment-resolution.yaml
+  group: Comments And Notes
   api_set:
     ExcelApi: '1.10'
+- id: excel-note-basics
+  name: Notes
+  fileName: excel-note-basics.yaml
+  description: 'Adds, edits, and removes notes.'
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/12-comments-and-notes/excel-note-basics.yaml
+  group: Comments And Notes
+  api_set:
+    ExcelApi: '1.18'
 - id: excel-range-conditional-formatting-basic
   name: Basic conditional formatting
   fileName: conditional-formatting-basic.yaml
@@ -896,6 +905,15 @@
   group: Range
   api_set:
     ExcelAPI: '1.15'
+- id: excel-cell-controls
+  name: Checkboxes
+  fileName: range-cell-control.yaml
+  description: This sample shows how to add and remove checkboxes from a table.
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/42-range/range-cell-control.yaml
+  group: Range
+  api_set:
+    ExcelApi: '1.18'
 - id: excel-shape-create-and-delete
   name: Create and delete geometric shapes
   fileName: shape-create-and-delete.yaml

samples/excel/12-comments-and-notes/excel-note-basics.yaml

@@ -0,0 +1,162 @@
+order: 5
+id: excel-note-basics
+name: Notes
+description: 'Adds, edits, and removes notes.'
+host: EXCEL
+api_set:
+    ExcelApi: '1.18'
+script:
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-note-to-selected-cell").addEventListener("click", () => tryCatch(addNoteToSelectedCell));
+        document.getElementById("add-note-to-cell").addEventListener("click", () => tryCatch(addNoteToCell));
+        document.getElementById("change-note-visibility").addEventListener("click", () => tryCatch(changeNoteVisibility));
+        document.getElementById("edit-note-content").addEventListener("click", () => tryCatch(editNoteContent));
+        document.getElementById("edit-note-size").addEventListener("click", () => tryCatch(editNoteSize));
+        document.getElementById("delete-note").addEventListener("click", () => tryCatch(deleteNote));
+
+        async function addNoteToSelectedCell() {
+          // This function adds a note to the selected cell.
+          await Excel.run(async (context) => {
+            const selectedRange = context.workbook.getSelectedRange();
+
+            // Note that an InvalidArgument error is thrown if multiple cells are selected.
+            context.workbook.notes.add(selectedRange, "The first note.");
+            await context.sync();
+          });
+        }
+
+        async function addNoteToCell() {
+          // This function adds a note to cell A2. 
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem("Notes");
+
+            // Note that an InvalidArgument error is thrown if multiple cells are passed to `notes.add`.
+            sheet.notes.add("A2", "The second note.");
+            await context.sync();
+          });
+        }
+
+        async function changeNoteVisibility() {
+          // This function sets the note on cell A1 to visible.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem("Notes");
+            const firstNote = sheet.notes.getItem("A1");
+
+            firstNote.load();
+            await context.sync();
+
+            firstNote.visible = true;
+          });
+        }
+
+        async function editNoteContent() {
+          // This function changes the content in the first note.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem("Notes");
+            const note = sheet.notes.getItemAt(0);
+            note.content = "Changing the content of the first note.";
+            await context.sync();
+          });
+        }
+
+        async function editNoteSize() {
+          // This function changes the height and width of the first note.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem("Notes");
+            const note = sheet.notes.getItemAt(0);
+            note.height = 200;
+            note.width = 400;
+            await context.sync();
+          });
+        }
+
+        async function deleteNote() {
+          // This function deletes the note from cell A2.
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem("Notes");
+            const note = sheet.notes.getItem("A2");
+            note.delete();
+
+            await context.sync();
+          });
+        }
+
+        /** Set up Sample worksheet. */
+        async function setup() {
+          await Excel.run(async (context) => {
+            context.workbook.worksheets.getItemOrNullObject("Notes").delete();
+            const sheet = context.workbook.worksheets.add("Notes");
+
+            sheet.activate();
+            await context.sync();
+          });
+        }
+
+        /** Default helper for invoking an action and handling errors. */
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+          <p>This sample shows how to work with notes: Add notes, edit content, size, and visibility, and remove notes.</p>
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+          <h3>Setup</h3>
+          <button id="setup" class="ms-Button">
+            <span class="ms-Button-label">Create a worksheet</span>
+          </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+          <h3>Try it out</h3>
+          <button id="add-note-to-selected-cell" class="ms-Button">
+            <span class="ms-Button-label">Add a note to selected cell</span>
+          </button>
+          <p />
+          <button id="add-note-to-cell" class="ms-Button">
+              <span class="ms-Button-label">Add a note to cell A2</span>
+          </button>
+          <p />
+          <button id="change-note-visibility" class="ms-Button">
+              <span class="ms-Button-label">Make first note visible</span>
+          </button>
+          <p />
+          <button id="edit-note-content" class="ms-Button">
+              <span class="ms-Button-label">Edit content of first note</span>
+          </button>
+          <p />
+          <button id="edit-note-size" class="ms-Button">
+              <span class="ms-Button-label">Edit size of first note</span>
+          </button>
+          <p />
+          <button id="delete-note" class="ms-Button">
+            <span class="ms-Button-label">Remove note at A2</span>
+          </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts
+
+    https://unpkg.com/[email protected]/dist/css/fabric.min.css
+    https://unpkg.com/[email protected]/dist/css/fabric.components.min.css