Excel.ShapeCollection class
Represents a collection of all the shapes in the worksheet.
- Extends
Remarks
Properties
| context | The request context associated with the object. This connects the add-in's process to the Office host application's process. |
| items | Gets the loaded child items in this collection. |
Methods
| add |
Adds a geometric shape to the worksheet. Returns a |
| add |
Adds a geometric shape to the worksheet. Returns a |
| add |
Groups a subset of shapes in this collection's worksheet. Returns a |
| add |
Creates an image from a base64-encoded string and adds it to the worksheet. Returns the |
| add |
Adds a line to worksheet. Returns a |
| add |
Adds a line to worksheet. Returns a |
| add |
Creates a scalable vector graphic (SVG) from an XML string and adds it to the worksheet. Returns a |
| add |
Adds a text box to the worksheet with the provided text as the content. Returns a |
| get |
Returns the number of shapes in the worksheet. |
| get |
Gets a shape using its name or ID. |
| get |
Gets a shape using its position in the collection. |
| get |
Gets a shape using its name or ID. If the shape object does not exist, then this method returns an object with its |
| load(options) | Queues up a command to load the specified properties of the object. You must call |
| load(property |
Queues up a command to load the specified properties of the object. You must call |
| load(property |
Queues up a command to load the specified properties of the object. You must call |
| toJSON() | Overrides the JavaScript |
Property Details
context
The request context associated with the object. This connects the add-in's process to the Office host application's process.
context: RequestContext;Property Value
items
Gets the loaded child items in this collection.
readonly items: Excel.Shape[];Property Value
Method Details
addGeometricShape(geometricShapeType)
Adds a geometric shape to the worksheet. Returns a Shape object that represents the new shape.
addGeometricShape(geometricShapeType: Excel.GeometricShapeType): Excel.Shape;Parameters
- geometricShapeType
- Excel.GeometricShapeType
Represents the type of the geometric shape. See Excel.GeometricShapeType for details.
Returns
Remarks
Examples
// Link to full sample: https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-create-and-delete.yaml
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getItem("Shapes");
const shape = sheet.shapes.addGeometricShape(Excel.GeometricShapeType.hexagon);
shape.left = 5;
shape.top = 5;
shape.height = 175;
shape.width = 200;
await context.sync();
});
addGeometricShape(geometricShapeTypeString)
Adds a geometric shape to the worksheet. Returns a Shape object that represents the new shape.
addGeometricShape(geometricShapeTypeString: "LineInverse" | "Triangle" | "RightTriangle" | "Rectangle" | "Diamond" | "Parallelogram" | "Trapezoid" | "NonIsoscelesTrapezoid" | "Pentagon" | "Hexagon" | "Heptagon" | "Octagon" | "Decagon" | "Dodecagon" | "Star4" | "Star5" | "Star6" | "Star7" | "Star8" | "Star10" | "Star12" | "Star16" | "Star24" | "Star32" | "RoundRectangle" | "Round1Rectangle" | "Round2SameRectangle" | "Round2DiagonalRectangle" | "SnipRoundRectangle" | "Snip1Rectangle" | "Snip2SameRectangle" | "Snip2DiagonalRectangle" | "Plaque" | "Ellipse" | "Teardrop" | "HomePlate" | "Chevron" | "PieWedge" | "Pie" | "BlockArc" | "Donut" | "NoSmoking" | "RightArrow" | "LeftArrow" | "UpArrow" | "DownArrow" | "StripedRightArrow" | "NotchedRightArrow" | "BentUpArrow" | "LeftRightArrow" | "UpDownArrow" | "LeftUpArrow" | "LeftRightUpArrow" | "QuadArrow" | "LeftArrowCallout" | "RightArrowCallout" | "UpArrowCallout" | "DownArrowCallout" | "LeftRightArrowCallout" | "UpDownArrowCallout" | "QuadArrowCallout" | "BentArrow" | "UturnArrow" | "CircularArrow" | "LeftCircularArrow" | "LeftRightCircularArrow" | "CurvedRightArrow" | "CurvedLeftArrow" | "CurvedUpArrow" | "CurvedDownArrow" | "SwooshArrow" | "Cube" | "Can" | "LightningBolt" | "Heart" | "Sun" | "Moon" | "SmileyFace" | "IrregularSeal1" | "IrregularSeal2" | "FoldedCorner" | "Bevel" | "Frame" | "HalfFrame" | "Corner" | "DiagonalStripe" | "Chord" | "Arc" | "LeftBracket" | "RightBracket" | "LeftBrace" | "RightBrace" | "BracketPair" | "BracePair" | "Callout1" | "Callout2" | "Callout3" | "AccentCallout1" | "AccentCallout2" | "AccentCallout3" | "BorderCallout1" | "BorderCallout2" | "BorderCallout3" | "AccentBorderCallout1" | "AccentBorderCallout2" | "AccentBorderCallout3" | "WedgeRectCallout" | "WedgeRRectCallout" | "WedgeEllipseCallout" | "CloudCallout" | "Cloud" | "Ribbon" | "Ribbon2" | "EllipseRibbon" | "EllipseRibbon2" | "LeftRightRibbon" | "VerticalScroll" | "HorizontalScroll" | "Wave" | "DoubleWave" | "Plus" | "FlowChartProcess" | "FlowChartDecision" | "FlowChartInputOutput" | "FlowChartPredefinedProcess" | "FlowChartInternalStorage" | "FlowChartDocument" | "FlowChartMultidocument" | "FlowChartTerminator" | "FlowChartPreparation" | "FlowChartManualInput" | "FlowChartManualOperation" | "FlowChartConnector" | "FlowChartPunchedCard" | "FlowChartPunchedTape" | "FlowChartSummingJunction" | "FlowChartOr" | "FlowChartCollate" | "FlowChartSort" | "FlowChartExtract" | "FlowChartMerge" | "FlowChartOfflineStorage" | "FlowChartOnlineStorage" | "FlowChartMagneticTape" | "FlowChartMagneticDisk" | "FlowChartMagneticDrum" | "FlowChartDisplay" | "FlowChartDelay" | "FlowChartAlternateProcess" | "FlowChartOffpageConnector" | "ActionButtonBlank" | "ActionButtonHome" | "ActionButtonHelp" | "ActionButtonInformation" | "ActionButtonForwardNext" | "ActionButtonBackPrevious" | "ActionButtonEnd" | "ActionButtonBeginning" | "ActionButtonReturn" | "ActionButtonDocument" | "ActionButtonSound" | "ActionButtonMovie" | "Gear6" | "Gear9" | "Funnel" | "MathPlus" | "MathMinus" | "MathMultiply" | "MathDivide" | "MathEqual" | "MathNotEqual" | "CornerTabs" | "SquareTabs" | "PlaqueTabs" | "ChartX" | "ChartStar" | "ChartPlus"): Excel.Shape;Parameters
- geometricShapeTypeString
-
"LineInverse" | "Triangle" | "RightTriangle" | "Rectangle" | "Diamond" | "Parallelogram" | "Trapezoid" | "NonIsoscelesTrapezoid" | "Pentagon" | "Hexagon" | "Heptagon" | "Octagon" | "Decagon" | "Dodecagon" | "Star4" | "Star5" | "Star6" | "Star7" | "Star8" | "Star10" | "Star12" | "Star16" | "Star24" | "Star32" | "RoundRectangle" | "Round1Rectangle" | "Round2SameRectangle" | "Round2DiagonalRectangle" | "SnipRoundRectangle" | "Snip1Rectangle" | "Snip2SameRectangle" | "Snip2DiagonalRectangle" | "Plaque" | "Ellipse" | "Teardrop" | "HomePlate" | "Chevron" | "PieWedge" | "Pie" | "BlockArc" | "Donut" | "NoSmoking" | "RightArrow" | "LeftArrow" | "UpArrow" | "DownArrow" | "StripedRightArrow" | "NotchedRightArrow" | "BentUpArrow" | "LeftRightArrow" | "UpDownArrow" | "LeftUpArrow" | "LeftRightUpArrow" | "QuadArrow" | "LeftArrowCallout" | "RightArrowCallout" | "UpArrowCallout" | "DownArrowCallout" | "LeftRightArrowCallout" | "UpDownArrowCallout" | "QuadArrowCallout" | "BentArrow" | "UturnArrow" | "CircularArrow" | "LeftCircularArrow" | "LeftRightCircularArrow" | "CurvedRightArrow" | "CurvedLeftArrow" | "CurvedUpArrow" | "CurvedDownArrow" | "SwooshArrow" | "Cube" | "Can" | "LightningBolt" | "Heart" | "Sun" | "Moon" | "SmileyFace" | "IrregularSeal1" | "IrregularSeal2" | "FoldedCorner" | "Bevel" | "Frame" | "HalfFrame" | "Corner" | "DiagonalStripe" | "Chord" | "Arc" | "LeftBracket" | "RightBracket" | "LeftBrace" | "RightBrace" | "BracketPair" | "BracePair" | "Callout1" | "Callout2" | "Callout3" | "AccentCallout1" | "AccentCallout2" | "AccentCallout3" | "BorderCallout1" | "BorderCallout2" | "BorderCallout3" | "AccentBorderCallout1" | "AccentBorderCallout2" | "AccentBorderCallout3" | "WedgeRectCallout" | "WedgeRRectCallout" | "WedgeEllipseCallout" | "CloudCallout" | "Cloud" | "Ribbon" | "Ribbon2" | "EllipseRibbon" | "EllipseRibbon2" | "LeftRightRibbon" | "VerticalScroll" | "HorizontalScroll" | "Wave" | "DoubleWave" | "Plus" | "FlowChartProcess" | "FlowChartDecision" | "FlowChartInputOutput" | "FlowChartPredefinedProcess" | "FlowChartInternalStorage" | "FlowChartDocument" | "FlowChartMultidocument" | "FlowChartTerminator" | "FlowChartPreparation" | "FlowChartManualInput" | "FlowChartManualOperation" | "FlowChartConnector" | "FlowChartPunchedCard" | "FlowChartPunchedTape" | "FlowChartSummingJunction" | "FlowChartOr" | "FlowChartCollate" | "FlowChartSort" | "FlowChartExtract" | "FlowChartMerge" | "FlowChartOfflineStorage" | "FlowChartOnlineStorage" | "FlowChartMagneticTape" | "FlowChartMagneticDisk" | "FlowChartMagneticDrum" | "FlowChartDisplay" | "FlowChartDelay" | "FlowChartAlternateProcess" | "FlowChartOffpageConnector" | "ActionButtonBlank" | "ActionButtonHome" | "ActionButtonHelp" | "ActionButtonInformation" | "ActionButtonForwardNext" | "ActionButtonBackPrevious" | "ActionButtonEnd" | "ActionButtonBeginning" | "ActionButtonReturn" | "ActionButtonDocument" | "ActionButtonSound" | "ActionButtonMovie" | "Gear6" | "Gear9" | "Funnel" | "MathPlus" | "MathMinus" | "MathMultiply" | "MathDivide" | "MathEqual" | "MathNotEqual" | "CornerTabs" | "SquareTabs" | "PlaqueTabs" | "ChartX" | "ChartStar" | "ChartPlus"
Represents the type of the geometric shape. See Excel.GeometricShapeType for details.
Returns
Remarks
addGroup(values)
Groups a subset of shapes in this collection's worksheet. Returns a Shape object that represents the new group of shapes.
addGroup(values: Array<string | Shape>): Excel.Shape;Parameters
- values
-
Array<string | Excel.Shape>
An array of shape IDs or shape objects.
Returns
Remarks
Examples
// Link to full sample: https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-groups.yaml
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getItem("Shapes");
const square = sheet.shapes.getItem("Square");
const pentagon = sheet.shapes.getItem("Pentagon");
const octagon = sheet.shapes.getItem("Octagon");
const shapeGroup = sheet.shapes.addGroup([square, pentagon, octagon]);
shapeGroup.name = "Group";
console.log("Shapes grouped");
await context.sync();
});
addImage(base64ImageString)
Creates an image from a base64-encoded string and adds it to the worksheet. Returns the Shape object that represents the new image.
addImage(base64ImageString: string): Excel.Shape;Parameters
- base64ImageString
-
string
A base64-encoded string representing an image in either JPEG or PNG format.
Returns
Remarks
Examples
// Link to full sample: https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-images.yaml
const myFile = <HTMLInputElement>document.getElementById("selectedFile");
const reader = new FileReader();
reader.onload = (event) => {
Excel.run((context) => {
const startIndex = reader.result.toString().indexOf("base64,");
const myBase64 = reader.result.toString().substr(startIndex + 7);
const sheet = context.workbook.worksheets.getItem("Shapes");
const image = sheet.shapes.addImage(myBase64);
image.name = "Image";
return context.sync();
});
};
// Read in the image file as a data URL.
reader.readAsDataURL(myFile.files[0]);
addLine(startLeft, startTop, endLeft, endTop, connectorType)
Adds a line to worksheet. Returns a Shape object that represents the new line.
addLine(startLeft: number, startTop: number, endLeft: number, endTop: number, connectorType?: Excel.ConnectorType): Excel.Shape;Parameters
- startLeft
-
number
The distance, in points, from the start of the line to the left side of the worksheet.
- startTop
-
number
The distance, in points, from the start of the line to the top of the worksheet.
- endLeft
-
number
The distance, in points, from the end of the line to the left of the worksheet.
- endTop
-
number
The distance, in points, from the end of the line to the top of the worksheet.
- connectorType
- Excel.ConnectorType
Represents the connector type. See Excel.ConnectorType for details.
Returns
Remarks
Examples
// Link to full sample: https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-lines.yaml
await Excel.run(async (context) => {
const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
const line = shapes.addLine(200, 50, 300, 150, Excel.ConnectorType.straight);
line.name = "StraightLine";
await context.sync();
});
addLine(startLeft, startTop, endLeft, endTop, connectorTypeString)
Adds a line to worksheet. Returns a Shape object that represents the new line.
addLine(startLeft: number, startTop: number, endLeft: number, endTop: number, connectorTypeString?: "Straight" | "Elbow" | "Curve"): Excel.Shape;Parameters
- startLeft
-
number
The distance, in points, from the start of the line to the left side of the worksheet.
- startTop
-
number
The distance, in points, from the start of the line to the top of the worksheet.
- endLeft
-
number
The distance, in points, from the end of the line to the left of the worksheet.
- endTop
-
number
The distance, in points, from the end of the line to the top of the worksheet.
- connectorTypeString
-
"Straight" | "Elbow" | "Curve"
Represents the connector type. See Excel.ConnectorType for details.
Returns
Remarks
addSvg(xml)
Note
This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
Creates a scalable vector graphic (SVG) from an XML string and adds it to the worksheet. Returns a Shape object that represents the new image.
addSvg(xml: string): Excel.Shape;Parameters
- xml
-
string
An XML string that represents the SVG.
Returns
Remarks
addTextBox(text)
Adds a text box to the worksheet with the provided text as the content. Returns a Shape object that represents the new text box.
addTextBox(text?: string): Excel.Shape;Parameters
- text
-
string
Represents the text that will be shown in the created text box.
Returns
Remarks
Examples
// Link to full sample: https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/44-shape/shape-textboxes.yaml
await Excel.run(async (context) => {
const shapes = context.workbook.worksheets.getItem("Shapes").shapes;
const textbox = shapes.addTextBox("A box with text");
textbox.left = 100;
textbox.top = 100;
textbox.height = 20;
textbox.width = 175;
textbox.name = "Textbox";
await context.sync();
});
getCount()
Returns the number of shapes in the worksheet.
getCount(): OfficeExtension.ClientResult<number>;Returns
OfficeExtension.ClientResult<number>
Remarks
getItem(key)
Gets a shape using its name or ID.
getItem(key: string): Excel.Shape;Parameters
- key
-
string
The name or ID of the shape to be retrieved.
Returns
Remarks
getItemAt(index)
Gets a shape using its position in the collection.
getItemAt(index: number): Excel.Shape;Parameters
- index
-
number
The zero-based index of the shape to be retrieved.
Returns
Remarks
getItemOrNullObject(key)
Gets a shape using its name or ID. If the shape object does not exist, then this method returns an object with its isNullObject property set to true. For further information, see *OrNullObject methods and properties.
getItemOrNullObject(key: string): Excel.Shape;Parameters
- key
-
string
The name or ID of the shape to be retrieved.
Returns
Remarks
load(options)
Queues up a command to load the specified properties of the object. You must call context.sync() before reading the properties.
load(options?: Excel.Interfaces.ShapeCollectionLoadOptions & Excel.Interfaces.CollectionLoadOptions): Excel.ShapeCollection;Parameters
Provides options for which properties of the object to load.
Returns
load(propertyNames)
Queues up a command to load the specified properties of the object. You must call context.sync() before reading the properties.
load(propertyNames?: string | string[]): Excel.ShapeCollection;Parameters
- propertyNames
-
string | string[]
A comma-delimited string or an array of strings that specify the properties to load.
Returns
load(propertyNamesAndPaths)
Queues up a command to load the specified properties of the object. You must call context.sync() before reading the properties.
load(propertyNamesAndPaths?: OfficeExtension.LoadOption): Excel.ShapeCollection;Parameters
- propertyNamesAndPaths
- OfficeExtension.LoadOption
propertyNamesAndPaths.select is a comma-delimited string that specifies the properties to load, and propertyNamesAndPaths.expand is a comma-delimited string that specifies the navigation properties to load.
Returns
toJSON()
Overrides the JavaScript toJSON() method in order to provide more useful output when an API object is passed to JSON.stringify(). (JSON.stringify, in turn, calls the toJSON method of the object that is passed to it.) Whereas the original Excel.ShapeCollection object is an API object, the toJSON method returns a plain JavaScript object (typed as Excel.Interfaces.ShapeCollectionData) that contains an "items" array with shallow copies of any loaded properties from the collection's items.
toJSON(): Excel.Interfaces.ShapeCollectionData;Returns
Office Add-ins
Feedback
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see: https://aka.ms/ContentUserFeedback.
Submit and view feedback for