[Word] Add snippets for APIs re pages, panes, windows

playlists-prod/word.yaml

@@ -337,6 +337,15 @@
   group: Ranges
   api_set:
     WordApi: '1.3'
+- id: word-ranges-get-pages
+  name: 'Work with pages, panes, and windows'
+  fileName: get-pages.yaml
+  description: 'Shows how to work with pages, panes, and windows APIs.'
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
+  group: Ranges
+  api_set:
+    WordApiDesktop: '1.2'
 - id: word-tables-table-cell-access
   name: Create and access a table
   fileName: table-cell-access.yaml

playlists/word.yaml

@@ -337,6 +337,15 @@
   group: Ranges
   api_set:
     WordApi: '1.3'
+- id: word-ranges-get-pages
+  name: 'Work with pages, panes, and windows'
+  fileName: get-pages.yaml
+  description: 'Shows how to work with pages, panes, and windows APIs.'
+  rawUrl: >-
+    https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/35-ranges/get-pages.yaml
+  group: Ranges
+  api_set:
+    WordApiDesktop: '1.2'
 - id: word-tables-table-cell-access
   name: Create and access a table
   fileName: table-cell-access.yaml

samples/word/35-ranges/get-pages.yaml

@@ -0,0 +1,244 @@
+order: 4
+id: word-ranges-get-pages
+name: 'Work with pages, panes, and windows'
+description: 'Shows how to work with pages, panes, and windows APIs.'
+author: yilin4
+host: WORD
+api_set:
+    WordApiDesktop: '1.2'
+script:
+    content: |
+        $("#get-pages-selected-range").on("click", () => tryCatch(getPagesOfSelectedRange));
+        $("#get-pages-third-paragraph").on("click", () => tryCatch(getPagesOfThirdParagraph));
+        $("#get-pages-enclosing-viewport").on("click", () => tryCatch(getPagesEnclosingViewport));
+        $("#get-all-pages").on("click", () => tryCatch(getAllPages));
+        $("#setup").on("click", () => tryCatch(setup));
+
+        async function getPagesOfSelectedRange() {
+          await Word.run(async (context) => {
+            // Gets pages of the selection.
+            const pages: Word.PageCollection = context.document.getSelection().pages;
+            pages.load();
+            await context.sync();
+
+            console.log(pages);
+            // Log info for pages included in selection.
+            for (let i = 0; i < pages.items.length; i++) {
+              let page = pages.items[i];
+              page.load();
+              await context.sync();
+
+              console.log(`Index info for page ${i + 1} in the selection: ${page.index}`);
+              const range = page.getRange();
+              range.load();
+              await context.sync();
+
+              console.log("Text of that page in the selection:", range.text);
+            }
+          });
+        }
+
+        async function getPagesOfThirdParagraph() {
+          await Word.run(async (context) => {
+            // Gets the pages that the third paragraph is found on.
+            const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
+            paragraphs.load();
+            await context.sync();
+
+            const paraThree = paragraphs.items[2];
+            const rangeOfParagraph = paraThree.getRange();
+            await context.sync();
+
+            const pages: Word.PageCollection = rangeOfParagraph.pages;
+            pages.load();
+            await context.sync();
+
+            console.log(pages);
+            // Log into for pages in range.
+            for (let i = 0; i < pages.items.length; i++) {
+              let page = pages.items[i];
+              page.load();
+              await context.sync();
+
+              console.log(`Index of page ${i + 1} that the third paragraph is found on: ${page.index}`);
+              const range = page.getRange();
+              range.load();
+              await context.sync();
+
+              console.log("Text of that page:", range.text);
+            }
+          });
+        }
+
+        async function getPagesEnclosingViewport() {
+          await Word.run(async (context) => {
+            // Gets the pages enclosing the viewport.
+
+            // Get the active window.
+            let activeWindow = context.document.activeWindow;
+            activeWindow.load();
+            await context.sync();
+
+            // Get the active pane.
+            let activePane = activeWindow.activePane;
+            activePane.load();
+            await context.sync();
+            // Get pages enclosing the viewport.
+            let pages: Word.PageCollection = activePane.pagesEnclosingViewport;
+            pages.load();
+            await context.sync();
+
+            // Log the number of pages.
+            let pageCount = pages.items.length;
+            console.log(`Number of pages enclosing the viewport: ${pageCount}`);
+            // Log index info of these pages.
+            for (let i = 0; i < pages.items.length; i++) {
+              let page = pages.items[i];
+              page.load();
+              await context.sync();
+
+              console.log(`Page index: ${page.index}`);
+            }
+            await context.sync();
+          });
+        }
+
+        async function getAllPages() {
+          await Word.run(async (context) => {
+            // Gets the first paragraph of each page.
+            console.log("Getting first paragraph of each page...");
+
+            // Get the active window.
+            let activeWindow = context.document.activeWindow;
+            activeWindow.load();
+            await context.sync();
+
+            // Get the active pane.
+            let activePane = activeWindow.activePane;
+            activePane.load();
+            await context.sync();
+
+            // Get all pages.
+            let pages: Word.PageCollection = activePane.pages;
+            pages.load();
+            await context.sync();
+
+            // Get page index and paragraphs of each page.
+            for (let i = 0; i < pages.items.length; i++) {
+              // Get page index of the page.
+              let page = pages.items[i];
+              page.load();
+              await context.sync();
+
+              console.log(`Page index: ${page.index}`);
+              await context.sync();
+
+              // Get paragraphs of the page.
+              const range = page.getRange();
+              range.load();
+              let paragraphs: Word.ParagraphCollection = range.paragraphs;
+              paragraphs.load();
+              await context.sync();
+
+              // Log the number of paragraphs on the page.
+              let paragraphsCount = paragraphs.items.length;
+              await context.sync();
+              console.log(`Number of paragraphs: ${paragraphsCount}`);
+              // Log the first paragraph of the page.
+              let firstParagraph = paragraphs.items[0];
+              firstParagraph.load();
+              await context.sync();
+
+              console.log("First paragraph's text:", firstParagraph.text);
+            }
+          });
+        }
+
+        async function setup() {
+          await Word.run(async (context) => {
+            const body: Word.Body = context.document.body;
+            body.clear();
+            body.insertBreak(Word.BreakType.page, Word.InsertLocation.end);
+            body.insertParagraph(
+              "Themes and styles also help keep your document coordinated. When you click design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme.",
+              "End"
+            );
+            body.insertText(
+              "Save time in Word with new buttons that show up where you need them. To change the way a picture fits in your document, click it and a button for layout options appears next to it. When you work on a table, click where you want to add a row or a column, and then click the plus sign.",
+              "Start"
+            );
+            body.insertParagraph(
+              "Do you want to create a solution that extends the functionality of Word? You can use the Office Add-ins platform to extend Word clients running on the web, on a Windows desktop, or on a Mac.",
+              "Start"
+            );
+            body.paragraphs
+              .getLast()
+              .insertText(
+                "Use add-in commands to extend the Word UI and launch task panes that run JavaScript that interacts with the content in a Word document. Any code that you can run in a browser can run in a Word add-in. Add-ins that interact with content in a Word document create requests to act on Word objects and synchronize object state.",
+                "Replace"
+              );
+          });
+        }
+
+        // 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">
+            This sample demonstrates how to work with the pages, panes, and windows APIs.
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+            <h3>Set up</h3>
+            <button id="setup" class="ms-Button">
+                <span class="ms-Button-label">Add text</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <button id="get-pages-selected-range" class="ms-Button">
+            <span class="ms-Button-label">Get page info for selection</span>
+          </button>
+            <button id="get-pages-third-paragraph" class="ms-Button">
+            <span class="ms-Button-label">Get the third paragraph's page info</span>
+          </button>
+            <button id="get-pages-enclosing-viewport" class="ms-Button">
+            <span class="ms-Button-label">Get pages enclosing viewport</span>
+          </button>
+            <button id="get-all-pages" class="ms-Button">
+            <span class="ms-Button-label">Get all pages</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
+    @types/office-js
+
+    [email protected]/dist/css/fabric.min.css
+    [email protected]/dist/css/fabric.components.min.css
+
+    [email protected]/client/core.min.js
+    @types/core-js
+
+    [email protected]
+    @types/[email protected]

view-prod/word.json

@@ -34,6 +34,7 @@
   "word-ranges-scroll-to-range": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/scroll-to-range.yaml",
   "word-ranges-split-words-of-first-paragraph": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/split-words-of-first-paragraph.yaml",
   "word-ranges-compare-location": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/compare-location.yaml",
+  "word-ranges-get-pages": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml",
   "word-tables-table-cell-access": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/table-cell-access.yaml",
   "word-tables-manage-formatting": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-formatting.yaml",
   "word-tables-manage-custom-style": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-custom-style.yaml",

view/word.json

@@ -34,6 +34,7 @@
   "word-ranges-scroll-to-range": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/35-ranges/scroll-to-range.yaml",
   "word-ranges-split-words-of-first-paragraph": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/35-ranges/split-words-of-first-paragraph.yaml",
   "word-ranges-compare-location": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/35-ranges/compare-location.yaml",
+  "word-ranges-get-pages": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/35-ranges/get-pages.yaml",
   "word-tables-table-cell-access": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/40-tables/table-cell-access.yaml",
   "word-tables-manage-formatting": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/40-tables/manage-formatting.yaml",
   "word-tables-manage-custom-style": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/40-tables/manage-custom-style.yaml",