How to format table cell in OnlyOffice Document Editor using Javascript API

Question

I am working on OnlyOffice server integration to consume custom plug-in, which is to be used to generate charts and tables in document, spreadsheet and presentation.

While adding table, i am not able to apply formatting to specific cell, like bold and color .

I have tried out following ways to add bold setting to cell, with no luck...

Option 1

  sScript += 'var oTable,oTableStyle, oCell, oTableRow, oParagraph, oRun, oTableRowPr;';
        sScript += 'oTableStyle = oDocument.CreateStyle("CustomTableStyle", "table");';
        sScript += 'oTable = Api.CreateTable(4,' + rowCnt + ');';
        sScript += 'oTable.SetWidth("percent", 100);';        

        for (var iRow = 0; iRow < rowCnt ; iRow++) {
           sScript += 'oTableRow = oTable.GetRow(' + iRow + ');';

           for (var iCol = 0; iCol < 4; iCol++) {
                 sScript += 'oCell = oTableRow.GetCell(' + iCol + ');';
                 sScript += 'oParagraph = oCell.GetContent().GetElement(0)';
                 sScript += 'oRun = Api.CreateRun();';
                 sScript += 'oRun.SetBold(true);';
                 sScript += 'oRun.AddText("Test Element");';
                 sScript += 'oParagraph.AddElement(oRun);';
            }
        }

Option 2

sScript += 'var oTable,oTableStyle, oCell, oTableRow, oParagraph, oRun, oTableRowPr;';
        sScript += 'oTableStyle = oDocument.CreateStyle("CustomTableStyle", "table");';
        sScript += 'oTable = Api.CreateTable(4,' + rowCnt + ');';
        sScript += 'oTable.SetWidth("percent", 100);';        

        for (var iRow = 0; iRow < rowCnt ; iRow++) {
            sScript += 'oTableRow = oTable.GetRow(' + iRow + ');';
            for (var iCol = 0; iCol < 4; iCol++) {
                sScript += 'oCell = oTableRow.GetCell(' + iCol + ');';
                sScript += ' oCell.GetContent().GetElement(0).SetBold(true);';
                sScript += 'oCell.GetContent().GetElement(0).AddText("Firm Name");';
            }
        }

Please guide..

Answer 1

I took your code from option 1 and make plugin. You missed a semicolon in line

sScript += 'oParagraph = oCell.GetContent().GetElement(0)';

sScript += 'oParagraph = oCell.GetContent().GetElement(0);';

Code of my plugin:

(function(window, undefined){

window.Asc.plugin.init = function()
{
    var rowCnt = 7;
    var sScript = 'var oDocument = Api.GetDocument();';
    sScript += 'var oTable,oTableStyle, oCell, oTableRow, oParagraph, oRun, oTableRowPr;';
    sScript += 'oTableStyle = oDocument.CreateStyle("CustomTableStyle", "table");';
    sScript += 'oTable = Api.CreateTable(4,' + rowCnt + ');';
    sScript += 'oTable.SetWidth("percent", 100);';        

    for (var iRow = 0; iRow < rowCnt ; iRow++) {
       sScript += 'oTableRow = oTable.GetRow(' + iRow + ');';

       for (var iCol = 0; iCol < 4; iCol++) {
             sScript += 'oCell = oTableRow.GetCell(' + iCol + ');';
             sScript += 'oParagraph = oCell.GetContent().GetElement(0);';
             sScript += 'oRun = Api.CreateRun();';
             sScript += 'oRun.SetBold(true);';
             sScript += 'oRun.AddText("Test Element");';
             sScript += 'oParagraph.AddElement(oRun);';
        }
    }
    sScript += 'oDocument.InsertContent([oTable]);';
    window.Asc.plugin.info.recalculate = true;
    this.executeCommand("close", sScript);
};

window.Asc.plugin.button = function(id)
{
};
})(window, undefined);

It works. Result