Skip to content

Commit ddf187a

Browse files
ElizabethSamuel-MSFTElizabethSamuel-MSFT
authored
[PowerPoint] Add group-ungroup-shapes snippet (OfficeDev#982)
* [PowerPoint] Add group-ungroup-shapes snippet * Add API mapping
1 parent 762fe34 commit ddf187a

File tree

7 files changed

+320
-0
lines changed

7 files changed

+320
-0
lines changed

‎playlists-prod/powerpoint.yaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,15 @@
8989
group: Shapes
9090
api_set:
9191
PowerPointApi: '1.4'
92+
- id: powerpoint-shapes-group-ungroup-shapes
93+
name: Group and ungroup shapes
94+
fileName: group-ungroup-shapes.yaml
95+
description: Shows how to create two shapes then group and ungroup them.
96+
rawUrl: >-
97+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/group-ungroup-shapes.yaml
98+
group: Shapes
99+
api_set:
100+
PowerPointApi: '1.8'
92101
- id: powerpoint-shapes
93102
name: 'Insert shape, line, and text box'
94103
fileName: shapes.yaml

‎playlists/powerpoint.yaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,15 @@
8989
group: Shapes
9090
api_set:
9191
PowerPointApi: '1.4'
92+
- id: powerpoint-shapes-group-ungroup-shapes
93+
name: Group and ungroup shapes
94+
fileName: group-ungroup-shapes.yaml
95+
description: Shows how to create two shapes then group and ungroup them.
96+
rawUrl: >-
97+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/group-ungroup-shapes.yaml
98+
group: Shapes
99+
api_set:
100+
PowerPointApi: '1.8'
92101
- id: powerpoint-shapes
93102
name: 'Insert shape, line, and text box'
94103
fileName: shapes.yaml

‎samples/powerpoint/shapes/group-ungroup-shapes.yaml‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
order: 6
2+
id: powerpoint-shapes-group-ungroup-shapes
3+
name: Group and ungroup shapes
4+
description: Shows how to create two shapes then group and ungroup them.
5+
author: aafvstam
6+
host: POWERPOINT
7+
api_set:
8+
PowerPointApi: '1.8'
9+
script:
10+
content: |
11+
document.getElementById("group-shapes").addEventListener("click", () => tryCatch(groupShapes));
12+
document.getElementById("ungroup-shapes").addEventListener("click", () => tryCatch(ungroupShapes));
13+
document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
14+
15+
async function groupShapes() {
16+
await PowerPoint.run(async (context) => {
17+
// Groups the geometric shapes on the current slide.
18+
19+
// Get the current slide.
20+
context.presentation.load("slides");
21+
const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
22+
23+
// Get the shapes.
24+
slide.load("shapes");
25+
await context.sync();
26+
27+
const shapes: PowerPoint.ShapeCollection = slide.shapes;
28+
shapes.load("items/type,items/id");
29+
await context.sync();
30+
31+
// Group the geometric shapes.
32+
const shapesToGroup = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.geometricShape);
33+
console.log(`Number of shapes to group: ${shapesToGroup.length}`);
34+
const group = shapes.addGroup(shapesToGroup);
35+
group.load("id");
36+
await context.sync();
37+
38+
console.log(`Grouped shapes. Group ID: ${group.id}`);
39+
});
40+
}
41+
42+
async function ungroupShapes() {
43+
await PowerPoint.run(async (context) => {
44+
// Ungroups the first shape group on the current slide.
45+
46+
// Get the current slide.
47+
context.presentation.load("slides");
48+
const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
49+
50+
// Get the shapes.
51+
slide.load("shapes");
52+
await context.sync();
53+
54+
const shapes: PowerPoint.ShapeCollection = slide.shapes;
55+
shapes.load("items/type,items/id");
56+
await context.sync();
57+
58+
// Ungroup the first grouped shapes.
59+
const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
60+
if (shapeGroups.length == 0) {
61+
console.warn("No shape groups on the current slide so nothing to ungroup.");
62+
return;
63+
}
64+
65+
const firstGroupId = shapeGroups[0].id;
66+
const shapeGroupToUngroup = shapes.getItem(firstGroupId);
67+
shapeGroupToUngroup.group.ungroup();
68+
await context.sync();
69+
70+
console.log(`Ungrouped shapes with group ID: ${firstGroupId}`);
71+
});
72+
}
73+
74+
async function setup() {
75+
await PowerPoint.run(async (context) => {
76+
// Adds a new slide with two shapes.
77+
const slideCountResult = context.presentation.slides.getCount();
78+
context.presentation.slides.add();
79+
await context.sync();
80+
81+
const newSlide = context.presentation.slides.getItemAt(slideCountResult.value);
82+
newSlide.load("id");
83+
84+
// Create two shapes.
85+
const shape1 = newSlide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.rectangle);
86+
shape1.left = 100;
87+
shape1.top = 100;
88+
shape1.width = 150;
89+
shape1.height = 100;
90+
shape1.fill.foregroundColor = "darkred";
91+
92+
const shape2 = newSlide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.ellipse);
93+
shape2.left = 300;
94+
shape2.top = 100;
95+
shape2.width = 150;
96+
shape2.height = 100;
97+
shape2.fill.foregroundColor = "darkblue";
98+
99+
await context.sync();
100+
101+
console.log(`Added slide - ID: ${newSlide.id}`);
102+
103+
// Switch to the new slide.
104+
context.presentation.setSelectedSlides([newSlide.id]);
105+
await context.sync();
106+
});
107+
}
108+
109+
// Default helper for invoking an action and handling errors.
110+
async function tryCatch(callback) {
111+
try {
112+
await callback();
113+
} catch (error) {
114+
// Note: In a production add-in, you'd want to notify the user through your add-in's UI.
115+
console.error(error);
116+
}
117+
}
118+
language: typescript
119+
template:
120+
content: |-
121+
<section class="ms-Fabric ms-font-m">
122+
<p>Shows how to group then ungroup shapes.</p>
123+
</section>
124+
<section class="ms-Fabric setup ms-font-m">
125+
<h3>Set up</h3>
126+
<button id="setup" class="ms-Button">
127+
<span class="ms-Button-label">Set up</span>
128+
</button>
129+
</section>
130+
<section class="ms-Fabric samples ms-font-m">
131+
<h3>Try it out</h3>
132+
<button id="group-shapes" class="ms-Button">
133+
<span class="ms-Button-label">Group shapes</span>
134+
</button>
135+
<button id="ungroup-shapes" class="ms-Button">
136+
<span class="ms-Button-label">Ungroup shapes</span>
137+
</button>
138+
</section>
139+
language: html
140+
style:
141+
content: |
142+
section.samples {
143+
margin-top: 20px;
144+
}
145+
section.samples .ms-Button, section.setup .ms-Button {
146+
display: block;
147+
margin-bottom: 5px;
148+
margin-left: 20px;
149+
min-width: 80px;
150+
}
151+
.content {
152+
padding: 0 18px;
153+
/* display: none; */
154+
overflow: hidden;
155+
background-color: #f1f1f1;
156+
max-height: 0;
157+
transition: max-height 0.2s ease-out;
158+
}
159+
language: css
160+
libraries: |-
161+
https://appsforoffice.microsoft.com/lib/1/hosted/office.js
162+
@types/office-js
163+
164+
https://unpkg.com/[email protected]/dist/css/fabric.min.css
165+
https://unpkg.com/[email protected]/dist/css/fabric.components.min.css

