order: 2
id: powerpoint-shapes-get-set-shapes
name: Get, set, load, and save shapes
description: Get and set one or more selected shapes. Load and save one or more shapes.
host: POWERPOINT
api_set:
    PowerPointApi: '1.5'
script:
    content: |
        document.getElementById("getSelectedShapes").addEventListener("click", () => tryCatch(getSelectedShapes));
        document.getElementById("setSelectedShapes").addEventListener("click", () => tryCatch(setSelectedShapes));
        document.getElementById("changeFill").addEventListener("click", () => tryCatch(changeFill));
        document.getElementById("saveShapeSelection").addEventListener("click", () => tryCatch(saveShapeSelection));
        document.getElementById("loadShapeSelection").addEventListener("click", () => tryCatch(loadShapeSelection));
        document.getElementById("createShapes").addEventListener("click", () => tryCatch(createShapes));
        document.getElementById("arrangeSelected").addEventListener("click", () => tryCatch(arrangeSelected));

        async function getSelectedShapes() {
          // Gets the shapes you selected on the slide and displays their IDs on the task pane.
          await PowerPoint.run(async (context) => {
            let finalTable = "";
            const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
            const shapeCount = shapes.getCount();
            await context.sync();
            finalTable += "<br>getSelectedShapes.getCount returned:<b>" + shapeCount.value + "</b><br>";
            finalTable +=
              "<br><table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
            shapes.load("items");
            await context.sync();
            shapes.items.map((shape, index) => {
              finalTable += "<tr><td>" + index + "</td><td>" + shape.id + "</td></tr>";
            });
            finalTable += "</table>";
            const outputSpan = document.getElementById("outputSpan");
            outputSpan.innerHTML = "";
            outputSpan.innerHTML += finalTable;
          });
        }

        async function setSelectedShapes() {
          // Selects the first two shapes on slide 1.
          await PowerPoint.run(async (context) => {
            context.presentation.load("slides");
            await context.sync();
            const slide1 = context.presentation.slides.getItemAt(0);
            slide1.load("shapes/items/type");
            await context.sync();

            const shapes = slide1.shapes.items.filter((item) => item.type === PowerPoint.ShapeType.geometricShape);
            const shape1: PowerPoint.Shape = shapes[0];
            const shape2: PowerPoint.Shape = shapes[1];
            shape1.load("id");
            shape2.load("id");
            await context.sync();

            console.log(`IDs: ${shape1.id}, ${shape2.id}`);
            slide1.setSelectedShapes([shape1.id, shape2.id]);
            await context.sync();
          });
        }

        async function changeFill() {
          // Changes the selected shapes fill color to red.
          await PowerPoint.run(async (context) => {
            const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
            const shapeCount = shapes.getCount();
            shapes.load("items/fill/type");
            await context.sync();
            shapes.items.map((shape) => {
              const shapeFillType = shape.fill.type as PowerPoint.ShapeFillType;
              console.log(`Shape ID ${shape.id} original fill type: ${shapeFillType}`);
              shape.fill.setSolidColor("red");
            });
            await context.sync();
          });
        }

        let savedSlideSelection = [];
        let savedShapeSelection = [];
        async function saveShapeSelection() {
          // Saves which shapes are selected so that they can be reselected later.
          await PowerPoint.run(async (context) => {
            context.presentation.load("slides");
            await context.sync();
            const slides: PowerPoint.SlideScopedCollection = context.presentation.getSelectedSlides();
            const slideCount = slides.getCount();
            slides.load("items");
            await context.sync();
            savedSlideSelection = [];
            slides.items.map((slide) => {
              savedSlideSelection.push(slide.id);
            });
            const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
            const shapeCount = shapes.getCount();
            shapes.load("items");
            await context.sync();
            shapes.items.map((shape) => {
              savedShapeSelection.push(shape.id);
            });
          });
        }

        async function loadShapeSelection() {
          // Reselects shapes that were saved previously.
          await PowerPoint.run(async (context) => {
            const slide1: PowerPoint.Slide = context.presentation.slides.getItem(savedSlideSelection[0]);
            await context.sync();
            slide1.setSelectedShapes(savedShapeSelection);
            await context.sync();
          });
        }

        const slideWidth = 960;
        const slideHeight = 540;
        function getRandomBetween(a, b) {
          return Math.random() * (b - a) + a;
        }

        function generateRandomHexColor() {
          return `#${Math.random().toString(16).substring(2, 8)}`;
        }

        async function createShapes() {
          // Creates random shapes on the selected slide.
          await PowerPoint.run(async (context) => {
            let finalTable = "";
            const currentSlide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
            const maxNewShapeWidth = 200;
            const maxNewShapeHeight = 200;
            const minNewShapeWidth = 50;
            const minNewShapeHeight = 50;
            for (let i = 0; i < 20; i++) {
              const rectangle: PowerPoint.Shape = currentSlide.shapes.addGeometricShape(
                PowerPoint.GeometricShapeType.rectangle,
              );
              rectangle.height = getRandomBetween(minNewShapeWidth, maxNewShapeWidth);
              rectangle.width = getRandomBetween(minNewShapeHeight, maxNewShapeHeight);
              rectangle.left = getRandomBetween(0, slideWidth - rectangle.width);
              rectangle.top = getRandomBetween(0, slideHeight - rectangle.height);
              rectangle.fill.foregroundColor = generateRandomHexColor();
            }
            finalTable += "Done<br>";
            const outputSpan = document.getElementById("outputSpan");
            outputSpan.innerHTML = "";
            outputSpan.innerHTML += finalTable;
          });
        }

        let currentLeft = 0;
        let currentTop = 0;
        async function arrangeSelected() {
          // Arranges the selected shapes in a line from left to right.
          await PowerPoint.run(async (context) => {
            const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
            const shapeCount = shapes.getCount();
            shapes.load("items");
            await context.sync();
            let maxHeight = 0;
            shapes.items.map((shape) => {
              shape.load("width,height");
            });
            await context.sync();
            shapes.items.map((shape) => {
              shape.left = currentLeft;
              shape.top = currentTop;
              currentLeft += shape.width;
              if (shape.height > maxHeight) maxHeight = shape.height;
            });
            await context.sync();
            currentLeft = 0;
            if (currentTop > slideHeight - 200) currentTop = 0;
          });
        }

        /** Default helper for invoking an action and handling errors. */
        async function tryCatch(callback) {
          try {
            await callback();
          } catch (error) {
            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
            console.error(error);
          }
        }
    language: typescript
