Send a request to an Office add-in

Question

I am making an Excel addin with JavaScript API for Excel. The entry of the addin is addin.html, and it calls JS, CSS files. All the files are hosted in www.myexample.com.

When we click on a button in the addin, it will popup a browser window by window.open("https://www.myexample.com/post/", "popup"). The page with post.html as template is built by angularjs and ui-router. The server and the client are also hosted in www.myexample.com.

The controller of post.html needs to send request from time to time to addin.html. For example, post.html sends an address A1 to addin.html, and expects to receive the current value of Cell A1. It is easy for addin.html to get cell value from Excel with some async functions by JavaScript API for Excel. Whereas, my question is how to implement the request (of getting cell value from an address) in the controller of post.html.

If we use $http.post, is it possible to send a request to addin.html, which does not have a server?

var getValue = function (address) {
    return $http.post('...', { address: address })
        .then(function (res) {
             // maybe do something with res
             return res
        }
}

If we use postMessage, we could implement listeners in post.html, which are reactive. I can NOT imagine how to send actively a request and wait for a response.

Could anyone help?

score 1 · Answer 1 · answered Mar 14 '17 at 10:17

Instead of opening a window when we click on a button in the addin, you could create a DispalyDialog and open it. From there you can send requests to the addin using messageParent() method. For handling the received message, you could do something like

Office.context.document.addHandlerAsync(Office.EventType.DialogMessageReceived, myHandler);

function myHandler(eventArgs) {
 //Do some processing
}

After the processing is done, you could store the result in localStorage so that it is available in the DisplayDialog.

This is not a clear way of accomplishing what you need but I am sure that it will get the task done. If you find out any other solutions, please do update here.

It is good to know [Dialog](https://dev.office.com/docs/add-ins/develop/dialog-api-in-office-add-ins)... thank you... — SoftTimur, Mar 15 '17 at 01:50

score 0 · Accepted Answer · edited May 23 '17 at 12:25

If we open the popup browser by window.open as described in the OP, we could send data between the popup and the add-in by postMessage.

If we open a dialog box suggested by @MohamedShakeel we could send data by messageParent and localStorage.

Both of the two ways work.

I can NOT imagine how to send actively a request and wait for a response.

We could wait for a response, eg, a message from the add-in, by manually making a promise like here. Thus, we will be able to define

var getValue = function (address) {
    return sendRequestByPostMessage()
        .then(function () {
             return waitForResponse()
                 .then(function (res) {
                     // treatTheResponse
                 })
        })
}

Send a request to an Office add-in

2 Answers2