How to update same content control in different context

Question

I am using word javascript Api for developing a word add-in, I need to insert a content control on button click and send a ajax request. In ajax response i need to update the same content control.

I am trying to use following approaches :

1). While inserting the cc in document set tag as 'temporary' and after getting the ajax response, searching CC using 'contentControls.getByTag', but with multiple content control not able to update the correct cc as ajax response could take time so multiple cc will have 'temporary' tag.

2). After inserting the cc in the document, i tried to load the cc 'ID' using:

var range2 = context.document.getSelection().parentContentControlOrNullObject;
context.load(range2);

But it returns undefine.

Please guide me how i can achieve the above requirement. Which is the correct way to do this or can i use the same range object into another word run and update the cc for that range.

Answer 1

this should be really simple to do. When you insert the content control with the API a content control object is returned. This is effectively a handle to that content control. Once loaded you can later do any operations with it including adding modifying the content. Check out this example on how to do this:

function InsertCCandUpdate() {
     Word.run(function(context) {
        //  we first insert a content control, on this case on the selection!
        //notice we'll hold a reference to the CC in the myCC var:

        var myCC = context.document.getSelection().insertContentControl();
        context.load(myCC);
        
        return context.sync()
        .then(function(){
            // myCC holds a handle to the  contentt control.... then we can update its content
            myCC.insertText(getSomeContent(),"replace");



        })
    });
}

function getSomeContent(){
//this method is just to simulate your  AJAX call.
return("some text from your AJAX call");

}

I think this will help you in your scenario. thanks!