Widgets Tutorial

Data Types

All widgets will require you to choose a type of incoming data to render.

Static - data will be loaded as is and is not changed unless code is written for it to listen and force changes.

Dynamic - The datasource is added and data gets updated as changes are made in the datasource.

Bar Chart

Creating new bar chart

  1. Change the type to “Bar Chart” Change type

  2. Choose your data type and datasource. Note: the datasources in the example below were created previously and not default. Modify Chart Data

  3. Click Magic Wand to automatically populate the graph with generated recommendations based on the data types.

Fill in graph

The rest of the tabs are for editing the graph itself


Bars

Key Description Example
Data Key Property from data object corresponding to a bar on the graph {“dataKey”:“humidity”}
Legend Type Icon associated with data key stars
Stack Id Two bars with the same Id and value axis will be stacked
Name Label for the bar if it’s different from the data key hum (in the legend)=humidity

Click Add bar to add more bars. Hover over the bar data entry window to reveal the trash can for deletion.

Colors


This is used to give each bar a fill color. Click Add Bar Color to add more colors. Hover over colors to reveal the trash can for deletion.

Y Axes


Note

The multiple Y Axes do not show up until each bar has matching Y axis data

Key Description Example
Data Key Property from data object whose values corresponds to the Y axis ranges return [{“temperature”:61,“humidity”:50,“wind”:14,“rainfall”:5,“timestamp”:“2016-06-22T02:26:14.368Z”}];
Label Name for the Y axis
Orientation Changes the side the Y axis is on
Time Format Allows to edit format of time and date
Top Padding Creates extra spacing for the graph on top
Bottom Padding Creates extra spacing for the graph on bottom
Show Standard Deviation Reference Lines Shows standard deviation bounds
Standard Deviations Number of standard deviations from the mean to render reference line
Line Label Name for the standard deviation line
Lower Bound Lowest number on Y-axis range
Upper Bound Highest number on Y-axis range
Auto Bounds If marked, the bounds will automatically adjust based on the data

Click Add Y Axis to add more axes. Hover over Y axis data entry window to reveal the trash can for deletion.

X Axis


Key Description Example
Data Key Property from data object whose values corresponds to the X axis ranges {“dataKey”:“rainfall”}
Label Name for the X axis
Orientation Changes the side the X axis is on
Time Format Allows to edit format of time and date
Left Padding Creates extra spacing for the graph on the left
Right Padding Creates extra spacing for the graph on the right
Unit Type The type of unit used to scale data on the X axis. Graph will NOT appear in with “Number” if it is a string

Reference Lines

X and Y axis lines can be added to define values and compare against the dataset. Note: Only one coordinate per reference line window


Click Add Reference Line to add more reference lines. Hover over reference lines data entry window to reveal the trash can for deletion

Chart

Change the margin measurements for the graph

Brush

Key Description Example
Brush Mark the box to appear below the graph. This is used to zoom in on a section in the graph
Stroke Change the color of the brush
Data Key Property from data object whose values corresponds to the brush {“dataKey”:“rainfall”}
Height Changes the height of the brush

Change the size and section of the brush by dragging the sides

Grid

Edit grid lines of the chart

Legend

Key Description Example
Show/Hide Show and hide legend
Font Color Changes font color of text on legend
Layout Changes the placement of the labels of the legend
Horizontal Align Changes the horizontal placement of the legend
Vertical Align Changes the vertical placement of the legend
Icon Type Changes the icon of the legend labels

Statistics

Key Description Example
Enable Statistics Displays button to open window for statistics about the graph. Note: Button is disabled while editing a widget.
Anomaly Detection Strictness Number of standard deviations used to calculate and detect anomalies

Other Tools

Key Description Example
Tooltip Display data box on hover
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 chart fullscreen

Line Chart

