Skip to content

Commit bbba85e

Browse files
ElizabethSamuel-MSFTElizabethSamuel-MSFT
authored
[PowerPoint] Fix get-set-shapes snippet (OfficeDev#981)
* [PowerPoint] Fix get-set-shapes snippet * Tweak group-ungroup snippet * Link to contributor on task pane * Tweak
1 parent cb9dea0 commit bbba85e

File tree

3 files changed

+60
-68
lines changed

3 files changed

+60
-68
lines changed

‎samples/powerpoint/shapes/get-set-shapes.yaml‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ host: POWERPOINT
66
api_set:
77
PowerPointApi: '1.5'
88
script:
9-
content: |-
9+
content: |
1010
document.getElementById("getSelectedShapes").addEventListener("click", () => tryCatch(getSelectedShapes));
1111
document.getElementById("setSelectedShapes").addEventListener("click", () => tryCatch(setSelectedShapes));
1212
document.getElementById("changeFill").addEventListener("click", () => tryCatch(changeFill));
@@ -43,14 +43,17 @@ script:
4343
context.presentation.load("slides");
4444
await context.sync();
4545
const slide1 = context.presentation.slides.getItemAt(0);
46-
slide1.load("shapes");
46+
slide1.load("shapes/items/type");
4747
await context.sync();
48-
const shapes: PowerPoint.ShapeCollection = slide1.shapes;
49-
const shape1: PowerPoint.Shape = shapes.getItemAt(0);
50-
const shape2: PowerPoint.Shape = shapes.getItemAt(1);
48+
49+
const shapes = slide1.shapes.items.filter((item) => item.type === PowerPoint.ShapeType.geometricShape);
50+
const shape1: PowerPoint.Shape = shapes[0];
51+
const shape2: PowerPoint.Shape = shapes[1];
5152
shape1.load("id");
5253
shape2.load("id");
5354
await context.sync();
55+
56+
console.log(`IDs: ${shape1.id}, ${shape2.id}`)
5457
slide1.setSelectedShapes([shape1.id, shape2.id]);
5558
await context.sync();
5659
});
@@ -127,21 +130,19 @@ script:
127130
const minNewShapeWidth = 50;
128131
const minNewShapeHeight = 50;
129132
for (let i = 0; i < 20; i++) {
130-
const rectangle: PowerPoint.Shape = currentSlide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.rectangle);
133+
const rectangle: PowerPoint.Shape = currentSlide.shapes.addGeometricShape(
134+
PowerPoint.GeometricShapeType.rectangle
135+
);
131136
rectangle.height = getRandomBetween(minNewShapeWidth, maxNewShapeWidth);
132137
rectangle.width = getRandomBetween(minNewShapeHeight, maxNewShapeHeight);
133138
rectangle.left = getRandomBetween(0, slideWidth - rectangle.width);
134139
rectangle.top = getRandomBetween(0, slideHeight - rectangle.height);
135140
rectangle.fill.foregroundColor = generateRandomHexColor();
136141
}
137142
finalTable += "Done<br>";
138-
const slideTags = document.getElementById("slide-tags");
139-
if (slideTags) {
140-
slideTags.innerHTML = "";
141-
slideTags.innerHTML += finalTable;
142-
} else {
143-
console.warn('Element with ID "slide-tags" not found.');
144-
}
143+
const outputSpan = document.getElementById("outputSpan");
144+
outputSpan.innerHTML = "";
145+
outputSpan.innerHTML += finalTable;
145146
});
146147
}
147148

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

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,17 @@ script:
2020
// Get the shapes on the current slide.
2121
context.presentation.load("slides");
2222
const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
23-
slide.load("shapes");
23+
slide.load("shapes/items/type,shapes/items/id");
2424
await context.sync();
2525
2626
const shapes: PowerPoint.ShapeCollection = slide.shapes;
27-
shapes.load("items/type,items/id");
28-
await context.sync();
27+
const shapesToGroup = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.geometricShape);
28+
if (shapesToGroup.length === 0) {
29+
console.warn("No shapes on the current slide, so nothing to group.");
30+
return;
31+
}
2932
3033
// Group the geometric shapes.
31-
const shapesToGroup = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.geometricShape);
3234
console.log(`Number of shapes to group: ${shapesToGroup.length}`);
3335
const group = shapes.addGroup(shapesToGroup);
3436
group.load("id");
@@ -45,20 +47,17 @@ script:
4547
// Get the shapes on the current slide.
4648
context.presentation.load("slides");
4749
const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
48-
slide.load("shapes");
50+
slide.load("shapes/items/type,shapes/items/id");
4951
await context.sync();
5052
5153
const shapes: PowerPoint.ShapeCollection = slide.shapes;
52-
shapes.load("items/type,items/id");
53-
await context.sync();
54-
55-
// Move the first grouped shapes.
5654
const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
57-
if (shapeGroups.length == 0) {
58-
console.warn("No shape groups on the current slide so nothing to move.");
55+
if (shapeGroups.length === 0) {
56+
console.warn("No shape groups on the current slide, so nothing to move.");
5957
return;
6058
}
6159
60+
// Move the first grouped shapes.
6261
const firstGroupId = shapeGroups[0].id;
6362
const shapeGroupToMove = shapes.getItem(firstGroupId);
6463
shapeGroupToMove.top = 0;
@@ -76,20 +75,17 @@ script:
7675
// Get the shapes on the current slide.
7776
context.presentation.load("slides");
7877
const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
79-
slide.load("shapes");
78+
slide.load("shapes/items/type,shapes/items/id");
8079
await context.sync();
8180
8281
const shapes: PowerPoint.ShapeCollection = slide.shapes;
83-
shapes.load("items/type,items/id");
84-
await context.sync();
85-
86-
// Ungroup the first grouped shapes.
8782
const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
88-
if (shapeGroups.length == 0) {
89-
console.warn("No shape groups on the current slide so nothing to ungroup.");
83+
if (shapeGroups.length === 0) {
84+
console.warn("No shape groups on the current slide, so nothing to ungroup.");
9085
return;
9186
}
9287
88+
// Ungroup the first grouped shapes.
9389
const firstGroupId = shapeGroups[0].id;
9490
const shapeGroupToUngroup = shapes.getItem(firstGroupId);
9591
shapeGroupToUngroup.group.ungroup();
@@ -148,6 +144,7 @@ template:
148144
content: |-
149145
<section class="ms-Fabric ms-font-m">
150146
<p>Shows how to group then ungroup shapes.</p>
147+
<p><i>Code sample based on community contribution from <a href="https://github.com/aafvstam" target="_blank">Maarten van Stam</a>.</i></p>
151148
</section>
152149
<section class="ms-Fabric setup ms-font-m">
153150
<h3>Set up</h3>

‎snippet-extractor-output/snippets.yaml‎

Lines changed: 31 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -15776,20 +15776,17 @@
1577615776
// Get the shapes on the current slide.
1577715777
context.presentation.load("slides");
1577815778
const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
15779-
slide.load("shapes");
15779+
slide.load("shapes/items/type,shapes/items/id");
1578015780
await context.sync();
1578115781

1578215782
const shapes: PowerPoint.ShapeCollection = slide.shapes;
15783-
shapes.load("items/type,items/id");
15784-
await context.sync();
15785-
15786-
// Ungroup the first grouped shapes.
1578715783
const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
15788-
if (shapeGroups.length == 0) {
15789-
console.warn("No shape groups on the current slide so nothing to ungroup.");
15784+
if (shapeGroups.length === 0) {
15785+
console.warn("No shape groups on the current slide, so nothing to ungroup.");
1579015786
return;
1579115787
}
1579215788

15789+
// Ungroup the first grouped shapes.
1579315790
const firstGroupId = shapeGroups[0].id;
1579415791
const shapeGroupToUngroup = shapes.getItem(firstGroupId);
1579515792
shapeGroupToUngroup.group.ungroup();
@@ -16015,15 +16012,17 @@
1601516012
// Get the shapes on the current slide.
1601616013
context.presentation.load("slides");
1601716014
const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
16018-
slide.load("shapes");
16015+
slide.load("shapes/items/type,shapes/items/id");
1601916016
await context.sync();
1602016017

1602116018
const shapes: PowerPoint.ShapeCollection = slide.shapes;
16022-
shapes.load("items/type,items/id");
16023-
await context.sync();
16019+
const shapesToGroup = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.geometricShape);
16020+
if (shapesToGroup.length === 0) {
16021+
console.warn("No shapes on the current slide, so nothing to group.");
16022+
return;
16023+
}
1602416024

1602516025
// Group the geometric shapes.
16026-
const shapesToGroup = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.geometricShape);
1602716026
console.log(`Number of shapes to group: ${shapesToGroup.length}`);
1602816027
const group = shapes.addGroup(shapesToGroup);
1602916028
group.load("id");
@@ -16212,21 +16211,19 @@
1621216211
const minNewShapeWidth = 50;
1621316212
const minNewShapeHeight = 50;
1621416213
for (let i = 0; i < 20; i++) {
16215-
const rectangle: PowerPoint.Shape = currentSlide.shapes.addGeometricShape(PowerPoint.GeometricShapeType.rectangle);
16214+
const rectangle: PowerPoint.Shape = currentSlide.shapes.addGeometricShape(
16215+
PowerPoint.GeometricShapeType.rectangle
16216+
);
1621616217
rectangle.height = getRandomBetween(minNewShapeWidth, maxNewShapeWidth);
1621716218
rectangle.width = getRandomBetween(minNewShapeHeight, maxNewShapeHeight);
1621816219
rectangle.left = getRandomBetween(0, slideWidth - rectangle.width);
1621916220
rectangle.top = getRandomBetween(0, slideHeight - rectangle.height);
1622016221
rectangle.fill.foregroundColor = generateRandomHexColor();
1622116222
}
1622216223
finalTable += "Done<br>";
16223-
const slideTags = document.getElementById("slide-tags");
16224-
if (slideTags) {
16225-
slideTags.innerHTML = "";
16226-
slideTags.innerHTML += finalTable;
16227-
} else {
16228-
console.warn('Element with ID "slide-tags" not found.');
16229-
}
16224+
const outputSpan = document.getElementById("outputSpan");
16225+
outputSpan.innerHTML = "";
16226+
outputSpan.innerHTML += finalTable;
1623016227
});
1623116228
'PowerPoint.ShapeFill#setSolidColor:member(1)':
1623216229
- >-
@@ -16306,20 +16303,17 @@
1630616303
// Get the shapes on the current slide.
1630716304
context.presentation.load("slides");
1630816305
const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
16309-
slide.load("shapes");
16306+
slide.load("shapes/items/type,shapes/items/id");
1631016307
await context.sync();
1631116308

