There are many contentcontrols in a document and I need to find out a way that the cursor is in which content control so that I will select that control and do the operation accordingly. I think by implementing onEnter and onExit events for contentcontrols , I can achieve it. But I don't know how to declare and invoke those eventhandlers in JavaScript API. Any help is really appreciated.

There are many contentcontrols in a document and I need to find out a way that the cursor is in which content control so that I will select that control and do the operation accordingly. I think by implementing onEnter and onExit events for contentcontrols , I can achieve it. But I don't know how to declare and invoke those eventhandlers in JavaScript API. Any help is really appreciated.

• javascript
• dom-events
• office-js

Share Improve this question Follow edited Jan 12, 2022 at 13:59 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 18, 2016 at 21:17 office365developeroffice365developer 8311 silver badge55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You would need to use a bination of APIs to implement that functionality with the current API set:

1. First add an event handler for the Document.selectionChanged event.
2. Every time the event fires, get the Range object corresponding to the selection in the document, using the Document.getSelection() API.
3. Check the range to see if there's a content control in it, using the Range.contentControls relationship.

-Michael (PM for add-ins)

Good question! We do have an onEnter event for content controls (we call it binding.selectionChanged. We also have a binding.dataChanged event who gets triggered if the user changes the content and exits the content control

so an alternative solution to what Michael proposed is to create bindings for each content control in the document and then register for such events.

you can achieve this by: 1. traversing the content control collection.(use body.contentControls collection) 2. for each content control, grab or set the title and use it to create a binding by named item. check the bindings.addFromNamedItem method. 3. on the callBack make sure to subscribe to the selectionChanged (or DataChanged) for the binding. the create binding code and register to the events will look like this:

function CreateCCSelectionChangedEvent() {
        Office.context.document.bindings.addFromNamedItemAsync("TitleOfTheContentControl", { id: 'Binding01' }, function (result) {
            if (result.status == 'succeeded') {
                result.value.addHandlerAsync(Office.EventType.BindingSelectionChanged, handler);
            }
        });
       
    }

    function handler() {
       console.log("Event Triggered!");
    }

Hope this helps!

Michael, My pany tried this approach a few years ago in a VSTO addin. It ended badly. The problem is the number of events you have to handle is horrific. The performance penalty is drastic and grows with the document size.