Form Section Fields (Documentation)

the documentation below outlines how to configure input fields within your form component.

Demo_Fields_Section_Customization
utility:multi_picklist
use the multi select picklist to add and order fields within the section
Section Fields Configuration
form_builder_Section_Fields_Multipickli

Section Fields Configuration

Fields are added and arranged within a section via a multipicklist selector. The selector is located within the accordion labeled "Section Fields". All accessible fields for the object will be available as input/display fields for the section.


Filter Field Options: to quickly locate fields, utilize the Filter Field Options search input field. The filter will filter by field label, field name or field type.


Field options listed within the Available column are fields not yet assigned to the field section. Field options within the Assigned column are fields that have been added to the field section. As you add fields to the assigned column check the Form Preview tab to view the newly added field. To change the order in which fields are displayed within the form section, move the field option up or down within the multiselect picklist.


Once a field has been added to the assigned column, a corresponding accordion button will be displayed within the Customize Section Fields section below.

utility:edit_form
customize field display properties within field accordion
Customize Section Fields

Customize Section Fields

Each field assigned to the section will have a corresponding accordion button. Click on the accordion button to change display options for the related field. The two toggle buttons within each accordion are used to set the field as required or disabled. The toggle on the right sets the field to required, and will display as a red checkmark when enabled. The Toggle on the left sets the field as disabled and will display as a blue checkmark when enabled.

form_field_Customize_Section_Fieldspng

Field Width Settings

The form components utilize the flexible grid system outlined within the lightning design system documentation. "Width Large", "Width Medium", and "Width Small" define the width of the field depending on the Users device. Widths are based off of a 12 column grid. Selecting "12 Columns" sets the width to 100%, selecting "6 Columns" sets the width to 50%.


  • Width Large: the size of the component when being viewed from a desktop computer.
  • Width Medium: the size of the component when being viewed from a tablet.
  • Width Small: the size of the component when being viewed from a mobile device.
form_field_Field_Width_Settingspng

utility:insert_tag_field
override default field label and display properties
Field Label Settings

Field Label Settings

Sections fields, by default, receive their field labels from the Objects configured field label. If a system admin changes a field label, or if a field label is translated form components will also display the new field label. Help Text configured within an object field will also be displayed by default within form components. To override these defaults use the configuration parameters within the Field Label Settings section.

form_field_Field_Label_Settingspng
  • Prepend: Add any text value to prepend an inline label before the input field.
  • Custom Label: Add any text value to override the object fields default field label. Custom labels can be up to 255 characters long.
    • Note: if translations are required we recommend keeping this field blank.
  • Append: Add any text value to prepend an inline label after the input field.
  • Label Position: Optionally choose to hide or alter the position of the label within the form component. More details on available options can be found within the lightning component documentation.
  • Placeholder: optionally assign a placeholder value to the input field. Placeholder values are visible whenever an input field hasn't received an input value. This can be used to provide additional details on how a User should complete the field.
  • Help Text: Add any text value to override the object fields default help text value. Custom help text can be up to 255 characters long. When configured an info icon will display to the right of the field label. Hover over this icon to display the help text message.
  • Disable Help Text: When an objects field has been configured with help text, the help text value by default will be displayed within an info icon to the right of the field label. To hide internal help text messages, toggle the "Disable Help Text" to enabled.

utility:prompt_edit
optionally configure prompts to display above section fields
Field Prompt
form_field_Field_Promptpng

Field Prompt(s)

In addition to or in place of inline help text, use the Field Prompts section to configure field prompts for section fields. By default prompts will pop up whenever a User focuses in on the input field. Prompts can also be configured to always be visible within the flow Form component.


Prompt Display Type: use this switcher to change how the prompt is displayed. By default "Prompt" is selected and displays prompts within stylized popup container above the input field. Prompts receive their css style from the form or sections assigned theme.

Prompt Display Type (Continued): when "Rich Text" is selected, the prompt is displayed above the input field without any stylized prompt container.


Prompt Display Value: use this selector to define what prompt message to display. Select "Custom Prompt Message" to configure and display a custom prompt message. The custom prompt message is added to the rich text input field, which is only visible when this option is chosen. Chose "Field Help Text" to display the objects field help text value within the prompt.

Customize Field Types

Customize fields with display overrides and field value formatting

Demo_Date_and_Time_Configuration
utility:date_input
below are examples of date configuration options
Date Configuration
No input rendered: Field "Start_Date__c" not found in response.
Formato: dic 31, 2024
Formato: dic 31, 2024
No input rendered: Field "End_Date__c" not found in response.
Formato: dic 31, 2024
Seleccionar una fecha de dic 20, 2021 a dic 24, 2021
Formato: dic 31, 2024
No input rendered: Field "Start_Date__c" not found in response.
Formato: dic 31, 2024
Formato: dic 31, 2024
No input rendered: Field "End_Date__c" not found in response.
Formato: dic 31, 2024
Seleccionar una fecha de dic 20, 2021 a dic 24, 2021
Formato: dic 31, 2024

utility:clock
below are examples of time configuration options
Time Configuration
No input rendered: Field "Start_Time__c" not found in response.
No input rendered: Field "End_Time__c" not found in response.
utility:date_time
below are examples of date/time configuration options
Date/Time Configuration
No input rendered: Field "Start_Date_Time__c" not found in response.
Start Date/Time
Formato: dic 31, 2024
Start Date/Time
Formato: dic 31, 2024
No input rendered: Field "End_Date_Time__c" not found in response.
End Date/Time
Formato: dic 31, 2024
End Date/Time
Formato: dic 31, 2024