How To Implement Prominent Custom State Labels on NetSuite Records

Some NetSuite transaction types have a native state machine. For convenience, NetSuite display the state prominently at the top of the page. This is very handy.

Custom state label

Below is a code snippet to accomplish the desired result, It injects the status in the beforeLoad event of a user event script deployed to the target record type. Note that because NetSuite does not offer any API for this kind of operation, I resorted to using jQuery to inject the HTML element (more on that shortly).

/**
 * @NApiVersion 2.1
 * @NScriptType UserEventScript
 */
define([], 
    () => {
        /**
         * An enumeration of state colors per NetSuite house style
         */
        const NsLabelColor = {
            BLUE:   '#d5e0ec',
            YELLOW: '#fcf9cf',
            GREEN:  '#d7fccf',
            RED:    '#fccfcf'
        }
        
        const beforeLoad = (scriptContext) => {
            try {
                let stateTxt = 'TODO: Implement';
                let errState = false;
                 
                // TODO: Implement logic to determine state text/color
                let bgColor = NsLabelColor.YELLOW;
                if (errState) {
                    bgColor = NsLabelColor.RED;
                }
 
                scriptContext.form.addField({
                    id: 'custpage_nsi_status',
                    label: 'Custom State',
                    type: 'inlinehtml'
                }).defaultValue = `<script>jQuery(function($){
                    require([], function() {
                        /* $(".uir-page-title-secondline").find("div.uir-record-status").remove(); // Uncomment to remove native state */
                        $(".uir-page-title-secondline").append('<div class="uir-record-status" id="pri-amz-status" style="background-color: ${bgColor}">${stateTxt}</div>');
                    });
                })</script>`;
            } catch (e) {
                // Deliberately suppress any errors as this non-critical function should not block the record from loading
                log.error('Error', `Suppressing error encountered while attempting to set the custom state: ${e}`)
            }
        }
 
        return {beforeLoad}
    });

Leave a comment

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