‎snippet-extractor-metadata/powerpoint.xlsx‎

191 Bytes
Binary file not shown.

‎snippet-extractor-output/snippets.yaml‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15221,6 +15221,41 @@
1522115221
});
1522215222
await context.sync();
1522315223
});
15224+
'PowerPoint.Shape#group:member':
15225+
- >-
15226+
// Link to full sample:
15227+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/group-ungroup-shapes.yaml
15228+
15229+
15230+
await PowerPoint.run(async (context) => {
15231+
// Ungroups the first shape group on the current slide.
15232+
15233+
// Get the current slide.
15234+
context.presentation.load("slides");
15235+
const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
15236+
15237+
// Get the shapes.
15238+
slide.load("shapes");
15239+
await context.sync();
15240+
15241+
const shapes: PowerPoint.ShapeCollection = slide.shapes;
15242+
shapes.load("items/type,items/id");
15243+
await context.sync();
15244+
15245+
// Ungroup the first grouped shapes.
15246+
const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
15247+
if (shapeGroups.length == 0) {
15248+
console.warn("No shape groups on the current slide so nothing to ungroup.");
15249+
return;
15250+
}
15251+
15252+
const firstGroupId = shapeGroups[0].id;
15253+
const shapeGroupToUngroup = shapes.getItem(firstGroupId);
15254+
shapeGroupToUngroup.group.ungroup();
15255+
await context.sync();
15256+
15257+
console.log(`Ungrouped shapes with group ID: ${firstGroupId}`);
15258+
});
1522415259
'PowerPoint.Shape#height:member':
1522515260
- >-
1522615261
// Link to full sample:
@@ -15427,6 +15462,36 @@
1542715462

