You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/powerpoint/bind-shapes-in-presentation.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,13 +2,13 @@
2
2
title: Bind to shapes in a PowerPoint presentation
3
3
description: Learn how to bind shapes and access them from your add-in to keep them up to date.
4
4
ms.topic: how-to
5
-
ms.date: 04/02/2025
5
+
ms.date: 04/30/2025
6
6
ms.localizationpriority: medium
7
7
---
8
8
9
-
# Bind to shapes in a PowerPoint presentation (preview)
9
+
# Bind to shapes in a PowerPoint presentation
10
10
11
-
Your PowerPoint add-in can bind to shapes to consistently access them through an identifier. The add-in establishes a binding by calling `BindingCollection.add` and assigning a unique identifier. Use the identifier at any time to reference the shape and access its properties. Creating bindings provides the following value to your add-in.
11
+
Your PowerPoint add-in can bind to shapes to consistently access them through an identifier. The add-in establishes a binding by calling [BindingCollection.add](/javascript/api/powerpoint/powerpoint.bindingcollection#powerpoint-powerpoint-bindingcollection-add-member(1)) and assigning a unique identifier. Use the identifier at any time to reference the shape and access its properties. Creating bindings provides the following value to your add-in.
12
12
13
13
- Establishes a relationship between the add-in and the shape in the document. Bindings are persisted in the document and can be accessed at a later time.
14
14
- Enables access to shape properties to read or update, without requiring the user to select any shapes.
@@ -31,7 +31,7 @@ In a general implementation, there are two components to consider for binding a
31
31
32
32
## Create a bound shape in PowerPoint
33
33
34
-
Use the `PowerPoint.BindingsCollection.add()` method for the presentation to create a binding which refers to a particular shape.
34
+
Use the `PowerPoint.BindingCollection.add()` method for the presentation to create a binding which refers to a particular shape.
35
35
36
36
:::image type="content" source="../images/powerpoint-steps-to-bind-shape.png" alt-text="Add-in creates a Base64-encoded image from data source, then creates the shape from the image and adds a unique ID.":::
Call `BindingsCollection.add` to add the binding to the bindings collection in PowerPoint. The following sample shows how to add a new binding for a shape to the bindings collection.
61
+
Call `BindingCollection.add` to add the binding to the bindings collection in PowerPoint. The following sample shows how to add a new binding for a shape to the bindings collection.
62
62
63
63
```javascript
64
64
// Create a binding ID to track the shape for later updates.
@@ -154,7 +154,7 @@ async function getShapeFromBindingID(id) {
154
154
155
155
## See also
156
156
157
-
When maintaining freshness on shapes, you may also want to check the zOrder. See the [zOrderPosition](/javascript/api/powerpoint/powerpoint.shape?view=powerpoint-js-preview&preserve-view=true) property for more information.
157
+
When maintaining freshness on shapes, you may also want to check the zOrder. See the [zOrderPosition](/javascript/api/powerpoint/powerpoint.shape) property for more information.
158
158
159
159
-[Work with shapes using the PowerPoint JavaScript API](shapes.md)
160
160
-[Bind to regions in a document or spreadsheet](../develop/bind-to-regions-in-a-document-or-spreadsheet.md)
Copy file name to clipboardExpand all lines: docs/powerpoint/work-with-tables.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,17 +2,17 @@
2
2
title: Work with tables using the PowerPoint JavaScript API
3
3
description: Learn how to create tables and control formatting using the PowerPoint JavaScript API.
4
4
ms.topic: how-to
5
-
ms.date: 04/02/2025
5
+
ms.date: 04/30/2025
6
6
ms.localizationpriority: medium
7
7
---
8
8
9
-
# Work with tables using the PowerPoint JavaScript API (preview)
9
+
# Work with tables using the PowerPoint JavaScript API
10
10
11
11
This article provides code samples that show how to create tables and control formatting by using the PowerPoint JavaScript API.
12
12
13
13
## Create an empty table
14
14
15
-
To create an empty table, call the `Shapes.addTable()` method and specify how many rows and columns the table needs. The following code sample shows how to create a table with 3 rows and 4 columns.
15
+
To create an empty table, call the [ShapeCollection.addTable()](/javascript/api/powerpoint/powerpoint.shapecollection#powerpoint-powerpoint-shapecollection-addtable-member(1)) method and specify how many rows and columns the table needs. The following code sample shows how to create a table with 3 rows and 4 columns.
16
16
17
17
```javascript
18
18
awaitPowerPoint.run(async (context) => {
@@ -30,7 +30,7 @@ The previous sample doesn't specify any options, so the table defaults to format
30
30
31
31
## Specify values
32
32
33
-
You can populate the table with string values when you create it. To do this provide a 2-dimensional array of values in the `TableAddOptions` object. The following code sample creates a table with string values from "1" to "12". Note the following:
33
+
You can populate the table with string values when you create it. To do this provide a 2-dimensional array of values in the [TableAddOptions](/javascript/api/powerpoint/powerpoint.tableaddoptions) object. The following code sample creates a table with string values from "1" to "12". Note the following:
34
34
35
35
- An empty cell must be specified as an empty string "". If a value is undefined or missing, `addTable` throws an error.
36
36
- The outer array contains a list of rows. Each row is an inner array containing a list of string cell values.
@@ -66,13 +66,13 @@ The previous sample creates a table with values as shown in the following image.
66
66
67
67
## Specify cell formatting
68
68
69
-
You can specify cell formatting when you create a table, including border style, fill style, font style, horizontal alignment, indent level, and vertical alignment. These formats are specified by the `TableCellProperties` object.
69
+
You can specify cell formatting when you create a table, including border style, fill style, font style, horizontal alignment, indent level, and vertical alignment. These formats are specified by the [TableCellProperties](/javascript/api/powerpoint/powerpoint.tablecellproperties) object.
70
70
71
71
### Uniform cell formatting
72
72
73
73
Uniform cell formatting applies to the entire table. For example, if you set the uniform font color to white, all table cells will use the white font. Uniform cell formatting is useful for controlling the default formatting you want on the entire table.
74
74
75
-
Specify uniform cell formatting for the entire table using the `TableAddOptions.uniformCellProperties` property. The following code sample shows how to set all table cells to dark slate blue fill color and bold white font.
75
+
Specify uniform cell formatting for the entire table using the [TableAddOptions.uniformCellProperties](/javascript/api/powerpoint/powerpoint.tableaddoptions#powerpoint-powerpoint-tableaddoptions-uniformcellproperties-member) property. The following code sample shows how to set all table cells to dark slate blue fill color and bold white font.
76
76
77
77
```javascript
78
78
constrowCount=3;
@@ -97,7 +97,7 @@ The previous sample creates a table as shown in the following image.
97
97
98
98
### Specific cell formatting
99
99
100
-
Specific cell formatting applies to individual cells and overrides the uniform cell formatting, if any. Set individual cell formatting by using the `TableAddOptions.specificCellProperties` property. The following code sample shows how to set the fill color to black for the cell at row 1, column 1.
100
+
Specific cell formatting applies to individual cells and overrides the uniform cell formatting, if any. Set individual cell formatting by using the [TableAddOptions.specificCellProperties](/javascript/api/powerpoint/powerpoint.tableaddoptions#powerpoint-powerpoint-tableaddoptions-specificcellproperties-member) property. The following code sample shows how to set the fill color to black for the cell at row 1, column 1.
101
101
102
102
Note the `specificCellProperties` must be a 2D array that matches the 2D size of the table exactly. The sample first creates the entire empty 2D array of objects. Then it sets the specific cell format at row 1, column 1, after the options object is created.
103
103
@@ -130,7 +130,7 @@ The previous sample creates a table with a specific format applied to the cell i
130
130
131
131
:::image type="content" source="../images/powerpoint-table-specific-cell-format.png" alt-text="A PowerPoint table with the cell in row 1 column 1 formatted with a black background.":::
132
132
133
-
The previous sample uses the `font` property which is of type `FontProperties`. The `font` property allows you to specify many properties, such as bold, italic, name, color, and more. The following code sample shows how to specify multiple properties for a font for a cell.
133
+
The previous sample uses the [font](/javascript/api/powerpoint/powerpoint.tablecellproperties#powerpoint-powerpoint-tablecellproperties-font-member) property which is of type [FontProperties](/javascript/api/powerpoint/powerpoint.fontproperties). The `font` property allows you to specify many properties, such as bold, italic, name, color, and more. The following code sample shows how to specify multiple properties for a font for a cell.
You can also specify a `fill` property which is of type `FillProperties`. The `fill` property can specify a color and the transparency percentage. The following code sample shows how to create a fill for all table cells using the color "light red" and a 50% transparency.
147
+
You can also specify a [fill](/javascript/api/powerpoint/powerpoint.tablecellproperties#powerpoint-powerpoint-tablecellproperties-fill-member) property which is of type [FillProperties](/javascript/api/powerpoint/powerpoint.fillproperties). The `fill` property can specify a color and the transparency percentage. The following code sample shows how to create a fill for all table cells using the color "light red" and a 50% transparency.
148
148
149
149
```javascript
150
150
uniformCellProperties: {
@@ -157,7 +157,7 @@ uniformCellProperties: {
157
157
158
158
## Borders
159
159
160
-
Use the `TableCellProperties.borders` object to define borders for cells in the table. The following code sample shows how to set the borders of a cell in row 1 by column 1 to a red border with weight 3.
160
+
Use the [TableCellProperties.borders](/javascript/api/powerpoint/powerpoint.tablecellproperties#powerpoint-powerpoint-tablecellproperties-borders-member) object to define borders for cells in the table. The following code sample shows how to set the borders of a cell in row 1 by column 1 to a red border with weight 3.
Use the `TableCellProperties.horizontalAlignment` property to control text alignment in a cell. The following example shows how to set horizontal alignment to left, right, and center for three cells in a table. For a list of all alignment options, see the `ParagraphHorizontalAlignment` enum.
213
+
Use the [TableCellProperties.horizontalAlignment](/javascript/api/powerpoint/powerpoint.tablecellproperties#powerpoint-powerpoint-tablecellproperties-horizontalalignment-member) property to control text alignment in a cell. The following example shows how to set horizontal alignment to left, right, and center for three cells in a table. For a list of all alignment options, see the [ParagraphHorizontalAlignment](/javascript/api/powerpoint/powerpoint.paragraphhorizontalalignment) enum.
214
214
215
215
```javascript
216
216
constrowCount=3;
@@ -267,7 +267,7 @@ The previous sample creates a table with left/top, centered, and right/bottom te
267
267
268
268
## Specify row and column widths
269
269
270
-
Specify row and column widths using the `TableAddOptions.rows` and `TableAddOptions.columns` properties. The `rows` property is an array of `TableRowProperties` that you use to set each row’s `rowHeight` property. Similarly, the `columns` property is an array of `TableColumnProperties` you use to set each column’s `columnWidth` property. The width or height is set in points.
270
+
Specify row and column widths using the [TableAddOptions.rows](/javascript/api/powerpoint/powerpoint.tableaddoptions#powerpoint-powerpoint-tableaddoptions-rows-member) and [TableAddOptions.columns](/javascript/api/powerpoint/powerpoint.tableaddoptions#powerpoint-powerpoint-tableaddoptions-columns-member) properties. The `rows` property is an array of [TableRowProperties](/javascript/api/powerpoint/powerpoint.tablerowproperties) that you use to set each row's [rowHeight](/javascript/api/powerpoint/powerpoint.tablerowproperties#powerpoint-powerpoint-tablerowproperties-rowheight-member) property. Similarly, the `columns` property is an array of [TableColumnProperties](/javascript/api/powerpoint/powerpoint.tablecolumnproperties) you use to set each column's [columnWidth](/javascript/api/powerpoint/powerpoint.tablecolumnproperties#powerpoint-powerpoint-tablecolumnproperties-columnwidth-member) property. The width or height is set in points.
271
271
272
272
The height or width that you set may not be honored by PowerPoint if it needs to fit the text. For example, if the text is too wide for a column, PowerPoint will increase the row height so that it can wrap the text to the next line. Similarly, the column width will increase if the specified size is smaller than a single character in the specified font size.
273
273
@@ -326,7 +326,7 @@ A merged area is two or more cells combined so that they share a single value an
326
326
327
327
To specify a merged area, provide the upper left location where the area starts (row, column) and the length of the area in rows and columns. The following diagram shows an example of these values for a merged area that is 3 rows by 2 columns in size. Note that merged areas can't overlap with each other.
328
328
329
-
Use the `TableAddOptions.mergedAreas` property to specify one or more merged areas. The following code sample shows how to create a table with two merged areas. About the code sample, note the following:
329
+
Use the [TableAddOptions.mergedAreas](/javascript/api/powerpoint/powerpoint.tableaddoptions#powerpoint-powerpoint-tableaddoptions-mergedareas-member) property to specify one or more merged areas. The following code sample shows how to create a table with two merged areas. About the code sample, note the following:
330
330
331
331
- The values property must only specify the value for the upper left corner of the merged area. All other cell values in the merged area must specify empty strings ("").
0 commit comments