Skip to content

Commit 60a376c

Browse files
AlexJerabekElizabethSamuel-MSFT
AlexJerabek
and
ElizabethSamuel-MSFT
authored
[PowerPoint] (Shapes) Add PowerPoint snippet for shape selection by type (OfficeDev#905)
* Add powerpoint snippet for shape selection by type * Additional mapping * Apply suggestions from code review Co-authored-by: Elizabeth Samuel <[email protected]> * Run yarn start with review suggestions --------- Co-authored-by: Elizabeth Samuel <[email protected]>
1 parent 7e0ae35 commit 60a376c

File tree

7 files changed

+300
-0
lines changed

7 files changed

+300
-0
lines changed

‎playlists-prod/powerpoint.yaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,15 @@
6969
group: Shapes
7070
api_set:
7171
PowerPointApi: '1.5'
72+
- id: powerpoint-shapes-get-shapes-by-type
73+
name: Select shapes by type
74+
fileName: get-shapes-by-type.yaml
75+
description: 'Gets shapes in a slide based on their type, such as GeometricShape or Line.'
76+
rawUrl: >-
77+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
78+
group: Shapes
79+
api_set:
80+
PowerPointApi: '1.4'
7281
- id: powerpoint-shapes
7382
name: 'Insert shape, line, and text box'
7483
fileName: shapes.yaml

‎playlists/powerpoint.yaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,15 @@
6969
group: Shapes
7070
api_set:
7171
PowerPointApi: '1.5'
72+
- id: powerpoint-shapes-get-shapes-by-type
73+
name: Select shapes by type
74+
fileName: get-shapes-by-type.yaml
75+
description: 'Gets shapes in a slide based on their type, such as GeometricShape or Line.'
76+
rawUrl: >-
77+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/get-shapes-by-type.yaml
78+
group: Shapes
79+
api_set:
80+
PowerPointApi: '1.4'
7281
- id: powerpoint-shapes
7382
name: 'Insert shape, line, and text box'
7483
fileName: shapes.yaml

‎samples/powerpoint/shapes/get-shapes-by-type.yaml‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
order: 3
2+
id: powerpoint-shapes-get-shapes-by-type
3+
name: Select shapes by type
4+
description: 'Gets shapes in a slide based on their type, such as GeometricShape or Line.'
5+
host: POWERPOINT
6+
api_set:
7+
PowerPointApi: '1.4'
8+
script:
9+
content: |
10+
$("#setup").on("click", () => tryCatch(setup));
11+
$("#change-lines").on("click", () => tryCatch(changeLines));
12+
$("#change-geometric-shapes").on("click", () => tryCatch(changeGeometricShapes));
13+
14+
async function changeLines() {
15+
// Changes the dash style of every line in the slide.
16+
await PowerPoint.run(async (context) => {
17+
// Get the type of shape for every shape in the collection.
18+
const shapes = context.presentation.slides.getItemAt(0).shapes;
19+
shapes.load("type");
20+
await context.sync();
21+
22+
// Change the dash style for shapes of the type `line`.
23+
shapes.items.forEach((shape) => {
24+
if (shape.type === PowerPoint.ShapeType.line) {
25+
shape.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.dashDot;
26+
}
27+
});
28+
await context.sync();
29+
});
30+
}
31+
32+
async function changeGeometricShapes() {
33+
// Changes the transparency of every geometric shape in the slide.
34+
await PowerPoint.run(async (context) => {
35+
// Get the type of shape for every shape in the collection.
36+
const shapes = context.presentation.slides.getItemAt(0).shapes;
37+
shapes.load("type");
38+
await context.sync();
39+
40+
// Change the shape transparency to be halfway transparent.
41+
shapes.items.forEach((shape) => {
42+
if (shape.type === PowerPoint.ShapeType.geometricShape) {
43+
shape.fill.transparency = 0.5;
44+
}
45+
});
46+
await context.sync();
47+
});
48+
}
49+
50+
async function setup() {
51+
await PowerPoint.run(async (context) => {
52+
// Create shapes of different types.
53+
const shapes = context.presentation.slides.getItemAt(0).shapes;
54+
55+
// Create geometric shapes.
56+
shapes.addGeometricShape(PowerPoint.GeometricShapeType.diamond, {
57+
left: 100,
58+
top: 100,
59+
height: 150,
60+
width: 150
61+
});
62+
shapes.addGeometricShape(PowerPoint.GeometricShapeType.octagon, {
63+
left: 400,
64+
top: 300,
65+
height: 150,
66+
width: 150
67+
});
68+
69+
// Create lines.
70+
shapes.addLine(PowerPoint.ConnectorType.elbow, {
71+
left: 400,
72+
top: 150,
73+
height: 20,
74+
width: 150
75+
});
76+
shapes.addLine(PowerPoint.ConnectorType.curve, {
77+
left: 100,
78+
top: 300,
79+
height: 150,
80+
width: 20
81+
});
82+
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-font-m">
100+
<p>This sample shows how select and change shapes based on their types.</p>
101+
</section>
102+
103+
<section class="samples ms-font-m">
104+
<h3>Setup</h3>
105+
<p>Create some shapes in a new, blank presentation.</p>
106+
<p />
107+
108+
<button id="setup" class="ms-Button">
109+
<span class="ms-Button-label">Setup</span>
110+
</button>
111+
<p />
112+
<h3>Try it out</h3>
113+
<p />
114+
<button id="change-lines" class="ms-Button">
115+
<span class="ms-Button-label">Change lines</span>
116+
</button>
117+
<p />
118+
<button id="change-geometric-shapes" class="ms-Button">
119+
<span class="ms-Button-label">Change geometric shapes</span>
120+
</button>
121+
<p />
122+
</section>
123+
language: html
124+
style:
125+
content: |-
126+
section.samples {
127+
margin-top: 20px;
128+
}
129+
130+
section.samples .ms-Button, section.setup .ms-Button {
131+
display: block;
132+
margin-bottom: 5px;
133+
margin-left: 20px;
134+
min-width: 80px;
135+
}
136+
language: css
137+
libraries: |
138+
https://appsforoffice.microsoft.com/lib/1/hosted/office.js
139+
@types/office-js
140+
141+
[email protected]/dist/css/fabric.min.css
142+
[email protected]/dist/css/fabric.components.min.css
143+
144+
[email protected]/client/core.min.js
145+
@types/core-js
146+
147+
[email protected]
148+
@types/[email protected]

‎snippet-extractor-metadata/powerpoint.xlsx‎

-58 Bytes
Binary file not shown.

‎snippet-extractor-output/snippets.yaml‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14818,6 +14818,28 @@
1481814818
currentLeft = 0;
1481914819
if (currentTop > slideHeight - 200) currentTop = 0;
1482014820
});
14821+
'PowerPoint.Shape#type:member':
14822+
- >-
14823+
// Link to full sample:
14824+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
14825+
14826+
14827+
// Changes the transparency of every geometric shape in the slide.
14828+
14829+
await PowerPoint.run(async (context) => {
14830+
// Get the type of shape for every shape in the collection.
14831+
const shapes = context.presentation.slides.getItemAt(0).shapes;
14832+
shapes.load("type");
14833+
await context.sync();
14834+
14835+
// Change the shape transparency to be halfway transparent.
14836+
shapes.items.forEach((shape) => {
14837+
if (shape.type === PowerPoint.ShapeType.geometricShape) {
14838+
shape.fill.transparency = 0.5;
14839+
}
14840+
});
14841+
await context.sync();
14842+
});
1482114843
'PowerPoint.Shape#width:member':
1482214844
- >-
1482314845
// Link to full sample:
@@ -14944,6 +14966,28 @@
1494414966

1494514967
console.log("Added key " + JSON.stringify(myShapeTag.key) + " with value " + JSON.stringify(myShapeTag.value));
1494614968
});
14969+
'PowerPoint.ShapeCollection#load:member(2)':
14970+
- >-
14971+
// Link to full sample:
14972+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
14973+
14974+
14975+
// Changes the transparency of every geometric shape in the slide.
14976+
14977+
await PowerPoint.run(async (context) => {
14978+
// Get the type of shape for every shape in the collection.
14979+
const shapes = context.presentation.slides.getItemAt(0).shapes;
14980+
shapes.load("type");
14981+
await context.sync();
14982+
14983+
// Change the shape transparency to be halfway transparent.
14984+
shapes.items.forEach((shape) => {
14985+
if (shape.type === PowerPoint.ShapeType.geometricShape) {
14986+
shape.fill.transparency = 0.5;
14987+
}
14988+
});
14989+
await context.sync();
14990+
});
1494714991
'PowerPoint.ShapeFill#setSolidColor:member(1)':
1494814992
- >-
1494914993
// Link to full sample:
@@ -14962,6 +15006,28 @@
1496215006
});
1496315007
await context.sync();
1496415008
});
15009+
'PowerPoint.ShapeFill#transparency:member':
15010+
- >-
15011+
// Link to full sample:
15012+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
15013+
15014+
15015+
// Changes the transparency of every geometric shape in the slide.
15016+
15017+
await PowerPoint.run(async (context) => {
15018+
// Get the type of shape for every shape in the collection.
15019+
const shapes = context.presentation.slides.getItemAt(0).shapes;
15020+
shapes.load("type");
15021+
await context.sync();
15022+
15023+
// Change the shape transparency to be halfway transparent.
15024+
shapes.items.forEach((shape) => {
15025+
if (shape.type === PowerPoint.ShapeType.geometricShape) {
15026+
shape.fill.transparency = 0.5;
15027+
}
15028+
});
15029+
await context.sync();
15030+
});
1496515031
'PowerPoint.ShapeFont#color:member':
1496615032
- >-
1496715033
// Link to full sample:
@@ -14975,6 +15041,72 @@
1497515041
textRange.font.color = "green";
1497615042
await context.sync();
1497715043
});
15044+
'PowerPoint.ShapeLineDashStyle:enum':
15045+
- >-
15046+
// Link to full sample:
15047+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
15048+
15049+
15050+
// Changes the dash style of every line in the slide.
15051+
15052+
await PowerPoint.run(async (context) => {
15053+
// Get the type of shape for every shape in the collection.
15054+
const shapes = context.presentation.slides.getItemAt(0).shapes;
15055+
shapes.load("type");
15056+
await context.sync();
15057+
15058+
// Change the dash style for shapes of the type `line`.
15059+
shapes.items.forEach((shape) => {
15060+
if (shape.type === PowerPoint.ShapeType.line) {
15061+
shape.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.dashDot;
15062+
}
15063+
});
15064+
await context.sync();
15065+
});
15066+
'PowerPoint.ShapeLineFormat#dashStyle:member':
15067+
- >-
15068+
// Link to full sample:
15069+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
15070+
15071+
15072+
// Changes the dash style of every line in the slide.
15073+
15074+
await PowerPoint.run(async (context) => {
15075+
// Get the type of shape for every shape in the collection.
15076+
const shapes = context.presentation.slides.getItemAt(0).shapes;
15077+
shapes.load("type");
15078+
await context.sync();
15079+
15080+
// Change the dash style for shapes of the type `line`.
15081+
shapes.items.forEach((shape) => {
15082+
if (shape.type === PowerPoint.ShapeType.line) {
15083+
shape.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.dashDot;
15084+
}
15085+
});
15086+
await context.sync();
15087+
});
15088+
'PowerPoint.ShapeType:enum':
15089+
- >-
15090+
// Link to full sample:
15091+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml
15092+
15093+
15094+
// Changes the dash style of every line in the slide.
15095+
15096+
await PowerPoint.run(async (context) => {
15097+
// Get the type of shape for every shape in the collection.
15098+
const shapes = context.presentation.slides.getItemAt(0).shapes;
15099+
shapes.load("type");
15100+
await context.sync();
15101+
15102+
// Change the dash style for shapes of the type `line`.
15103+
shapes.items.forEach((shape) => {
15104+
if (shape.type === PowerPoint.ShapeType.line) {
15105+
shape.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.dashDot;
15106+
}
15107+
});
15108+
await context.sync();
15109+
});
1497815110
'PowerPoint.Slide#delete:member(1)':
1497915111
- >-
1498015112
// Link to full sample:

‎view-prod/powerpoint.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"powerpoint-basics-insert-svg": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/images/insert-svg.yaml",
88
"powerpoint-scenarios-searches-wikipedia-api": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/scenarios/searches-wikipedia-api.yaml",
99
"powerpoint-shapes-get-set-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-set-shapes.yaml",
10+
"powerpoint-shapes-get-shapes-by-type": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/get-shapes-by-type.yaml",
1011
"powerpoint-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/shapes/shapes.yaml",
1112
"powerpoint-add-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/slide-management/add-slides.yaml",
1213
"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
@@ -7,6 +7,7 @@
77
"powerpoint-basics-insert-svg": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/images/insert-svg.yaml",
88
"powerpoint-scenarios-searches-wikipedia-api": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/scenarios/searches-wikipedia-api.yaml",
99
"powerpoint-shapes-get-set-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/get-set-shapes.yaml",
10+
"powerpoint-shapes-get-shapes-by-type": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/get-shapes-by-type.yaml",
1011
"powerpoint-shapes": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/shapes/shapes.yaml",
1112
"powerpoint-add-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/add-slides.yaml",
1213
"powerpoint-insert-slides": "https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/slide-management/insert-slides.yaml",

0 commit comments

Comments
 (0)