Outlook Add-ins UI Elements

This document explores the various UI elements available for building rich and interactive Outlook add-ins. Understanding these elements is crucial for designing user experiences that seamlessly integrate with Outlook.

Task Pane Commands

Task pane commands allow you to define buttons or menu items that, when clicked, open a task pane. This is a common way to provide persistent functionality within Outlook.

<ExtensionPoint xsi:type="OfficeTab">
    <OfficeApp ButtonId="MyButton" />
</ExtensionPoint>

Task Panes

Task panes are the primary UI surface for many Outlook add-ins. They are web pages hosted within an Outlook frame and can display information, accept user input, and interact with the Outlook item.

function openTaskPane() {
    Office.addin.showTaskPane("MyTaskPane", "https://localhost:3000/taskpane.html");
}

Contextual Commands

Contextual commands enable your add-in to appear only when relevant to the current Outlook item (e.g., an email, appointment, or contact). This provides a more targeted and less intrusive user experience.

<ExtensionPoint xsi:type="MessageReadCommandSurface">
    <OfficeApp ButtonId="MyContextualButton" />
    <ExtensionPoint xsi:type="Rule" xsi:arguments="Body/Text~ContainedIn"/>
    <ExtensionPoint xsi:type="Rule" xsi:arguments="'specific keyword'"/>
</ExtensionPoint>

Dialog API

The Dialog API provides a way to open modal dialog windows from your add-in. These are useful for performing quick actions, gathering small amounts of information, or displaying messages without disrupting the main task pane flow.

function openMyDialog() {
    Office.context.ui.displayDialogAsync(
        "https://localhost:3000/dialog.html",
        { width: "50%", height: "40%" },
        function (asyncResult) {
            if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
                var dialog = asyncResult.value;
                dialog.messageParent('Hello from the dialog!'); // Example of sending a message
                dialog.addEventHandler(Office.EventType.DialogMessageReceived, function (message) {
                    console.log("Message from dialog: " + message.data);
                });
            } else {
                console.error("Error opening dialog: " + asyncResult.error.message);
            }
        }
    );
}