Page Comparison

...

1. Change the type to Bar Chart.

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

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

...

The rest of the tabs are for editing the graph itself.

Bars

...

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

...

1. Change the type to Line Chart.

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

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

...

The rest of the tabs are for editing the graph itself.

Lines

...

...

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

...

1. Change the type to Pie Chart.

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

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

...

The rest of the tabs are for editing the graph itself.

Chart

...

Change the graph’s margin measurements.

...

1. Change the type to Scatter Plot.

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

...

Dots

...

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

...

Creating new text

1. Change the type to Text.

2. Choose your data type and datasource (if using Dynamic).

...

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

...

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 it. The default is Helvetica	Cursive:
Font Color	Changes the text color
Font Size	Changes the text size

...

1. Change the type to Button.

2. Choose your datasource (this is the only datatype option). The datasources in the example below were created previously and not by default.

...

The rest of the tabs are for editing the button itself.

Style

...

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

Other Tools

...

Key	Description	Example
Label	Modifies the 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 the DOM’s widget elements	Add an ID to the page like this: <div id="myCustomHtmlId">some text </div> and write CSS like this: #myCustomHtmlId{ color: red }
Allow Fullscreen	Makes the widget fullscreen

...

Creating a new input

1. Change the type to Input.

2. Choose your datatype and datasource (if using dynamic) if you are doing a value. If

3. Dynamic is the only datatype option if you are doing a target, dynamic is the only datatype option. The datasources in the example below were created previously and not by default.

...

HTML

...

This allows you the freedom to create in the widget.

...

The rest of the tabs are for editing the list itself.

Format

...

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

...

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

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 the DOM’s widget elements	Add an ID to the page like this: <div id="myCustomHtmlId">some text </div> and write CSS like this: #myCustomHtmlId{ color: red }
Allow Fullscreen	Makes the widget fullscreen

...

Value: Renders incoming data.
Event Target (dynamic only): Portal datasources to be affected by an action.

Choose your datatypes and datasources. The datasources in the example below were created previously and not by default.

...

The rest of the tabs are for editing the toggle itself.

Labels

...

Key	Description	Example
On Label	True value label
Off Label	False value label

...

List Source (dynamic only): Renders incoming data.
Selected Item (dynamic only): Portal datasources to be affected by the action.

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

...

The rest of the tabs are for editing the list itself.

Format

...

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

...

List Source (dynamic only): Renders incoming data.
Selected Item (dynamic only): Portal datasources to be affected by an action.

Choose your datatypes and datasources. The datasources in the example below were created previously and not by default.

...

The rest of the tabs are for editing the list itself.

Format

...

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

...

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

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 the DOM’s widget elements	Add an ID to the page like this: <div id="myCustomHtmlId">some text </div> and write CSS like this: #myCustomHtmlId{ color: red }
Allow Fullscreen	Makes the widget fullscreen

...

1. Add a local variable datasource.

2. Add a 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. A parser error will display.

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

6. In the designated areas, fill in the datasource names that correspond to the bracket labels.

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

...

Radial Gauge

Data

...

...

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 them

...