Customizing the Summary Box on Sales Order in NetSuite

Introduction

Customizing the summary box on a sales order in NetSuite can enhance the user experience by displaying relevant information in a clear and concise manner. This article explains how to customize the summary box using JavaScript to manipulate the DOM elements.

Steps to Customize the Summary Box

Access the Totalling Table:

   let totallingTable = document.getElementsByClassName('totallingtable')[0];
   let firstRow = totallingTable ? totallingTable.getElementsByTagName('tr')[0] : null;
   let secondRow = totallingTable ? totallingTable.getElementsByTagName('tr')[1] : null;
   console.log('totallingTable', totallingTable);

Identify the Subtotal Row:

   let subtotalRow = document.querySelector('.totallingtable_item.uir-field-wrapper-cell div[data-nsps-label="Subtotal"]');
   let credit = 5.00; // Example credit value
   let subtotalValueQ;

Subtract Credit from Subtotal:

   if (totallingTable) {
       if (subtotalRow) {
           let subtotalElement = subtotalRow.querySelector('.uir-field.inputreadonly');
           let subtotalValue = parseFloat(subtotalElement.textContent.trim());
           let newSubtotal = subtotalValue - credit;
           subtotalValueQ = newSubtotal;
       }
   }

Create and Insert New Rows:

   if (totallingTable) {
       let subRow = document.createElement('tr');
       subRow.className = 'totallingtable_item uir-field-wrapper-cell';
       subRow.innerHTML = `
           <td>
               <div class="uir-field-wrapper" data-nsps-label="Subtotal" data-nsps-type="field" data-field-type="currency" data-field-name="subtotal" data-walkthrough="Field:subtotal" data-nsps-id="field_Subtotal__1745917485788">
                   <span id="subtotal_fs_lbl_uir_label" class="smalltextnolink uir-label" data-nsps-type="field_label">
                       <span id="subtotal_fs_lbl" class="uir-label-span smalltextnolink" data-nsps-type="label">
                           <a tabindex="-1" title="UCredit" href="javascript:void(0)" style="cursor:help" onclick="return false;" class="smalltextnolink uir-no-link" onmouseover="setFirstClassName(this, 'smalltextul'); return true;" onmouseout="setFirstClassName(this, 'smalltextnolink');">
                               Subtotal
                           </a>
                       </span>
                   </span>
                   <span class="uir-field inputreadonly" data-nsps-type="field_input" data-field-type="currency">
                       ${subtotalValueQ.toFixed(2)}
                   </span>
               </div>
           </td>
       `;
       if (firstRow) {
           firstRow.parentNode.insertBefore(subRow, firstRow.nextSibling);
       } else {
           totallingTable.appendChild(subRow);
       }

       let newRow = document.createElement('tr');
       newRow.className = 'totallingtable_item uir-field-wrapper-cell';
       newRow.innerHTML = `
           <td>
               <div class="uir-field-wrapper" data-nsps-label="Processing Fee" data-nsps-type="field" data-field-type="currency" data-field-name="subtotal" data-walkthrough="Field:subtotal" data-nsps-id="field_Subtotal__1745917485788">
                   <span id="subtotal_fs_lbl_uir_label" class="smalltextnolink uir-label" data-nsps-type="field_label">
                       <span id="subtotal_fs_lbl" class="uir-label-span smalltextnolink" data-nsps-type="label">
                           <a tabindex="-1" title="UCredit" href="javascript:void(0)" style="cursor:help" onclick="return false;" class="smalltextnolink uir-no-link" onmouseover="setFirstClassName(this, 'smalltextul'); return true;" onmouseout="setFirstClassName(this, 'smalltextnolink');">
                               Processing Fee
                           </a>
                       </span>
                   </span>
                   <span class="uir-field inputreadonly" data-nsps-type="field_input" data-field-type="currency">
                       ${credit.toFixed(2)}
                   </span>
               </div>
           </td>
       `;
       subRow.parentNode.insertBefore(newRow, subRow.nextSibling);
       subtotalRow.style.display = 'none';
   }

