How to pass model to Office 365 Dialog from Word 2016?

Question

I was playing with Office 365 add-in for MS word. I have a dialog to manipulate selected word image. I need to pass that image (maybe a Base64 value of that) to my dialog so that I can play with the image before replacing back to the word(same location).

I am using below code to show the popup:

Office.context.ui.displayDialogAsync("https://" + location.host + "/Views/ImageManager.html", { width: 64, height: 55, requireHTTPS: true }, function (asyncResult) {
    dialog = asyncResult.value;
    dialog.addEventHandler(Office.EventType.DialogMessageReceived, processMessage);
    if (asyncResult.status !== Office.AsyncResultStatus.Succeeded) {
        return;
    }
});

Thing I wanted to do?

When the user selects an image to play with that in a word document and click ribbon button to open this dialog, I need to pass that image to the dialog to show in the dialog.

How can I pass my Image model to the dialog?

Greece

Answer 1

UPDATE 2023:

There is now an API for sending messages to the dialog: messageChild method

ORIGINAL ANSWER:

There are at least two ways to pass things to the dialog:

• Pass it as a query parameter on the URL that you pass to displayDialogAsync()
• Store it in window.localStorage in the host script and retrieve it from there in script on the dialog page.

UPDATE: You can vote up this Office Dev User Voice request for better communication between the dialog and its host: https://officespdev.uservoice.com/forums/224641-feature-requests-and-feedback/suggestions/17196659-improve-custom-dialog

Aquamarine

To that, I would add that localStorage is not super-safe, in case you have multiple documents open at the same (different Word windows, or different Word Online tabs). So URL parameter is probably best, except it has a length limitation. You can do a hybrid approach, storing in localStorage using a random key that you pass on the URL (or make that key a timestamp?) And then at some point throw away old values?... – Camelot

However, I thought that much as the child dialog can message the parent, I thought the parent could message the child as well, to form a two-way communication. Let me check on that, and get back to you. – Camelot

hi @RickKirkham any other way to send messages to dialog without parameter and localStorage. I need a small dialog like 10 height and width when I give parameter its size automatically round about 30. – Monarchy

because localStorage is not works in office add-in on browser online – Monarchy

@봊Ì'ɱЈìԥ See my update to my answer. – Aquamarine

I tried but not succeed yet. @RickKirkham please provide an example. – Monarchy

please give a working example thanks @RickKirkham. – Monarchy

There is an example here: learn.microsoft.com/en-us/office/dev/add-ins/develop/… – Aquamarine