OfficeJS add and update binding event handler

Question

I'm trying to create an binding so that I can eventually check if that cell has changed make some AJAX call. The documentation gives a few examples that i'm trying to make into the most simple example:

  Office.initialize = function(){
  $(document).ready(function() {
    Excel.run(function(context){
        // This should create a new binding and store it in the bindingsObject
        // add(range: Range or string, bindingType: string, id: string)
        context.workbook.bindings.add("Sheet1!A1:A2", "Range", "A_binding");

        // create a new event handler for this bindings
        Office.select("bindings#A_binding").addHandlerAsync(Office.EventType.BindingDataChanged, onBindingDataChanged);


        $("#output").append("<br /><br /> Finished Pre-Sync");
        return context.sync().then(function(){
            $("#output").append("<br /><br />Post Sync")
        });
    }).catch(function(error){
        $("#debugger").append("error: " + JSON.stringify(error.debugInfo));
    })
  });
  }

  function onBindingDataChanged(eventArgs){
      Excel.run(function(context) {
          $("output").append("updated");
      })
  }

However when I change the data in the cells nothing happens, no errors, no "updated". Is this the wrong way to go about creating bindings?

Answer 1

The following code creates a binding for range Sheet1!A1:A2 and then adds an onDataChanged event handler for that binding.

function registerDataChangedHandler_JS() {
    Excel.run(function (context) {
        var myBinding = context.workbook.bindings.add("Sheet1!A1:A2", "range", "A_binding");

        myBinding.onDataChanged.add(onBindingDataChanged_JS);

        return context.sync()
            .then(function () {
                console.log("Created binding and added onDataChanged event for the binding.");
            });
    }).catch(errorHandlerFunction);
}

function onBindingDataChanged_JS(eventArgs) {
    Excel.run(function (context) {
        console.log("Cells were updated!");

        return context.sync();
    });
}

Note: You can quickly and easily try this snippet yourself by using Script Lab (https://aka.ms/getscriptlab). Simply install the Script Lab add-in (free), then choose "Import" in the navigation menu, and use the following Gist URL: https://gist.github.com/kbrandl/a39042da654da0f2b1e1358631d9ca6a. This Gist contains code samples in both JavaScript (method names ending in _JS) and TypeScript (method names ending in _TS).

To create the binding and add the event handler when the add-in is loaded:

Office.initialize = function (reason) {
    $(document).ready(function () {
        registerDataChangedHandler_JS();
    });
};

(You can learn more about the initialization event here: https://learn.microsoft.com/en-us/office/dev/add-ins/develop/understanding-the-javascript-api-for-office#initializing-your-add-in.)

Finally, the documentation link in your post links to the documentation source file on GitHub. For a better user experience, I'd suggest that you use the documentation site itself: https://learn.microsoft.com/en-us/office/dev/add-ins. To get to the API Reference docs from this documentation site, use the links in the Reference section:

(Here's the direct link to the Binding API reference article: https://dev.office.com/reference/add-ins/shared/binding.)