Form
Form Elements:
1. Create
2. Columns
3. Other Tools
4. Advanced Section
Creating new form
- Change the type to “Form”
Form Source (Dynamic Only ) : Renders incoming data
Update Item (Dynamic Only ): Datasources in portal to be affected by action
Choose your datasources. The parser will become default like example below. Note: the datasources in the example below were created previously and not default.
Make sure the keyColumn value identifies the unique column in data set
Find the
uuid
of the row you will be modifying. Example: 155sb867-4444-44444-4444-44322345Add the row value of your keyColumn selection as your rowKey value
Add a title to the form
Add a subtitle based on a data property in your data set that can help identify the selected row
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
Add a local variable datasource
Add list widget whose target is the local variable
Create a datasource aggregator that aggregates the local variable and datasource providing data for the form widget
Create a new form widget whose incoming datasource is the aggregator Note: A parser error will display
The default parser sholould look different when re-opening it
In the designated areas, fill in the names of the datasources that correspond to the labels in the brackets
The form dynamically dispays whichever item is selected in the list