Simple Form Control Glossary
  • 09 Oct 2024
  • 3 Minutes to read
  • Dark
    Light

Simple Form Control Glossary

  • Dark
    Light

Article summary

Feature Details
Modified in Version8.17
Modification DetailsSimple Forms now supports Horizontal Stack.

The following list comprises the Controls and Layouts supported in Simple Forms and their available CSS classes for further customization. 

Controls next to the gray column are child controls of the next above parent control. To access these child controls, change the control Control Type. This setting is further discussed in the following subsection.

Layouts

NameDescriptionCSS Classes Available
Vertical Stack
Provide a layout where users can effortlessly drag and drop various other Form Controls to accommodate the controls side-by-side (horizontal) within the specified area.
CSS
Grid Layout 
Fixed containers to house Form controls can be stacked upon each other as well as side-by-side.
CSS
Horizontal StackProvide a layout where users can effortlessly drag and drop various other Form Controls to accommodate the controls on top of each other (vertical) within the specified area.
CS

Controls

Action

NameDescriptionCSS Classes Available

Button

Standard interactable button
Available Display Type: Button, Link, and Image
Control

Open URLOpens the specified URL link once clicking the controlSame as parent
EventTriggers an event once clicking the controlSame as parent

PreviousReverses Flow to previous steps; stops reversing when a Form with an Outcome Behavior Type Button is selected; when used in combination, it can create a loop.Same as parent

Post BackResets all entries in the FormSame as parent

Copy TextCopies the text string value of the specified TextboxSame as parent

Data Repeater Add/RemoveRespectively adds or removes a row to its attached Data RepeaterSame as parent

Sub DialogRuns a sub-dialog Flow that can house a Form to pop up in front of the current FormSame as parent

Data Grid Add/RemoveRespectively adds or removes a row to its attached Data GridSame as parent

Data

NameDescriptionCSS Classes Available

Check Box

Create checkboxes for user selection
  • Label
  • Control

SwitchDisplays a toggle button switchSame as parent
Data Grid
Displays an Excel-like view of an Entity with the ability to have user action and edit the data sourceControl
Data Repeater
Places a Simple Form within a Simple Form as a repeatable list of the same data type(s)
  • Control
  • Inner Margin
  • Outer Margin
  • Border Width
  • Corner Radius

Date Time Field

Allows the user to choose a date and time
  • Label
  • Button
  • Control
Document ViewerAllows to view DocumentsCSS

DateAllows the user to choose a dateSame as parent
DateTimeAllows the user to choose a date and timeSame as parent
TimeAllows the user to choose a timeSame as parent
CalendarInteractive Calendar where the end-user selects a date and/or timeSame as parent
ImageDisplays an image
  • Label
  • Control
LabelDisplays non-interactive text
  • Label
  • Label Holder

Rich TextDisplays inputted text with options to change font format, style, color, size, alignment, copy, paste, insert image, create a table, hyperlinks, etc.Same as parent
Latitude and LongitudeDisplays the latitude and longitude of the specified location by working alongside the Geolocation APIControl

List 

Displays text as a list; contains Single Select and Multi Select options for user selection.
  • Label
  • Container
  • Item
  • Selected Item

Sortable List BoxDisplays text as a list where items can be rearranged and removed.
  • Label
  • List Holder
  • Sortable List Item
  • Add Button

Combo BoxDisplays drop-down list items of the specified Data Type with Single Select and Multi Select options for user selection.
  • Label
  • Control
  • Button
  • Drop Down List
  • Selected Item

Check Box ListCreates a list of checkboxes for user selection; contains only Multi Select behavior.Same as parent

Radio Button ListCreates a list with the ability for users to select via radio buttons; contains only Single Select behavior.Same as parent

Progress Bar

Shows the progress of data being input and allows the designer to set a minimum and maximum number for the bar.
Control

Signature Pad

A signature can be drawn with a mouse or touch screen if applicable
  • Label
  • Control
Text AreaDisplays static or input data with a built-in label
  • Label
  • Control

Text Field

Users can input string
  • Label
  • Control
 AutoComplete Creates an auto-complete search barSame as parent
Currency Box
Number box that inputs and outputs currencySame as parent
Masked Text Box
Allows the designer to give the text a format value type: General, Number, Decimal, Currency, Email Address, SSN, Custom, Phone Number.Same as parent
Number BoxOnly takes in and outputs a numberSame as parent
Number Spinner
Only takes in and outputs a number with up and down arrows for inputsSame as parent
Password Text Box
Hides text with bullet points and allows the designer to create a minimum and maximum lengthSame as parent
Text Box
Users can input string textSame as parent

Video

Upload a video file or input a video URL to display on the Form
  • Label
  • Control

Validation

NameDescriptionCSS Classes Available

Validation Display

Shows validation messages for the Form
Control

File

NameDescriptionCSS Classes Available

File Download

Allows download of one designated file
  • Label
  • Link
File Upload Allows upload of one user-specified file

  • Label
  • FileName
  • Button
  • Dialog Header
  • Dialog Body
  • Dialog Footer

File Upload Area

Allows users to upload a file via drag-and-drop into the area
  • Label
  • Container
  • FileName
  • Link

Files Download

Allows download of multiple designated files
  • Label
  • FileName
  • Link

Files Upload

Allows upload of multiple user-specified files
  • Label
  • FileName
  • Button
  • Dialog Header
  • Dialog Body
  • Dialog Footer
Files Upload Area
Allows users to upload multiple files via drag-and-drop into the area
  • Label
  • Container
  • FileName
  • Link

Changing a Control's Control Type

The Control Type setting configures the appearance and functionality of a Simple Form control. Drag a parent control into the Simple Form's workspace and click the Edit button under Control Type. The following example uses a Text Field that, once changing the control, also changes its Properties.


For further information on Forms, visit the Decisions Forum.

Was this article helpful?