1542815463
await context.sync();
1542915464
});
15465+
'PowerPoint.ShapeCollection#addGroup:member(1)':
15466+
- >-
15467+
// Link to full sample:
15468+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/group-ungroup-shapes.yaml
15469+
15470+
15471+
await PowerPoint.run(async (context) => {
15472+
// Groups the geometric shapes on the current slide.
15473+
15474+
// Get the current slide.
15475+
context.presentation.load("slides");
15476+
const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
15477+
15478+
// Get the shapes.
15479+
slide.load("shapes");
15480+
await context.sync();
15481+
15482+
const shapes: PowerPoint.ShapeCollection = slide.shapes;
15483+
shapes.load("items/type,items/id");
15484+
await context.sync();
15485+
15486+
// Group the geometric shapes.
15487+
const shapesToGroup = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.geometricShape);
15488+
console.log(`Number of shapes to group: ${shapesToGroup.length}`);
15489+
const group = shapes.addGroup(shapesToGroup);
15490+
group.load("id");
15491+
await context.sync();
15492+
15493+
console.log(`Grouped shapes. Group ID: ${group.id}`);
15494+
});
1543015495
'PowerPoint.ShapeCollection#addLine:member(1)':
1543115496
- >-
1543215497
// Link to full sample:
@@ -15642,6 +15707,76 @@
1564215707
textRange.font.color = "green";
1564315708
await context.sync();
1564415709
});
15710+
'PowerPoint.ShapeGroup:class':
15711+
- >-
15712+
// Link to full sample:
15713+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/group-ungroup-shapes.yaml
15714+
15715+
15716+
await PowerPoint.run(async (context) => {
15717+
// Ungroups the first shape group on the current slide.
15718+
15719+
// Get the current slide.
15720+
context.presentation.load("slides");
15721+
const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
15722+
15723+
// Get the shapes.
15724+
slide.load("shapes");
15725+
await context.sync();
15726+
15727+
const shapes: PowerPoint.ShapeCollection = slide.shapes;
15728+
shapes.load("items/type,items/id");
15729+
await context.sync();
15730+
15731+
// Ungroup the first grouped shapes.
15732+
const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
15733+
if (shapeGroups.length == 0) {
15734+
console.warn("No shape groups on the current slide so nothing to ungroup.");
15735+
return;
15736+
}
15737+
15738+
const firstGroupId = shapeGroups[0].id;
15739+
const shapeGroupToUngroup = shapes.getItem(firstGroupId);
15740+
shapeGroupToUngroup.group.ungroup();
15741+
await context.sync();
15742+
15743+
console.log(`Ungrouped shapes with group ID: ${firstGroupId}`);
15744+
});
15745+
'PowerPoint.ShapeGroup#ungroup:member(1)':
15746+
- >-
15747+
// Link to full sample:
15748+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/group-ungroup-shapes.yaml
15749+
15750+
15751+
await PowerPoint.run(async (context) => {
15752+
// Ungroups the first shape group on the current slide.
15753+
15754+
// Get the current slide.
15755+
context.presentation.load("slides");
15756+
const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
15757+
15758+
// Get the shapes.
15759+
slide.load("shapes");
15760+
await context.sync();
15761+
15762+
const shapes: PowerPoint.ShapeCollection = slide.shapes;
15763+
shapes.load("items/type,items/id");
15764+
await context.sync();
15765+
15766+
// Ungroup the first grouped shapes.
15767+
const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
15768+
if (shapeGroups.length == 0) {
15769+
console.warn("No shape groups on the current slide so nothing to ungroup.");
15770+
return;
15771+
}
15772+
15773+
const firstGroupId = shapeGroups[0].id;
15774+
const shapeGroupToUngroup = shapes.getItem(firstGroupId);
15775+
shapeGroupToUngroup.group.ungroup();
15776+
await context.sync();
15777+
15778+
console.log(`Ungrouped shapes with group ID: ${firstGroupId}`);
15779+
});
1564515780
'PowerPoint.ShapeLineDashStyle:enum':
1564615781
- >-
1564715782
// Link to full sample:

‎view-prod/powerpoint.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"powerpoint-scenarios-searches-wikipedia-api": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/scenarios/searches-wikipedia-api.yaml",
1010
"powerpoint-shapes-get-set-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml",
1111
"powerpoint-shapes-get-shapes-by-type": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml",
12+
"powerpoint-shapes-group-ungroup-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/group-ungroup-shapes.yaml",
1213
"powerpoint-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml",
1314
"powerpoint-add-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml",
1415
"powerpoint-insert-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/insert-slides.yaml",

‎view/powerpoint.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"powerpoint-scenarios-searches-wikipedia-api": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/scenarios/searches-wikipedia-api.yaml",
1010
"powerpoint-shapes-get-set-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/get-set-shapes.yaml",
1111
"powerpoint-shapes-get-shapes-by-type": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/get-shapes-by-type.yaml",
12+
"powerpoint-shapes-group-ungroup-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/group-ungroup-shapes.yaml",
1213
"powerpoint-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/shapes.yaml",
1314
"powerpoint-add-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/add-slides.yaml",
1415
"powerpoint-insert-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/insert-slides.yaml",

0 commit comments

Comments
 (0)