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!
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);
}
});
}