How to handle event.completed() in Dialog API Office JS

Question

I am currently invoking a dialog from a button on the ribbon in Outlook. The dialog works fine without any issues, but the message "...add-in is working on your request" appears even after the dialog is opened/closed.

Here is how the dialog is invoked..

function openDialog(event) {
    Office.context.ui.displayDialogAsync('https://xxxx.azurewebsites.net', { height: 80, width: 92 },
        function (asyncResult) {
            dialog = asyncResult.value;
            dialog.addEventHandler(Office.EventType.DialogMessageReceived, processMessage);
            event.completed();
        }
    );
}

function processMessage(event) {
    event.completed();
}

How to avoid this message ? Tried to close the event in the EventHandler callback(processMessage) as well but didn't work.

Answer 1

For addEventHandler, if you would like to complete the event when the dialog is closed, you can use the DialogEventReceived event, which is triggered when the dialog box has been closed or otherwise unloaded. Also, the handler function (processMessage) should use a different parameter name from event as to not overwrite the variable.

function openDialog(event) {
    Office.context.ui.displayDialogAsync('https://xxxx.azurewebsites.net', { height: 80, width: 92 },
        function (asyncResult) {
            dialog = asyncResult.value;
            dialog.addEventHandler(Office.EventType.DialogEventReceived, processMessage);
            event.completed();
        }
    );
}

function processMessage(args) {
    event.completed();
}