Skip to content

Commit 7f9d793

Browse files
ElizabethSamuel-MSFTElizabethSamuel-MSFT
authored
[Word] (ShapeGroup) Add snippet (#1023)
* [Word] (ShapeGroup) Add snippet * Remove unneeded function * Additional mapping
1 parent 706a2d6 commit 7f9d793

File tree

7 files changed

+300
-0
lines changed

7 files changed

+300
-0
lines changed

‎playlists-prod/word.yaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -395,6 +395,15 @@
395395
group: Shapes
396396
api_set:
397397
WordApiDesktop: '1.2'
398+
- id: word-shapes-group-ungroup
399+
name: Group and ungroup shapes
400+
fileName: group-ungroup.yaml
401+
description: Shows how to group and ungroup shapes.
402+
rawUrl: >-
403+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
404+
group: Shapes
405+
api_set:
406+
WordApiDesktop: '1.2'
398407
- id: word-document-manage-body
399408
name: Manage body
400409
fileName: manage-body.yaml

‎playlists/word.yaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -395,6 +395,15 @@
395395
group: Shapes
396396
api_set:
397397
WordApiDesktop: '1.2'
398+
- id: word-shapes-group-ungroup
399+
name: Group and ungroup shapes
400+
fileName: group-ungroup.yaml
401+
description: Shows how to group and ungroup shapes.
402+
rawUrl: >-
403+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/45-shapes/group-ungroup.yaml
404+
group: Shapes
405+
api_set:
406+
WordApiDesktop: '1.2'
398407
- id: word-document-manage-body
399408
name: Manage body
400409
fileName: manage-body.yaml

‎samples/word/45-shapes/group-ungroup.yaml‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
order: 3
2+
id: word-shapes-group-ungroup
3+
name: Group and ungroup shapes
4+
description: Shows how to group and ungroup shapes.
5+
host: WORD
6+
api_set:
7+
WordApiDesktop: '1.2'
8+
script:
9+
content: |
10+
document.getElementById("group-shapes").addEventListener("click", () => tryCatch(groupShapes));
11+
document.getElementById("ungroup-shapes").addEventListener("click", () => tryCatch(ungroupShapes));
12+
document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
13+
14+
async function groupShapes() {
15+
await Word.run(async (context) => {
16+
// Groups the shapes (including text boxes) found in the document body.
17+
const shapes: Word.ShapeCollection = context.document.body.shapes.getByTypes([
18+
Word.ShapeType.geometricShape,
19+
Word.ShapeType.textBox,
20+
]);
21+
shapes.load("items");
22+
await context.sync();
23+
24+
const numShapes = shapes.items.length;
25+
if (numShapes === 0) {
26+
console.log("No shapes found in document body.");
27+
return;
28+
}
29+
30+
console.log(`Number of shapes to group: ${numShapes}`);
31+
32+
const groupedShape: Word.Shape = shapes.group();
33+
groupedShape.load("shapeGroup/shapes");
34+
await context.sync();
35+
36+
const shapeGroup: Word.ShapeGroup = groupedShape.shapeGroup;
37+
console.log("Shapes grouped:", shapeGroup.shapes);
38+
groupedShape.select();
39+
});
40+
}
41+
42+
async function ungroupShapes() {
43+
await Word.run(async (context) => {
44+
// Ungroups the first set of grouped shapes (including text boxes) found in the document body.
45+
const firstShapeGroup: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.group]).getFirstOrNullObject();
46+
firstShapeGroup.load("shapeGroup/shapes");
47+
await context.sync();
48+
49+
if (firstShapeGroup.isNullObject) {
50+
console.log("No shape groups found in the document body.");
51+
return;
52+
}
53+
54+
let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
55+
console.log("About to ungroup first shape group found in document body:", shapeGroup.shapes);
56+
shapeGroup.ungroup();
57+
58+
console.log("Ungrouped first shape group.");
59+
});
60+
}
61+
62+
async function setup() {
63+
await Word.run(async (context) => {
64+
const body: Word.Body = context.document.body;
65+
body.clear();
66+
67+
// Inserts a text box.
68+
const textBoxOptions: Word.InsertShapeOptions = {
69+
top: 0,
70+
left: 0,
71+
height: 100,
72+
width: 100,
73+
};
74+
body.paragraphs.getLast().insertTextBox("placeholder text", textBoxOptions);
75+
76+
// Inserts a geometric shape.
77+
const geometricShapeOptions: Word.InsertShapeOptions = {
78+
height: 120,
79+
width: 120,
80+
left: 120,
81+
};
82+
body.paragraphs.getLast().insertGeometricShape(Word.GeometricShapeType.star24, geometricShapeOptions);
83+
await context.sync();
84+
});
85+
}
86+
87+
// Default helper for invoking an action and handling errors.
88+
async function tryCatch(callback) {
89+
try {
90+
await callback();
91+
} catch (error) {
92+
// Note: In a production add-in, you'd want to notify the user through your add-in's UI.
93+
console.error(error);
94+
}
95+
}
96+
language: typescript
97+
template:
98+
content: |-
99+
<section class="ms-Fabric ms-font-m">
100+
This sample demonstrates how to group and ungroup shapes.
101+
</section>
102+
<section class="ms-Fabric setup ms-font-m">
103+
<h3>Set up</h3>
104+
<button id="setup" class="ms-Button">
105+
<span class="ms-Button-label">Add shapes</span>
106+
</button>
107+
</section>
108+
<section class="ms-Fabric samples ms-font-m">
109+
<h3>Try it out</h3>
110+
<button id="group-shapes" class="ms-Button">
111+
<span class="ms-Button-label">Group shapes</span>
112+
</button>
113+
<button id="ungroup-shapes" class="ms-Button">
114+
<span class="ms-Button-label">Ungroup shapes</span>
115+
</button>
116+
</section>
117+
language: html
118+
style:
119+
content: |-
120+
section.samples {
121+
margin-top: 20px;
122+
}
123+
124+
section.samples .ms-Button, section.setup .ms-Button {
125+
display: block;
126+
margin-bottom: 5px;
127+
margin-left: 20px;
128+
min-width: 80px;
129+
}
130+
language: css
131+
libraries: |-
132+
https://appsforoffice.microsoft.com/lib/1/hosted/office.js
133+
https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts
134+
135+
https://unpkg.com/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
136+
https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css

