Skip to content

Commit 0c669a4

Browse files
ElizabethSamuel-MSFTElizabethSamuel-MSFT
authored
[Word] (Canvas) Add snippet (#1027)
1 parent 8564349 commit 0c669a4

File tree

8 files changed

+273
-21
lines changed

8 files changed

+273
-21
lines changed

‎playlists-prod/word.yaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -404,6 +404,15 @@
404404
group: Shapes
405405
api_set:
406406
WordApiDesktop: '1.2'
407+
- id: word-shapes-manage-canvases
408+
name: Work with canvases
409+
fileName: manage-canvases.yaml
410+
description: Shows how to work with canvases.
411+
rawUrl: >-
412+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-canvases.yaml
413+
group: Shapes
414+
api_set:
415+
WordApiDesktop: '1.2'
407416
- id: word-document-manage-body
408417
name: Manage body
409418
fileName: manage-body.yaml

‎playlists/word.yaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -404,6 +404,15 @@
404404
group: Shapes
405405
api_set:
406406
WordApiDesktop: '1.2'
407+
- id: word-shapes-manage-canvases
408+
name: Work with canvases
409+
fileName: manage-canvases.yaml
410+
description: Shows how to work with canvases.
411+
rawUrl: >-
412+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/45-shapes/manage-canvases.yaml
413+
group: Shapes
414+
api_set:
415+
WordApiDesktop: '1.2'
407416
- id: word-document-manage-body
408417
name: Manage body
409418
fileName: manage-body.yaml

‎samples/word/45-shapes/manage-canvases.yaml‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
order: 4
2+
id: word-shapes-manage-canvases
3+
name: Work with canvases
4+
description: Shows how to work with canvases.
5+
host: WORD
6+
api_set:
7+
WordApiDesktop: '1.2'
8+
script:
9+
content: |
10+
document.getElementById("insert-canvas").addEventListener("click", () => tryCatch(insertCanvas));
11+
document.getElementById("get-canvases").addEventListener("click", () => tryCatch(getCanvases));
12+
document.getElementById("get-first-canvas").addEventListener("click", () => tryCatch(getFirstCanvas));
13+
document.getElementById("move-first-canvas").addEventListener("click", () => tryCatch(moveFirstCanvas));
14+
document.getElementById("delete-first-canvas").addEventListener("click", () => tryCatch(deleteFirstCanvas));
15+
16+
async function insertCanvas() {
17+
await Word.run(async (context) => {
18+
// Inserts a canvas in the document.
19+
const canvasShape: Word.Shape = context.document.getSelection().insertCanvas();
20+
canvasShape.load();
21+
await context.sync();
22+
23+
canvasShape.select();
24+
console.log("Inserted canvas:", canvasShape);
25+
26+
const canvas: Word.Canvas = canvasShape.canvas;
27+
canvas.load("shape,shapes");
28+
await context.sync();
29+
30+
console.log("Canvas object:", canvas);
31+
});
32+
}
33+
34+
async function getCanvases() {
35+
await Word.run(async (context) => {
36+
// Gets the canvases found in the document body.
37+
const canvases: Word.ShapeCollection = context.document.body.shapes.getByTypes([Word.ShapeType.canvas]);
38+
canvases.load("items");
39+
await context.sync();
40+
41+
if (canvases.items.length == 0) {
42+
console.log("No canvases found in the document body.");
43+
return;
44+
}
45+
46+
console.log("Canvases found in the document body:", canvases);
47+
});
48+
}
49+
50+
async function getFirstCanvas() {
51+
await Word.run(async (context) => {
52+
// Gets the first canvas found in the document body.
53+
const canvasShape: Word.Shape = context.document.body.shapes
54+
.getByTypes([Word.ShapeType.canvas])
55+
.getFirstOrNullObject();
56+
canvasShape.load();
57+
canvasShape.load("canvas/shapes");
58+
await context.sync();
59+
60+
if (canvasShape.isNullObject) {
61+
console.log("No canvases found in the document body.");
62+
return;
63+
}
64+
65+
console.log("First canvas found in the document body:", canvasShape);
66+
console.log("Shapes associated with the first canvas:", canvasShape.canvas.shapes);
67+
canvasShape.select();
68+
});
69+
}
70+
71+
async function moveFirstCanvas() {
72+
await Word.run(async (context) => {
73+
// Moves the first canvas found in the document body.
74+
const canvasShape: Word.Shape = context.document.body.shapes
75+
.getByTypes([Word.ShapeType.canvas])
76+
.getFirstOrNullObject();
77+
canvasShape.load();
78+
canvasShape.load("canvas/shapes");
79+
await context.sync();
80+
81+
if (canvasShape.isNullObject) {
82+
console.log("No canvases found in the document body.");
83+
return;
84+
}
85+
86+
console.log("First canvas found in the document body:", canvasShape);
87+
canvasShape.moveHorizontally(50);
88+
canvasShape.moveVertically(-10);
89+
console.log("Moved the first canvas.");
90+
});
91+
}
92+
93+
async function deleteFirstCanvas() {
94+
await Word.run(async (context) => {
95+
// Deletes the first canvas found in the document body.
96+
const canvasShape: Word.Shape = context.document.body.shapes
97+
.getByTypes([Word.ShapeType.canvas])
98+
.getFirstOrNullObject();
99+
canvasShape.load();
100+
canvasShape.load("canvas/shapes");
101+
await context.sync();
102+
103+
if (canvasShape.isNullObject) {
104+
console.log("No canvases found in the document body.");
105+
return;
106+
}
107+
108+
console.log("First canvas found in the document body:", canvasShape);
109+
canvasShape.delete();
110+
console.log("Deleted the first canvas.");
111+
});
112+
}
113+
114+
// Default helper for invoking an action and handling errors.
115+
async function tryCatch(callback) {
116+
try {
117+
await callback();
118+
} catch (error) {
119+
// Note: In a production add-in, you'd want to notify the user through your add-in's UI.
120+
console.error(error);
121+
}
122+
}
123+
language: typescript
124+
template:
125+
content: |-
126+
<section class="ms-Fabric ms-font-m">
127+
This sample demonstrates how to work with canvases.
128+
</section>
129+
<section class="ms-Fabric samples ms-font-m">
130+
<h3>Try it out</h3>
131+
<button id="insert-canvas" class="ms-Button">
132+
<span class="ms-Button-label">Insert canvas</span>
133+
</button>
134+
<button id="get-canvases" class="ms-Button">
135+
<span class="ms-Button-label">Get canvases</span>
136+
</button>
137+
<button id="get-first-canvas" class="ms-Button">
138+
<span class="ms-Button-label">Get first canvas</span>
139+
</button>
140+
<button id="move-first-canvas" class="ms-Button">
141+
<span class="ms-Button-label">Move first canvas</span>
142+
</button>
143+
<button id="delete-first-canvas" class="ms-Button">
144+
<span class="ms-Button-label">Delete first canvas</span>
145+
</button>
146+
</section>
147+
language: html
148+
style:
149+
content: |-
150+
section.samples {
151+
margin-top: 20px;
152+
}
153+
154+
section.samples .ms-Button, section.setup .ms-Button {
155+
display: block;
156+
margin-bottom: 5px;
157+
margin-left: 20px;
158+
min-width: 80px;
159+
}
160+
language: css
161+
libraries: |-
162+
https://appsforoffice.microsoft.com/lib/1/hosted/office.js
163+
https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts
164+
165+
https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
166+
https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css

‎samples/word/45-shapes/manage-shapes-text-boxes.yaml‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ script:
7979
}
8080
});
8181
} else {
82-
console.log("No shapes found in main document.");
82+
console.log("No shapes found in the main document.");
8383
}
8484
});
8585
}
@@ -92,7 +92,7 @@ script:
9292
await context.sync();
9393
9494
if (shape.isNullObject) {
95-
console.log("No shapes with text boxes found in main document.");
95+
console.log("No shapes with text boxes found in the main document.");
9696
return;
9797
}
9898
@@ -130,7 +130,7 @@ script:
130130
await context.sync();
131131
132132
if (shape.isNullObject) {
133-
console.log("No shapes with text boxes found in main document.");
133+
console.log("No shapes with text boxes found in the main document.");
134134
return;
135135
}
136136
@@ -146,7 +146,7 @@ script:
146146
await context.sync();
147147
148148
if (shape.isNullObject) {
149-
console.log("No shapes with text boxes found in main document.");
149+
console.log("No shapes with text boxes found in the main document.");
150150
return;
151151
}
152152
@@ -184,7 +184,7 @@ script:
184184
185185
console.log(
186186
shape.isNullObject
187-
? "No shapes with text boxes found in main document."
187+
? "No shapes with text boxes found in the main document."
188188
: `Text in first text box: ${shape.body.text}`
189189
);
190190
});
@@ -295,7 +295,7 @@ script:
295295
}
296296
});
297297
} else {
298-
console.log("No shapes found in header.");
298+
console.log("No shapes found in the header.");
299299
}
300300
});
301301
}

‎snippet-extractor-metadata/word.xlsx‎

23 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)