NetSuiteGeek Tip #7: Customize NetSuite Transaction Summary

Share

NetSuite Geek

 

 

 

NetSuiteGeek Tip #7: Customize NetSuite Transaction Summary

Level of Difficulty to Execute: Piece of Cake!
NetSuite Category: Netsuite transactions, Javascripting, and DOM element

Scenario: 

From a previous requirement, our client would like to customize the NetSuite Total Summary View to show Freight charges on Sales Order. In the business environment, freight charges are not available for Sales.

When viewing an order, the system shows the breakdown of the Order Total including Subtotal, Discount Item, Tax Total etc, except for the Freight charge as shown below.

Standard NetSuite Transaction Summary

Customization

As we all know, JavaScript is powerful in manipulating HTML Elements and behavior. The good news is that since NetSuite uses JavaScript as its platform, making manipulation of elements would be easy!

Our solution is very simple as we are modifying the elements on FORM Level. There are no modification database commitment needed so will do no harm at all!

HTML Inspection

In modifying the entire Summary section, we would need to identify the ID or CLASS name of the Summary section. Simply put, the summary section is a table element which has table rows representing each order totals. It has a CLASS name of “totallingtable” which would serve as our canvas to modify, see HTML Structure below:

HTML Structure

Amount Breakdown Values

To insert Freight charge, we need to read the Sales Order data totals using nlapiLoadRecord function. Below is a sample code which pulls the Subtotal, Freight Total (Custom), and Tax Total:

var record = nlapiLoadRecord(recordType, recordId);
var subtotal = nlapiFormatCurrency(record.getFieldValue('subtotal'));
var freighttotal = nlapiFormatCurrency(record.getFieldValue(custbody_freight));
var taxtotal = nlapiFormatCurrency(record.getFieldValue('taxtotal'));

Incorporating Values on Summary

Applying the real values on Summary should be easy! A sample code below illustrates how we can remove and add totals on the Summary:

//Freight Cost Row
var frieghtcost_rows = "<td>";

frieghtcost_rows += "<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=''>";

frieghtcost_rows += "<a tabindex='-1' title='What's this?' href='javascript:void(&quot;help&quot;)' style='cursor:help' onclick='return nlFieldHelp('TRAN_SALESORD',’custbody_freight’, this)' class='smalltextnolink' onmouseover='this.className='smalltextul'; return true;' onmouseout='this.className='smalltextnolink'; '>Freight Cost</a>";

frieghtcost_rows += "</span></span><span class='uir-field inputreadonly'>" + freighttotal + "</span>";

frieghtcost_rows += "</div></td> <td></td>";

//Subtotal Row
var subtotal_rows = "<td>";

subtotal_rows += "<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=''>";

subtotal_rows += "<a tabindex='-1' title='What's this?' href='javascript:void(&quot;help&quot;)' style='cursor:help' onclick='return nlFieldHelp(TRAN_SALESORD,'subtotal', this)' class='smalltextnolink' onmouseover='this.className='smalltextul'; return true;' onmouseout='this.className='smalltextnolink'; '>Subtotal</a>";

subtotal_rows += "</span></span><span class='uir-field inputreadonly'>" + subtotal + "</span>";

subtotal_rows += "</div></td> <td></td>";

//GST Row
var taxtotal_rows = "<td>";

taxtotal_rows += "<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=''>";

taxtotal_rows += "<a tabindex='-1' title='What's this?' href='javascript:void(&quot;help&quot;)' style='cursor:help' onclick='return nlFieldHelp('TRAN_SALESORD','subtotal', this)' class='smalltextnolink' onmouseover='this.className='smalltextul'; return true;' onmouseout='this.className='smalltextnolink'; '>GST</a>";

taxtotal_rows += "</span></span><span class='uir-field inputreadonly'>" + taxtotal + "</span>";

taxtotal_rows += "</div></td> <td></td>";

var tbl = document.getElementsByClassName("totallingtable")[0].setAttribute("id", "sum_table");
var tbl_tr = document.getElementById("sum_table").getElementsByTagName("tr");

//Remove Current Table Row
tbl_tr[1].remove();

//Include new Totals on Summary
tbl_tr[0].innerHTML = shippingcost_rows;
tbl_tr[1].innerHTML = subtotal_rows;
tbl_tr[2].innerHTML = taxtotal_rows;

Here’s the new summary description:Custom NetSuite Transaction Summary

Have Questions? Was this NetSuite tip helpful? Do you have a better way of doing this? Want more of NetSuiteGeek’s tips? Let us know by commenting on this post. Don’t be shy.

Leave a Reply

Your email address will not be published. Required fields are marked *