Example Code

let totallingTable = document.getElementsByClassName('totallingtable')[0];
let firstRow = totallingTable ? totallingTable.getElementsByTagName('tr')[0] : null;
let secondRow = totallingTable ? totallingTable.getElementsByTagName('tr')[1] : null;
console.log('totallingTable', totallingTable);
let subtotalRow = document.querySelector('.totallingtable_item.uir-field-wrapper-cell div[data-nsps-label="Subtotal"]');
let credit = 5.00; // Example credit value
let subtotalValueQ;
if (totallingTable) {
    // Subtract credit from Subtotal
    if (subtotalRow) {
        let subtotalElement = subtotalRow.querySelector('.uir-field.inputreadonly');
        let subtotalValue = parseFloat(subtotalElement.textContent.trim());
        let newSubtotal = subtotalValue - credit;
        subtotalValueQ = newSubtotal;
    }

    let subRow = document.createElement('tr');
    subRow.className = 'totallingtable_item uir-field-wrapper-cell';
    subRow.innerHTML = `
        <td>
            <div class="uir-field-wrapper" data-nsps-label="Subtotal" data-nsps-type="field" data-field-type="currency" data-field-name="subtotal" data-walkthrough="Field:subtotal" data-nsps-id="field_Subtotal__1745917485788">
                <span id="subtotal_fs_lbl_uir_label" class="smalltextnolink uir-label" data-nsps-type="field_label">
                    <span id="subtotal_fs_lbl" class="uir-label-span smalltextnolink" data-nsps-type="label">
                        <a tabindex="-1" title="UCredit" href="javascript:void(0)" style="cursor:help" onclick="return false;" class="smalltextnolink uir-no-link" onmouseover="setFirstClassName(this, 'smalltextul'); return true;" onmouseout="setFirstClassName(this, 'smalltextnolink');">
                            Subtotal
                        </a>
                    </span>
                </span>
                <span class="uir-field inputreadonly" data-nsps-type="field_input" data-field-type="currency">
                    ${subtotalValueQ.toFixed(2)}
                </span>
            </div>
        </td>
    `;
    if (firstRow) {
        firstRow.parentNode.insertBefore(subRow, firstRow.nextSibling);
    } else {
        totallingTable.appendChild(subRow);
    }

    let newRow = document.createElement('tr');
    newRow.className = 'totallingtable_item uir-field-wrapper-cell';
    newRow.innerHTML = `
        <td>
            <div class="uir-field-wrapper" data-nsps-label="Processing Fee" data-nsps-type="field" data-field-type="currency" data-field-name="subtotal" data-walkthrough="Field:subtotal" data-nsps-id="field_Subtotal__1745917485788">
                <span id="subtotal_fs_lbl_uir_label" class="smalltextnolink uir-label" data-nsps-type="field_label">
                    <span id="subtotal_fs_lbl" class="uir-label-span smalltextnolink" data-nsps-type="label">
                        <a tabindex="-1" title="UCredit" href="javascript:void(0)" style="cursor:help" onclick="return false;" class="smalltextnolink uir-no-link" onmouseover="setFirstClassName(this, 'smalltextul'); return true;" onmouseout="setFirstClassName(this, 'smalltextnolink');">
                            Processing Fee
                        </a>
                    </span>
                </span>
                <span class="uir-field inputreadonly" data-nsps-type="field_input" data-field-type="currency">
                    ${credit.toFixed(2)}
                </span>
            </div>
        </td>
    `;
    subRow.parentNode.insertBefore(newRow, subRow.nextSibling);
    subtotalRow.style.display = 'none';
}

Conclusion

Customizing the summary box on a sales order in NetSuite using JavaScript allows you to dynamically update and display relevant information. Follow the steps outlined above to implement this in your application.

Leave a comment Cancel reply