Creating new line chart

  1. Change the type to “Line Chart”
    Change type

  2. Choose your data type and datasource. Note: the datasources in the example below were created previously and not default. Modify Chart Data

  3. Click Magic Wand to automatically populate the graph with generated recommendations based on the data types.

Fill in graph

The rest of the tabs are for editing the graph itself


Lines

Key Description Example
Data Key Property from data object corresponding to a bar on the graph {“dataKey”:“humidity”}
Type The interpolation type of line For descriptions of each type of line go to :https://github.com/d3/d3-shape#curves
Legend Type Icon associated with data key stars
Name Label for the line if it’s different from the data key hum (in the legend)=humidity

Check the Show Dots box to add points to the graph Click Add Line to add more lines. Hover over the line data entry window to reveal the trash can for deletion

Colors


This is used to give each line a stroke color. Click Add Line Color to add more colors. Hover over colors to reveal the trash can for deletion.

Y Axes


Note

The multiple Y Axes do not show up until each line has matching Y axis data

Key Description Example
Data Key Property from data object whose values corresponds to the Y axis ranges return [{“temperature”:61,“humidity”:50,“wind”:14,“rainfall”:5,“timestamp”:“2016-06-22T02:26:14.368Z”}];
Label Name for the Y axis
Orientation Changes the side the Y axis is on
Time Format Allows to edit format of time and date
Top Padding Creates extra spacing for the graph on top
Bottom Padding Creates extra spacing for the graph on bottom
Show Standard Deviation Reference Lines Shows standard deviation bounds
Standard Deviations Number of standard deviations from the mean to render reference line
Line Label Name for the standard deviation line
Lower Bound Lowest number on Y-axis range
Upper Bound Highest number on Y-axis range
Auto Bounds If marked, the bounds will automatically adjust based on the data

X Axis


Key Description Example
Data Key Property from data object whose values corresponds to the X axis ranges {“dataKey”:“rainfall”}
Label Name for the X axis
Orientation Changes the side the X axis is on
Time Format Allows to edit format of time and date
Left Padding Creates extra spacing for the graph on the left
Right Padding Creates extra spacing for the graph on the right
Unit Type The type of unit used to scale data on the X axis. Graph will NOT appear in with “Number” if it is a string

Reference Lines

X and Y axis lines can be added to define values and compare against the dataset. Note: Only one coordinate per reference line window


Click Add Reference Line to add more reference lines. Hover over reference lines data entry window to reveal the trash can for deletion

Chart

Change the margin measurements for the graph

Brush

Key Description Example
Brush Mark the box to appear below the graph. This is used to zoom in on a section in the graph
Stroke Change the color of the brush
Data Key Property from data object whose values corresponds to the brush {“dataKey”:“rainfall”}
Height Changes the height of the brush

Change the size and section of the brush by dragging the sides

Grid

Edit grid lines of the chart

Legend

Key Description Example
Show/Hide Show and hide legend
Font Color Changes font color of text on legend
Layout Changes the placement of the labels of the legend
Horizontal Align Changes the horizontal placement of the legend
Vertical Align Changes the vertical placement of the legend
Icon Type Changes the icon of the legend labels

Statistics

Key Description Example
Enable Statistics Displays button to open window for statistics about the graph. Note: Button is disabled while editing a widget.
Anomaly Detection Strictness Number of standard deviations used to calculate and detect anomalies

Other Tools

Key Description Example
Tooltip Display data box on hover
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 chart fullscreen

Pie Chart

Creating new pie chart

  1. Change the type to “Pie Chart”
    Change type

  2. Choose your data type and datasource. Note: the datasources in the example below were created previously and not default. Modify Chart Data

  3. Click Magic Wand to automatically populate the graph with generated recommendations based on the data types.

Fill in graph

The rest of the tabs are for editing the graph itself


Chart

Change the margin measurements for the graph

Sections


This is used to give each section a fill color. Click Next Slice to add more colors. Hover over colors to reveal the trash can for deletion.

Other Tools

