1. SuiteCloud Platform
  2. SuiteCloud Customization Tutorials
  3. SuiteCloud Customization Tutorials
  4. Hide a Column in a Sublist

Hide a Column in a Sublist

This sample shows you how to hide a field column in a standard sublist.

You can find this project on the SuiteCloud Project Repository on Oracle Samples GitHub. It includes a complete project customization setup with custom objects, unit tests, package file configuration, and more.

Scenario

You're the NetSuite administrator for your organization. You use the invoice record type for your invoices. This record type has everything you need to manage your invoices, but it also has some fields you don’t need. In the Item sublist on an invoice record, you don’t need to fill in the Item field. This field appears as a column in the Item sublist, and you want to use a script to hide it before an invoice is edited.

Customization Details

The customization for this use case includes:

  • A user event script triggered on the beforeLoad entry point

Steps in this tutorial to complete this customization:

Before You Begin

The features, permissions, and other requirements you'll need to complete this tutorial are listed in the following table.

Required Features

Ensure these features are enabled in your account:

  • Server SuiteScript – Lets you attach server scripts to records.

  • File Cabinet – Lets you store your script files in the NetSuite File Cabinet.

  • A/R – Lets you create, edit, and save invoices.

For more information, see Enabling Features.

Required Permissions

You need a role with access to the following:

  • Scripts – Edit access

  • Script Deployments – Edit access

  • Invoices – Edit access

For more information, see NetSuite Permissions Overview

Other Requirements

None

Step 1: Write the Script

This script hides the Item column on the Item sublist for an invoice.

Script Summary

The following table summarizes the script for this tutorial:

Script: Hide Sublist Column

Script Type

SuiteScript 2.x User Event Script Type

Modules Used

  • N/ui/serverWidget Module

  • N/log Module – This module is available to all scripts as a global object. However, you should explicitly load this module to avoid conflicts with other objects that may be named ‘log’.

Entry Points

For more information about script types and entry points, see SuiteScript 2.x Script Types.

The Complete Script

This tutorial includes the complete script along with individual steps you can follow to build the script in logical sections. The complete script is provided below, so that you can copy and paste it into your text editor and save the script as a .js file (for example, ue_hideSublistColumn.js).

If you'd rather create your script step by step, follow the steps in Build the Script.

Note:

This tutorial script uses the define function, which you need for an entry point script (a script you attach to a script record and deploy). If you want to copy the script into the SuiteScript Debugger and test it, you must use the require function. For more information, see SuiteScript Debugger.

Important:

This sample uses SuiteScript 2.1. For more information, see SuiteScript 2.1.

              /**
 * @NApiVersion 2.1
 * @NScriptType UserEventScript
 * @NModuleScope SameAccount
 */

define(['N/ui/serverWidget', 'N/log'], (serverWidget, log) => {
    function beforeLoad(context) {
        if (context.type === context.UserEventType.EDIT) {
            hideColumnField(context.form, 'item', 'item');
        }
    }
    function hideColumnField(formObj, sublistId, fieldId) {
        try {
            const formSublist = formObj.getSublist({
                id: sublistId
            });
            if (formSublist) {
                const formField = formSublist.getField({
                    id: fieldId
                });
                if (formField && typeof formField !== 'undefined' && formField !== null) {
                    formField.updateDisplayType({
                       displayType: serverWidget.FieldDisplayType.HIDDEN
                    });
                }
            }
        } catch(error) {
            log.error({
                title: 'Error occurred when hiding field',
                details: JSON.stringify({
                    sublistId: sublistId,
                    fieldId: fieldId
                })
            });
        }
    }
    return {
        beforeLoad: beforeLoad
    };
});

Build the Script

You can write the script using a step-by-step approach that includes the following:

Note:

The code snippets don't include indentation. Refer to The Complete Script for suggested indentation.

Start with required opening lines

JSDoc comments and a define function are required at the top of the script file. The JSDoc comments in this script show that it's a SuiteScript 2.1 user event script. The script uses two SuiteScript modules specified in the define statement:

  • N/ui/serverWidget – provides access to the NetSuite user interface, including loaded forms

  • N/log – lets you log execution details

Start a new script file in any text editor and add the following JSDoc comments and define function at the top of the file:

Note:

This tutorial script uses the define function, which is required for an entry point script (a script you attach to a script record and deploy). You must use the require function if you want to copy the script into the SuiteScript Debugger and test it. For more information, see SuiteScript Debugger.

                /**
 * @NApiVersion 2.1
 * @NScriptType UserEventScript
 * @NModuleScope SameAccount
 */

