Hiding HTML Elements on NetSuite Forms – The Magic Eraser for NetSuite

by | Aug 3, 2023 | Tech Talk

Background:

NetSuite is excellent at providing point-and-click customization capabilities for Administrators to edit forms. These customizations allow you to show and hide fields, buttons, and menu links. There are a lot of built-in form elements that NetSuite does not allow you to remove through its customization tools or even through standard SuiteScript methods.

This article is relevant for those who are looking to use a script to hide additional elements in NetSuite tools from a form that is not available using standard SuiteScript methods available.

The best part of this is that the script logic will allow you to pretty much hide any HTML elements for the page you need to as long as it is a scriptable record type.

We have a client who only wants to allow their project managers to create Quotes from the Related Records subtab of Project Records. They did not want to limit their ability to see other transactions, despite the results on that tab.  Based on this, we couldn’t alter their role permissions to achieve this, because in doing so, we would have prevented them from seeing the other transaction types. And we also could not simply hide the buttons using standard scripting methods or form edits.

How to Hide the NetSuite Form Elements:

In order to achieve this, we will need to employ the use of the following:

  • User Event script.
  • JQuery library: we will be using it to reference the HTML fields and manipulate the DOM.
  • Identify the HTML IDs for each of the elements we want to hide on the form.
  1. Find the HTML IDS for the buttons to hide.

In the web browser’s elements view, it will highlight the HTML that is used to display the button.  Below is the HTML that displays the Sales Order button. Find the id value for the button which in this case is “salesorder”.

You can repeat this same step to find the id values for additional HTML elements on the form that you wish to hide.

2. In the User Event script we will add the following code snippet to add an inline HTML element to the form in the beforeLoad method.

var hideField = form.addField({
    id:'custpage_hide_fields',
    label:'Hidden',
    type: serverwidget.FieldType.INLINEHTML
    });

We will then create a string value that concatenates all of the elements that we are hiding on the form at run time.

var src = "";
src += 'jQuery("#salesord").hide();'; //Sales Order Button
src += 'jQuery("#custinvc").hide();'; //Invoice Button
src += 'jQuery("#cashsale").hide();'; //Cash Sale Button

Last but not least we will assign the final HTML string to the new field element above to allow it to hide our HTML elements on the screen.

hideField.defaultValue = "<script>jQuery(function($){require([], function(){" + src + ";})})</script>"

Once the User Event script is created in NetSuite and deployed against our Project record, any time we view the Related Records sub-tab, we will no longer see the Sales Order, Invoice, or Cash Sales buttons.
If you need additional information on any topic mentioned here, feel free to connect with NetSuite experts and get what you need.

Conclusion:

While NetSuite does provide ways to remove or hide elements from their forms, sometimes it is necessary to tap into additional scripting tricks like this one to provide a more polished end result to meet a client’s needs.

About Us

We are a NetSuite Solutions Partner and reseller with 30+ years of combined experience.  We specialize in implementation, optimization, integration, rapid project recovery and rescue as well as custom development to meet any business need. If you would like more information on NetSuite or are in need of consultation for your project or implementation, feel free to contact NetSuite support.

To Contact Us Click Here

Join our mailing list to stay up to date on the latest NetSuite solutions.