Key Description Example
Label Displays labels for each section
Tooltip Display data box on hover
Inner Radius Creates a circle in the middle of the chart
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 chart fullscreen

Scatter Plot

Creating new scatter plot

  1. Change the type to “Scatter Plot” under Change type

  2. Choose your data type and datasource. Note: the datasources in the example below were created previously and not default.

Modify Chart Data

Dots


Key Description Example
Show Line Connects the points
Color Colors the dots and line

Y Axes


Key Description Example
Data Key Property from data object whose values corresponds to the Y axis ranges return [{“temperature”:61,“humidity”:50,“wind”:14,“rainfall”:5,“timestamp”:“2016-06-22T02:26:14.368Z”}];
Label Name for the Y axis
Orientation Changes the side the Y axis is on
Time Format Allows to edit format of time and date
Top Padding Creates extra spacing for the graph on top
Bottom Padding Creates extra spacing for the graph on bottom
Show Standard Deviation Reference Lines Shows standard deviation bounds
Standard Deviations Number of standard deviations from the mean to render reference line
Line Label Name for the standard deviation line
Lower Bound Lowest number on Y-axis range
Upper Bound Highest number on Y-axis range
Auto Bounds If marked, the bounds will automatically adjust based on the data

X Axis


Key Description Example
Data Key Property from data object whose values corresponds to the X axis ranges {“dataKey”:“rainfall”}
Label Name for the X axis
Orientation Changes the side the X axis is on
Time Format Allows to edit format of time and date
Left Padding Creates extra spacing for the graph on the left
Right Padding Creates extra spacing for the graph on the right
Unit Type The type of unit used to scale data on the X axis. Graph will NOT appear in with “Number” if it is a string

Statistics

Key Description Example
Enable Statistics Displays button to open window for statistics about the graph. Note: Button is disabled while editing a widget.
Anomaly Detection Strictness Number of standard deviations used to calculate and detect anomalies

Other Tools

Key Description Example
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 chart fullscreen

Text

Creating new text

  1. Change the type to “Text”
    Change type
  2. Choose your data type and datasource (if using “Dynamic”).

Note

The datasources in the example below were created previously and not default.

Modify Data

The rest of the tabs are for editing the text itself

Style

Key Description Example
Font Family Type the font and the text will change to that font. Default is Helvetica Cursive:
Font Color Changes color of the text
Font Size Changes the size of the text

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

Button

Creating new button

  1. Change the type to “Button”
    Change type
  2. Choose your datasource (this is the only datatype option). Note: the datasources in the example below were created previously and not default.
    Modify Target

The rest of the tabs are for editing the button itself

Style

Key Description Example
Background color Changes color of the button
Background hover color Changes color of the button when the cursor is over it
Font color Changes the color of the text inside of the button
Border color Changes the color of the button’s outine

Other Tools

Key Description Example
Label Modifies button name
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

Input

Creating new input

  1. Change the type to “Input”
    Change type
  2. Choose your datatype and datasource (if using “Dynamic”) if you are doing a value. If you are doing a target, dynamic is the only datatype option. Note: the datasources in the example below were created previously and not default. Modify Target

HTML

This allows you the freedom to create in the widget

Use Static to create your own code or Dynamic to upload your code.

Note

Datasource is available by accessing this.datasource from the JS section

“Edit Static Data”:

Key Description Example
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

List

Creating a new list

Change the type to “List”
Change type

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

Choose your datatypes and datasources. Note: the datasources in the example below were created previously and not default. Modify Target

The rest of the tabs are for editing the list itself

Format

Key Description Example
Title Gives list a name
Tracking Column Name Gives the name of the column used to keep track of active list item
Default List Item Default items selected. Value determined by Tracking Column Name property

Style

Key Description Example
Title Changes color of the title
List Item Font Changes the color of the item name
List Item Background Changes the background color of the item
Active Item Font Changes the color of the active item’s name
Active Item Background Changes the color of the background of the active item

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