define(['N/ui/serverWidget', 'N/log'], (serverWidget, log) => {
});

Create the entry point function

This script is triggered on the beforeLoad entry point when an invoice record loads. The entry point function checks if the record is being edited, and if so, it calls a helper function that is also defined in the script.

Add the following function definition at the top of the define function:

                function beforeLoad(context) {
    if (context.type === context.UserEventType.EDIT) {
        hideColumnField(context.form, 'item', 'item');
    }
}

Define the hideColumnField() helper function

This script uses a helper function to hide the Item column.

Add the following code after the beforeLoad function definition:

                function hideColumnField(formObj, sublistId, fieldId) {
}

Add a try-catch block

The helper function uses a try-catch block to log any errors that might occur during script processing.

Add the following code at the top of the hideColumnField() helper function definition:

                try {
} catch(error) {
    log.error({
        title: 'Error occurred when hiding field',
        details: JSON.stringify({
            sublistId: sublistId,
            fieldId: fieldId
        })
    });
}

Get the Item sublist

To hide a field on a form, you need to get the field. Since the field you want to remove is on the Item sublist, you first need to get the sublist.

Add the following code inside the try section of the try-catch block:

                const formSublist = formObj.getSublist({
    id: sublistId
});

Hide the Item field

If the Item sublist exists on the invoice record, get the field from the sublist and make sure that it's defined. If it's defined, hide it.

Add the following code inside the try section of the try-catch block:

                if (formSublist) {
    const formField = formSublist.getField({
        id: fieldId
     });
    if (formField && typeof formField !== 'undefined' && formField !== null) {
       formField.updateDisplayType({
           displayType: serverWidget.FieldDisplayType.HIDDEN
       });
    }
}

Create the return statement

This script associates the beforeLoad function with the beforeLoad user event entry point.

Add the following code immediately above the closing }); in your script:

                return {
    beforeLoad: beforeLoad
};

Save your script file

You need to save your script file so you can load it to the NetSuite File Cabinet. Before saving, you may want to adjust the indentation to improve readability. Refer to The Complete Script for suggested formatting.

When you're happy with your script file, save it as a .js file (for example, ue_hideSublistColumn.js).

Step 2: Create the Script Record

Now that you’ve completed the script, you can upload the script file to the File Cabinet and create a script record for it.

For more information about creating script records, see Creating a Script Record.

To create the script record:

  1. Upload your script to the NetSuite File Cabinet.

  2. Go to Customization > Scripting > Scripts > New.

  3. Select your script from the Script File list and click Create Script Record. The Script page is displayed.

  4. On the Script page, enter the following values:

    Field

    Value

    Name

    Hide Sublist Column

    ID

    _ue_hide_sublist_column

    NetSuite prefixes the ID with customscript.

    Description

    This script hides the Item field on the Item sublist on an invoice record.

  5. (Optional) Set any other fields on the script record as needed.

  6. Click Save and Deploy. The Script Deployment page appears. Continue with Step 3: Deploy the Script.

Step 3: Deploy the Script

After you create the script record, you can create a script deployment record for it. The script deployment record determines how, when, and for whom the script runs.

For more information about script deployment records, see Script Deployment.

To deploy the script:

  1. Complete the steps in Step 2: Create the Script Record.

  2. On the Script Deployment page, enter the following values:

    Field

    Value

    Applies To

    Invoice

    ID

    _ue_hide_sublist_column

    NetSuite prefixes the ID with customdeploy.

    Status

    Testing

    The Testing status lets the script owner test the script without affecting other users in the account.

    Log Level

    Debug

    The Debug level writes all log.debug statements and errors to the Execution Log tab of the script deployment record.

    Execute As Role

    Current Role

    It's usually best to have scripts run with the user’s current role to avoid granting unwanted access.

    Audience > Roles

    Check Select All

  3. Click Save.

Step 4: Test the Solution

After you create the script record and deploy your script, you can test your solution by viewing and editing an existing invoice.

To test your solution:

  1. Go to Transactions > Sales > Create Invoices > List.

  2. Click View next to any existing invoice.

  3. On the Invoice page, scroll down to the Item sublist and verify that the Item column appears.

  4. Click Edit.

  5. Scroll down to the Item sublist and verify that the Item column doesn't appear. Scroll to the right to see all columns on the sublist.

  6. Click Cancel to close the invoice without editing it.

Related Topics

General Notices