BeforeLoad User Event Script for Item Image Display on Line Level

Overview

This explains a User Event Script that runs in the BeforeLoad entry point to fetch a File ID on the Custom Field, retrieve an item’s image URL, and set an Inline HTML field with the image URL. The script enables users to view item images directly at the line level on a Sales Order, with the ability to click the image to open it in a new browser tab.

Script Functionality

• Entry Point: BeforeLoad
• Trigger Context: VIEW or EDIT mode of a Sales Order
• Purpose: Dynamically injects an Inline HTML field to load and display item images for each line item in the Sales Order.
• Behavior:
• Fetches the File ID from a custom column (custcol_jj_image_doc).
• Loads the corresponding file to retrieve its URL.
• Generates HTML to display the image as a clickable link that opens in a new tab.
• Sets the generated HTML in a custom column (custcol_jj_item_image) for each line item.

Script Code

/**
 * @NApiVersion 2.x
 * @NScriptType UserEventScript
 * @NModuleScope SameAccount
 */
define(['N/file', 'N/log'], function(file, log) {
    function beforeLoad(scriptContext) {
        if (scriptContext.type === scriptContext.UserEventType.VIEW || scriptContext.type === scriptContext.UserEventType.EDIT) {
            let form = scriptContext.form;
            let currentRecord = scriptContext.newRecord;
            log.debug('inside if of View Context', scriptContext.type);

            // Add inline HTML field that injects the browser-side logic
            let field = form.addField({
                id: 'custpage_item_image_loader',
                label: 'Item Image Loader',
                type: 'inlinehtml'
            });

            // Inject a script that runs in the browser after 1s delay
            field.defaultValue = `
                <script>
                    setTimeout(function() {
                        ${setImageurl(currentRecord)}
                    }, 1000); // 1 second delay
                </script>
            `;
        }
    }

    function setImageurl(record) {
        let salesOrder = record;
        log.debug('salesOrder is', salesOrder);
        let lineCount = salesOrder.getLineCount({ sublistId: 'item' });
        log.debug('lineCount is', lineCount);

        for (let i = 0; i < lineCount; i++) {
            let imageId = salesOrder.getSublistValue({
                sublistId: 'item',
                fieldId: 'custcol_jj_image_doc',
                line: i
            });
            log.debug('imageId is', imageId);

            if (imageId) {
                let imageFile = file.load({ id: imageId });
                let imageUrl = imageFile.url;

                let html = '<a href="' + imageUrl + '" target="_blank" onclick="showPopup(this.href); return false;">' +
                    '<img src="' + imageUrl + '" width="60"/>' +
                    '</a>';

                log.debug('html is', html);

                salesOrder.setSublistValue({
                    sublistId: 'item',
                    fieldId: 'custcol_jj_item_image',
                    line: i,
                    value: html
                });
            }
        }
    }

    return {
        beforeLoad: beforeLoad
    };
});

Key Components

1. BeforeLoad Entry Point:

• The script executes in the beforeLoad function when the Sales Order is opened in VIEW or EDIT mode.
• It adds a custom Inline HTML field (custpage_item_image_loader) to the form to inject browser-side logic.

1. Browser-Side Script Injection:

• A JavaScript snippet is injected via the Inline HTML field.
• The script runs after a 1-second delay to ensure the record is fully loaded in the browser.
• It calls the setImageurl function to process the Sales Order record.

1. setImageurl Function:

• Iterates through each line item in the item sublist.
• Retrieves the File ID from the custcol_jj_image_doc custom column.
• Loads the file using the N/file module to obtain the image URL.
• Constructs HTML for a clickable image link (with a fixed width of 60 pixels) that opens in a new tab.
• Sets the HTML in the custcol_jj_item_image custom column for display.

1. Image Display:

• The generated HTML includes an <img> tag wrapped in an <a> tag with target=”_blank”, allowing the image to be clicked and opened in a new tab.
• A showPopup function is referenced in the onclick event, which should be defined elsewhere in the NetSuite environment to handle the popup behavior (not included in this script).

Prerequisites

• Custom Columns:
• custcol_jj_image_doc: A custom column on the Sales Order item sublist to store the File ID of the image.
• custcol_jj_item_image: A custom column on the Sales Order item sublist to store the generated HTML for the image display.
• File Cabinet Access: Ensure the script has access to the NetSuite File Cabinet to load image files.
• Permissions: The script must run in a context with sufficient permissions to read files and modify sublist values.

Usage

1. Deploy the script as a User Event Script in NetSuite.
2. Ensure the Sales Order form includes the custom columns (custcol_jj_image_doc and custcol_jj_item_image).
3. Upload images to the NetSuite File Cabinet and link their File IDs to the custcol_jj_image_doc column for relevant line items.
4. When a Sales Order is viewed or edited, the script will:

• Load the images for each line item.
• Display a 60-pixel-wide thumbnail in the custcol_jj_item_image column.
• Allow users to click the thumbnail to open the full-size image in a new browser tab.

Notes

• The 1-second delay (setTimeout) ensures the record is fully loaded in the browser before processing.
• The showPopup function referenced in the HTML is not defined in this script. Ensure it is implemented elsewhere in your NetSuite environment if custom popup behavior is required.
• Debug logs are included to help troubleshoot issues with the Sales Order, line count, File ID, and generated HTML.
• Test the script in a sandbox environment before deploying to production to ensure compatibility with your NetSuite configuration.