Shared with Script Lab

Set Content Control Title.yaml

name: Set Content Control Title
description: ''
author: htryggva
host: WORD
api_set: {}
script:
    content: |-
        $("#change-controls").click(() => tryCatch(modifyContentControls));

        async function modifyContentControls() {

            await Word.run(async (context) => {
                let contentControls = context.document.contentControls;
                contentControls.load();

                await context.sync();

                for (let i = 0; i < contentControls.items.length; i++) {
                    let contentControl = contentControls.items[i];
                    console.log(contentControl.id);

                    contentControl.title = 'inline cc';
                }

                await context.sync();
            });
        }

        /** 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: "<h2 class=\"ms-font-m\">This sample sets the title of all content controls</h2>\n\n<div id=\"samples-container\">\n\t<button id=\"change-controls\" class=\"ms-Button\">\n                    <span class=\"ms-Button-label\">Modify content control title</span>\n                </button>\n</div>"
    language: html
style:
    content: |
        body {
            margin: 0;
            padding: 10px;
        }

        /* Button customization, including overwriting some Fabric defaults */
        .ms-Button, .ms-Button:focus {
            background: #217346;
            border: #217346;
            height: 70px;
        }

            .ms-Button > .ms-Button-label,
            .ms-Button:focus > .ms-Button-label,
            .ms-Button:hover > .ms-Button-label {
                color: white;
            }

            .ms-Button:hover, .ms-Button:active {
                background: #164b2e;
            }

            .ms-Button.is-disabled, .ms-Button:disabled {
                background-color: #f4f4f4;
                border-color: #f4f4f4;
            }

            .ms-Button.is-disabled .ms-Button-label,
            .ms-Button:disabled .ms-Button-label {
                color: #a6a6a6;
            }

        #setup.ms-Button, #setup.ms-Button:focus {
            background: darkred;
            border: darkred;
        }

            #setup.ms-Button:hover, #setup.ms-Button:active {
                background: red;
            }

        #samples-container {
            margin-top: 20px;
        }

        #samples-container .ms-Button {
            display: block;
            margin-bottom: 5px;
        }

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

    // NPM libraries
    jquery@3.1.1
    office-ui-fabric-js@1.4.0/dist/js/fabric.min.js
    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
    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.min.js
    core-js@2.4.1/client/core.min.js

    // IntelliSense: Use dt~library_name for DefinitelyTyped or URLs to d.ts files
    @types/office-js
    @types/jquery
    @types/core-js
    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.d.ts