How to Implement Smart Entry Form Selection

One of the powerful features of the NetSuite interface is the ability to present data differently to users via custom forms. Typically, forms are designed based on roles. However, in a recent project, I needed to model different business operations for which the data and underlying logic were sufficiently different to warrant creating different forms. In this use case, the user would need to select the right form in order to enter the required data and trigger underlying calculations.

The out-of-the-box approach as illustrated above is to define the desired forms and expose the custom form field with which users can toggle the form. Upon changing the form, NetSuite will reload the record and display the new form. There lies the challenge with this approach: It is not uncommon for users to forget to choose the wrong form and only realize after they have entered some data. Upon toggling the form, the previously entered data is lost! This could be frustrating. To improve the user experience, we’d rather present the user with an initial placeholder form that does only one thing: Allow them to select the actual form. In that way, the user is forced to make a conscious choice at the beginning and we thus reduce the chance of errors.

Read on to learn how to implement this solution.

Step 1: Define a Placeholder Form

In addition to the custom forms that capture the actual business data, we define a placeholder form and make it the default record form.

On this placeholder form, we hide all fields except the Custom Form selection field. On the main form(s), we hide the custom form field or at least make it read-only.

This is pretty much sufficient. However, notice that the standard form is still visible. Moreover, nothing stops the user from absent-mindedly saving the placeholder form which defeats the purpose. You can prevent the latter by hiding a mandatory field on the placeholder form. Since the field is mandatory, NetSuite will enforce it; however, since we hid it, the user will not be able to enter a value. Thus, we prevent the user from committing the placeholder form.

I did not find any quick way to remove the standard form and in my use case, that was important as the standard form contains all fields and would confuse the user if accidentally selected. I got rid of it via scripting.

Step 2: Define a Shadow Form Selection Field and Hide Undesired Options

I added a user event script and in the beforeLoad, if the placeholder form is loaded, I hide the native custom form field and replace it with a shadow field that hides both the placeholder and standard forms. Note that I resorted to a shadow field as I did not find any clean way (read non-jQuery or DOM approach) to remove the standard form from the dropdown. The output looks like this:

Here’s a reference implementation of such a script:

function beforeLoad(context) {
	var rec = context.newRecord;
    var placeholderForm = '123'; // Placeholder form ID should preferably be captured in a settings object.
    var isPlaceholderForm = rec.getValue('customform') === placeholderFormId;

	if (isPlaceholderForm && (context.type === 'create' || context.type === 'copy')) {
        // Optional: Hide the name field if the record has one
        var nameField = form.getField('name');
        if (nameField) {
            nameField.updateDisplayType({
                displayType: serverWidget.FieldDisplayType.HIDDEN
            });
        }
 
		// Replace standard form field with custom one having target options.
		var customFormField = form.getField('customform');
		customFormField.updateDisplayType({
			displayType: serverWidget.FieldDisplayType.HIDDEN
		});

		var formOptions = customFormField.getSelectOptions();
		
		var selectField = form.addField({
			id : 'custpage_customform',
			type : serverWidget.FieldType.SELECT,
			label : 'Select Load Form'
		});
		selectField.updateBreakType({
			breakType : serverWidget.FieldBreakType.STARTROW
		});
		selectField.updateLayoutType({
			layoutType: serverWidget.FieldLayoutType.OUTSIDE
		});
		selectField.addSelectOption({
			value: '',
			text: '',
			isSelected: true
		});
		selectField.isMandatory = true;

		var helpField = form.addField({
			id : 'custpage_form_selection_help',
			type : serverWidget.FieldType.HELP,
			label : 'ATTENTION: Be sure to select the right form as it cannot be changed afterward!'
		});
		helpField.updateLayoutType({
			layoutType: serverWidget.FieldLayoutType.OUTSIDE
		});
		helpField.updateBreakType({
			breakType : serverWidget.FieldBreakType.STARTROW
		});
		
		formOptions.forEach(function(option) {
			if (option.text.indexOf('Standard') !== 0 && option.value !== placeholderForm) {
				selectField.addSelectOption(option);
			}
		});
	}
}

Step 3: Propagate User Selection to the Native Form Field

Finally, on client-side, I added logic to detect changes to my custom field and propagate them to the native custom form field. This triggers NetSuite’s inbuilt logic to load the selected form.

function fieldChanged(context) {
	var rec = context.currentRecord;
	
	if (context.fieldId === 'custpage_customform') {
		rec.setValue('customform', rec.getValue(context.fieldId));
	}
}

Other Considerations

Note that as new fields are added to the custom record in the future, you need to make sure that you’re not exposing them on the placeholder form. I investigated the option of hiding all fields but it did not appear straightforward. Specifically, record.getFields() does not return fields that have no default value so we cannot dynamically find and hide all undesired fields using this approach.

User experience design is subjective. However, a good user interface should definitely be intuitive and guide users to accurately execute the desired task. Often, the difference between an “okay” NetSuite implementation/solution and a great one lies in non-functionals under which usability often falls. Train yourself to deliver more than just an okay experience; aim for higher. If you are looking for a NetSuite firm that does just that, reach out for a conversation.

NetSuite Insights is proud to partner with Prolecto Resources Inc. – the unrivaled #1 NetSuite Systems Integrator and thought leader in the space! Learn more about how Prolecto can supercharge your NetSuite experience and deliver the best return on your NetSuite investment.