order: 20
id: outlook-other-item-apis-session-data-apis
name: Work with session data APIs (Compose)
description: 'Sets, gets, gets all, removes, and clears session data in Compose mode.'
host: OUTLOOK
api_set:
    Mailbox: '1.11'
script:
    content: |
        $("#setSessionData").on("click", setSessionData);
        $("#getSessionData").on("click", getSessionData);
        $("#getAllSessionData").on("click", getAllSessionData);
        $("#removeSessionData").on("click", removeSessionData);
        $("#clearSessionData").on("click", clearSessionData);
        function setSessionData() {
            Office.context.mailbox.item.sessionData.setAsync(
              "Date",
              "7/24/2020",
              function(asyncResult) {
              if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
                console.log("sessionData.setAsync succeeded");
              } else {
                console.log("Failed to set sessionData. Error: " + JSON.stringify(asyncResult.error));
              }
            });
        }
        function getSessionData() {
          Office.context.mailbox.item.sessionData.getAsync(
            "Date",
            function(asyncResult) {
            if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
              console.log("The sessionData value is " + JSON.stringify(asyncResult.value));
            } else {
              console.log("Failed to get sessionData. Error: " + JSON.stringify(asyncResult.error));
            }
          });
        }
        function getAllSessionData() {
            Office.context.mailbox.item.sessionData.getAllAsync(function(asyncResult) {
              if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
                console.log("The sessionData is " + JSON.stringify(asyncResult.value));
              } else {
                console.log("Failed to get all sessionData. Error: " + JSON.stringify(asyncResult.error));
              }
            });
        }
        function removeSessionData() {
          Office.context.mailbox.item.sessionData.removeAsync(
            "Date",
            function callback(asyncResult) {
              if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
                console.log("sessionData.removeAsync succeeded");
              } else {
                console.log("Failed to remove sessionData. Error: " + JSON.stringify(asyncResult.error));
              }
            }
          );
        }
        function clearSessionData() {
          Office.context.mailbox.item.sessionData.clearAsync(function(asyncResult) {
            if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
              console.log("sessionData.clearAsync succeeded");
            } else {
              console.log("Failed to clear sessionData. Error: " + JSON.stringify(asyncResult.error));
            }
          });
        }
    language: typescript
template:
    content: |-
        <section class="ms-Fabric ms-font-m">
            <p>This sample shows how to set, get, get all, remove, and clear session data in compose mode.
                <p>
                    <b>Required mode</b>: Compose
                </p>
            </p>
        </section>
        <section class="ms-Fabric samples ms-font-m">
          <button id="setSessionData" class="ms-Button">
            <div class="ms-Button-label">Set SessionData</div>
        </button>
          <button id="getSessionData" class="ms-Button">
            <div class="ms-Button-label">Get SessionData</div>
        </button>
          <button id="getAllSessionData" class="ms-Button">
            <div class="ms-Button-label">Get all SessionData</div>
        </button>
          <button id="removeSessionData" class="ms-Button">
            <div class="ms-Button-label">Remove SessionData</div>
        </button>
        </button>
          <button id="clearSessionData" class="ms-Button">
            <div class="ms-Button-label">Clear SessionData</div>
        </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: |
    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
    @types/office-js
    office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
    office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
    core-js@2.4.1/client/core.min.js
    @types/core-js
    jquery@3.1.1
    @types/jquery@3.3.1