SuiteScript 2.x Custom Forms

Supported Script Types for Custom Form Creation

You can use the following script types to create custom forms:

• Suitelet: Suitelets provide the most flexibility for creating a form. Suitelets can process requests and responses directly, giving you control over the data included in a form. For information about Suitelets, see SuiteScript 2.x Suitelet Script Type.

• Portlet: Portlets are rendered within dashboard portlets. For information about portlet scripts, see SuiteScript 2.x Portlet Script Type.

• Before Load User Event Script: User event scripts are executed on the server when a user performs certain actions on records. You can use a before load user event script to manipulate an existing form when a user edits a record. For information about before load user event scripts, see SuiteScript 2.x User Event Script Type and beforeLoad(context).

Supported UI Components for Custom Forms

You can use the following elements in your custom forms: buttons, fields (configured or specialized), field groups, tabs and subtabs, sublists, and page links.

Positioning Fields on Forms

You can add field groups to position fields together with other closely related fields on custom forms. Use the properties in serverWidget.FieldGroup to add field groups to forms. You also can use Field.updateLayoutType(options) to define the positioning and placement of fields.

The following screenshot shows a single column field group above a double column field group.

Field Layout Type

The serverWidget.FieldLayoutType enumerations contain values used by Field.updateLayoutType(options) to position fields outside of a field group and on the same row.

You can use the OUTSIDE value to position a field outside of a field group. You can further refine the field’s position by using the OUTSIDEABOVE and OUTSIDEBELOW value to position a field above or below a field group. The following screenshot displays three text fields positioned outside of a field group by setting these Field Layout Type values.

The following code sample illustrates how to set Field Layout values to produce the field placement in the screenshot.

            //Add additional code  
... 
var outsideAbove = form.addField({
    id: 'outsideabovefield',
    type: serverWidget.FieldType.TEXT,
    label: 'Outside Above Field'
});
outsideAbove.updateLayoutType({
    layoutType: serverWidget.FieldLayoutType.OUTSIDEABOVE
});
...
//Add additional code 

          

You can use the STARTROW, MIDROW, and ENDROW enumerations to position fields together in the same row. For example, you can group similar fields together, such as first name and last name. The following screenshot displays three text fields positioned together using these Field Layout Type values.

The following code sample illustrates how to set Field Layout values to produce the field placement in the screenshot.

            //Add additional code  
... 
 var startRow = form.addField({
    id: 'startrow',
    type: serverWidget.FieldType.TEXT,
    label: 'STARTROW',
    container: 'usergroup'
});

startRow.updateLayoutType({
    layoutType: serverWidget.FieldLayoutType.STARTROW
});
              
var midRow = form.addField({
    id: 'midrow',
    type: serverWidget.FieldType.TEXT,
    label: 'MIDROW',
    container: 'usergroup'
});
              
midRow.updateLayoutType({
    layoutType: serverWidget.FieldLayoutType.MIDROW
});
              
var endRow = form.addField({
    id: 'endrow',
    type: serverWidget.FieldType.TEXT,
    label: 'ENDROW',
    container: 'usergroup'
});

endRow.updateLayoutType({
    layoutType: serverWidget.FieldLayoutType.ENDROW
});      

...
//Add additional code 

          

Field Break Type

The serverWidget.FieldBreakType enumeration contains the values set by Field.updateBreakType(options) to define how fields are divided across columns and rows on forms.

• Use the STARTCOL value to move a field to a new column. The following screenshot shows the difference between the EMAIL field when the break type is set to NONE (top image) and when it is set to STARTCOL (bottom image).

  Note:

  If the isSingleColumn property (for a field group) is set to true, then breaking columns doesn't apply. You can't break on a column if you are in single column mode.

  

  The following code sample illustrates how to set the FieldBreakType values to produce the field placement in the screenshot.

                  //Add additional code
  ... 
  var email = form.addField({
      id: 'emailfield',
      type: serverWidget.FieldType.EMAIL,
      label: 'Email',
      container: 'usergroup'
  });
  
  email.updateBreakType({
      breakType : serverWidget.FieldBreakType.STARTCOL
  }); 
  ...
  //Add additional code 
  
                

  Use the STARTROW value to move a field to a new row. The STARTROW value can only be used on fields that are positioned outside of a field group. The NONE value is the default configuration, and does not move a field to a new row. For information about how to position a field outside of a field group, see serverWidget.FieldLayoutType and Field.updateLayoutType(options).

  The following screenshot shows the difference between a field with a break type set to STARTROW and STARTCOL.

  

  The following code sample illustrates how to set the FieldBreakType to STARTROW to produce the field placement in the screenshot.

                  //Add additional code 
  ... outsideAbove = form.addField({
      id: 'outsideabovefield',
      type: serverWidget.FieldType.TEXT,
      label: 'OUTSIDEABOVE'
  });
  
  outsideAbove.updateLayoutType({
      layoutType: serverWidget.FieldLayoutType.OUTSIDEABOVE
  });     
  
  outsideAbove.updateBreakType({
      layoutType: serverWidget.FieldLayoutType.STARTROW
  });
  ...
  //Add additional code 
  
                

Related Topics