Add - Goto - Remove Bindings

Add - Goto - Remove Bindings.yaml

name: Blank snippet - 1
description: ''
author: rvanlaak
host: WORD
api_set: {}
script:
    content: |
        $("#add").click(() => tryCatch(addBindingFromSelection));
        $("#goto").click(() => tryCatch(gotoBinding));
        $("#remove").click(() => tryCatch(removeBinding));

        async function addBindingFromSelection()
        {
            Office.context.document.bindings.addFromSelectionAsync(Office.BindingType.Text, { id: 'MyBinding' },
                function (asyncResult) {
                    console.log('Added new binding with type: ' + asyncResult.value.type + ' and id: ' + asyncResult.value.id);
                }
            );
        }

        async function gotoBinding()
        {
            let options = { selectionMode: Office.SelectionMode.None };

            Office.context.document.goToByIdAsync("MyBinding", Office.GoToType.Binding, options, function (asyncResult) {
                if (asyncResult.status == "failed") {
                    console.log("Action failed with error: " + asyncResult.error.message);
                }
                else {
                    console.log("Navigation successful");

                }
            });
        }

        async function removeBinding()
        {
            Office.context.document.bindings.releaseByIdAsync("MyBinding", function (asyncResult) {
                console.log("Released MyBinding!");
            }); 
        }

        /** Default helper for invoking an action and handling errors. */
        async function tryCatch(callback)
        {
            try {
                await callback();
            }
            catch (error) {
                OfficeHelpers.UI.notify(error);
                OfficeHelpers.Utilities.log(error);
            }
        }
    language: typescript
template:
    content: |-
        <button id="add" class="ms-Button">
            <span class="ms-Button-label">Add binding</span>
        </button>

        <button id="goto" class="ms-Button">
            <span class="ms-Button-label">Goto Binding</span>
        </button>

        <button id="remove" class="ms-Button">
            <span class="ms-Button-label">Remove Binding</span>
        </button>
    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: |
    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
    @types/office-js

    [email protected]/dist/css/fabric.min.css
    [email protected]/dist/css/fabric.components.min.css

    [email protected]/client/core.min.js
    @types/core-js

    @microsoft/[email protected]/dist/office.helpers.min.js
    @microsoft/[email protected]/dist/office.helpers.d.ts

    [email protected]
    @types/[email protected]