Form

Form Elements:
1. Create
2. Columns
3. Other Tools
4. Advanced Section

Creating new form

  1. Change the type to “Form”
    Change type

Form Source (Dynamic Only ) : Renders incoming data
Update Item (Dynamic Only ): Datasources in portal to be affected by action

  1. Choose your datasources. The parser will become default like example below. Note: the datasources in the example below were created previously and not default.

  2. Make sure the keyColumn value identifies the unique column in data set

  3. Find the uuid of the row you will be modifying. Example: 155sb867-4444-44444-4444-44322345

  4. Add the row value of your keyColumn selection as your rowKey value

  5. Add a title to the form

  6. Add a subtitle based on a data property in your data set that can help identify the selected row

The rest of the tabs are for editing the form itself

Columns

The keyColumn will always be a ‘Read-Only’ value when displayed

Click on to edit each column

Customize Types:

Type Options
String & Blob
Integer,Float,Bigint, & Double
Boolean
Timestamp

Note: Different input options will be available based on the data type of the value

Features for all types

Key Description Example
Label Name of property to be displayed on form. If left blank, it will default to data’s property name.
Description Description of the data property is displayed by clicking its help icon.

Features for each type

Key Example
Text
Text Area
Slider
Dropdown
Date
Time
Color
Toggle Switch

Style

Key Description Example
Compact Mode Changes format to inline style
Title Changes color of the title
Background Changes the background color of the form
List Item Font Changes the color of the item name
Slider Changes the color of the slider if available
Toggle Switch Color Changes the color of the toggle switch if available
Update Button Changes the color of the update button

Other Tools

Key Description Example
Unique Style Overrides the overall style settings to change a specific setting.It is automatically checked when you change a style
HTML Id Used to target widget element in the DOM Adds an id to the page like this : <div id="myCustomHtmlId">some text </div>and then write css like this: #myCustomHtmlId { color: red }
Allow Fullscreen Gives the option to make widget fullscreen

Advanced Section

You can create a dynamic form widget by utilizing a ‘list’ widget, a local variable datasource and a ‘datasource aggregator’ datasource

You can find the list widget document here

Note: Target local variable datasource

  1. Add a local variable datasource

  2. Add list widget whose target is the local variable

  3. Create a datasource aggregator that aggregates the local variable and datasource providing data for the form widget

  4. Create a new form widget whose incoming datasource is the aggregator Note: A parser error will display

  5. The default parser sholould look different when re-opening it

  6. In the designated areas, fill in the names of the datasources that correspond to the labels in the brackets

  7. The form dynamically dispays whichever item is selected in the list