Managing event.completed() method with Office JS Dialog functionality

Other Questions API
1

I’m working with Office JS and need help with proper event handling. When I trigger a dialog box from a ribbon button in Outlook, everything works correctly but I keep getting a persistent message saying the add-in is processing the request. This message stays visible even after the dialog opens and closes.

Here’s my current implementation:

function launchModalDialog(buttonEvent) {
    Office.context.ui.displayDialogAsync('https://myapp.azurewebsites.net', 
        { height: 75, width: 85 },
        function (result) {
            modalDialog = result.value;
            modalDialog.addEventHandler(Office.EventType.DialogMessageReceived, handleDialogMessage);
            buttonEvent.completed();
        }
    );
}

function handleDialogMessage(dialogEvent) {
    dialogEvent.completed();
}

I’ve tried calling the completed method in different places including the message handler but the loading message persists. What’s the correct way to handle this situation and make the processing message disappear?

2

Yeah, that’s a classic mistake! You’re calling completed() too early. The dialog callback just means it started opening, not that it’s done processing. Keep a reference to buttonEvent and only call completed() when you actually close the dialog in handleDialogMessage - after you’ve processed your data.

3

I encountered this issue a while back as well, and it can be quite frustrating. The mistake here is in the timing of the completed() call. You’re currently calling it right after starting the dialog, but Office JS requires it to be called only after the entire process is finished. To resolve this, store the buttonEvent reference and invoke completed() only after processing the dialog result and closing it. This approach ensures that the dialog’s lifecycle is fully accounted for, allowing Office to recognize that the action tied to the button press is complete.

4

This is a classic timing issue with Office JS dialogs. You’re calling buttonEvent.completed() right inside the displayDialogAsync callback, but that callback fires immediately when the dialog opens - not when it’s actually done.

Move buttonEvent.completed() to after the dialog closes. Right now, your dialog opens and Office thinks the button action is finished, but the add-in is still waiting for the dialog to wrap up.

Restructure your code so buttonEvent.completed() only gets called after you’ve handled the dialog result and closed it with modalDialog.close(). That’ll fix the stuck processing message since Office will know the whole button operation is actually done, not just the dialog creation part.