Toggle

Creating a new toggle

Change the type to “Toggle”
Change type

Value: Renders incoming data
Event Target (Dynamic Only ): Datasources in portal to be affected by action

Choose your datatypes and datasources. Note: the datasources in the example below were created previously and not default. Modify Target

The rest of the tabs are for editing the toggle itself

Labels

Key Description Example
On Label label for ‘true’ values
Off Label label for ‘false’ values

Style

Key Description Example
On Color Changes color for ‘true’ values
Off Color Changes color for ‘false’ values
Background Color Changes the background color of the toggle
Font Color Changes the color of the labels

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

Color Picker

This allows you the freedom to create in the widget

Use Static to create your own code or Dynamic to upload your code.

Other tools

Key Description Example
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

Grouping List

Creating a new grouping list

Change the type to “Grouping List”
Change type

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

Choose your datasources. Note: the datasources in the example below were created previously and not default. Modify Target

The rest of the tabs are for editing the list itself

Format

Key Description Example
Title Gives list a name
Display Attribute Type of property displayed for items in list
Status Attribute A property with a boolean value to create active/inactive icons
Default List Item Default items selected. Value determined by Tracking Column Name property
Allow Search Displays search bar to search a specific item

Groups

Items can be grouped by their properties

Style

Key Description Example
Title Changes color of the title
List Item Font Changes the color of the item name
List Item Background Changes the background color of the item
Active Item Font Changes the color of the active item’s name
Active Item Background Changes the color of the background of the active item

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

Filterable List

Creating a new filterable list

Change the type to “Filterable List”
Change type

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

Choose your datatypes and datasources. Note: the datasources in the example below were created previously and not default. Modify Target

The rest of the tabs are for editing the list itself

Format

Key Description Example
Title Gives list a name
Display Attribute Type of property displayed for items in list
Status Attribute A property with a boolean value to create active/inactive icons
Tracking Column Name Gives the name of the column used to keep track of active list item
Default List Item Default items selected. Value determined by Tracking Column Name property
Allow Search Displays search bar to search a specific item
Allow Filters Displays and choose filters

Style

Key Description Example
Title Changes color of the title
List Item Font Changes the color of the item name
List Item Background Changes the background color of the item
Active Item Font Changes the color of the active item’s name
Active Item Background Changes the color of the background of the active item

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

Json Editor

Data

Json assigns data to a label, whether from the collection or editing in the parser. Note: Data in the example have been previously created and is not default.

Other

Type Description Example
Read Only Does not allow you to save edits/Save button disappears
Save Button Color Changes the ‘Save’ button color
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

Form

Creating new form

Change the type to “Form”
Change type

Form Source : Renders incoming data from the form Submit Item : Datasources in portal to be affected by action

The only option available is ‘Calculated’. To edit what type of information is returned, click ‘Edit calculated data’.

Fields

Key Description Example
All read-only Makes all fields uneditable. It also removes the submit button
Name Internal name to use as a parser key last_name
Label Name of the item that will apear on the form
Data type Choose what type of data can be inputted into the form String:
Input type Choose what can be inputted based on data type Password:
Read only Make field uneditable
Required An error message appears when a required field is empty
Validation An error message when validation is not in a correct format
Error text Customize error message for validation
Default value Adds a default value to the field. * Note: Value can be overriden by using the parser
Help text Adds a help icon with text next to the field label
Placeholder Helper text that is shown in the field
Small text Subtext below field
Width Percent Changes the size of the field 100%:25%:
Order Changes the placement of the fields Last name = 2:
Hide label Hides the field label
Display Removes field completely if unchecked
Add field Adds another field to the form

Form Text

Key Description Example
Title Gives the form a title
Submit Text The text that appears on the submit button
No Data Text Appears when data is not returned in the parser
Success Text Appears on the left side of the page when form has been submitted
Display Attribute for Row Uses data returned from a key as a subtitle

Form Style