‎snippet-extractor-metadata/word.xlsx‎

159 Bytes
Binary file not shown.

‎snippet-extractor-output/snippets.yaml‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26552,6 +26552,34 @@ Word.Paragraph#insertContentControl:member(1):
2655226552
}
2655326553
console.log("Content controls inserted: " + paragraphs.items.length);
2655426554

26555+
await context.sync();
26556+
});
26557+
Word.Paragraph#insertGeometricShape:member(1):
26558+
- >-
26559+
// Link to full sample:
26560+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
26561+
26562+
26563+
await Word.run(async (context) => {
26564+
const body: Word.Body = context.document.body;
26565+
body.clear();
26566+
26567+
// Inserts a text box.
26568+
const textBoxOptions: Word.InsertShapeOptions = {
26569+
top: 0,
26570+
left: 0,
26571+
height: 100,
26572+
width: 100,
26573+
};
26574+
body.paragraphs.getLast().insertTextBox("placeholder text", textBoxOptions);
26575+
26576+
// Inserts a geometric shape.
26577+
const geometricShapeOptions: Word.InsertShapeOptions = {
26578+
height: 120,
26579+
width: 120,
26580+
left: 120,
26581+
};
26582+
body.paragraphs.getLast().insertGeometricShape(Word.GeometricShapeType.star24, geometricShapeOptions);
2655526583
await context.sync();
2655626584
});
2655726585
Word.Paragraph#insertText:member(1):
@@ -27965,6 +27993,37 @@ Word.Shape#delete:member(1):
2796527993

