Add and remove an event handler on the selection changed event - Shared with Script Lab

Selection Changed.yaml

name: Selection Changed
description: Add and remove an event handler on the selection changed event
author: alx-andru
host: EXCEL
api_set: {}
script:
    content: |
        $("#add-event-handler").click(addEventHandler);
        $("#remove-last-event-handler").click(removeLastEventHandler);
        $("#remove-all-event-handlers").click(removeAllEventHandlers);

        let eventHandlers: Array<{
            workbook: Excel.Workbook,
            handler: OfficeExtension.EventHandlerResult<Excel.Workbook>
        }> = [];

        function addEventHandler() {
            tryCatch(() => Excel.run(async (context) => {
                let workbook = context.workbook;
                let handler = workbook.onSelectionChanged.add(onSelectionChanged);
                eventHandlers.push({ workbook, handler });

                await context.sync();

                OfficeHelpers.UI.notify("Event handler added",
                    "Try changing the selection, and watch the console output.");
            }));
        }

        async function removeLastEventHandler() {
            let lastEventHandler = eventHandlers.pop();
            if (!lastEventHandler) {
                OfficeHelpers.UI.notify("No event handlers added");
                return;
            }

            let workbook = lastEventHandler.workbook;
            tryCatch(() => Excel.run(workbook, async (context) => {
                lastEventHandler.handler.remove();
                await context.sync();
            }));
        }

        async function removeAllEventHandlers() {
            if (eventHandlers.length === 0) {
                OfficeHelpers.UI.notify("No event handlers added");
                return;
            }

            tryCatch(async () => {
                while (eventHandlers.length > 0) {
                    const lastEventHandler = eventHandlers.pop();
                    await Excel.run(lastEventHandler.workbook, async (context) => {
                        lastEventHandler.handler.remove();
                        await context.sync();
                    });
                }

                OfficeHelpers.UI.notify("All event handlers removed");
            })
        }

        async function onSelectionChanged() {
            tryCatch(() => Excel.run(async (context) => {
                const range = context.workbook.getSelectedRange();
                range.format.fill.color = "yellow";
                range.load("address");

                await context.sync();

                console.log(`New selection is ${range.address}`);
            }));
        }


        /** Default helper for invoking an action and handling errors. */
        async function tryCatch(callback: () => OfficeExtension.IPromise<any>) {
            try {
                await callback();
            }
            catch (error) {
                console.log('try again');
                console.log(eventHandlers);
                addEventHandler();
                OfficeHelpers.UI.notify(error);
                OfficeHelpers.Utilities.log(error);
            }
        }

        addEventHandler();
    language: typescript
template:
    content: |
        <section class="ms-font-m">
            <p>This sample shows how to add and remove an event handler on the selection changed event using the Excel JavaScript API.</p>
        </section>

        <section class="samples ms-font-m">
            <h3>Try it out</h3>
            <button id="add-event-handler" class="ms-Button">
                <span class="ms-Button-label">Add event handler</span>
            </button>
            <button id="remove-last-event-handler" class="ms-Button">
                <span class="ms-Button-label">Remove last event handler</span>
            </button>
            <button id="remove-all-event-handlers" class="ms-Button">
                <span class="ms-Button-label">Remove all event handlers</span>
            </button>
        </section>
    language: html
style:
    content: |
        section.samples {
            margin-top: 20px;
        }

        section.samples .ms-Button, section.setup .ms-Button {
            display: block;
            margin-bottom: 5px;
            margin-left: 20px;
            min-width: 80px;
        }
    language: css
libraries: |
    # Office.js
    https://appsforoffice.microsoft.com/lib/1/hosted/office.js

    # CSS Libraries
    office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
    office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

    # NPM libraries
    core-js@2.4.1/client/core.min.js
    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.min.js
    jquery@3.1.1

    # IntelliSense: @types/library or node_modules paths or URL to d.ts files
    @types/office-js
    @types/core-js
    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.d.ts
    @types/jquery