id: outlook-notifications-add-getall-remove
name: Work with notification messages
description: Adds different kinds of notification messages, gets all notifications, and replaces and removes an individual notification message.
host: OUTLOOK
api_set:
    Mailbox: '1.10'
script:
    content: |-
        document.getElementById("addProgress").addEventListener("click", addProgress);
        document.getElementById("addInformational").addEventListener("click", addInformational);
        document.getElementById("addInformationalPersisted").addEventListener("click", addInformationalPersisted);
        document.getElementById("addInsight").addEventListener("click", addInsight);
        document.getElementById("addError").addEventListener("click", addError);
        document.getElementById("getAll").addEventListener("click", getAll);
        document.getElementById("replace").addEventListener("click", replace);
        document.getElementById("remove").addEventListener("click", remove);
          
        function addProgress() {
          // Adds a progress indicator to the mail item.
          const id = (document.getElementById("notificationId") as HTMLInputElement).value;
          const details =
            {
              type: Office.MailboxEnums.ItemNotificationMessageType.ProgressIndicator,
              message: "Progress indicator with id = " + id
            };
          Office.context.mailbox.item.notificationMessages.addAsync(id, details, (result) => {
            if (result.status === Office.AsyncResultStatus.Failed) {
              console.log(`Failed to add progress notification with id = ${id}. Try using a different ID.`);
              return;
            }
            console.log(`Added progress notification with id = ${id}.`);
          });
        }

        function addInformational() {
          // Adds an informational notification to the mail item.
          const id = (document.getElementById("notificationId") as HTMLInputElement).value;
          const details =
            {
              type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
              message: "Non-persistent informational notification message with id = " + id,
              icon: "PG.Icon.16",
              persistent: false
            };
          Office.context.mailbox.item.notificationMessages.addAsync(id, details, (result) => {
            if (result.status === Office.AsyncResultStatus.Failed) {
              console.log(`Failed to add informational notification with id = ${id}. Try using a different ID.`);
              return;
            }
            console.log(`Added informational notification with id = ${id}.`);
          });
        }

        function addInformationalPersisted() {
          // Adds a persistent information notification to the mail item.
          const id = (document.getElementById("notificationId") as HTMLInputElement).value;
          const details =
            {
              type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
              message: "Persistent informational notification message with id = " + id,
              icon: "PG.Icon.16",
              persistent: true
            };
          Office.context.mailbox.item.notificationMessages.addAsync(id, details, (result) => {
            if (result.status === Office.AsyncResultStatus.Failed) {
              console.log(`Failed to add persistent informational notification with id = ${id}. Try using a different ID.`);
              return;
            }
            console.log(`Added persistent informational notification with id = ${id}.`);
          });
        }

        function addInsight() {
          // Adds an informational message with actions to the mail item.
          const id = (document.getElementById("notificationId") as HTMLInputElement).value;

          const itemId = Office.context.mailbox.item.itemId;
          const details = {
            type: Office.MailboxEnums.ItemNotificationMessageType.InsightMessage,
            message: "This is an insight notification with id = " + id,
            icon: "PG.Icon.16",
            actions: [
              {
                actionText: "Open insight",
                actionType: Office.MailboxEnums.ActionType.ShowTaskPane,
                // Identify whether the current mail item is in read or compose mode to set the appropriate commandId value.
                commandId: (itemId == undefined ? "PG.HelpCommand.Compose" : "PG.HelpCommand.Read"),
                contextData: { a: "aValue", b: "bValue" }
              }
            ]
          };

          Office.context.mailbox.item.notificationMessages.addAsync(id, details, (result) => {
            if (result.status === Office.AsyncResultStatus.Failed) {
              console.log(`Failed to add insight notification with id = ${id}. Try using a different ID.`);
              return;
            }
            console.log(`Added insight notification with id = ${id}.`);
          });
        }

        function addError() {
          // Adds an error notification to the mail item.
          const id = (document.getElementById("notificationId") as HTMLInputElement).value;
          const details =
            {
              type: Office.MailboxEnums.ItemNotificationMessageType.ErrorMessage,
              message: "Error notification message with id = " + id
            };
          Office.context.mailbox.item.notificationMessages.addAsync(id, details, (result) => {
            if (result.status === Office.AsyncResultStatus.Failed) {
              console.log(`Failed to add error notification with id = ${id}. Try using a different ID.`);
              return;
            }
            console.log(`Added error notification with id = ${id}.`);
          });
        }

        function getAll() {
          // Gets all the notification messages and their keys for the current mail item.
          Office.context.mailbox.item.notificationMessages.getAllAsync((asyncResult) => {
            if (asyncResult.status === Office.AsyncResultStatus.Failed) {
              console.log(asyncResult.error.message);
              return;
            }
            console.log(JSON.stringify(asyncResult.value));
          });
        }

        function replace() {
          // Replaces a notification message of a given key with another message.
          const id = (document.getElementById("notificationId") as HTMLInputElement).value;
          Office.context.mailbox.item.notificationMessages.replaceAsync(
            id,
            {
              type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
              message: "Notification message with id = " + id + " has been replaced with an informational message.",
              icon: "icon2",
              persistent: false
            },
            (result) => {
              if (result.status === Office.AsyncResultStatus.Failed) {
                console.log(`Failed to replace notification with id = ${id}. ${result.error.message}.`);
                return;
              }
              console.log(`Replaced notification with id = ${id}.`);
            });
        }

        function remove() {
          // Removes a notification message from the current mail item.
          const id = (document.getElementById("notificationId") as HTMLInputElement).value;
          Office.context.mailbox.item.notificationMessages.removeAsync(id, (result) => {
            if (result.status === Office.AsyncResultStatus.Failed) {
              console.log(`Failed to remove notification with id = ${id}. ${result.error.message}.`);
              return;
            }
            console.log(`Removed notification with id = ${id}.`);
          });
        }
    language: typescript