2796627994
console.log("The first text box in document was deleted.");
2796727995
});
27996+
Word.Shape#select:member(1):
27997+
- >-
27998+
// Link to full sample:
27999+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
28000+
28001+
28002+
await Word.run(async (context) => {
28003+
// Groups the shapes (including text boxes) found in the document body.
28004+
const shapes: Word.ShapeCollection = context.document.body.shapes.getByTypes([
28005+
Word.ShapeType.geometricShape,
28006+
Word.ShapeType.textBox,
28007+
]);
28008+
shapes.load("items");
28009+
await context.sync();
28010+
28011+
const numShapes = shapes.items.length;
28012+
if (numShapes === 0) {
28013+
console.log("No shapes found in document body.");
28014+
return;
28015+
}
28016+
28017+
console.log(`Number of shapes to group: ${numShapes}`);
28018+
28019+
const groupedShape: Word.Shape = shapes.group();
28020+
groupedShape.load("shapeGroup/shapes");
28021+
await context.sync();
28022+
28023+
const shapeGroup: Word.ShapeGroup = groupedShape.shapeGroup;
28024+
console.log("Shapes grouped:", shapeGroup.shapes);
28025+
groupedShape.select();
28026+
});
2796828027
Word.Shape#body:member:
2796928028
- >-
2797028029
// Link to full sample:
@@ -28224,6 +28283,37 @@ Word.ShapeCollection#getFirstOrNullObject:member(1):
2822428283
: `Text in first text box: ${shape.body.text}`
2822528284
);
2822628285
});
28286+
Word.ShapeCollection#group:member(1):
28287+
- >-
28288+
// Link to full sample:
28289+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
28290+
28291+
28292+
await Word.run(async (context) => {
28293+
// Groups the shapes (including text boxes) found in the document body.
28294+
const shapes: Word.ShapeCollection = context.document.body.shapes.getByTypes([
28295+
Word.ShapeType.geometricShape,
28296+
Word.ShapeType.textBox,
28297+
]);
28298+
shapes.load("items");
28299+
await context.sync();
28300+
28301+
const numShapes = shapes.items.length;
28302+
if (numShapes === 0) {
28303+
console.log("No shapes found in document body.");
28304+
return;
28305+
}
28306+
28307+
console.log(`Number of shapes to group: ${numShapes}`);
28308+
28309+
const groupedShape: Word.Shape = shapes.group();
28310+
groupedShape.load("shapeGroup/shapes");
28311+
await context.sync();
28312+
28313+
const shapeGroup: Word.ShapeGroup = groupedShape.shapeGroup;
28314+
console.log("Shapes grouped:", shapeGroup.shapes);
28315+
groupedShape.select();
28316+
});
2822728317
Word.ShapeFill:class:
2822828318
- >-
2822928319
// Link to full sample:
@@ -28336,6 +28426,60 @@ Word.ShapeFillType:enum:
2833628426
console.log(`\tTransparency: ${moonFill.transparency}`);
2833728427
console.log(`\tFill type: ${moonFillType}`);
2833828428
});
28429+
Word.ShapeGroup:class:
28430+
- >-
28431+
// Link to full sample:
28432+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
28433+
28434+
28435+
await Word.run(async (context) => {
28436+
// Groups the shapes (including text boxes) found in the document body.
28437+
const shapes: Word.ShapeCollection = context.document.body.shapes.getByTypes([
28438+
Word.ShapeType.geometricShape,
28439+
Word.ShapeType.textBox,
28440+
]);
28441+
shapes.load("items");
28442+
await context.sync();
28443+
28444+
const numShapes = shapes.items.length;
28445+
if (numShapes === 0) {
28446+
console.log("No shapes found in document body.");
28447+
return;
28448+
}
28449+
28450+
console.log(`Number of shapes to group: ${numShapes}`);
28451+
28452+
const groupedShape: Word.Shape = shapes.group();
28453+
groupedShape.load("shapeGroup/shapes");
28454+
await context.sync();
28455+
28456+
const shapeGroup: Word.ShapeGroup = groupedShape.shapeGroup;
28457+
console.log("Shapes grouped:", shapeGroup.shapes);
28458+
groupedShape.select();
28459+
});
28460+
Word.ShapeGroup#ungroup:member(1):
28461+
- >-
28462+
// Link to full sample:
28463+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml
28464+
28465+
28466+
await Word.run(async (context) => {
28467+
// Ungroups the first set of grouped shapes (including text boxes) found in the document body.
28468+
const firstShapeGroup: Word.Shape = context.document.body.shapes.getByTypes([Word.ShapeType.group]).getFirstOrNullObject();
28469+
firstShapeGroup.load("shapeGroup/shapes");
28470+
await context.sync();
28471+
28472+
if (firstShapeGroup.isNullObject) {
28473+
console.log("No shape groups found in the document body.");
28474+
return;
28475+
}
28476+
28477+
let shapeGroup: Word.ShapeGroup = firstShapeGroup.shapeGroup;
28478+
console.log("About to ungroup first shape group found in document body:", shapeGroup.shapes);
28479+
shapeGroup.ungroup();
28480+
28481+
console.log("Ungrouped first shape group.");
28482+
});
2833928483
Word.ShapeTextOrientation:enum:
2834028484
- >-
2834128485
// Link to full sample:

‎view-prod/word.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"word-tables-manage-custom-style": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/40-tables/manage-custom-style.yaml",
4141
"word-shapes-manage-shapes-text-boxes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-shapes-text-boxes.yaml",
4242
"word-shapes-manage-geometric-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/manage-geometric-shapes.yaml",
43+
"word-shapes-group-ungroup": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/45-shapes/group-ungroup.yaml",
4344
"word-document-manage-body": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/manage-body.yaml",
4445
"word-document-insert-section-breaks": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-section-breaks.yaml",
4546
"word-document-insert-external-document": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/word/50-document/insert-external-document.yaml",

‎view/word.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"word-tables-manage-custom-style": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/40-tables/manage-custom-style.yaml",
4141
"word-shapes-manage-shapes-text-boxes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/45-shapes/manage-shapes-text-boxes.yaml",
4242
"word-shapes-manage-geometric-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/45-shapes/manage-geometric-shapes.yaml",
43+
"word-shapes-group-ungroup": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/45-shapes/group-ungroup.yaml",
4344
"word-document-manage-body": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/50-document/manage-body.yaml",
4445
"word-document-insert-section-breaks": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/50-document/insert-section-breaks.yaml",
4546
"word-document-insert-external-document": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/word/50-document/insert-external-document.yaml",

0 commit comments

Comments
 (0)