Create table in word with data which is in html form using office.js

Question

I am creating an addin which displays data from database in table form using office.js. and in that table column can have data in html form. So my requirement is when i create the table and in that table if any column have html contents that should be displayed as normal text with formatting .

I found some code that creates the table

 function writeTable() {
    // Build table.
    var myTable = new Office.TableData();
    myTable.headers = [["Cities"]];
    myTable.rows = [['<b>Hello there</b>'], ['Roma'], ['Tokyo'], ['Seattle']];

    // Write table.
    Office.context.document.setSelectedDataAsync(myTable, { coercionType: Office.CoercionType.Table },
        function (result) {
            var error = result.error
            if (result.status === Office.AsyncResultStatus.Failed) {
                write(error.name + ": " + error.message);
            }
        });
}

In the above code

myTable.rows = [['<b>Hello there</b>'], ['Roma'], ['Tokyo'], ['Seattle']];

in above code the first value is html contents so when the table is created the html should not be displayed and the output should be like Hello there in bold .

I also found the code that actually displays the html in normal form as needed but i am not able to use it with the code mentioned above. The code i found for html rendering is bellow.

function writeHtmlData() {
    Office.context.document.setSelectedDataAsync("<b>Hello</b> World!", { coercionType: Office.CoercionType.Html }, function (asyncResult) {

        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
          //  write('Error: ' + asyncResult.error.message);
        }
    });
}

Thank you!

score 4 · Answer 1 · answered Jul 12 '16 at 19:58

Pradeep: i strongly recommend you to try the new API for Tables in Word. this will help you big time on all your formatting needs.

Currently the API is in preview, you can see how to use the preview here. https://github.com/OfficeDev/office-js-docs/tree/WordJs_1.3_Openspec

then see all the documentation for the main table manipulation objects!

table: https://github.com/OfficeDev/office-js-docs/blob/WordJs_1.3_Openspec/word/resources/table.md

table cell https://github.com/OfficeDev/office-js-docs/blob/WordJs_1.3_Openspec/word/resources/tablecell.md

table Row https://github.com/OfficeDev/office-js-docs/blob/WordJs_1.3_Openspec/word/resources/tablerow.md

finally here is an example so you get an idea on how to use the APIs :):

   Word.run(function (ctx) {

            var fruits = [["Apple", "red", "round", "crunchy"], ["Banana", "yellow", "long", "mushy"], ["Pear", "green", "oblong", "variable"]];
            var fruitsNonuniform = [["Apple", "red"], ["Banana", "yellow", "long", "mushy"], ["Pear", "green", "oblong"]];
            var fruitsUnderfilled = [["Apple", "red", "", ""], ["Banana", "yellow", "long", "mushy"], ["Pear", "green", "oblong", ""]];


            var table = ctx.document.body.insertTable(fruits.length, fruits[0].length, "start", fruits);
            ctx.load(table);
            return ctx.sync().then(function () {
                table.style = "Grid Table 6 Colorful - Accent 2";
                return ctx.sync().then(function () {
                    showNotification("Success")
                });

            }).catch(function (e) {
                showNotification(e.message);

            });
        });

hope this helps and happy coding!!! -Juan

thanks @Juan for your reply but the data i have is in HTML form and after i the table is created i need to bind the table with the events like bindingselectionchanged with the table that is added. i will bind this event for other tasks. So how can i do this working with this situation ? — Pradeep Gaba, Jul 13 '16 at 07:21
Interesting scenario Pradeep. You can totally do this. One important concept you should know is that bindings in Word are actually objects wrapped with a content control, so table bindings in Word are physically a table within a content control. That said, one possible strategy you can follow is to insert the table using either the HTML with the range.insertHtml functionalities, or with the table object I described, once inserted you can use the Table API for additional formatting and then to wrap the table with a content control (table.insertContentControl), make sure — Juan Balmori, Jul 13 '16 at 17:47
to add a title to that content control so that then you can create a table binding by using bindings.addFromNamedItem. — Juan Balmori, Jul 13 '16 at 17:47
just send the HTML representation of the table you need and use the HTML coercionType — Juan Balmori, Jul 21 '16 at 19:35
Pradeep: did you succeeded in using the new Word API in this scenario? I have the same requirement: adding a table which is already in HTML form... — jeanie77, Feb 21 '17 at 09:49

score 1 · Accepted Answer · answered Jul 12 '16 at 11:46

You could generate the whole table in HTML and then insert it as HTML.

function writeHtmlData() {
    console.log('writeHtmlData');
    var headers = [["Cities"]];
    var rows = [['<b>Hello there</b>'], ['Roma'], ['Tokyo'], ['Seattle']];
    var html = '<table>';
    html += '<thead>';
    for (var i = 0; i < headers.length; i++) {
        html += '<tr>';
        var cells = headers[i];
        for (var j = 0; j < cells.length; j++) {
            html += '<th>' + cells[j] + '</th>';
        }
        html += '</tr>';
    }
    html += '</tr>';
    html += '</thead>';
    html += '<tbody>';
    for (var i = 0; i < rows.length; i++) {
        html += '<tr>';
        var cells = rows[i];
        for (var j = 0; j < cells.length; j++) {
            html += '<td>' + cells[j] + '</td>';
        }
        html += '</tr>';
    }
    html += '</tbody>';
    html += '</table>';

    Office.context.document.setSelectedDataAsync(html, { coercionType: Office.CoercionType.Html }, function (asyncResult) {
        if (asyncResult.status == "failed") {
            console.debug("Action failed with error: " + asyncResult.error.message);
        }
    });
}

Create table in word with data which is in html form using office.js

2 Answers2