template:
    content: |-
        <section>
          <p>This sample shows how to add different kinds of notification messages, get all, replace, and remove an individual notification message.</p>
        </section>
        <section>
          <h2>Try it out</h2>
          <label>Notification ID to add, replace, or remove that notification:</label>
          <input id="notificationId" type="text" value="my_id_00" placeholder="">
          <h3>Add a notification</h3>
          <p>To add a notification, enter a unique ID for the notification in the text field, then select one of the notification types below.</p>
          <p><b>Note</b>:</p>
          <ul>
            <li>You can add a maximum of five notifications per mail item.</li>
            <li>You can only add one insight notification to a mail item.</li>
            <li>In Outlook on the web and in new Outlook on Windows, you can only add an insight notification to an item in compose mode.</li>
          </ul>
          <button id="addProgress">
            <div>Add a progress notification</div>
          </button>
          <br>
          <button id="addInformational">
            <div>Add an informational notification</div>
          </button>
          <br>
          <button id="addInformationalPersisted">
            <div>Add a persisted informational notification</div>
          </button>
          <br>
          <button id="addInsight">
            <div>Add an insight notification</div>
          </button>
          <br>
          <button id="addError">
            <div>Add an error notification</div>
          </button>
          <h3>Get all notifications</h3>
          <button id="getAll">
            <div>Get notifications</div>
          </button>
          <h3>Replace a notification</h3>
          <p>To replace a notification with an informational message, enter the ID of the notification you want to replace in the text field, then select <b>Replace notification</b>.</p>
          <button id="replace">
            <div>Replace notification</div>
          </button>
          <h3>Remove a notification</h3>
          <p>To remove a notification, enter the ID of the notification you want to remove in the text field, then select <b>Remove notification</b>.</p>
          <button id="remove">
            <div>Remove notification</div>
          </button>
        </section>
    language: html
style:
    content: |-
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 14px;
            line-height: 1.5;
            padding: 10px;
        }

        section {
            margin-bottom: 20px;
        }

        h3 {
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 16px;
        }

        p {
            margin: 0 0 10px 0;
        }

        button {
            background-color: #f0f0f0;
            color: #333333;
            border: 1px solid #8a8a8a;
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            border-radius: 2px;
            margin-left: 20px;
            margin-bottom: 5px;
            min-width: 80px;
            display: block;
        }

        button:hover {
            background-color: #e0e0e0;
        }

        button:active {
            background-color: #d0d0d0;
        }

        input {
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 2px;
            font-size: 14px;
        }

        .header {
            text-align: center;
            background-color: #f3f2f1;
            padding: 10px;
        }
    language: css
libraries: |-
    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
    https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/office-js/index.d.ts