Inserting table at cursor in Word document with Javascript API

Question

The Problem

Currently I am developing a Word add-in that provides template functionality for a client. I would like to place a ContentControl that contains a single cell table near the cursor. The Javascript API offers this functionality as can be seen here (ContentControl class). Unfortunately, it is possible to place the table before or after the contents of the control, but it is not possible to replace the contents with the table. Whenever I try to achieve the latter, I get a InvalidArgument exception.

Similarly I am unable to directly add a table (without a ContentControl) in the document at the selection. The same exception is thrown. In this case however, it does not matter which location option is specified (before, after, replace the content, etc).

The technology that is used is React and typescript.

Content Control Table

private placeTableControl() {
    Word.run(function (context) {
        var values = [["Apple"]];

        let selectionRange = context.document.getSelection();
        let contentControl = selectionRange.insertContentControl();

        // This works
        // let table = contentControl.insertTable(1, 1, 'Start', values);

        // This doesn't
        let table = contentControl.insertTable(1, 1, 'Replace', values);

        return context.sync()
            .catch(function (error) {
                console.log(error);
            });
    });
}

Adding Table Without ContentControl

private placeTable() {
    Word.run(function (context) {
        var values = [["Apple"]];

        let selectionRange = context.document.getSelection();

        // This doesn't work.
        let table = selectionRange.insertTable(1, 1, 'Replace', values);

        // Neither does this.
        //let table = selectionRange.insertTable(1, 1, 'Start', values);

        // Or this.
        //let table = selectionRange.insertTable(1, 1, 'End', values);

        return context.sync()
            .catch(function (error) {
                console.log(error);
            });
    });
}

PARTIALLY SOLVED - Suggestion Cindy Meister

Cindy Meister suggested that it might have something to do with paragraphs. Tables should be located in a paragraph. Because of my mistake in specifying a simple array instead of a 2D array, I was not able to make it work. This seems to be working now. I will now try to make it work with a content control.

private placeTable() {
    Word.run(function (context) {
        var values = [["Apple"]];

        var selectionRange = context.document.getSelection();

        var paragraph = selectionRange.insertParagraph("", "Before");

        return context.sync()
            .then(function () {
                paragraph.insertTable(1, 1, "Before", values);
            })
            .then(context.sync)
            .catch(function (error) {
                console.log(error);
            });
    });
}

SIMILAR QUESTIONS

Found a similar question here.

Word can't insert a table in the middle of a paragraph - the Selection must be in a paragraph that contains nothing else. Are you certain the Selection is in a valid place? Try inserting a paragraph and put the table in that Range... — Cindy Meister
– Cindy Meister, Commented Feb 13, 2018 at 14:08
Unfortunately I was not able to make this work. I have added the code in the answer. Maybe I overlooked something. — Fluous
– Fluous, Commented Feb 14, 2018 at 15:06
@CindyMeister it seems you were right! Adding a paragraph allows a table to be added! Thank you! Add it as an answer and I will accept it. — Fluous
– Fluous, Commented Feb 14, 2018 at 15:55
If you've worked out the code, please write the answer. I'm good at Word, but not so good at writing office-js code (yet). If you refer to me in your Answer, that's good enough. Write another comment, "pinging" me, and I'll upvote it :-) — Cindy Meister
– Cindy Meister, Commented Feb 14, 2018 at 15:57

Fluous · Accepted Answer · 2018-02-14 16:16:05Z

4

Cindy Meister proposed to first insert a paragraph, since a table cannot be inserted in a paragraph that contains something else. This turned out to be the solution, see the code below. All credits belong to Cindy Meister.

private placeTable() {

    Word.run(function (context) {
        var values = [["Apple"]];
        var selectionRange = context.document.getSelection();
        var paragraph = selectionRange.insertParagraph("", "Before");

        return context.sync()
            .then(function () {
                var table = paragraph.insertTable(1, 1, "Before", values);
                var contentControl = table.insertContentControl();
            })
            .then(context.sync)
            .catch(function (error) {
                console.log(error);
            });
    });

edited Feb 14, 2018 at 16:16

answered Feb 14, 2018 at 16:09

Fluous

2,5553 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cindy Meister Over a year ago

Very cleanly written - that helps me with learning this :-) Thank you.

Juan Balmori · Accepted Answer · 2018-02-15 00:57:49Z

1

as a second option you can choose to insert the table "after" the selection and it will create the paragraph for you. check this out: (then you can do table.insertContentControl to wrap it with a content control)

async function insertTable() {
    await Word.run(async (context) => {
        // We need a 2D array to hold the initial table values
        let data = [["Apple", "Orange", "Pineapple"], ["Tokyo", "Beijing", "Seattle"]];
        let table = context.document.getSelection().insertTable(3, 3, "after", data);
        table.styleBuiltIn = Word.Style.gridTable5Dark_Accent2;

        await context.sync();
    });
}

answered Feb 15, 2018 at 0:57

Juan Balmori

5,0661 gold badge11 silver badges18 bronze badges

Collectives™ on Stack Overflow

Inserting table at cursor in Word document with Javascript API

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related