Skip to content

Commit 4011ea0

Browse files
ElizabethSamuel-MSFTAlexJerabek
ElizabethSamuel-MSFT
and
AlexJerabek
authored
[Word] Add snippets for APIs re pages, panes, windows (#974)
* [Word] Add snippets for APIs re pages, panes, windows * Note some types * Apply suggestions from code review Co-authored-by: Alex Jerabek <38896772+AlexJerabek@users.noreply.github.com> * Updates based on feedback * remove jquery * map objects --------- Co-authored-by: Alex Jerabek <38896772+AlexJerabek@users.noreply.github.com>
1 parent e24211a commit 4011ea0

File tree

7 files changed

+689
-0
lines changed

7 files changed

+689
-0
lines changed

‎playlists-prod/word.yaml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,15 @@
337337
group: Ranges
338338
api_set:
339339
WordApi: '1.3'
340+
- id: word-ranges-get-pages
341+
name: 'Work with pages, panes, and windows'
342+
fileName: get-pages.yaml
343+
description: 'Shows how to work with pages, panes, and windows.'
344+
rawUrl: >-
345+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/35-ranges/get-pages.yaml
346+
group: Ranges
347+
api_set:
348+
WordApiDesktop: '1.2'
340349
- id: word-tables-table-cell-access
341350
name: Create and access a table
342351
fileName: table-cell-access.yaml

‎playlists/word.yaml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -337,6 +337,15 @@
337337
group: Ranges
338338
api_set:
339339
WordApi: '1.3'
340+
- id: word-ranges-get-pages
341+
name: 'Work with pages, panes, and windows'
342+
fileName: get-pages.yaml
343+
description: 'Shows how to work with pages, panes, and windows.'
344+
rawUrl: >-
345+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/35-ranges/get-pages.yaml
346+
group: Ranges
347+
api_set:
348+
WordApiDesktop: '1.2'
340349
- id: word-tables-table-cell-access
341350
name: Create and access a table
342351
fileName: table-cell-access.yaml

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

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
order: 4
2+
id: word-ranges-get-pages
3+
name: 'Work with pages, panes, and windows'
4+
description: 'Shows how to work with pages, panes, and windows.'
5+
author: yilin4
6+
host: WORD
7+
api_set:
8+
WordApiDesktop: '1.2'
9+
script:
10+
content: |
11+
document.getElementById("get-pages-selected-range").addEventListener("click", () => tryCatch(getPagesOfSelectedRange));
12+
document.getElementById("get-pages-third-paragraph").addEventListener("click", () => tryCatch(getPagesOfThirdParagraph));
13+
document.getElementById("get-pages-enclosing-viewport").addEventListener("click", () => tryCatch(getPagesEnclosingViewport));
14+
document.getElementById("get-all-pages").addEventListener("click", () => tryCatch(getAllPages));
15+
document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
16+
17+
async function getPagesOfSelectedRange() {
18+
await Word.run(async (context) => {
19+
// Gets pages of the selection.
20+
const pages: Word.PageCollection = context.document.getSelection().pages;
21+
pages.load();
22+
await context.sync();
23+
24+
// Log info for pages included in selection.
25+
console.log(pages);
26+
const pagesIndexes = [];
27+
const pagesText = [];
28+
for (let i = 0; i < pages.items.length; i++) {
29+
const page = pages.items[i];
30+
page.load('index');
31+
pagesIndexes.push(page);
32+
33+
const range = page.getRange();
34+
range.load('text');
35+
pagesText.push(range);
36+
}
37+
38+
await context.sync();
39+
40+
for (let i = 0; i < pagesIndexes.length; i++) {
41+
console.log(`Index info for page ${i + 1} in the selection: ${pagesIndexes[i].index}`);
42+
console.log("Text of that page in the selection:", pagesText[i].text);
43+
}
44+
});
45+
}
46+
47+
async function getPagesOfThirdParagraph() {
48+
await Word.run(async (context) => {
49+
// Gets the pages that contain the third paragraph.
50+
const paragraphs: Word.ParagraphCollection = context.document.body.paragraphs;
51+
paragraphs.load();
52+
await context.sync();
53+
54+
const paraThree = paragraphs.items[2];
55+
const rangeOfParagraph = paraThree.getRange();
56+
const pages: Word.PageCollection = rangeOfParagraph.pages;
57+
pages.load();
58+
await context.sync();
59+
60+
// Log info for pages in range.
61+
console.log(pages);
62+
const pagesIndexes = [];
63+
const pagesText = [];
64+
for (let i = 0; i < pages.items.length; i++) {
65+
const page = pages.items[i];
66+
page.load('index');
67+
pagesIndexes.push(page);
68+
69+
const range = page.getRange();
70+
range.load('text');
71+
pagesText.push(range);
72+
}
73+
74+
await context.sync();
75+
76+
for (let i = 0; i < pagesIndexes.length; i++) {
77+
console.log(`Index of page ${i + 1} that contains the third paragraph: ${pagesIndexes[i].index}`);
78+
console.log("Text of that page:", pagesText[i].text);
79+
}
80+
});
81+
}
82+
83+
async function getPagesEnclosingViewport() {
84+
await Word.run(async (context) => {
85+
// Gets the pages enclosing the viewport.
86+
87+
// Get the active window.
88+
const activeWindow: Word.Window = context.document.activeWindow;
89+
activeWindow.load();
90+
91+
// Get the active pane.
92+
const activePane: Word.Pane = activeWindow.activePane;
93+
activePane.load();
94+
95+
// Get pages enclosing the viewport.
96+
const pages: Word.PageCollection = activePane.pagesEnclosingViewport;
97+
pages.load();
98+
99+
await context.sync();
100+
101+
// Log the number of pages.
102+
const pageCount = pages.items.length;
103+
console.log(`Number of pages enclosing the viewport: ${pageCount}`);
104+
105+
// Log index info of these pages.
106+
const pagesIndexes = [];
107+
for (let i = 0; i < pageCount; i++) {
108+
const page = pages.items[i];
109+
page.load('index');
110+
pagesIndexes.push(page);
111+
}
112+
113+
await context.sync();
114+
115+
for (let i = 0; i < pagesIndexes.length; i++) {
116+
console.log(`Page index: ${pagesIndexes[i].index}`);
117+
}
118+
});
119+
}
120+
121+
async function getAllPages() {
122+
await Word.run(async (context) => {
123+
// Gets the first paragraph of each page.
124+
console.log("Getting first paragraph of each page...");
125+
126+
// Get the active window.
127+
const activeWindow: Word.Window = context.document.activeWindow;
128+
activeWindow.load();
129+
130+
// Get the active pane.
131+
const activePane: Word.Pane = activeWindow.activePane;
132+
activePane.load();
133+
134+
// Get all pages.
135+
const pages: Word.PageCollection = activePane.pages;
136+
pages.load();
137+
138+
await context.sync();
139+
140+
// Get page index and paragraphs of each page.
141+
const pagesIndexes = [];
142+
const pagesNumberOfParagraphs = [];
143+
const pagesFirstParagraphText = [];
144+
for (let i = 0; i < pages.items.length; i++) {
145+
const page = pages.items[i];
146+
page.load('index');
147+
pagesIndexes.push(page);
148+
149+
const paragraphs = page.getRange().paragraphs;
150+
paragraphs.load('items/length');
151+
pagesNumberOfParagraphs.push(paragraphs);
152+
153+
const firstParagraph = paragraphs.getFirst();
154+
firstParagraph.load('text');
155+
pagesFirstParagraphText.push(firstParagraph);
156+
}
157+
158+
await context.sync();
159+
160+
for (let i = 0; i < pagesIndexes.length; i++) {
161+
console.log(`Page index: ${pagesIndexes[i].index}`);
162+
console.log(`Number of paragraphs: ${pagesNumberOfParagraphs[i].items.length}`);
163+
console.log("First paragraph's text:", pagesFirstParagraphText[i].text);
164+
}
165+
});
166+
}
167+
168+
async function setup() {
169+
await Word.run(async (context) => {
170+
const body: Word.Body = context.document.body;
171+
body.clear();
172+
body.insertBreak(Word.BreakType.page, Word.InsertLocation.end);
173+
body.insertParagraph(
174+
"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.",
175+
"End"
176+
);
177+
body.insertText(
178+
"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.",
179+
"Start"
180+
);
181+
body.insertParagraph(
182+
"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.",
183+
"Start"
184+
);
185+
body.paragraphs
186+
.getLast()
187+
.insertText(
188+
"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.",
189+
"Replace"
190+
);
191+
});
192+
}
193+
194+
// Default helper for invoking an action and handling errors.
195+
async function tryCatch(callback) {
196+
try {
197+
await callback();
198+
} catch (error) {
199+
// Note: In a production add-in, you'd want to notify the user through your add-in's UI.
200+
console.error(error);
201+
}
202+
}
203+
language: typescript
204+
template:
205+
content: |-
206+
<section class="ms-Fabric ms-font-m">
207+
This sample demonstrates how to work with pages, panes, and windows.
208+
</section>
209+
<section class="ms-Fabric setup ms-font-m">
210+
<h3>Set up</h3>
211+
<button id="setup" class="ms-Button">
212+
<span class="ms-Button-label">Add text</span>
213+
</button>
214+
</section>
215+
<section class="ms-Fabric samples ms-font-m">
216+
<h3>Try it out</h3>
217+
<button id="get-pages-selected-range" class="ms-Button">
218+
<span class="ms-Button-label">Get page info for selection</span>
219+
</button>
220+
<button id="get-pages-third-paragraph" class="ms-Button">
221+
<span class="ms-Button-label">Get the third paragraph's page info</span>
222+
</button>
223+
<button id="get-pages-enclosing-viewport" class="ms-Button">
224+
<span class="ms-Button-label">Get pages enclosing viewport</span>
225+
</button>
226+
<button id="get-all-pages" class="ms-Button">
227+
<span class="ms-Button-label">Get all pages</span>
228+
</button>
229+
</section>
230+
language: html
231+
style:
232+
content: |-
233+
section.samples {
234+
margin-top: 20px;
235+
}
236+
237+
section.samples .ms-Button, section.setup .ms-Button {
238+
display: block;
239+
margin-bottom: 5px;
240+
margin-left: 20px;
241+
min-width: 80px;
242+
}
243+
language: css
244+
libraries: |
245+
https://appsforoffice.microsoft.com/lib/1/hosted/office.js
246+
https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts
247+
248+
https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
249+
https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css

‎snippet-extractor-metadata/word.xlsx

551 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)