Managing Field Layout in Suitelets Using serverWidget.FieldLayoutType

In Suitelets, managing the position and alignment of fields on the form is essential for creating a well-organized user interface. One key way to control field positioning is by using the serverWidget.FieldLayoutType enum in SuiteScript, which helps determine how fields are arranged on the page.

— The serverWidget.FieldLayoutType is an enum in NetSuite SuiteScript 2.x that defines how fields are positioned within a form. This enum allows you to specify the layout type for fields, including their horizontal or vertical placement.

Supported Layout Types:

STARTROW: This positions the field in the first position of a horizontally aligned field group.

MIDROW: This positions the field in the middle of a horizontally aligned field group.

ENDROW: This positions the field in the last position of a horizontally aligned field group.

OUTSIDE: This positions the field outside the normal field layout area.

OUTSIDEBELOW: This places the field below the normal field layout, outside of the regular flow.

OUTSIDEABOVE: This places the field above the normal field layout area.

NORMAL: This is the default layout type, which uses the field’s default position in the normal field layout area.

Common Layout Types and When to Use Them

a. STARTROW, MIDROW, and ENDROW

These layout types are useful when you want to position fields horizontally in a row, ensuring they appear next to each other, rather than stacking vertically.

-Use STARTROW for the first field in the row.

– Use MIDROW for the middle fields in the row.

-Use ENDROW for the last field in the row.

Example use case:

var field1 = form.addField({
  id: 'custpage_field1',
  label: 'Field 1',
  type: serverWidget.FieldType.TEXT
});
field1.updateLayoutType({ layoutType: serverWidget.FieldLayoutType.STARTROW });


var field2 = form.addField({
  id: 'custpage_field2',
  label: 'Field 2',
  type: serverWidget.FieldType.TEXT
});
field2.updateLayoutType({ layoutType: serverWidget.FieldLayoutType.MIDROW });


var field3 = form.addField({
  id: 'custpage_field3',
  label: 'Field 3',
  type: serverWidget.FieldType.TEXT
});
field3.updateLayoutType({ layoutType: serverWidget.FieldLayoutType.ENDROW });

b. OUTSIDE and OUTSIDEBELOW

These options are helpful when you want to position fields outside the normal form flow.

-OUTSIDE: Moves the field outside the normal layout area.

-OUTSIDEBELOW: Places the field outside the normal layout area but below other fields.

Example use case:

var specialField = form.addField({
  id: 'custpage_special',
  label: 'Special Field',
  type: serverWidget.FieldType.TEXT
});
specialField.updateLayoutType({ layoutType: serverWidget.FieldLayoutType.OUTSIDEBELOW });

c. NORMAL

This is the default layout type and does not modify the positioning of the field. It’s used when no special arrangement is required for a field.