Miro J. Miro J. - 2 months ago 14
Javascript Question

Change value of a table in content control

I created a Word add-in and I insert a table in Word 2016 (version 16.0.7341.2029) using the Word API 1.3 like this:



var value = [[3,4],[5,6]];

Word.run(function (ctx) {
var table = ctx.document.body.insertTable(value.length, value[0].length, Word.InsertLocation.end, value);
var myContentControl = table.insertContentControl();

myContentControl.tag = 'MyTable1';
myContentControl.title = 'This is a table';

return ctx.sync()
.then(function () {
console.log('Table created');
}).catch(function (err) {
console.log(err);
});
});





I see the table in a content control with the proper values.
When I check the
text
property of the control, I see a string
4\t5\r\n6\t7
.

I want to change the values of the whole table providing a new array (without removing and adding the whole table again). I want to keep the formatting the user made. I am trying to do it like this:



Word.run(function (ctx) {
var controls = ctx.document.contentControls;
controls.load('id, tag, title, text');

// Get all content control, ...
return ctx.sync()
.then(function () {
// ... find the one using lodash, ...
var ctrl = _.find(controls.items, { 'tag': 'MyTable1' });
if (ctrl) { // found
// ... and update the value.
ctrl.text = newValue; // <== this line does not change the text
ctx.sync()
.then(function () {
console.log('Table should be updated');
}).catch(function (err) {
console.log(err);
});
} else {
Console.log('Unable to find table.');
}
}).catch(function (err) {
console.log(err);
});
});





The line where I set the
text
property again does not change anything and I was looking for a function that does it without removing the table or going cell by cell. Any ideas?

Answer

You can set table values in Word a similar way as you created them.

table.values = [["a", "b"], ["c", "d"]];

Here's an example of how that would look in your code:

Word.run(function (ctx) {
    // Note: The property 'first' will soon be changing to a method, 'getFirst()'
    var ctrl = ctx.document.contentControls.getByTag("MyTable1").first;
    return ctx.sync().then(function () {
        if (!ctrl.isNull) { // found
            var newValue = [['a', 'b'], ['c', 'd']];
            ctrl.tables.first.values = newValue;
            ctx.sync().then(function () {
                console.log('Table should be updated');
            }).catch(function (err) {
                console.log(err);
            });
        } else {
            console.log('Unable to find table.');
        }
    }).catch(function (err) {
        console.log(err);
    });
});
Comments