javascriptonlyoffice

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


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..


Solution

  • 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