Adding Freezing Header for Sales Orders

Scenario:

Sales Orders have item sublist Table, which lists items in each SO. If the number of items becomes too large, we need to scroll the table down, which will also scrolls the table header too. Make this table header freeze and make other details scrollable.

Solution:

It needs a User Event script. In it’s beforeLoad entry point add the following jQuery section.

/**
 * @NApiVersion 2.1
 * @NScriptType UserEventScript
 */
define(['N/record', 'N/search', 'N/ui/serverWidget'],
    /**
     * @param{record} record
     * @param{search} search
     * @param{serverWidget} serverWidget
     */
    (record, search, serverWidget) => {

        /**
         * Defines the function definition that is executed before record is loaded.
         * @param {Object} scriptContext
         * @param {Record} scriptContext.newRecord - New record
         * @param {string} scriptContext.type - Trigger type; use values from the context.UserEventType enum
         * @param {Form} scriptContext.form - Current form
         * @param {ServletRequest} scriptContext.request - HTTP request information sent from the browser for a client action only.
         * @since 2015.2
         */
        const beforeLoad = (scriptContext) => {
            try {
                scriptContext.form.clientScriptFileId = 17366804;// client script ID. You need to provide your curresponding file ID
                var htmlString = '<script>' +
                    '        function freezeHead (){(function ($, undefined) {' +
                    '           $(function () {' +
                    '              const windowHeight = $(window).height();' +
                    '              $(\'.uir-machine-table-container\')' +
                    '                 .filter((index, elem) => $(elem).height() > windowHeight)' +
                    '                 .css(\'height\', \'70vh\')' +
                    '                 .bind(\'scroll\', (event) => {' +
                    '                    const headerElem = $(event.target).find(\'.uir-machine-headerrow\');' +
                    '                    headerElem.css(\'transform\', `translate(0, ${event.target.scrollTop}px)`);' +
                    '                 })' +
                    '                 .bind(\'scroll\', (event) => {' +
                    '                    const headerElem = $(event.target).find(\'.uir-list-headerrow\');' +
                    '                    headerElem.css(\'transform\', `translate(0, ${event.target.scrollTop}px)`);' +
                    '                 })' +
                    '         });' +
                    '        })(window.jQuery);}' +
                    '   freezeHead()\n         ' +
                    '           </script>';
                scriptContext.form.addField({
                    type: 'inlinehtml',
                    id: 'custpage_stickyheaders_script',
                    label: 'Hidden'
                }).defaultValue = htmlString;
            } catch (err) {
                log.debug("error@beforeLoad", err);
            }
        }
        return {beforeLoad: beforeLoad}

    });

/**
 * @NApiVersion 2.0
 * @NScriptType ClientScript
 * @NModuleScope SameAccount
 */
define([],
function() {

    function activateFreeze(context) {
        freezeHead();
    }

    return {
        lineInit: activateFreeze,
        pageInit: activateFreeze
    }
    
});

This code segment will work on both View and Edit modes. An additional scroll bar will be added in the table.

The above mentioned scripts can be deployed in any records, which has details such as item sub list table.

After deploying the script, Table looks like as below;