1631216309
const shapes: PowerPoint.ShapeCollection = slide.shapes;
16313-
shapes.load("items/type,items/id");
16314-
await context.sync();
16315-
16316-
// Ungroup the first grouped shapes.
1631716310
const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
16318-
if (shapeGroups.length == 0) {
16319-
console.warn("No shape groups on the current slide so nothing to ungroup.");
16311+
if (shapeGroups.length === 0) {
16312+
console.warn("No shape groups on the current slide, so nothing to ungroup.");
1632016313
return;
1632116314
}
1632216315

16316+
// Ungroup the first grouped shapes.
1632316317
const firstGroupId = shapeGroups[0].id;
1632416318
const shapeGroupToUngroup = shapes.getItem(firstGroupId);
1632516319
shapeGroupToUngroup.group.ungroup();
@@ -16339,20 +16333,17 @@
1633916333
// Get the shapes on the current slide.
1634016334
context.presentation.load("slides");
1634116335
const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
16342-
slide.load("shapes");
16336+
slide.load("shapes/items/type,shapes/items/id");
1634316337
await context.sync();
1634416338

1634516339
const shapes: PowerPoint.ShapeCollection = slide.shapes;
16346-
shapes.load("items/type,items/id");
16347-
await context.sync();
16348-
16349-
// Ungroup the first grouped shapes.
1635016340
const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
16351-
if (shapeGroups.length == 0) {
16352-
console.warn("No shape groups on the current slide so nothing to ungroup.");
16341+
if (shapeGroups.length === 0) {
16342+
console.warn("No shape groups on the current slide, so nothing to ungroup.");
1635316343
return;
1635416344
}
1635516345

16346+
// Ungroup the first grouped shapes.
1635616347
const firstGroupId = shapeGroups[0].id;
1635716348
const shapeGroupToUngroup = shapes.getItem(firstGroupId);
1635816349
shapeGroupToUngroup.group.ungroup();
@@ -16593,14 +16584,17 @@
1659316584
context.presentation.load("slides");
1659416585
await context.sync();
1659516586
const slide1 = context.presentation.slides.getItemAt(0);
16596-
slide1.load("shapes");
16587+
slide1.load("shapes/items/type");
1659716588
await context.sync();
16598-
const shapes: PowerPoint.ShapeCollection = slide1.shapes;
16599-
const shape1: PowerPoint.Shape = shapes.getItemAt(0);
16600-
const shape2: PowerPoint.Shape = shapes.getItemAt(1);
16589+
16590+
const shapes = slide1.shapes.items.filter((item) => item.type === PowerPoint.ShapeType.geometricShape);
16591+
const shape1: PowerPoint.Shape = shapes[0];
16592+
const shape2: PowerPoint.Shape = shapes[1];
1660116593
shape1.load("id");
1660216594
shape2.load("id");
1660316595
await context.sync();
16596+
16597+
console.log(`IDs: ${shape1.id}, ${shape2.id}`)
1660416598
slide1.setSelectedShapes([shape1.id, shape2.id]);
1660516599
await context.sync();
1660616600
});

0 commit comments

Comments
 (0)