Displaying a Summary Box in the Suitelet page

Requirement

We have a custom page developed using the suitelet script which is used for the bulk approval of bill records. Client needs to add a summary box in the custom page to show the total, sub total and tax for all the bills which are displayed in the page.

Solution

I have added a Inline HTML field in the custom page using the below code

FORM.bodyFields.custpage_filter_summary = formObj.addField({
                    id: "custpage_filter_summary",
                    label: "summary",
                    type: serverWidget.FieldType.INLINEHTML,
                    container: "custpage_group_filter",
                });

Set the value to this field using the below code

 let summaryValue = setSummaryBox(summaryLine);
 FORM.setformFieldProperty(FORM.bodyFields.custpage_filter_summary, {
                    defaultValue: summaryValue
                });

Attached the setSummaryBox () function

/**
            * Function to set the summary box 
            * @param {*} summaryLine - object containg summary box details
            * @returns {*} html
            */
            setSummaryBox(summaryLine) {
                let html = '<style>' +
                    'table.newtotallingtable caption {\n' +
                    '    display: table-caption !important;\n' +
                    '    margin-bottom: 10px;\n' +
                    '    font-weight: bold;\n' +
                    '    color: white;\n' +
                    '    font-size: 12px !important;\n' +
                    '    padding: 4px 0px 4px 8px;\n' +
                    '}' +
                    'table.newtotallingtable caption {\n' +
                    '    background-color: #607799;\n' +
                    '}' +
                    'caption, th {\n' +
                    '    text-align: left;\n' +
                    '}' +
                    '</style>';
                html += '<span class="bgmd totallingbg" style="display:inline-block; position:relative;left: 0px; padding: 10px 25px; margin-bottom:5px;">';
                html += '<table class="newtotallingtable" cellspacing="2" cellpadding="0px" border="0px" style="padding: 5px;\n' +
                    '    width: 217px;"><caption style="display: none;" >Summary</caption><tbody><td>';
                html += '<div class="uir-field-wrapper" data-field-type="currency"><span id="subtotal_fs_lbl_uir_label" class="smalltextnolink uir-label "><span id="subtotal_fs_lbl" class="smalltextnolink" style="color: #262626 !important; font-size: 12px; padding-bottom:10px;">'
                html += 'SUB TOTAL</td>';
                html += '<td  style="color: #262626 !important; font-size: 13px; padding-bottom:10px;" align="right" id="subtotal"><b>';
                html += Math.abs(summaryLine.subTotal.value) + '</b></td><td></td></tr>';
                html += '<tr><td  style="color: #262626 !important; font-size: 12px;" align="left">TAX TOTAL</td><td align="right"   style="font-size: 13px; color: #262626 !important;"><b>';
                html += Math.abs(summaryLine.vat.value) + '</b></td></tr>';
                '<hr></hr>'
                html += '<tr><td  style="color: #262626 !important; font-size: 12px;" align="left">TOTAL</td><td align="right"   style="font-size: 13px; color: #262626 !important;"><b>';
                html += Math.abs(summaryLine.total.value) + '</b></td></tr>';
                html += '</table></div>';
                return html;
            },

Output