How to Hide the Buttons in a NetSuite Page ?

Before proceeding, i want to thank Marty Zigman, and his blog http://blog.prolecto.com.
I got the best help from his blog which helped me to overcome the hiding buttons issue. 

With Suite Flow  (Point and click Customization's)  we cannot hide/remove buttons in the NetSuite page.

Like in Prospect page -> if i need to hide "New Contact", "Attach", "Update Primary", "Customize View" buttons what should I do?

Since with NS Point and Click functionality doesn't support us to hide these buttons, we can use Client side JavaScript to get the control. this kind of programming is called "Document Object Model (DOM)".

Before implementing, we should know below steps:

1. JQuery: NetSuite provides a reference to the JQuery add-in library by default. Thus it is convenient for DOM operations.
2. HTML IDs: We need to know the IDs of the target HTML elements we want to manipulate.
3. Script: We need to inject some client-side JavaScript into the HTML to get ultimate control.

I have followed below approach to hide the buttons in NS:

1. Since i need to hide the buttons in both "View" mode and "Edit" mode, hence I have used "UserEvent Script".

2. Hover on "New Contact" button -> Right Click -> Inspect -> click on it.

3. Verify the "id" for the "New Contact" button in "<input>".
As per below screen:

My Requirement is :

In Prospect record, under "Relationship" subtab:

1. Hide "New Customer", "Attach", "Update Primary" buttons,
2. Role Field

Scripting:

For that, I have chosen below way:

1. Considered UserEvent Script.
2. Creating an "Inline Text Field" and pushing the jQuery into this field.

//create an inline html field
    var hideField = context.form.addField({
    id:'custpage_hide_fields',
    label:'Hidden',
    type: serverWidget.FieldType.INLINEHTML
     });

var src = "";

    // hiding Role field in edit mode
    src += 'jQuery("#inpt_contactrole10").hide();';
    src += 'jQuery("#inpt_contactrole10_arrow").hide();';
   
        //hiding buttons
        src += 'jQuery("#newcontact").hide();';
    src += 'jQuery("#addcontact").hide();';
    src += 'jQuery("#updatecontact").hide();';
    src += 'jQuery("#tbl_newcontact").hide();';
    src += 'jQuery("#tbl_addcontact").hide();';
    src += 'jQuery("#tbl_updatecontact").hide();';

        //hiding Role Field in view mode
        src += 'jQuery("#contact_contactrole_fs_lbl_uir_label").hide();';
    src += 'jQuery("#inpt_contactrole1").hide();';
    src += 'jQuery("#inpt_contactrole1_arrow").hide();';
   
    log.audit(src)
    // default the 'src' data in the created inline html field
     hideField.defaultValue = "<script>jQuery(function($){require([], function(){" + src + ";})})</script>"

This entire code considered under beforeLoad section.Since we are creating new field we must consider "N/ui/serverWidget" module,. please go through SuiteScript 2.0 for more details.

Below are the results:

In View Mode:

In Edit Mode:

This code changes works in all browser's, these code changes are not specific to any browser.

Now, We know how to hide the fields with server side script, can we hide the buttons using client side script ?

Answer is Yes, with limitations.

Since the Client Script works in "Edit" mode, the buttons will be hidden in only Edit mode not in View mode.

So, by using UserEvent script will help me to hide buttons in both  View and Edit modes.

Please go through below link for more details. Write to me if any issues, or any better solutions available.

http://blog.prolecto.com/2018/09/22/learn-how-to-hide-netsuite-sublist-buttons-and-other-html-elements/

Thanks,
Ram