template:
    content: |-
        <section>
            <p>This sample shows how to get selected shapes, and how to select and change specific shapes.</p>
        </section>
        <section>
            <h3>Try it out</h3>
        <button id="createShapes">Create shapes</button>
        <br><button id="getSelectedShapes">Get selected shapes</button>
        <br><button id="setSelectedShapes">Select first two shapes on slide one</button>
        <br><button id="changeFill">Change fill color of selected shapes</button>
        <br><button id="saveShapeSelection">Save selected shapes</button>
        <br><button id="loadShapeSelection">Load the saved shapes selection</button>
        <br><button id="arrangeSelected">Arrange selected shapes</button>
          <span id="outputSpan"></span>
        </section>
    language: html
style:
    content: |-
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 14px;
            line-height: 1.5;
            padding: 10px;
        }

        section {
            margin-bottom: 20px;
        }

        h3 {
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 16px;
        }

        p {
            margin: 0 0 10px 0;
        }

        button {
            background-color: #f0f0f0;
            color: #333333;
            border: 1px solid #8a8a8a;
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            border-radius: 2px;
            margin-left: 20px;
            margin-bottom: 5px;
            min-width: 80px;
            display: block;
        }

        button:hover {
            background-color: #e0e0e0;
        }

        button:active {
            background-color: #d0d0d0;
        }

        input {
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 2px;
            font-size: 14px;
        }

        .header {
            text-align: center;
            background-color: #f3f2f1;
            padding: 10px;
        }
    language: css
libraries: |-
    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts