Displaying Information Using Inline HTML in NetSuite User Event Scripts: A Sample Script

NetSuite’s scripting capabilities allow developers to customize and extend the functionality of the platform to suit specific business needs. One such customization is displaying dynamic messages or information to users on record forms. This article presents a sample script to display information on any record using inline HTML in a User Event Script.

Introduction

User Event Scripts in NetSuite are used to perform actions on records during specific events like creating, editing, or viewing a record. However, the message module is not available in User Event Scripts. To overcome this, we can use inline HTML to display messages. This method is versatile and allows for rich, styled content to be shown to users.

Sample Script Explanation

The following script demonstrates how to display a message containing the phone number on the vendor record when the record is viewed. The message is inserted into the page using inline HTML.

Script Code

javascript
Copy code
/**
 * @NApiVersion 2.1
 * @NScriptType UserEventScript
 */
define(['N/ui/message', 'N/record', 'N/ui/serverWidget', 'N/log'],
    function (message, record, serverWidget, log) {
        function beforeLoad(context) {
            try {
                // Check if the context type is VIEW
                if (context.type !== context.UserEventType.VIEW) {
                    return;
                }
                let newRecord = context.newRecord;
                let phoneNumber = newRecord.getValue({ fieldId: 'phone' });

                log.debug('Phone Number', phoneNumber);

                // If a phone number is present, create a warning message
                if (phoneNumber) {
                    let form = context.form;
                    let html = '<script>';
                    html += 'document.addEventListener("DOMContentLoaded", function() {';
                    html += 'let msg = document.createElement("div");';
                    html += 'msg.innerHTML = "<div style='color: green; padding: 10px; font-weight: bold; text-align: center; margin: 10px auto; width: fit-content; border-radius: 5px; font-size: 20px; line-height: 1.2; margin-top: -6px;'>';
                    html += 'Sample</div>';
                    html += '<div style='font-size: 15px; text-align: center; line-height: 0.8; margin-top: -16px;'>Phone number is ' + phoneNumber + '.</div>";';
                    html += 'let navBar = document.querySelector(".uir-record-type");';
                    html += 'navBar.insertAdjacentElement("afterend", msg);';
                    html += '});';
                    html += '</script>';

                    let messageField = form.addField({
                        id: 'custpage_vendor_phone_message',
                        type: serverWidget.FieldType.INLINEHTML,
                        label: ' '
                    });
                    messageField.defaultValue = html;
                }
            } catch (e) {
                log.error('Error @ beforeLoad', e);
            }
        }

        return {
            beforeLoad: beforeLoad
        };
    });

Explanation of the Script

1. Script Definition: The script is defined as a User Event Script using @NScriptType UserEventScript and @NApiVersion 2.1.
2. Dependencies: The script requires N/ui/message, N/record, N/ui/serverWidget, and N/log modules. Note that while N/ui/message is imported, it is not used because it is not available in User Event Scripts.
3. beforeLoad Function:

• Context Check: The function checks if the script is running in the ‘VIEW’ context using context.type !== context.UserEventType.VIEW. If not, it returns early.
• Retrieve Phone Number: The script retrieves the phone number from the record using newRecord.getValue({ fieldId: 'phone' }).
• Log Phone Number: The phone number is logged for debugging purposes using log.debug.
• Create HTML Message: If a phone number is present, an HTML message is created. The message consists of a div element with styled text, indicating the phone number.
• Insert HTML into Form: The HTML is inserted into the form using an inline HTML field created with form.addField.

Inline HTML

The inline HTML uses a script tag to add a DOMContentLoaded event listener. When the DOM is fully loaded, the script creates a new div element containing the message and inserts it after the navigation bar using insertAdjacentElement.

Error Handling

The entire beforeLoad function is wrapped in a try-catch block to catch and log any errors that occur during execution. This helps in debugging and ensures that any issues are logged for review.

Conclusion

Displaying messages to users within the NetSuite UI can greatly enhance the user experience by providing important information directly on record forms. Although the message module is not available in User Event Scripts, using inline HTML provides a powerful alternative. This sample script demonstrates how to effectively implement this technique, allowing for dynamic and styled messages to be displayed based on record data. By understanding and utilizing this approach, developers can create more interactive and informative NetSuite customizations.