id: outlook-item-custom-properties-load-set-get-save
name: Work with item custom properties
description: 'Gets the custom properties that the add-in placed on the current item, sets a new one, gets it, removes it, and saves all custom properties back to the item.'
host: OUTLOOK
api_set:
    Mailbox: '1.1'
script:
    content: |
        let customProps;

        $("#load").on("click", load);
        $("#get").on("click", get);
        $("#get-all").on("click", getAll);
        $("#set").on("click", set);
        $("#remove").on("click", remove);
        $("#save").on("click", save);

        function load() {
          Office.context.mailbox.item.loadCustomPropertiesAsync((result) => {
            if (result.status === Office.AsyncResultStatus.Failed) {
              console.error(`loadCustomPropertiesAsync failed with message ${result.error.message}`);
              return;
            }

            customProps = result.value;
            console.log("Loaded the CustomProperties object.");
          });
        }

        function get() {
          const propertyName = $("#get-property-name").val();
          const propertyValue = customProps.get(propertyName);
          console.log(`The value of custom property "${propertyName}" is "${propertyValue}".`);
        }

        function getAll() {
          let allCustomProps;
          if (Office.context.requirements.isSetSupported("Mailbox", "1.9")) {
            allCustomProps = customProps.getAll();
          } else {
            allCustomProps = customProps["rawData"];
          }

          console.log(allCustomProps);
        }

        function set() {
          const propertyName = $("#set-property-name").val();
          const propertyValue = $("#property-value").val();
          customProps.set(propertyName, propertyValue);
          console.log(`Custom property "${propertyName}" set to value "${propertyValue}".`);
        }

        function remove() {
          const propertyName = $("#remove-property-name").val();
          customProps.remove(propertyName);
          console.log(`Custom property "${propertyName}" removed.`);
        }

        function save() {
          customProps.saveAsync((result) => {
            if (result.status === Office.AsyncResultStatus.Failed) {
              console.error(`saveAsync failed with message ${result.error.message}`);
              return;
            }

            console.log(`Custom properties saved with status: ${result.status}`);
          });
        }
    language: typescript
template:
    content: |-
        <section class="ms-Fabric ms-font-m">
            <p>This sample shows how to set, save, and get the custom per-item properties of an add-in.</p>
        </section>

        <section class="ms-Fabric samples ms-font-m">
            <h3>Try it out</h3>
            <p>First load the <a href="https://learn.microsoft.com/javascript/api/outlook/office.customproperties"
                    target="_blank">CustomProperties</a> object of the mail item.</p>
            <button id="load" class="ms-Button">
            <div class="ms-Button-label">Load custom properties</div>
          </button>
            <div class="ms-TextField">
                <label class="ms-Label">Property name:</label>
                <input id="set-property-name" class="ms-TextField-field" type="text" value="hello" placeholder="">
          </div>
                <div class="ms-TextField">
                    <label class="ms-Label">Property value:</label>
                    <input id="property-value" class="ms-TextField-field" type="text" value="world" placeholder="">
          </div>
                    <button id="set" class="ms-Button">
            <div class="ms-Button-label">Set</div>
          </button>
                    <div class="ms-TextField">
                        <label class="ms-Label">Property name:</label>
                        <input id="get-property-name" class="ms-TextField-field" type="text" value="hello" placeholder="">
            </div>
                        <button id="get" class="ms-Button">
            <div class="ms-Button-label">Get</div>
          </button>
                        <button id="get-all" class="ms-Button">
            <div class="ms-Button-label">Get all</div>
          </button>
                        <div class="ms-TextField">
                            <label class="ms-Label">Property name:</label>
                            <input id="remove-property-name" class="ms-TextField-field" type="text" value="hello" placeholder="">
            </div>
                            <button id="remove" class="ms-Button">
            <div class="ms-Button-label">Remove</div>
          </button>
                            <button id="save" class="ms-Button">
            <div class="ms-Button-label">Save all</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