1+ id : powerpoint-shapes
2+ name : ' Insert shape, line, and text box'
3+ description : ' Inserts geometric shapes, lines, and text boxes to a slide.'
4+ host : POWERPOINT
5+ api_set : PowerPointApi '1.3'
6+ script :
7+ content : |
8+ $("#create-hexagon").click(() => tryCatch(createHexagon));
9+ $("#shrink-hexagon").click(() => tryCatch(shrinkHexagon));
10+ $("#move-hexagon").click(() => tryCatch(moveHexagon));
11+ $("#create-line").click(() => tryCatch(createLine));
12+ $("#create-text-box").click(() => tryCatch(createTextBox));
13+ $("#create-shape-with-text").click(() => tryCatch(createShapeWithText));
14+ $("#remove-all").click(() => tryCatch(removeAll));
15+
16+ // This function gets the collection of shapes on the first slide,
17+ // and adds a hexagon shape to the collection, while specifying its
18+ // location and size. Then it names the shape.
19+ async function createHexagon() {
20+ await PowerPoint.run(async (context) => {
21+ var shapes = context.presentation.slides.getItemAt(0).shapes;
22+ var hexagon = shapes.addGeometricShape(PowerPoint.GeometricShapeType.hexagon,
23+ {
24+ left: 100,
25+ top: 100,
26+ height: 150,
27+ width: 150
28+ });
29+ hexagon.name = "Hexagon";
30+
31+ await context.sync();
32+ });
33+ }
34+
35+ // This function gets the collection of shapes on the first slide,
36+ // gets the first shape in the collection, and resets its size.
37+ async function shrinkHexagon() {
38+ await PowerPoint.run(async (context) => {
39+ var shapes = context.presentation.slides.getItemAt(0).shapes;
40+ var hexagon = shapes.getItemAt(0);
41+ hexagon.height = 50;
42+ hexagon.width = 50;
43+
44+ await context.sync();
45+ });
46+ }
47+
48+ // This function gets the collection of shapes on the first slide,
49+ // gets the first shape in the collection, and resets its location.
50+ async function moveHexagon() {
51+ await PowerPoint.run(async (context) => {
52+ var shapes = context.presentation.slides.getItemAt(0).shapes;
53+ var hexagon = shapes.getItemAt(0);
54+ hexagon.top = 50;
55+ hexagon.left = 150;
56+
57+ await context.sync();
58+ });
59+ }
60+
61+ // This function gets the collection of shapes on the first slide,
62+ // and adds a line to the collection, while specifying its
63+ // start and end points. Then it names the shape.
64+ async function createLine() {
65+ await PowerPoint.run(async (context) => {
66+ var shapes = context.presentation.slides.getItemAt(0).shapes;
67+
68+ // For a line, left and top are the coordinates of the start point,
69+ // while height and width are the coordinates of the end point.
70+ var line = shapes.addLine(PowerPoint.ConnectorType.straight,
71+ {
72+ left: 400,
73+ top: 200,
74+ height: 20,
75+ width: 150
76+ });
77+ line.name = "StraightLine";
78+
79+ await context.sync();
80+ });
81+ }
82+
83+ // This function gets the collection of shapes on the first slide,
84+ // and adds a text box to the collection, while specifying its text,
85+ // location, and size. Then it names the text box.
86+ async function createTextBox() {
87+ await PowerPoint.run(async (context) => {
88+ var shapes = context.presentation.slides.getItemAt(0).shapes;
89+ var textbox = shapes.addTextBox("Hello!",
90+ {
91+ left: 100,
92+ top: 300,
93+ height: 300,
94+ width: 450
95+ });
96+ textbox.name = "Textbox";
97+
98+ return context.sync();
99+ });
100+ }
101+
102+ // This function gets the collection of shapes on the first slide,
103+ // and adds a brace pair, {}, to the collection, while specifying its
104+ // location and size. Then it names the shape, sets its text and font
105+ // color, and centers it inside the braces.
106+ async function createShapeWithText() {
107+ await PowerPoint.run(async (context) => {
108+ var shapes = context.presentation.slides.getItemAt(0).shapes;
109+ var braces = shapes.addGeometricShape(PowerPoint.GeometricShapeType.bracePair, {
110+ left: 100,
111+ top: 400,
112+ height: 50,
113+ width: 150
114+ });
115+ braces.name = "Braces";
116+ braces.textFrame.textRange.text = "Shape text";
117+ braces.textFrame.textRange.font.color = "purple";
118+ braces.textFrame.verticalAlignment = PowerPoint.TextVerticalAlignment.middleCentered;
119+
120+ return context.sync();
121+ });
122+ }
123+
124+ // This function gets the collection of shapes on the first slide,
125+ // and then iterates through them, deleting each one.
126+ async function removeAll() {
127+ await PowerPoint.run(async (context) => {
128+ const slide = context.presentation.slides.getItemAt(0);
129+ const shapes = slide.shapes;
130+
131+ // Load all the shapes in the collection without loading their properties.
132+ shapes.load("items/$none");
133+
134+ await context.sync();
135+
136+ shapes.items.forEach((shape) => shape.delete());
137+
138+ await context.sync();
139+ });
140+ }
141+
142+ /** Default helper for invoking an action and handling errors. */
143+ async function tryCatch(callback) {
144+ try {
145+ await callback();
146+ } catch (error) {
147+ // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
148+ console.error(error);
149+ }
150+ }
151+ language : typescript
152+ template :
153+ content : |-
154+ <section class="ms-font-m">
155+ <p>This sample shows how to create, resize, move, and delete shapes.</p>
156+ </section>
157+
158+ <section class="samples ms-font-m">
159+ <h3>Try it out</h3>
160+ <button id="create-hexagon" class="ms-Button">
161+ <span class="ms-Button-label">Create hexagon</span>
162+ </button>
163+ <p />
164+ <button id="shrink-hexagon" class="ms-Button">
165+ <span class="ms-Button-label">Shrink hexagon</span>
166+ </button>
167+ <p />
168+ <button id="move-hexagon" class="ms-Button">
169+ <span class="ms-Button-label">Move hexagon</span>
170+ </button>
171+ <p />
172+ <button id="create-line" class="ms-Button">
173+ <span class="ms-Button-label">Create line</span>
174+ </button>
175+ <p />
176+
177+ <button id="create-text-box" class="ms-Button">
178+ <span class="ms-Button-label">Create text box</span>
179+ </button>
180+ <p />
181+
182+ <button id="create-shape-with-text" class="ms-Button">
183+ <span class="ms-Button-label">Create shape with text</span>
184+ </button>
185+ <p />
186+
187+ <button id="remove-all" class="ms-Button">
188+ <span class="ms-Button-label">Remove all shapes</span>
189+ </button>
190+ <p />
191+ </section>
192+ language : html
193+ style :
194+ content : |-
195+ section.samples {
196+ margin-top: 20px;
197+ }
198+
199+ section.samples .ms-Button, section.setup .ms-Button {
200+ display: block;
201+ margin-bottom: 5px;
202+ margin-left: 20px;
203+ min-width: 80px;
204+ }
205+ language : css
206+ libraries : |
207+ https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
208+ @types/office-js-preview
209+
210+ [email protected] /dist/css/fabric.min.css 211+ [email protected] /dist/css/fabric.components.min.css 212+
213+ [email protected] /client/core.min.js 214+ @types/core-js
215+
216+ 217+ 
0 commit comments