Adding HTML table to custom record

REQUIREMENT

Need to add a HTML table to display the sublist details in view mode of record.

SOLUTION

Following is the code snippet to add the HTML table in the custom record under a custom tab. This is to be added in beforeload of user event script.

  function createTable(form, data, segmentData, segmentValues) {
            try {

                let TAB_TABLE = form.addTab({ id: 'custpage_tab_table', label: 'Allocation' });
                form.addFieldGroup({ id: 'custpage_grp_table', label: 'Allocation', tab: 'custpage_tab_table' }).isBorderHidden = true;
                let TBL_DATA = form.addField({ id: 'custpage_table', type: 'label', label: 'Allocation table details', container: 'custpage_grp_table' });
                let table = "<table width='100%' style='border-collapse: collapse;font-size: 9pt;'>"
                table += "<tr>"
                table += "<th style='padding: 4px;border:.5px solid black;background-color:#E5E5E5; text-align: center;width: 70px'><b></b></th>"
                table += "<th style='padding: 4px;border:.5px solid black;background-color:#E5E5E5; text-align: center'><b>SELECT ACCOUNT</b></th>"
                table += "<th style='padding: 4px;border:.5px solid black; background-color:#E5E5E5; text-align: center'><b>DEBIT/CREDIT</b></th>"
                table += "<th style='padding: 4px;border:.5px solid black; background-color:#E5E5E5; text-align: center'><b>PERCENTAGE</b></th>"
                table += "<th style='padding: 4px;border:.5px solid black; background-color:#E5E5E5; text-align: center'><b>DESCRIPTION</b></th>"
                table += "<th style='padding: 4px;border:.5px solid black; background-color:#E5E5E5; text-align: center'><b>TAX CODE</b></th>"
                table += "<th style='padding: 4px;border:.5px solid black; background-color:#E5E5E5; text-align: center'><b>TAX TARGET ACCOUNT</b></th>"
                table += "<th style='padding: 4px;border:.5px solid black; background-color:#E5E5E5; text-align: center'><b>DEPARTMENT</b></th>"
                table += "<th style='padding: 4px;border:.5px solid black; background-color:#E5E5E5; text-align: center'><b>CLASS</b></th>"
                table += "<th style='padding: 4px;border:.5px solid black; background-color:#E5E5E5; text-align: center'><b>LOCATION</b></th>"
                for (let j = 0; j < segmentData.length; j++) {
                    table += "<th style='padding: 4px;border:.5px solid black;background-color:#E5E5E5; text-align: center'><b>" + segmentData[j].typeLabel + "</b></th>"
                    table += "<th style='padding: 4px;border:.5px solid black;background-color:#E5E5E5; text-align: center'><b>" + segmentData[j].label + "</b></th>"
                }
                table += "</tr>"
                for (let i = 0; i < data.length; i++) {

                    table += "<td style='padding: 4px;border:.5px solid black; text-transform: capitalize; text-align: center'>" + data[i]["childUrls"] + "</td>"
                    table += "<td style='padding: 4px;border:.5px solid black; text-transform: capitalize'>" + data[i]["selectAccount"] + "</td>"
                    table += "<td style='padding: 4px;border:.5px solid black;text-transform: capitalize '>" + data[i]["debitCredit"] + "</td>"
                    table += "<td style='padding: 4px;border:.5px solid black;text-transform: capitalize'>" + data[i]["percentage"] + "</td>"
                    table += "<td style='padding: 4px;border:.5px solid black; text-transform: capitalize'>" + data[i]["description"] + "</td>"
                    table += "<td style='padding: 4px;border:.5px solid black; text-transform: capitalize'>" + data[i]["taxCode"] + "</td>"
                    table += "<td style='padding: 4px;border:.5px solid black; text-transform: capitalize'>" + data[i]["targetAcc"] + "</td>"
                    table += "<td style='padding: 4px;border:.5px solid black;  text-transform: capitalize'>" + data[i]["dept"] + "</td>"
                    table += "<td style='padding: 4px;border:.5px solid black; text-transform: capitalize'>" + data[i]["class"] + "</td>"
                    table += "<td style='padding: 4px;border:.5px solid black; text-transform: capitalize'>" + data[i]["loaction"] + "</td>"

                    for (let k = 0; k < data[i]["segmentValueTableData"].length; k++) {
                        table += "<td style='padding: 4px;border:.5px solid black ; text-transform: capitalize ;width: 100px'>" + data[i]["segmentValueTableData"][k]["type"] + "</td>"
                        table += "<td style='padding: 4px;border:.5px solid black; text-transform: capitalize; width: 100px'>" + data[i]["segmentValueTableData"][k]["value"] + "</td>"
                    }

                    table += "</tr>"
                }

                table += "</table>"
                TBL_DATA.label = table;
            }
            catch (err) {
                log.error("error@table creation", err)
            }
        }