1+ order : 7
2+ id : excel-shape-get-active
3+ name : Get active shape image
4+ description : Get an image of the active shape in your workbook.
5+ host : EXCEL
6+ api_set :
7+ ExcelApi : ' 1.19'
8+ script :
9+ content : |-
10+ document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
11+ document.getElementById("add-shape-over-chart").addEventListener("click", () => tryCatch(addShapeOverChart));
12+ document.getElementById("group-chart-shapes").addEventListener("click", () => tryCatch(groupChartShapes));
13+ document.getElementById("get-active-shape").addEventListener("click", () => tryCatch(getActiveShape));
14+
15+ const sheetName = "Sample";
16+
17+ async function addShapeOverChart() {
18+ // This method adds a shape to use as a chart title.
19+ // It positions the shape over the chart on the worksheet.
20+ await Excel.run(async (context) => {
21+ const sheet = context.workbook.worksheets.getItem(sheetName);
22+
23+ // Create a rectangle shape for the chart title.
24+ const shape = sheet.shapes.addGeometricShape(Excel.GeometricShapeType.rectangle);
25+ shape.name = "ChartTitle";
26+ shape.height = 20;
27+ shape.width = 90;
28+ shape.textFrame.textRange.text = "Sales Quantity";
29+ shape.textFrame.textRange.font.size = 13;
30+
31+ // Get chart positioning information to place the shape correctly.
32+ const chart = sheet.charts.getItemAt(0);
33+ chart.load("left, top");
34+ chart.plotArea.load("width");
35+ await context.sync();
36+
37+ // Position the shape above the chart.
38+ shape.left = chart.left + chart.plotArea.width / 2.5;
39+ shape.top = chart.top + 10;
40+
41+ await context.sync();
42+ });
43+ }
44+
45+ async function groupChartShapes() {
46+ // This method groups the new chart title shape together with the existing chart.
47+ await Excel.run(async (context) => {
48+ const sheet = context.workbook.worksheets.getItem(sheetName);
49+
50+ // Get the shapes to group.
51+ const titleShape = sheet.shapes.getItem("ChartTitle");
52+ const chartShape = sheet.shapes.getItem("SalesChart");
53+
54+ // Create a group from the two shapes.
55+ const shapeGroup = sheet.shapes.addGroup([titleShape, chartShape]);
56+ shapeGroup.name = "GroupChart";
57+
58+ await context.sync();
59+ });
60+ }
61+
62+ async function getActiveShape() {
63+ // This method gets the active shape and displays it as an image in the task pane.
64+ await Excel.run(async (context) => {
65+ // Get the currently active shape, if any.
66+ const activeShape = context.workbook.getActiveShapeOrNullObject();
67+
68+ if (activeShape) {
69+ // Convert the active shape to an image.
70+ const shapeImage = activeShape.getAsImage(Excel.PictureFormat.png);
71+ await context.sync();
72+
73+ // Display the image in the task pane.
74+ const imageContainer = document.getElementById("image");
75+ imageContainer.innerHTML = ''; // Clear the container before adding a new image.
76+ const imageElement = document.createElement("img");
77+ imageElement.src = "data:image/png;base64," + shapeImage.value;
78+ imageContainer.appendChild(imageElement);
79+ } else {
80+ console.log("No active shape");
81+ }
82+ });
83+ }
84+
85+ /** Create sample data and a line chart. */
86+ async function setup() {
87+ await Excel.run(async (context) => {
88+ context.workbook.worksheets.getItemOrNullObject(sheetName).delete();
89+ const sheet = context.workbook.worksheets.add(sheetName);
90+
91+ // Add sample data to the worksheet.
92+ const dataRange = sheet.getRange("A1:C4");
93+ dataRange.values = sampleData;
94+
95+ // Create a line chart with markers.
96+ const chart = sheet.charts.add(Excel.ChartType.lineMarkers, dataRange);
97+ chart.name = "SalesChart";
98+
99+ sheet.activate();
100+ await context.sync();
101+ });
102+ }
103+
104+ /** Default helper for invoking an action and handling errors. */
105+ async function tryCatch(callback) {
106+ try {
107+ await callback();
108+ } catch (error) {
109+ // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
110+ console.error(error);
111+ }
112+ }
113+
114+ /** Sample data for the chart. */
115+ const sampleData = [
116+ ["Type", "Product A", "Product B"],
117+ ["Q1", 15, 20],
118+ ["Q2", 22, 15],
119+ ["Q3", 33, 47]
120+ ];
121+ language : typescript
122+ template :
123+ content : |-
124+ <section class="ms-Fabric ms-font-m">
125+ <p>This sample shows how to add a shape over a chart, group that new shape together with the existing chart, and then return an image of the chart (the active shape) to this task pane.</p>
126+ </section>
127+ <section class="ms-Fabric setup ms-font-m">
128+ <h3>Set up</h3>
129+ <button id="setup" class="ms-Button">
130+ <span class="ms-Button-label">Create a chart</span>
131+ </button>
132+ </section>
133+ <section class="ms-Fabric samples ms-font-m">
134+ <h3>Try it out</h3>
135+ <p>Add a shape to the workbook. This button adds a shape that covers the existing chart title with a new shape that contains text.</p>
136+ <button id="add-shape-over-chart" class="ms-Button">
137+ <span class="ms-Button-label">Add shape</span>
138+ </button>
139+ </section>
140+ <section class="ms-Fabric samples ms-font-m">
141+ <p>Group the new chart title together with the existing chart.</p>
142+ <button id="group-chart-shapes" class="ms-Button">
143+ <span class="ms-Button-label">Group shapes</span>
144+ </button>
145+ </section>
146+ <section class="ms-Fabric samples ms-font-m">
147+ <p>Get the active shape and display it as an image in this task pane. Make sure the chart is selected.</p>
148+ <button id="get-active-shape" class="ms-Button">
149+ <span class="ms-Button-label">Get active shape image</span>
150+ </button>
151+ </section>
152+ <section class="ms-Fabric ms-font-m">
153+ <p>Image of the active shape:</p>
154+ <div id="image"></div>
155+ </section>
156+ language : html
157+ style :
158+ content : |-
159+ section.samples {
160+ margin-top: 20px;
161+ }
162+
163+ section.samples .ms-Button, section.setup .ms-Button {
164+ display: block;
165+ margin-bottom: 5px;
166+ margin-left: 20px;
167+ min-width: 80px;
168+ }
169+ language : css
170+ libraries : |-
171+ https://appsforoffice.microsoft.com/lib/1/hosted/office.js
172+ https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts
173+
174+ https://unpkg.com/[email protected] /dist/css/fabric.min.css 175+ https://unpkg.com/[email protected] /dist/css/fabric.components.min.css 
0 commit comments