Script Lab code to read and write from document settings

read-and-write-from-document-settings.yaml

name: Read and write from document settings
description: >-
  Small Office.js sample for reading and writing
  Office.context.document.settings.
host: POWERPOINT
api_set: {}
script:
  content: |
    Office.onReady(() => {
      document.getElementById("writeButton").addEventListener("click", writeSetting);
      document.getElementById("readButton").addEventListener("click", readSetting);
      document.getElementById("refreshReadButton").addEventListener("click", refreshThenReadSetting);
      document.getElementById("status").textContent = "Ready.";
    });

    function getKey() {
      return document.getElementById("settingsKey").value.trim();
    }

    function writeSetting() {
      const key = getKey();
      if (!key) {
        document.getElementById("status").textContent = "Enter a settings key first.";
        return;
      }

      const value = document.getElementById("settingsValue").value;
      Office.context.document.settings.set(key, value);
      Office.context.document.settings.saveAsync((result) => {
        document.getElementById("status").textContent =
          result.status === Office.AsyncResultStatus.Succeeded
            ? "Saved setting: " + key
            : "Save failed: " + result.error.message;
      });
    }

    function readSetting() {
      const key = getKey();
      if (!key) {
        document.getElementById("status").textContent = "Enter a settings key first.";
        return;
      }

      const value = Office.context.document.settings.get(key);
      document.getElementById("settingsValue").value = value === undefined ? "" : value;
      document.getElementById("status").textContent =
        value === undefined ? "No value found for: " + key : "Read setting: " + key;
    }

    function refreshThenReadSetting() {
      Office.context.document.settings.refreshAsync((result) => {
        if (result.status !== Office.AsyncResultStatus.Succeeded) {
          document.getElementById("status").textContent = "Refresh failed: " + result.error.message;
          return;
        }

        readSetting();
      });
    }
  language: javascript
template:
  content: >-
    <label>Key<input id="settingsKey" value="sample-key" /></label>


    <label>Content<textarea id="settingsValue">Hello from document
    settings.</textarea></label>


    <button id="writeButton">Write in document settings</button>

    <button id="readButton">Read from document settings</button>

    <button id="refreshReadButton">Refresh then read</button>


    <div id="status">Waiting for Office…</div>
  language: html
style:
  content: |
    label {
      display: block;
      margin-top: 12px;
    }

    input,
    textarea {
      box-sizing: border-box;
      display: block;
      margin-top: 4px;
      width: 100%;
      font: inherit;
    }

    textarea {
      min-height: 96px;
    }

    button {
      margin-top: 12px;
      margin-right: 8px;
      padding: 6px 10px;
    }
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js