angularjs - 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?

Answer 1

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