Key Description Example
Compact Mode Changes format to inline style
Hide Submit Button Removes submit button
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 when it’s set to ‘true’ if available
Button Group Color Changes the color of selected button outline if available
Type Ahead Color Changes the color of highlighted item for type ahead if available
Button Color Changes the color of the submit button

Form 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

Radial Gauge

Data

Type Description
Static Can type a plain text number to measure in gauge
Calculated A javaScript function not bound to any datasources
Dynamic A javaScript function that will be updated as the corresponding datasource gets updated
Min Value The minimum number for the gauge range
Max Value The maximum number for the gauge range

The rest of the tabs are for editing the gauge appearance

Style

Type Description Example
Progress Color Changes the color of the progress bar
Background Color The color of the gauge
Label Title for the gauge

Others

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

Speedometer

Data

Type Description
Static Can type a plain text number to measure in the meter
Calculated A javaScript function not bound to any datasources
Dynamic A javaScript function that will be updated as the corresponding datasource gets updated
Min Value The minimum number for the meter range
Max Value The maximum number for the meter range

The rest of the tabs are for editing the meter appearance

Sections

Click Add Section to add more sections. Hover over the bar data entry window to reveal the trash can for deletion.

Note

The percentages are not cumulative

Colors


This is used to give each section a fill color. Click Add Color to add more colors. Hover over colors to reveal the trash can for deletion.

Style

Type Description Example
Label Title for the meter
Label Color Changes the color of the label
Arrow Color The color of the arrow

Others

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

Google Maps

Data

The data on the map is default. To change locations go to ‘Edit Calculated Data’ Retrieve the API Key from your Google Maps account

Format

Key Description Example
Default Zoom Creates default size of the map when you see it in the pane @1:@10:
Default Center Default location of the map
Map Theme Get theme from Google Maps

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

Rule Builder

In the edit widget window

Type Description Example
Allow Create Allows users to define new rules within the widget
Allow Delete Allows users to delete rules
Allow Edit Allows users to modify rules by clicking on the rule and going to settings from there. The ‘Save’ button should appear
Allow On/Off Allows users to enable/disable rules within the widget
Name Rule builer label
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

Note: Make sure to save to add new rule

Add New Rule window

Note: The user needs code, roles, and trigger permissions before using this widget

Go to widget window and click Add New Rule

Type Setting
Data
Asset
User
Messaging
Device

Code

The final rule will appear in the ‘code’ tab in the console

CRUD Grid

CRUD Grid allows the end user to C reate, R ead, U pdate, and D elete elements in a Collection or given dataset.

Data

Data Description
Choose type of incoming data to render. Expected format:
Retrieve data from a datasource
Create the option to export items from the grid
Affects the ability to add items in the datasource
Affects the ability to delete items in the datasource
Affects the ability to edit items in the datasource
Create the option to highlight items in the grid

Capabilities

Key Description Example
Allow Create Users can add rows
Allow Delete Users can delete rows
Allow Update Users can edit rows. The changes that are made here are also made in the original datasource
Allow Filter Users can filter table
Allow Data Export Users can export table
Allow Search Users can search for a specific item
Allow Data Import Users can import table
Allow Column Sorting Sort items by column data
Allow Highlight Row Highlight items by clicking on them

Fields

Key Description Example
Get fields from datasource Retrieves column information from datasource
Name Internal name to use as a parser key item_id
Label Name of the column
Data Type Choose what type of data will be retrieved and shown Integer:
Input Type Choose how the data should be displayed Radial Gauge:
Read Only Field cannot be editable
Help Text Adds a help icon with text next to the field label
Small Text Subtext below field label
Width in pixels Changes the size of the field
Hide label Hides the field label
Display Hides field completely if checked
Add field Adds empty field

Style

Other

Key Description Example
Default sorting direction Orders fields in ascending or descending order
Hide Footer Shows page and count when unchecked
Rows per page Change the number of rows displayed
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