Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Bubble Chart are useful for showing data in a three-dimensional manner. In a bubble chart, data points are depicted with bubbles. It is drawn with a data series that each contains a set of three values. A bubble chart is a form of scatter chart that has its data points replaced with bubbles. In ApexCharts, each bubble representation can be analyzed for the information it defines. With its scattered nature, the bubble chart can be used to depict many data points within the 3-D plane. Unlike a scatter chart which has two reference axes (X-axis and Y-axis), a bubble chart has a third axis incorporated (Z-axis) with it and this third numeric field controls the size of the data bubbles.
You can find a more in depth explanation about the bubble on this page: https://apexcharts.com/javascript-chart-demos/bubble-charts/
Properties of Bubble Chart
WEM Modeler has many widgets to enhance User Interaction.
For some (older) demos and documentation on existing widgets, you can visit widgets.live.wem.io.
A Box-plot chart is a visual representation displaying a given statistical data set based on a five-number summary: the minimum, the first quartile (25th percent), the median (second quartile), the third quartile (75th percent), and the maximum. Such charts are extremely useful for comparing distributions of values across categories. The Box-plot is also referred to as box plot, box-and-whisker plot, box-and-whisker diagram.These charts contain boxes and whiskers (vertical or horizontal lines that extend from the minimum to Quartile 1 and from Quartile 3 to the maximum).
You can find a more in depth explanation about the boxplot on page:
Map morphing is an interactive visualization technique that provides a user-controlled, animated translation from one map to another. Traditionally, overlay mechanisms are used to present layers of information over a single projection. Map morphing provides a way to relate maps with significant spatial and schematic differences.
You can find a more in-depth explanation about the map bar morph on page:
Properties of Map-Bar Morph
A Candlestick Chart (or Candle Chart) is a type of financial chart that describes the price changes of a security, derivative, or currency. Candlestick graphs and charts usually represent data as numerical values in vertical axes and compare the price movements across time, visualizing the open, high, low, and close values.
You can find a more in depth explanation about the candlestick chart on page:
Properties of Candle Stick Chart
A heat map is a data visualization technique that shows magnitude of a phenomenon as color in two dimensions. The variation in color may be by hue or intensity, giving obvious visual cues to the reader about how the phenomenon is clustered or varies over space.
You can find a more in depth explanation about the Heat map on page:
Properties of Heat Map
Property Name | Data Type | Type | Description |
---|---|---|---|
Property name | Data Type | Type | Description |
---|
Property Name | Data type | Type | Description |
---|
Data source
List
Data Model
Data list source for the widget.
X axis type
Text
Drop Down
Determines the type of X axis used.
X axis category
Text
Expression
Categories displayed on x-axis.
X axis date
Date
Expression
Date values displayed on x-axis.
Y axis value
Number
Expression
Values displayed on y-axis.
These are expected to be numeric values.
Bubble size
Number
Expression
This field corresponds to the size of the bubble.
These are expected to be numeric values.
Series
Text
Expression
This field is used to create different series from the same data source.
It's not required.
Series color
Text
Expression
This field is used to set the color of the series. If empty a random color will be selected.
Hexadecimal Colors format Ex.: "#2E93fA"
Logarithmic scale
Boolean
Expression
Change scale to logarithmic scale.
Use opposite scale
Boolean
Expression
Changes position of y axis values to the opposite position.
Max scale value
Number
Expression
Maximum value for the scale.
Min scale value
Number
Expression
Minimum value for the scale.
Tick scale amount
Number
Expression
Number of visual ticks for the scale on the axis.
Show tooltip
Boolean
Expression
Show tooltip. Use true or false.
Label decimals
Number
Expression
Set number of decimals displayed for y-axis values.
Theme
Text
Dropdown
Change the text and background colors of the chart.
Background color
Text
Expression
Change the background color of the chart. It's important to set the opacity with the color to show the gridlines.
Example:
"#FFFFFF60"
Grid lines vertical
Boolean
Expression
Display vertical grid lines.
Grid lines horizontal
Boolean
Expression
Display horizontal lines on the grid.
Grid lines color
Text
Expression
Change color of the lines on the grid.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
Legend font size
Number
Expression
Change font size of the legend.
Legend position
Text
Dropdown
Change position of the legend.
Fill type
Text
Dropdown
Change fill type of the chart.
Fill opacity
Number
Expression
Change the fill opacity of the chart.
From 0.00 to 1.00
Prefix
Text
Expression
Display a prefix for values on tooltip.
Postfix
Text
Expression
Display a postfix for values on tooltip.
ShowAnimation
Boolean
Expression
Display animation on render.
Height
Number
Expression
Set height of the chart.
Type number.
Width
Number
Expression
Set width of the chart.
Type number.
Data source | List | Data Model | Data list source for the widget. |
X Axis Category | Text | Expression | Categories displayed on x axis. |
Y Axis Value | Number | Expression | Values displayed on y axis. |
Custom Scale | Boolean | Expression | Change scale to a custom scale with custom properties. |
Opposite Scale | Boolean | Expression | Changes position of y axis values to the opposite position. |
Max Scale Value | Number | Expression | Maximum value for the scale. |
Min Scale Value | Number | Expression | Minimum value for the scale. |
Tick Amount | Number | Expression | Number of visual ticks for the scale. |
Show tooltip | Boolean | Expression | Show tooltip. Use true or false. |
Show x-axis tooltip | Boolean | Expression | Show x-axis tooltip. |
Show y-axis tooltip | Boolean | Expression | Show y-axis tooltip. |
Label decimals | Number | Expression | Set number of decimals displayed for y-axis values. |
Theme | Text | Drop Down | Change the text and background colours of the chart. |
Upper colour | Text | Expression | Upper colour for the boxplot chart. Hex or rgb/rgba colour. |
Lower color | Text | Expression | Lower colour for the boxplot chart. Hex or rgb/rgba color. |
Background color | Text | Expression | Change the background color of the chart. It's important to set the opacity with the color to show the gridlines. Examples: "#FFFFFF60" or "rgba(255, 255, 255, 0.6)". |
Display vertical grid lines | Boolean | Expression | Display vertical grid lines. |
Display horizontal grid lines | Boolean | Expression | Display horizontal grid lines. |
Property Name | Data type | Type | Description |
Data Source | List | Data model | Datalist source for the widget. |
Name | Text | Expression | The name of the map area where the value belongs to, such as 'China' or 'United Kingdom' or if map type is US the State name like "Alaska" or "Florida". |
Value | Number | Expression | The value associated with the name. |
Map | Text | Dropdown | Change map template. (World, US). |
Sort bar chart values | Boolean | Expression | This property orders the values by descending order. |
Reverse sort bar chart values | Boolean | Expression | If order values is true, this property changes the values order to ascending order. |
Initial view | Text | Dropdown | Set the initial view of the map, it could be first the map and after the bar, or bar and after the map. (Map, bar). |
Interval duration | Text | Expression | This is the time interval in which charts alternate. 0 means no animation. Time is set on milliseconds (1 second = 1000 milliseconds) |
Transition animation duration | Text | Expression | This is the time the transition animation takes to finish. |
Map high color | Text | Expression | Color for the higher values of the scale and map. |
Map middle color | Text | Expression | Color for the middle values of the scale and map. Leave empty if you only want 2 colors for the scale. |
Map low color | Text | Expression | Color for the lower values of the scale and map. |
Use map hover | Boolean | Expression | Allow mouse hover on the map. |
Map hover color | Text | Expression | Color when the mouse is over the map area. |
Use map hover label | Boolean | Expression | Add a label on hover. |
Map hover label fontcolor | Text | Expression | Change text color for the label. |
Map hover label fontsize | Number | Expression | Change text size for the label. |
Show map hover label background | Boolean | Expression | Add a background for the hover label. |
Bar chart color | Text | Expression | Color for the bars on the bar chart. |
Use bar chart hover | Boolean | Expression | Allow mouse hover on the bar chart. |
Bar chart hover color | Text | Expression | Color when the mouse is over a bar. |
Allow zoom on bar chart | Boolean | Expression | Adds zoom to the bar chart. |
Zoom bar chart slider | Boolean | Expression | Adds zoom slider to the bar chart. |
Zoom bar chart start | Number | Expression | Set the starting point for the zoom. This value is based on a percentile location (1-100) |
Zoom bar chart end | Number | Expression | Set the ending point for the zoom. This value is based on a percentile location (1-100) |
Height | Number | Expression | Set height of the chart. Type number. |
Width | Number | Expression | Set width of the chart. Type number. |
Data source | List | Data Model | Data list source for the widget. |
X axis date | Date | Expression | Date values displayed on x-axis. |
Y axis open | Number | Expression | Open price displayed on y-axis. |
Y axis high | Number | Expression | High price displayed on y-axis. |
Y axis low | Number | Expression | Low price displayed on y-axis. |
Y axis close | Number | Expression | Close price displayed on y-axis. |
Custom scale | Boolean |
| Change scale to a custom scale with custom properties. |
Use opposite scale | Boolean | Expression | Changes position of y axis values to the opposite position. |
Min scale value | Number | Expression | Minimum value for the scale. |
Max scale value | Number | Expression | Maximum value for the scale. |
Tick scale amount | Number | Expression | Number of visual ticks for the scale on the vertical axis. |
Show tooltip | Boolean | Expression | Show tooltip. Use true or false. |
X axis tooltip | Boolean | Expression | Show x-axis tooltip. |
Y axis tooltip | Boolean | Expression | Show y-axis tooltip. |
Label decimals | Number | Expression | Set number of decimals displayed for y-axis values. |
Theme | Text | Dropdown | Change the text and background colors of the chart. |
Upward color | Text | Expression | Upward color for the chart. |
Downward color | Text | Expression | Downward color for the chart. |
Background color | Text | Expression | Change the background color of the chart. It's important to set the opacity with the color to show the gridlines. Examples: "#FFFFFF60" or "rgba(255, 255, 255, 0.6)" |
Grid lines vertical | Boolean | Expression | Display vertical lines on the grid. |
Grid lines horizontal | Boolean | Expression | Display horizontal lines on the grid. |
Grid lines color | Text | Expression | Change color of the lines on the grid. Example: "#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)" |
Prefix | Text | Expression | Display a prefix for values on tooltip. |
Postfix | Text | Expression | Display a postfix for values on tooltip. |
Show animation | Boolean | Expression | Display animation on render. |
Height | Number | Expression | Set height of the chart. Type number. |
Width | Number | Expression | Set width of the chart. Type number. |
Property Name | Data type | Type | Description |
Data Source | List | Data model | List containing all labels, values and series. |
Value | Number | Expression | Set the value of the heat map. |
Label | Text | Expression | The label on the x axis. |
Series | Text | Expression | This field is used to create different groups from the same data source. The series are part of the y axis. |
Color | Text | Expression | Color of the item. Note that each series can only have a single color. The first color of an item part of the series will be used. |
Height | Number | Expression | Can be set to number, percentage of container or pixels. |
Brush chart allows users to constrain the results on their graph by choosing to Include or Exclude certain areas. This is a much more interactive filtering method, as the user defines what they want to see or remove by highlighting the particular area on their graph.
You can find a more in depth explanation about the brush on this page: https://apexcharts.com/javascript-chart-demos/line-charts/brush-chart/
Properties of Brush Chart
The Nested Pie Chart is a special type of chart that allows you to show symmetrical and asymmetrical tree structures in a consolidated pie-like structure. The chart is visualized as a series of concentric circles arranged like a pie. The circles are divided into segments that represent each of the data values; the ratio of each segment is determined by the corresponding data value. This chart can be used to show organizational structures, interlinked tree data (like friends of friends), category-wise sales break up, and so on.
You can find a more in depth explanation about the nested pie on this page: https://echarts.apache.org/examples/en/editor.html?c=pie-nest
Properties of Nested Pie Chart
A JavaScript Mixed Chart or a Combo Chart is a visualization that allows the combination of two or more distinct graphs. The features of each chart are retained on the mixed chart plot. Different scales of measure are present on the mixed chart and with this; it is an ideal plot for presenting data values that are usually difficult to combine because of the significant difference in value ranges. Generally, a combo chart makes it possible to view the relationship, differences, deviations, and anomalies between a different set of data by bringing them on a single plot.
You can find a more in depth explanation about the line, area and bar on this page:
Properties of Line & Bar Chart
Radial Bar Charts are valuable in showing comparisons between categories by using circularly shaped bars. Also known as the circular bar chart, it is simply a typical bar chart plot represented on a polar coordinate system. JavaScript Radial Bar Charts are drawn by fixing a unique radius for each bar representing each data and each bar is judged by its angle. In ApexCharts, data can be represented on a radial bar chart in the various formats such as multiple radial bar charts, radial bar with an image, and even in semi-circular gauge forms.
You can find a more in depth explanation about the radial bar gauge on this page: https://apexcharts.com/javascript-chart-demos/radialbar-charts/
Property Name | Data type | Type | Description |
---|---|---|---|
Card widget in flutter is a sheet of Material used to represent all the similar information in a single block in a compressed way, it is also possible to show results through some types of graphs, such as linear, area and bar graphs, any type of summary data projection.
You can find a more in depth explanation about the card with chart on this page: https://apexcharts.com/javascript-chart-demos/dashboards/modern/
Properties of Card
Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
This type of chart is often useful when we want to show a comparison data like a pie chart, but also show a scale of values for context.
You can find a more in depth explanation about the polar area on page:
Properties of Polar Area Chart
Mix time imeline charts illustrate events, in chronological order — for example the progress of a project, advertising campaign, acquisition process — in whatever unit of time the data was recorded — for example week, month, year, quarter.
You can find a more in depth explanation about the Mix Time Line on page:
Properties of Mix Time Line Chart
The Polar bar is similar to the polar bar area chart, but each segment has the same angle - the radius of the segment differs depending on the value. The way of its sets the labels´ information over the polar also is different.
This type of chart is often useful when we want to show comparison data and also show a scale of values for context.
You can find a more in-depth explanation about the polar bar on page:
Properties of Polar Bar Chart
Radial bar is simply a Bar Chart plotted on a polar coordinate system, rather than on a Cartesian one.
While they look cool, the problem with Radial Bar Charts is that the bar lengths can be misinterpreted. Each bar on the outside gets relatively longer to the last, even if they represent the same value.
You can find a more in depth explanation about the radial bar on page:
Properties of Radial Bar Chart
Rose type pie Chart, which was also called the nightingale chart, usually indicates categories by sector of the same radius but different radius.
ECharts can implement Rose Chart by defining series.roseType of pie chart to 'area'. All other configs are the same as a basic pie chart.
You can find a more in depth explanation about the rosetype pie on page:
Properties of Rosetype Pie Chart
A profit chart is a graphical representation of the relationship between the sales and profits of a business. The concept is especially useful for determining an organization’s breakeven point, where the sales level generates a profit of exactly zero.
You can find a more in depth explanation about the Profit on page:
Properties of Profit Chart
Scatter Chart uses dots to represent values for two different numeric variables. The position of each dot on the horizontal and vertical axis indicates values for an individual data point. Scatter plots are used to observe relationships between variables.
You can find a more in depth explanation about the scatter on page:
Properties of Scatter Chart
Sankey Diagram is a type of flow diagram that depicts the flow of resources (material, energy, cost, etc.) from one node to another. The start and endpoints of each flow are called nodes and the flow paths between them are called links. There can only be one link between a pair of nodes. The value of the flow between each pair of nodes is encoded by the width of the link. The coloration of the links help establishes visual mapping with their respective nodes.
You can find a more in depth explanation about the Sankey energy on page:
Properties of Sankey Energy Chart
Scatter Aggregate Bar Chart uses dots to represent values for two different numeric variables. The position of each dot on the horizontal and vertical axis indicates values for an individual data point. Scatter plots are used to observe relationships between variables. The aggregate bar, changes after a few moments and the values change to a bar, representing in a different visual way.
You can find a more in depth explanation about the scatter aggregate bar on page:
Properties of Scatter Aggregate Bar Chart
The conceptset image selector widget allows you to make a selection in a set of concepts. This works by using a multi-select field and shows the images added to the concept properties.
Behavior
Appearance
Note that when both 'Width' and 'Height' properties are not set, the widget will automatically determine the size.
Property Name | Datatype | Description |
---|
Property Name | Datatype | Description |
---|
Property Name | Datatype | Description |
---|
Property Name | Datatype | Description |
---|
Property Name | Datatype | Description |
---|
N°
Property Name
Data type
Description
1
Data source
List
Data Model
Source of the data list for the widget.
2
X axis category
Text
Expression
Text categories displayed on the x-axis.
3
Y axis values
Number
Expression
Numerical values displayed on the y-axis.
4
Series
Text
Expression
This field is used to create different series from the same data source.
It's not mandatory.
5
Show Animation
Boolean
Expression
Show render animation. use true or false
6
Y-Axis label position
Text
Dropdown
Sets the position of the Y axis values to the right or left.
(left(false), right(true)).
7
Custom scale
Boolean
Change the scale to a custom scale with custom properties.
8
Min scale value
Number
Expression
Minimum value for the scale.
9
Max scale value
Number
Expression
Maximum value for the scale.
10
Tick scale amount
Number
Expression
Number of visual marks for the scale.
11
Set initial scope
Boolean
Boolean to specify zoomed values of the chart.
12
Start scope value
Number
Expression
Initial value of the scope. It can be a number on the X axis (you use its number from left to right, starting at 1)
Examples:
If the X axis has 12 months and you want from June you use: 6
13
End scope value
Number
Expression
End value of the scope. It can be a number on the X axis (you use its number from left to right, starting at 1)
Examples:
If the X axis has 12 months and you want until December you use: 12
14
Height
Text
Expression
Height of the main graphic.
15
Width
Text
Expression
Width of the main chart.
16
Control chart height
Number
Expression
The height value of the lower graph (control).
17
Show tooltip
Boolean
Show tooltips.
18
Prefix
Text
Expression
Displays a prefix for values in tooltips.
19
Postfix
Text
Expression
Displays a suffix for values in tooltips.
20
Label decimals
Number
Expression
Set the number of decimal places displayed for y-axis values.
21
Show grid
Boolean
Boolean to display the grid options.
22
Grid lines vertical
Boolean
Expression
Show vertical lines in the grid. Use true or false.
23
Grid lines horizontal
Boolean
Expression
Show horizontal lines in the grid. use true or false
24
Grid lines color
Text
Expression
Change the color of the lines in the grid.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
25
Background color
Text
Expression
Change the background color of the chart.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
26
Theme
Text
Dropdown
Change the text and background colors of the chart. (Light, Dark).
27
Template
Text
Dropdown
A set of predefined color values for chart groups. (Palette1, Palette2, Palette3, Palette4, Palette5, Palette6, Palette7, Palette8, Palette9, Palette10).
28
Lines width
Number
Expression
Numerical value of the thickness of the lines within the graph.
29
Legend font size
Number
Expression
Change the font size of the legend.
30
Legend position
Text
Dropdown
Change the position of the legend. (Bottom, top, right, left).
Property Name
Data type
Type
Description
Data source
List
Data Model
Data list where the data is stored.
Label
Text
Expression
Labels for each of the values in the outer pie.
Value
Number
Expression
Values for the outer pie.
Chart Color
Text
Expression
Colors for the values in the outer pie.
Category
Text
Expression
The category is used as a label for the inner pie, The value for this is calculated automatically.
Category Color
Text
Expression
Defines the colors for each of the categories in the inner pie.
Inner Pie Name
Text
Expression
Defines the name of the inner pie chart. This name is used for the labels and the tooltips.
Outer Pie Name
Text
Expression
Defines the name of the outer pie chart. This name is used for the labels and the tooltips.
Show Value
Boolean
Expression
Determines if the value is shown on the tooltip label.
Value Prefix
Text
Expression
Set the prefix of the value.
Value Postfix
Text
Expression
Set the postfix of the value.
Show Percent
Boolean
Expression
Determines if the percent is shown on the tooltip label.
Percent Prefix
Text
Expression
Set the prefix of the percent.
Percent Postfix
Text
Expression
Set the postfix of the percent.
Height
Text
Expression
Sets the height of the element, accepts all the css height values.
default value: "500%"
Width
Text
Expression
Sets the width of the element, accepts all the css width values.
default value: "100%"
Inner Pie Start Radius
Number
Expression
Defines the start radius of the pie in percentages from 0-100.
Inner Pie End Radius
Number
Expression
Defines the end radius of the pie in percentages from 0-100.
Outer Pie Start Radius
Number
Expression
Defines the start radius of the pie in percentages from 0-100.
Default value: 45
Outer Pie End Radius
Number
Expression
Defines the end radius of the pie in percentages from 0-100.
Inner Font Size
Number
Expression
Font size for the labels of the inner pie
Default value:12
Outer Font Size
Number
Expression
Font size for the labels of the outer pie
Default value:12
Property Name
Data type
Type
Description
Data source
List
Data Model
Data list source for the widget.
X axis category
Text
Expression
Text categories displayed on x-axis.
Y axis value
Number
Expression
Numeric values displayed on y-axis.
Series
Text
Expression
This field is used to create different series from the same data source.
It's not required.
Series Color
Text
Expression
This field is used to set the colour of the series. If empty a random colour will be selected.
Logarithmic scale
Boolean
Expression
Change scale to logarithmic scale.
Custom scale
Boolean
Change scale to a custom scale with custom properties.
Use Opposite Scale
Boolean
Expression
Changes position of y axis values to the opposite position.
Max scale value
Number
Expression
Maximum value for the scale.
Min scale value
Number
Expression
Minimum value for the scale.
Tick scale amount
Number
Expression
Number of visual ticks for the scale.
Show tooltip
Boolean
Expression
Show tooltip. Use true or false.
Label decimals
Number
Expression
Set number of decimals displayed for y-axis values.
Theme
Text
Dropdown
Change the text and background colors of the chart.
Background color
Text
Expression
Change the background color of the chart. It's important to set the opacity with the color to show the gridlines.
Examples:
"#FFFFFF60" or "rgba(255, 255, 255, 0.6)".
Grid lines vertical
Boolean
Expression
Display vertical lines on the grid.
Grid lines horizontal
Boolean
Expression
Display horizontal lines on the grid.
Grid lines color
Text
Expression
hange color of the lines on the grid.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
Legend font size
Number
Expression
Change font size of the legend.
Legend position
Text
Dropdown
Change position of the legend. (Bottom, left, top, right).
Chart type
Text
Dropdown
Select a different type of chart. (Bar, line, area).
Fill type
Text
Dropdown
Change fill type of the chart. (Solid, gradient, pattern).
Fill opacity
Number
Expression
Change the fill opacity of the chart.
From 0.00 to 1.00
Prefix
Text
Expression
Display a prefix for values on tooltip.
Postfix
Text
Expression
Display a postfix for values on tooltip.
Show animation
Boolean
Expression
Display animation on render.
Height
Number
Expression
Set height of the chart.
Type number.
Width
Number
Expression
Set width of the chart.
Type number.
Property Name
Data type
Type
Description
Card title
Text
Expression
To set the title of the card.
Title style
Text
Dropdown
Defines the HTML Tag style for the title text. (H1, H2, H3, H4, H5, H6).
Subtitle
Text
Expression
To set the subtitle of the card.
Subtitle style.
Text
Dropdown
Defines the HTML Tag style for the subtitle text. (H1, H2, H3, H4, H5, H6).
Card content
Text
Expression
The content of the card.
Content style
Text
Dropdown
Defines the HTML Tag style for the subtitle text. (H1, H2, H3, H4, H5, H6).
Show chart
Boolean
Expression
To show or not, the chart in the card.
Chart position
Text
Dropdown
Determines the positioning of the chart in the card. (2 – right, -1 - left.)
Type
Text
Dropdown
Defines which graph type is displayed on the card. (Bar, line, area).
Data Source
List
Expression
The list of the data source.
Label
Text
Expression
Set the label of the list.
Value
Number
Expression
Set the value of the list.
Series name
Text
Expression
The series of the list.
Clickable
Boolean
If enabled the card will be a clickable object.
On click
Text
Dropdown
Defines the action to take after the user clicks the card. (Exit, flowchart, navigation, Refresh).
Exit
Button
To click the button of selected value.
Flowchart
Flowchart
Set the flowchart to the following card.
Navigation
Navigation item
Set the navigation to the following card.
Background color on hover
Text
Expression
Defines the background color change when hovering a card.
Works with:
Hexadecimal colors
Hexadecimal colors with transparency
RGB colors
RGBA colors
HSL colors
HSLA colors
Predefined/Cross-browser color names
Body padding
Number
Expression
Adds padding to the chart according to the number in pixels. (Default value = 0)
Border radius
Number
Expression
Sets a specific border radius for the rounded corners (Default is 0px for non-round corners)
Show Box shadow
Boolean
Expression
"Card" effect, makes it look like the card is floating.
true
Border Style
Text
Dropdown
he border-style property specifies what kind of border to display. (Solid, dotted, dashed, double, groove, ridge).
Border color
Text
Expression
The color can be set by:
name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
transparent
Border Width
Number
Expression
The width can be set as a specific number of pixels. Default value: 0(Set to 1 or higher for the border to appear)
Chart Color
Text
Expression
Defines the color of the Chart.
Only works when provided with either hex or rgb/rgba format. Color names are not supported.
Header background color
Text
Expression
Defines the background color of the header using CSS Legal Color Values. Works with: Hexadecimal colors
Hexadecimal colors with transparency
RGB colors
RGBA colors
HSL colors
HSLA colors
Predefined/Cross-browser color names
Body background color
Text
Expression
Defines the background color of the card body using CSS Legal Color Values.
Works with:
Hexadecimal colors
Hexadecimal colors with transparency
RGB colors
RGBA colors
HSL colors
HSLA colors
Predefined/Cross-browser color names
Title icon
Text
Expression
Uses the FontAwesome library Example:
"fa fa-info-circle"
size modifiers are not needed.
Title text color
Text
Expression
Defines the color of the title icon and text using CSS Legal Color Values. Works with: Hexadecimal colors
Hexadecimal colors with transparency
RGB colors
RGBA colors
HSL colors
HSLA colors
Predefined/Cross-browser color names
Title icon size
Text
Dropdown
Defines the size for the title icon using FontAwesome sizing modifier. (Fa-2x, Fa-xs, Fa-sm, Fa-lg, Fa-3x, Fa-4x).
Tooltip content
Text
Expression
Tooltip for the info icon, use it to describe the contents of the card. If no value is set the tooltip and its icon won't show up.
Tooltip icon
Text
Expression
Uses the FontAwesome library Example:
"fa fa-info-circle"(This is the default Icon used when undefined)
size modifiers are not needed.
Tooltip icon color
Text
Expression
Defines the color of the icon using CSS Legal Color Values. Works with: Hexadecimal colors
Hexadecimal colors with transparency
RGB colors
RGBA colors
HSL colors
HSLA colors
Predefined/Cross-browser color names
Tooltip icon size
Text
Dropdown
Defines the size for the tooltip icon using FontAwesome sizing modifier. (Fa-2x, Fa-xs, Fa-sm, Fa-lg, Fa-3x, Fa-4x).
Subtitle icon
Text
Expression
Uses the FontAwesome library Example:
"fa fa-info-circle"
size modifiers are not needed.
Subtitle icon color
Text
Expression
Defines the color of the icon using CSS Legal Color Values. Works with: Hexadecimal colors
Hexadecimal colors with transparency
RGB colors
RGBA colors
HSL colors
HSLA colors
Predefined/Cross-browser color names
Subtitle icon size
Text
Dropdown
Defines the size for the subtitle icon using FontAwesome sizing modifier. (Fa-2x, Fa-xs, Fa-sm, Fa-lg, Fa-3x, Fa-4x).
Property Name | Data type | Type | Description |
Data source | List | Data Model | Data list source for the widget. |
Label | Text | Expression | Labels to be used for each series |
Value | Number | Expression | Values to be used for each series. |
Chart Color | Text | Expression | Colors to be used for each series.
Only accepts either hex or rgb/rgba so make sure the datalist values are in one of these color formats. |
Height | Text | Expression | Can be set to auto, percentage of container or pixels.
Default is auto. |
Width | Text | Expression | Can be set to percentage of container or pixels. Examples:
"350" or "350px" or "50%" |
Show Scale | Boolean |
| Determines if a scale is shown. |
Show Grid | Boolean |
| Determines if the grid is shown. |
Grid color | Text | Expression | Defines the colour of the grid. You should only provide either hex or rgb/rgba format.
Example: "#fff" |
Show strokes | Boolean |
| Determines if strokes are shown. |
Stroke Color | Text | Expression | Defines the color of the stroke. You should only provide either hex or rgb/rgba format.
Example: "#fff" |
Show legend | Boolean |
| If true, it will show a legend explaining the data on the chart. |
Legend Position | Text | Dropdown | Determines the position of the legend. (Left, Top, Right, Bottom). |
Legend font size | Number | Expression | number of the fontsize in px.
default 16px |
Legend offset y | Number | Expression | Use for more specific positioning of the legend after using legend position.
Sets the top offset for legend container in pixels. can use negative or positive and depending on the number it may cause the legend to have clipping issues with the chart. (Default is 0). |
Legend offset x | Number | Expression | Use for more specific positioning of the legend after using legend position.
Sets the left offset for legend container in pixels. can use negative or positive and depending on the number it may cause the legend to have clipping issues with the chart.(default is 0). |
Property Name | Data type | Type | Description |
Data source | List | Data Model | The main datalist contains information about the series: X & Y values, series, years, series type and series color. |
Series | Text | Expression | Series or Categories of the datalist. These values will also be used as the legends. |
X axis category | Text | Expression | X axis values for the chart. |
Y axis value | Number | Expression | Numeric Y axis values for the chart. |
Years | Number | Expression | Years that will be used for the timeline. Each row of data needs one. |
Series type | Text | Expression | Type of chart to display for each series. It accepts values of: "bar" or "line" |
Series color | Text | Expression | The color of each series. It uses an rgba type or Hexadecimal type of color. For example: "rgba(255,0,0,0.5)" or "#FF0000". |
Play interval | Number | Expression | Amount of time (milliseconds) delay before each year change. 1000 = 1second. |
Auto play | Boolean | Expression | Transitions starts as soon as the page gets uploaded. |
Show grid lines | Boolean |
| To activate the grid lines of the chart. |
Show vertical grid lines | Boolean | Expression | To activate the vertical grid lines of the chart. |
Show horizontal grid lines | Boolean | Expression | To activate the horizontal grid lines of the chart. |
Show pie chart | Boolean |
| Adds a pie chart with the total of the series per year. |
Pie data source | List | Expression | Datalist that includes a row for each serie to show on the pie chart. |
Pie chart title | Text | Expression | Title for the tooltip that appears when the user hovers over the pie chart.| |
Pie chart series reference | Reference | Expression | A reference from the main data source which must point to the main chart series values. |
Pie horizontal position | Text | Expression | Horizontal Position for the Pie Chart(From left to right) in percentage values. |
Pie vertical position | Text | Expression | Vertical Position for the Pie Chart(From top to bottom) in percentage values. |
Pie radius | Text | Expression | Radius value for the Pie Chart in percentage values. |
Pie border color | Text | Expression | Color for the border of the pie chart. It uses an rgba type or Hexadecimal type of color. For example: "rgba(255,0,0,0.5)" or "#FF0000". |
Pie border width | Number | Expression | Numerical value for the border line width. |
Pie label legend position | Text | Dropdown | Set the position of the label in the pie. (inside, outside). |
Y axis units | Text | Expression | Y axis legend. |
Legend orientation | Text | Dropdown | Set the orientation of the legend. (Vertical, horizontal). |
Legend position | Text | Dropdown | Set the position of the legend. (Left. Center, Right). |
Width | Text | Expression | Width of the chart. It can be settle in px values ('500px') or percentages (100%). Default value is 100% |
Height | Text | Expression | Height of the chart. It can be settle in px values ('500px') or percentages (100%). Default value is 100%. |
Property Name | Data type | Type | Description |
Data source | List | Data model | A list of labels and values. |
Label | Text | Expression | Set the label of the polar bar chart. |
Value | Number | Expression | Set the values of the polar bar chart. |
Max value | Number | Expression | Bar values will be limited to the max value. |
Start angle | Number | Expression | to set the size of the start angle of the axis of the chart. |
Show labels | Boolean | Expression | Show or hide labels on top of the chart. |
Show animation | Boolean | Expression | To activate the animation of the label on the polar bar chart. |
Background color | Text | Expression | The background color, a hexadecimal number. |
Bar color | Text | Expression | The color of the bars, hexadecimal format. |
Height | Text | Expression | Set the height of the polar bar chart. The default value is “500 px”. |
Property Name | Data type | Type | Description |
Data source | List | Data Model | Datalist where the data is stored. |
Label | Text | Expression | To set the labels of the chart. |
Value | Number | Expression | To set the value of the chart. |
Chart color | Text | Expression | Colors to be used for each series. |
Height | Text | Expression | Can be set to auto, percentage of container or pixels. |
Width | Text | Expression | Can be set to percentage of container or pixels. |
Angle style | Text | Dropdown | Defines the angle style for the radialbar (Full, Half, Half inverse, 3 Quarters). |
Show legend | Boolean | Expression | If true, it will show a legend explaining the data on the chart. |
Legend position | Text | Dropdown | Determines the position of the legend. (Left, right, top, bottom). |
Legend font size | Number | Expression | number of the fontsize in px.
default 16px |
Legend offset y | Number | Expression | Use for more specific positioning of the legend after using legend position.
Sets the top offset for legend container in pixels. can use negative or positive and depending on the number it may cause the legend to have clipping issues with the chart. (Default is 0) |
Legend offset x | Number | Expression | Use for more specific positioning of the legend after using legend position.
Sets the left offset for legend container in pixels. can use negative or positive and depending on the number it may cause the legend to have clipping issues with the chart. (default is 0) |
Hollow size | Number | Expression | Percentage of the chart that is the hollow section. (Default 30%) |
Data label font size | Number | Expression | Defines the fontsize of the labels that appear when hovering a given track. may cause clipping if too big. number of the fontsize in px.
default 16px |
Property Name | Data type | Type | Description |
Data Source | List | Data Model | Datalist where the data is stored. |
Label | Text | Expression | Labels for each of the values in the outer pie. |
Value | Number | Expression | Values for the outer pie. |
Chart color | Text | Expression | Colors for the values in the pie. |
Pie name (tooltip) | Text | Expression | Defines the name of the pie chart. This name is used for the labels and the tooltips. |
Show value (tooltip) | Boolean | Expression | Determines if the value is shown on the tooltip label. |
Value prefix (tooltip) | Text | Expression | Set the value of the prefix. |
Show percent (tooltip) | Boolean | Expression | Determines if the percent is shown on the tooltip label. |
Percent Prefix | Text | Expression | Set the percent prefix. |
Set the percent postfix. | Text | Expression | Set the percent postfix. |
Height | Text | Expression | Sets the height of the element, accepts all the css height values.
default value: "500%". |
Width | Text | Expression | Sets the width of the element, accepts all the css width values. |
Pie starts radius | Number | Expression | Defines the start radius of the pie in percentages from 0-100. |
Pie end radius | Number | Expression | Defines the end radius of the pie in percentages from 0-100. |
Font size | Number | Expression | Font size for the labels of the pie
Default value:12 |
Rosetype style | Text | Expression | Which type of rosetype value presentation the chart will use
Radius: Uses central angle to show the percentage of data, radius to show data size.
Area: All the sectors will share the same central angle; the data size is shown only through radiuses. (Radius, Area). |
Property Name | Data type | Type | Description |
Series | List | Data Model | The main data list that contains information of each label, its name, value and color. |
Profit name | Text | Expression | The name of each label. These names will also be used as the legends of the chart. |
From values | Number | Expression | The initial value of each profit. |
To values | Number | Expression | The last value of each profit. |
Profit value | Number | Expression | Numeric value (profit) for each label. |
Label color | Text | Expression | The color of each label. It uses an rgba type or Hexadecimal type of color. For example: "rgba(255,0,0,0.5)" or "#FF0000". |
Width | Text | Expression | Width of the chart. It can be settled in px values ('500px') or percentages (100%). Default value is 100% |
Height | Text | Expression | Height of the chart. It can be settled in px values ('500px') or percentages (100%). Default value is 100% |
Show label value | Boolean | Expression | Display the profit value of each bar. |
Label legend position | Text | Dropdown | Position of the values for the labels of the chart. (Inside, left, right, top, bottom) |
Background color | Text | Expression | Color for the background of the chart. This widget uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'. |
Border color | Text | Expression | Color for the border of the labels. This widget uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'. |
Border width | Numeric | Expression | Numeric value for the border width of the labels. |
From tooltip text | Text | Expression | Text shown for the "From" tooltip values. |
To tooltip text | Text | Expression | Text shown for the "To" tooltip values. |
Profit tooltip text | Text | Expression | Text shown for the "Profit" tooltip values. |
Property Name | Data type | Type | Description |
Data source | List | Data Model | Data list source for the widget. |
X axis type | Text | Dropdown | Determines the type of X axis used. |
X axis category | Text | Expression | Categories displayed on x-axis. |
X axis date | Date | Expression | Date values displayed on x-axis. |
Y axis value | Number | Expression | Values displayed on y-axis. These are expected to be numeric values. |
Series | Text | Expression | This field is used to create different series from the same data source. It's not required. |
Series color | Text | Expression | This field is used to set the color of the series. If empty a random color will be selected. Hexadecimal Colors format Ex.: "#2E93fA" |
Logarithmic scale | Boolean | Expression | Change scale to logarithmic scale. |
Custom scale | Boolean |
| Change scale to a custom scale with custom properties. |
Use opposite scale | Boolean | Expression | Changes position of y axis values to the opposite position. |
Max scale value | Number | Expression | Maximum value for the scale. |
Min scale value | Number | Expression | Minimum value for the scale. |
Tick scale amount | Number | Expression | Number of visual ticks for the scale on the vertical axis. |
Marker size | Number | Expression | Size of the marker point (dot). Default: 5 |
Show tooltip | Boolean | Expression | Show tooltip. Use true or false. |
X axis tooltip | Boolean | Expression | Show x-axis tooltip. |
Label decimals | Number | Expression | Set number of decimals displayed for y-axis values. |
Theme | Text | Dropdown | Change the text and background colors of the chart. (Light, dark). |
Background color | Text | Expression | Change the background color of the chart. It's important to set the opacity with the color to show the gridlines. Examples: "#FFFFFF60" or "rgba(255, 255, 255, 0.6)" |
Display vertical grid lines | Boolean | Expression | Display vertical grid lines. |
Display horizontal grid lines | Boolean | Expression | Display horizontal lines on the grid. |
Grid lines color | Text | Expression | Change color of the lines on the grid. Example: "#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)" |
Legend font size | Number | Expression | Change font size of the legend. |
Legend position | Text | Dropdown | Change position of the legend. (Bottom, top, left, right). |
Fill type | Text | Dropdown | Change fill type of the chart. (Solid, gradient, pattern). |
Fill opacity | Number | Expression | Change the fill opacity of the chart. From 0.00 to 1.00 |
Prefix | Text | Expression | Display a prefix for values on tooltip. |
Postfix | Text | Expression | Display a postfix for values on tooltip. |
Show animation | Boolean | Expression | Display animation on render. |
Height | Number | Expression | Set height of the chart. Type number. |
Width | Number | Expression | Set width of the chart. Type number. |
Property Name | Data type | Type | Description |
Data source | List | Data Model | Data list source for the widget. |
Node | Text | Expression | The name of nodes or labels of the chart. |
Node colors | Text | Expression | Colour for each node (You can use hexadecimal '#FF000' or 'rgba(255,0,0)' values. |
Source | Text | Expression | Initial Node (name) to start a link or connection. |
Target | Text | Expression | Final node (name) to stablish where the link ends. |
Value | Number | Expression | Value of the link or connection. |
Chart orientation. | Text | Dropdown | Chart orientation. (Horizontal, vertical). |
Width | Text | Expression | Width of the chart. It can be settled in px values ('500px') or percentages (100%). Default value is 100% |
Height | Text | Expression | Height of the chart. It can be settled in px values ('500px') or percentages (100%). Default value is 100% |
Custom padding | Boolean |
| Adds padding properties to customize the chart. |
Top padding | Number | Expression | To set the padding of the top. |
Left padding | Number | Expression | To set the padding of the left. |
Right padding | Number | Expression | To set the padding of the right. |
Bottom padding | Number | Expression | To set the padding of the bottom. |
Nodes align | Text | Dropdown | Alignment or flow direction of the nodes. (Left, Right, Justify). |
Hover focus | Text | Dropdown | What part of the series the chart focus on when the user hovers the mouse over the chart. (None, self, series, adjacency). |
Monochromatic | Boolean |
| Displays the chart with a single colour. |
Main color | Text | Expression | Single color for the whole chart. It uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'. |
Background color | Text | Expression | Background color for the chart. It uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'. |
Label legend position | Text | Dropdown | Where to display the legend of each label. (Top, bottom, left, right, inside). |
Label legend color | Text | Expression | Color for the labels legend. It uses Hexadecimal values (#FFF) or rgba values: 'rgba(255,0,0,0.6)'. |
Label legend size | Number | Expression | Numeric value for the label's legend size. |
Curveness | Number | Expression | The amount of curveness used in the links of the chart. (Values from 0 to 1) |
Text field | Data field, Text | Data field to store the selected color. The widget returns a hexadecimal color value. This value includes a leading number sign (#). For example: "#366dbf". |
On change | Dropdown | When the user selects a color one of the following events can be triggered:
|
Follow exit/ Execute flowchart | Exit/ Flowchart | The exit that should be used or the flowchart that should be triggered by the on chance action |
Property Name | Data type | Type | Description |
Data source | List | Data Model | Data list source for the widget. |
X axis value | Number | Expression | Values for the x axis. |
Y axis value | Number | Expression | Values for the y axis. |
Series | Text | Expression | This field is used to create different series from the same data source. |
Series color | Text | Expression | Colors for the series. |
Show value | Boolean | Expression | Determines if the value is shown on the tooltip label. |
Y value prefix | Text | Expression | Display a prefix for Y values on tooltip. |
Y value postfix | Text | Expression | Display a postfix for Y values on tooltip. |
X value prefix | Text | Expression | Display a prefix for X values on tooltip. |
Y value prefix | Text | Expression | Display a prefix for Y values on tooltip. |
Value separator | Text | Expression | Value separator for the X and Y value in the scatter chart tooltip. (Default is a comma) |
Average to X | Boolean | Expression | By default, the bar chart uses the average of Y values, this setting changes it to use the average of X values. |
Transition animation duration | Number | Expression | This is the time interval that dictates how long the animation lasts. Time is set on milliseconds (1 second = 1000 milliseconds) |
Interval duration | Number | Expression | This is the time interval in which charts alternate. Time is set on milliseconds (1 second = 1000 milliseconds) |
Height | Number | Expression | Sets the height of the element, accepts all the css height values. |
Width | Number | Expression | Sets the width of the element, accepts all the css width values. |
Label decimals | Number | Expression | Number of decimals for all label numbers. |
Scatter chart symbols | Text | Dropdown | Different options for the symbols that are used to show the datapoints in the scatter chart. (Cirle, rect, roundrect, triangle, diamond, pin). |
Concept set field | multi select, datafield | This widget uses a set of concepts. A toggle option with image is displayed for each concept of the provided concept set. The user can select one or more concepts of the 'multi select' datafield. |
Image | image, expression | Provide the image for each option of the multi select (concept set). |
Label | text, expression | Provide the label text for each option of the multi select (concept set). |
Refresh screen | dropdown | When 'Yes' the screen will be refreshed after toggling one of the options. |
Label position | dropdown | Display the label text above or below the image. |
Background color | dropdown | Changes the label background color of selected concepts using Bootstrap contexts such as "success", "warning" and "danger". |
Width | number | Changes the width of each option in pixels (both image and label). |
Height | number | Changes the height of each option in pixels (only image). By default the height is based on the provided image and selected width (keeping aspect ratio). |
Label
Text
Expression
Data display in the radial bar
Value
Number
Expression
Values display in radial bar
Chart Color
Text
Expression
Color for the charted value.
Only accepts either hex or rgb/rgba so make sure the datalist values are in one of these color formats
Show track
Boolean
Expression
Determines whether a track is used to show the full scale of the chart.
Track color
Text
Expression
Background color for the track.
Only accepts either hex or rgb/rgba so make sure the datalist values are in one of these color formats.
Height
Text
Expression
Can be set to auto, percentage of container or pixels. Default is auto.
Examples: "350" or "350px" or "50%" or "auto".
Width
Text
Expression
Can be set to percentage of container or pixels. Examples: "350" or "350px" or "50%".
Arc style
Text
Dropdown
Defines the arc style for the radialbar. (Full, half, half inverse, gap).
Hollow size
Number
Expression
Percentage of the chart that is the hollow section. (Default 30%)
Data label font size
Number
Expression
Sets the fontsize in px (default 16) of the label displayed in the chart. May cause clipping if too big.
Stroke width
Number
Expression
Determines the width of each stroke. The higher the number the thicker the stroke but less strokes will appear.
No strokes (full-filled) will appear at 0.
Default value: 0
In a step-line chart, points are connected by horizontal and vertical line segments, looking like steps of a staircase. Step line charts are used when it is necessary to highlight the irregularity of changes: for example, when changes in tax rates or interest rates are visualized.
You can find a more in depth explanation about the stepline on this page: https://apexcharts.com/docs/chart-types/line-chart/
Properties of Stepline Chart
A Treemap data visualization technique is used to display hierarchical data using nested rectangles; the treemap chart is created based on this technique of data visualization.
The treemap chart is used for representing hierarchical data in a tree-like structure. Data, organized as branches and sub-branches, are represented using rectangles, the dimensions and plot colors of which are calculated.
You can find a more in depth explanation about the treemap on this page: https://apexcharts.com/docs/options/plotoptions/treemap/
Properties of Tree Map Chart
The multi-file upload widget allows you to upload multiple files of different file types simultaneously, facilitating the addition of a list of files to the WEM project. The widget first packages the files into JSON, which can then be imported into your application.
In the image above, you can see the widget as shown on the client side of your project. It consists of a large drop-off field and a select file button. This opens a standard upload file explorer window.
The process begins with the interaction node, here the widget is displayed for the user. The first step is adding an exit that the widget can utilize for the processing and establishing a text field to store the uploaded information until all files are incorporated into the database.
Unlike some other widgets, this one has a few important steps before you can use it. This widget turns the uploaded files into JSON that needs to be handled after the upload. After creating the interaction and adding the widget, you need a process to add the files to your database.
Initially, we proceed by finalizing the datalist and fields employed by the widget. In the accompanying image, you observe the creation of a list named "files," comprising, at a minimum, the "file" field, and optionally, the "name" field and the "New File" boolean field (defaulting to true). Upon file upload, it is assigned a generic name by default, generated by WEM; however, this can be replaced with the original file name, as demonstrated in the image below.
All necessary fields are now created and we finish the process of handling the documents and storing them in the files list. This is done with the import JSON node, and optionally extended with a loop to replace the generic WEM names. In the image below you can see how we set up the Import JSON definition:
The files list used in the image above is the same list we made earlier with the name field and file field from that list. This will add a new row for each file uploaded and store the original name in the name field.
It is important to keep the name of the objects you map to your fields as name
and blob
, otherwise this will not work properly.
After adding a save node to the flow all files are saved in your datamodel and can be handled further for any use case you can think of.
Extra: Depicted in the initial flowchart image, there is a loop featuring the "rename file" and assignment node. The loop is configured to iterate over each row where the "New File" field is true, and within the loop, this field is set to false. The "rename file" operation utilizes the "name" field from the "Files" list as the New Name property, and the File field from the same list serves as the File output.
Following this, by incorporating a save node and interacting with a data grid associated with the "files" list, immediate visualization of the results becomes possible.
The Stacked Columns Chart shows the contribution to trends in the data. This is done by stacking lines on top of each other. Stacked Line charts are used with data that can be placed in an order, from low to high. The charts are used when you have more than one data column that all adds up to the total trend.
You can find a more in depth explanation about the stacked column on this page: https://apexcharts.com/javascript-chart-demos/column-charts/stacked/
Properties of Stacked Columns Chart
The process arrow steps widget shows a set of completed and uncompleted 'steps' based on a concept set. This widget is to show a progress in your interaction flow and should be handled as a informational panel not buttons or tabs.
These values are a CSS (hexadecimal), color code or keyword. Hexadecimal values require a leading number sign (#). RGB(A) colors are also allowed. Examples: "#366dbf", "#ff0000", "rgba(0,0,0,0.5)", "black" or "red"
Shows one icon (marker) on a Google Map, based on a latitude and longitude value. This widget does not provide travel information and does not support multiple markers, it simply displays one location on a map. For travel information you can use the 'Google Maps - Directions' widget. To display multiple markers you can use the 'Google Maps - Markermap' widget. Demonstrations of both widgets are coming soon.
This widget requires a API key to function, you can find API keys more about API keys on: this page.
This widget shows a set of options displayed as buttons based on a concept set, allowing a single button to be active (single select). This widget provides a excelent way to make filters that can only have one option selected and using the dynamic labels.
*Example usage: The 'data field' of example 1 allows the user to select one of three options {Turquoise, Emerald and Peter River}. Using a smaller 'Options' concept set {Turquoise, Emerald} makes it possible to limit the number of options. In this example the user is not able to select the option Peter River.
This widget can be used to automatically follow a button exit after a provided period of time, for example to redirect to another interaction node.
Properties
Property | Datatype | Description |
---|---|---|
Similar to the 'rate' widget. However, this widget is view only and does not require a datafield. It cannot be used to change values and is just a visual representation of its score. The widget uses files as for the active and inactive icons, you can find the files used in the image below here.
Icons should have an equal width and height. Make sure to use icons of the same size for the 'Icon' and 'Icon dimmed' properties.
With this widget you can get an “explorer”-like tree view to control your application content, you use the "Tree" Widget . The Tree Widget can be seen as a clickable table of contents (TOC) with a mother-child structure. When you click on a tree item, the corresponding content appears. When a tree item contains sub-items (children), it can be unfolded and folded by clicking on the item.
Main features of the widget
Stores and displays mother-child relations in a "explorer"-like tree view
Fold and unfold tree items with children
Stores a selected tree item in a temporary data field (data type = Reference), so you can use it as a pointer
Property | Type | Description |
---|---|---|
In this example we show how to set up a simple tree view in an interaction node. The tree will have a steps before you can properly use them. This tree will consist of folder items and attachments shown with different icons in the tree. The tree becomes powerful when you have it automated more but this example will show a simple set up.
The first step is the datamodel.
Add for the different tree items the different icons. In this case "Icon folder" and "Icon WEM". Icons of 16 by 16 px work best.
Add a concept called tree types, and add a icon property to the concept. When that is done you can add the "folder" and "attachment" concept with the right icon as property.
Now we get to the datamodel here you make a list for the tree items and a session field reference to the datamodel list with tree items. When this is done you add the following fields to the Tree items list:
Parent ID (reference to this list)
ICON (file)
Label (text)
NumChildren (number)
Rootnode (boolean)
Type (concept set Tree types)
Next up is making the flowcharts and add the interaction nodes.
Make a flowchart where we are going to set up the tree view.
Add a Tree main interaction node, this is where we are going to show the tree.
Add an exit for to add items, remove items and one to edit the items.
Now we add a list node that adds a row to the tree data lists made in the previous steps, and connect the add item exit from the main interaction node.
We will also add a interaction overlay node for editing items, a decision node that chooses a icon and a list node to delete items not wanted anymore.
Connect everything up like in the image below:
Next step is setting up the tree view and the screens in the interaction node.
We begin with the main interaction node with first the tree widget, a data grid with the tree items to visualize what we do and a button to add items.
Match the data-list items to the three widgets properties and set the behavior on refresh screen.
Set the data-grid with all fields
The buttons uses the add item as exit.
At last add a save button with a exit that goes back to the main interaction node with the tree widget and add a save node if you want save the items to the database.
Start preview add items to your tree and see the result
If you want to use calendar or date and time functionality within you applications you can use different calendar widgets depending on the desired functionality. WEM offers a calendar, agenda and timeline widget.
The Calendar widget can be used when you need a date selection picker as a start of your functionality. The Calendar widget displays a graphical view of a calendar and stores the selected date to use in your application. The Calendar widget also indicates if there are records stored on a date.
Minimal required properties:
Selected Date, should be a valid date-field from Data model (not from a list) AND must be initialized as it determines the first month to display and day to highlight;
List of events with at least one date field, to determine whether a day should be highlighted and active;
The date-field in the Events list to match the day on calendar with.
We are going to explain the use of the Calendar widget by using an example. In this example we are going to create a simple to do list for a day. When a user clicks on a date in the calendar widget, a to do list appears.
Before you start you will have to prepare 2 items:
The widget needs a database list that contains at least 1 date field (data type = Date)
A temporary date field (date type = Date) to store the selected date.
Note: the temporary date field must be outside the database list of the widget! Be sure that the temporary date field is initially filled with a value (for example the current date).
Create a database list and temporary field
Create a database list To do
with two fields:
Date (Date type = Date)
To do (Date type = Text)
The database list should look something like this:
Next create a temporary field. Put a single data field with the name “Selected date” and data type Date
outside of the To Do list so it is a temporary/transient field.
Open the flowchart editor and drag and drop a blue interaction node on the canvas, name it “Calendar”, to set an initial date for the temporary field we are going to use a green assigment node
in our flowchart. Drag and drop a green assigment node
(or the selected date field) on the canvas between the start and interaction node. Next select the temporary “Selected date” field and change the node property action into Advanced
and use the Date function Today()
as the operand.
Double click on the user interaction
node to open the template editor
. Before placing the Calendar
widget in the template, first place a adaptive column on the canvas. This is for layout reasons, because we also want to place a datagrid next to the calendar later on.
Now place the Calendar widget in the left column.
Select the Calendar
widget by clicking it once. Now you can configure the all the Calendar properties:
First connect the database list to the widget. Click on the Event list
property in the Properties
pane on the right side of the screen. Select the database list “To do” (or drag the list to the property).
Next select the date field in the database list by clicking on Event date
. Select the “Date” field from the “To do” database list.
Next select the Selected date (by user)
property. This is the property that stores the selected date from the widget. Select the temporary field “Selected date”.
Change the On click action
property into “Refresh screen”
Click on preview to check your calendar.
Now we are going to display and manage the To Do activities on a selected date.
First we are going to show only the To Do activities for the selected date by filtering the database list:
Double click on the “Calendar” user interaction
node to open the template editor
Select the “To Do” database list and place the datagrid in the right column.
Create a new filter on the datagrid by right clicking the filters folder and selecting new filter and enter the filtername: “Selected date”
Enter the following filter condition: [ToDo.Date] = [Selected date]
Add the filter to the datagrid.
Next we are going to create new To Do activities for the selected date:
Drag and drop the To do list
node on the canvas and select add row.
Open the Calendar interaction node and add a button in the top right column. Name the exit “Add To Do”
Connect the green list
node to the “Calendar” user interaction
node and select the “Add To Do” exit
Drag and drop the Date field to after the add row list
node, select the assignment option, set the property action to “Advanced” and select the temporary field “Selected date” as the operand
Drag and drop a user interaction
node and create an entry form for the database list “To Do”. You can show it as an overlay and set the overlay title as an expression: “To Do for”+” “+[Temp.Selected date]
You can finish the entry form with two exit buttons (Cancel and Save) and show them in the button bar. Connect the button exits to a Save
and Discard all changes
node
The result should look something like this:
The Gridwidget is a very dynamic widget for creating a table or grid in you interaction node. This widget can be used for overview planner in a hr application, show availability for specific products, keep track of projects and a lot more. The widget works as a table with columns and rows and a grid that exist of coordinates made of a reference to the row and column. This gives you a lot of flexibility and adaptability in what is shown as rows or columns dependent on user for example. The downside of this flexibility is that this widget is not the easiest to set up. In the image below you can see a mock-up of a planner.
moet ik hier de button exit of flowchart exit als prperty echt toevoegen? onnodiglange table. flink kan je hier een comment achter laten ben nieuwsgierig wat jij vindt.
In this tutorial, we will explore the grid widget. The use case will be used to walk you through every step to get a basic version of the widget in use.
In the this case, the widget is used as an office planner and work location scheduler. As the rows, we want a list of employees, and we want to see the days of a month for the columns. The best way to decide what you want as a row or column is to consider the number of cells; from 10 to about 30 entries will easily fit as columns, everything above or below that can work better as rows.
For cell information, we want to use colors to show details like availability and work location. In this case, we don't want too much information in the cells. When using colors you typically don't want additional text in the cells, it can keep the planner easier to read. The best way to start using this widget is first setting up the data model, followed by building the flowchart and the pages and Setting up the widget itself is one of the last steps.
This widget requires at least three data lists to function properly. Images of the results can be found at the end of this list.
To set the columns, we require a list—in this case, simply named 'columns' with the following fields:
Day (numeric field)
Day of week (tekst field)
For the rows, we want to use our employees with the fields:
Name (tekst)
(optional) Department (single-select)
The last list is for keeping track of the cells and needs at least the following fields:
ColumnRef (reference to the columns list)
EmployeeReef (reference to the employee list)
Content (text field)
Optionally:
Cell Color (text)
Date (datetime)
ToolTip (text)
Cell text color (text)
Cell background color (text)
There are also a few transient/session fields needed to keep track of selected information:
ColumnRef to keep track of the selected cell column (reference)
EmployeeRef to keep track of the selected cell row
ClickedOffset to keep track of the amount of selected cells, together with the Reference fields tells you wich cells are selected. (number)
Inputdate for the selected start date or current date (datetime)
We will also be using a counter (number field) to keep track of a number of loops for making the columns for example.
How you handle the data and prepare the lists used in the widget is depends on your use case. There are two main options: either you specifically prepare the data every time the grid is shown, or you prepare and update the data whenever the underlying data changes. If the grid changes multiple times every day, it is worthwhile to have the planner calculate up-to-date data each time. This helps in keeping the main lists small. If you have a planner that doesn't change much or shows most of its data every time, it can be worthwhile to keep it always ready and avoid recalculating it.
In this example case, we will have the data calculated every time the planner is shown. However, this may not be the best approach for your specific case. This is not a real planner in use and is made as an example case not to be used 1:1.
The employees are already added to the system. In this case, we have 8 employees and a name for each employee. These will be the 8 rows of our grid. It is important to start with the row and column lists, as that will enable us to use the references for the grid-cell list. Creating the columns is going to be more interesting. Since the maximum number of days in any month is 31, we will need to create at least 31 columns. For shorter months, we will use a filter to always show the correct number of columns depending on the displayed month. We will use a counter to keep track of the days we added and for each loop we do we fill in the number for the day in the month and the "day in week" field. You can see what this looks like in the images below, along with the expression used to find the Day of the week.
With the columns and row lists created and filled in, we now have everything we need to make the cell content flow. The functionality of this flow depends on the source of the data, how the grid is built up/prepared, and what you want it to display. In this example, we fill the content of the cells with random information use a straight forward way of filling the cell content but will still show the functionality.
When building this flow, it is important to consider what your data represents and identify the key information around which the other lists revolve. In this case we have a list of employees with each a different schedule and planning, the other axis is a lot of days that are the same for every employee depending on the month. This means it is more convenient to go through the planning for each employee before moving on to the next one because we can use the same flow for each employee. While it can be done the other way around, this approach is more logical and easier.
In the first node, you can see that we have the Employees list that we loop through, performing an action for every column cell in that row. If you don't want to show all information in the widget, you can use filters on these loops to avoid setting up unnecessary data. Additionally, you can reuse the same filters for the grid widget. Image 1.7 shows a Random Number assignment, which is used to generate differentiated mock data for the widget. Alternatively, you can use a 'go to row' that utilizes a combination of the date and employee to find the specific schedule information for that employee. With the next multi-assignment node from the image, you can then fill in the fields of the Grid-content list. Below, you find Img 1.8, showing the assignment node. Here, you can see the Column Ref and Employee Ref set to the current row, representing the 'coordinates' of the cell.
In this scenario, we utilize a random number generated earlier to determine the type of cell content to display, with an exception for weekends where we opt for a specific set of content. The expression below illustrates how we establish the colors for each cell.
We have one flowchart remaining—the main widget flowchart. This flowchart prepares the data and includes the interaction screen with the widget. Initially, there's a sub-flowchart named 'CleanUp,' designed to remove old data in the cells and columns list used by the widget. Subsequently, we incorporate the flowcharts we created as sub-flowcharts: first, the one for columns and optionally rows (in this case, we already have employees). This is followed by the Grid Content flow and concludes with an interaction node.
Now, we can finally begin using the actual widget, setting up its properties, and designing the interaction screen. For this demo, we will create and configure the widget and also establish a legend. The design of the page around it is entirely open to your imagination.
To start, add a panel with the header enabled. Here, include a table with one row and 12 cells/columns, each with the following sizes from left to right: 20px, 100px, 180px, 5px, 180px, 5px, 180px, 5px, 180px, Unknown/empty, 180px, 180px. After adding labels for each color and updating the cell columns, it will look like this:
Columns: in this field we want to let the widget know how many columns we want to show, as this is not always all the 31 rows we are going make a filter to only show the columns needed for the current month. (There are 2 locations you can use this filter, in the column field or as filter on the columns loop in image 1.5/2.2 & 1.7) In this filter we use the Inputdate to calculate the amount of columns needed in the current month and drag the filter to the columns field.
Column label: Show the day number as the label of the column using the expression ToString([Gridwidget.Columns.Day])
.
Column Highlighting: Use datepart(Now(), day) = [Gridwidget.Columns.Day]
to highlight the current date.
We set Use extra column label on true, and use [
Day of week]
columns list as label.
Rows: Use the [Empoyee]
list with
[Employee.Name]
as row label.
Content: If we only have the cell content for the current month created you can put the whole list [Gridcontent]
in this field, otherwise you can use a filter to show the content for this month, for example.
Cell Content: Use the field [gridcontent.Content]
for the text you want to display in a cell. leave it empty (""
) to have no text content. The Cell content cannot be empty; however, the tooltip can for the tooltip you can use
[gridcontent.tooltip]
.
Cell column reference: Here you place the Gridcontent's reference to the column field; [gridcontent.ColumnRef]
Cell row reference: Here you place the Gridcontent's reference to the row field [gridcontent.RowRef]
Cell Backgroundcolor: [Gridcontent.CellColor]
Allow multiselect of cells: Set to True initially, even if multiselect is not desired. This allows filling in the required field [ClickedOffset]
. You can then disable multiselect.
Clicked cell column reference: Use ColumnRef outside of the list. It's a transient field used to keep track of a clicked cell for the current session only.
Clicked cell row reference: Use RowRef outside of the list. It's a transient field used to keep track of a clicked cell for the current session only.
The actions taken when a cell or row is clicked can be customized, for example, to show an overlay with date information or employee details, execute a flowchart, navigate to a specific item or refresh the screen.
Note: This is a basic use case, and most customization options are untouched. The way you use these properties allows you to make the grid responsive and can be tailored to your specific environment. These settings are optional, and the widget can be used with the configurations outlined in this guide. Feel free to explore the Appearance properties listed earlier to discover additional customization possibilities.
In the resulting image, you can observe a dynamic grid showcasing employee schedules and work locations. The left side features rows with employee names, while the top displays the abbreviated day names and day numbers of the month, spanning 31 columns representing January.
The cells are color-coded, with blue indicating office presence, green for working from home, and orange for being out of the office. Weekends are elegantly highlighted in grey. This grid serves as a versatile tool, ideal for applications such as HR planning, product availability tracking, and project management.
The accompanying panel header includes a legend, clarifying the meanings behind each color. This visual representation is a testament to the flexibility and adaptability of the Gridwidget, capable of meeting diverse needs in various contexts.
Allows users to listen to audio files in a interaction this can be a file they upload or a file set up by the developer.
Properties
Property | Data Type | Description |
---|
A user can use this widget to draw a signature (or basically anything else) on a canvas. The widget generates an image and stores it in a datafield<file>. All other widget properties have default values and may be left blank.
Properties
Property | DataType | Description |
---|
Behavior
Appearance
Property | Datatype | Description |
---|---|---|
Property | Datatype | Description |
---|---|---|
Property | Type | Description |
---|---|---|
Property Name | Data Type | Description |
---|---|---|
Property Name | Data Type | Description |
---|---|---|
Property Name | Data Type | Description |
---|---|---|
Properties | Datatype | Description |
---|---|---|
Properties | Datatype | Description |
---|---|---|
Properties | Datatype | Description |
---|---|---|
Property | Type | Description |
---|---|---|
Property | Type | Description |
---|---|---|
Property | Type | Description |
---|---|---|
Property | Type | Description |
---|---|---|
Property | Type | Description |
---|---|---|
Set up the second interaction node as a overlay with a form for all writable fields found in the tree data-list except the icon as that is filled in the flowchart. This means the label, number of children, Root node, parent id (set the option label to the label field from this list, and the type. Like this:
Property | Datatype | Description |
---|
Property | Datatype | Description |
---|
Property | Datatype | Description |
---|
Property | Datatype | Description | Required |
---|
Property | Datatype | Description | Required |
---|
Most of the following properties are to set a color, for widgets most css color notations are accepted for example rgb(a), hexadecimal, hsl, and text. For a list of named colors you can visit .
Property | Datatype | Description | Required |
---|
Now, add the widget to the panel body, located in the widget library 'widget' and named . Once placed, you'll receive an alert prompting you to fill in the required properties. Fortunately, we've already completed most of the other work, so we have almost all the necessary properties ready.
Properties | Datatype | Description |
---|
Properties | Datatype | Description |
---|
Property | Data Type | Description |
---|
Property | Data Type | Description |
---|
Property Name
Data type
Type
Description
Data source
List
Data Model
Data list source for the widget.
X axis category
Text
Expression
Text categories displayed on x-axis.
Y axis value
Number
Expression
Numeric values displayed on y-axis.
Series
Text
Expression
This field is used to create different groups from the same data source.
It's not required.
Custom scale
Boolean
Change scale to a custom scale with custom properties.
Opposite scale
Boolean
Expression
Changes position of y axis values to the opposite position. (Use true or false)
Min scale value
Number
Expression
Minimum value for the scale.
Max scale value
Number
Expression
Maximum value for the scale.
Tick scale amount
Number
Expression
Number of visual ticks for the scale on the vertical axis.
Show markers
Boolean
Boolean expression to show dots at multiple points in the chart.
Marker size
Number
Expression
The size of each marker on the chart.
Marker shape
Text
Dropdown
The shape of the markers. (circle, rect, square).
Marker colors
Text
Expression
The main color of the markers.
Marker stroke colors
Text
Expression
Color for the perimeter of the marker.
Marker stroke width
Number
Expression
Numeric amount for the width of the perimeter line that wraps up the marker.
Height
Text
Expression
Can be set to auto, percentage of container or pixels.
Width
Text
Expression
Can be set to a percentage of container or pixels.
Tooltip
Boolean
Expression
Enables tooltip, shows details of the info when you hover over it.
Label Decimals
Number
Expression
Set number of decimals displayed for y-axis values.
Theme
Text
Dropdown
Change the text and background colors of the chart. (light, dark).
Template
Text
Dropdown
A set of predefined color values for the chart groups. (palette1, palette2, palette3, palette4, palette5, palette6, palette7, palette8).
Lines Width
Number
Expression
Width/thickness of the lines of the chart.
Back ground color
Number
Expression
hange the background color of the chart.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
Show Grid
Boolean
Boolean to activate grid lines options.
Grid lines horizontal
Boolean
Expression
Display horizontal lines on the grid. (use true or false).
Grid lines vertical
Boolean
Expression
Display vertical lines on the grid. (use true or false).
Grid lines color
Text
Expression
Display vertical lines on the grid.
Legend Size
Number
Expression
Change color of the lines on the grid.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
Legend font Size
Number
Expression
Change font size of the legend.
Legend Position
Text
Dropdown
Change position of the legend. (bottom, top, left, right).
Prefix
Text
Expression
Display a prefix for values on tooltip.
Postfix
Text
Expression
Display a postfix for values on tooltip.
Show Animation
Display animation on render. (True or false)
Property Name
Data type
Type
Description
Data source
List
Data Model
Data list source for the widget.
Series
Text
Expression
This field is used to create different groups from the same data source.
Categories
Text
Expression
This field is used to create different groups by series values.
Values
Number
Expression
The values of the chart.
Chart Title Size
Text
Dropdown
To set the size of the font for the title. (H1, H2, H3, H4, H5).
Chart Title
Text
Expression
To set the title of the chart.
Height
Number
Expression
Can be set to number, percentage of container or pixels.
Width
Number
Expression
Can be set to number, percentage of container or pixels.
Prefix
Text
Expression
Display a prefix for values on tooltip.
Postfix
Text
Expression
Display a postfix for values on tooltip.
Label Decimals
Number
Expression
Set number of decimals displayed.
Tick Amounts
Number
Expression
Number of visual ticks for the scale on the vertical axis.
jsonFIlesOutput
Text field
In this field the Json in which the files are stored until handled
UploadExit
Dropdown
Exit used for the processing of the JSON file created by the widget
AllowedExtension
Text
List all allowed extensions separated by commas. Leave empty to allow everything. Example: "png, jpeg, jpg"
FileMaxSizeMB
Number
Maximum allowed file size in MB
Wrong File Extension Error Message
Text
Error returned when the extension is not in the allowedextension field.
Wrong File Size Error Message
Text
Error returned when the filesize is bigger then the maximum allowed file size.
Property Name
Data type
Type
Description
Data source
List
Data Model
Data list source for the widget.
Series
Text
Expression
This field is used to create
different groups from the
same data source.
It's not required.
Categories
Text
Expression
To set the categories of the chart.
Values
Number
Expression
Values to be used for each
series.
Horizontal
Boolean
To set or not in horizontal form., (yes, no).
Height
Number
Expression
Set height of the chart.
Type number.
Value Prefix
Text
Expression
To set the value of the prefix.
Value Postfix
Text
Expression
To set the value of the postfix.
Tool Tip Prefix
Text
Expression
To set the prefix of the tooltip.
Tool Tip Postfix
Text
Expression
To set the postfix of the tooltip.
Show Data Labels
Boolean
Expression
Display the labels on
render.
Label Decimals
Number
Expression
To set the quantity of decimals of the labels.
Data field
datafield, number
Change this value using the star rating widget. The value of this datafield should always be between one and the maximum number of stars displayed by the rating widget.
Max starts
number
The maximum amount of start displayed by the widget. only values from 3 up to 20 are allowed.
On change
dropdown
When the user clicks on a star (changing the datafield value), the following actions can be performed: do nothing, refresh screen or execute flowchart.
Execute flowchart
flowchart
Execute the provided flowchart when the user changes the value of the star rating widget. Only visible when 'On change ' is set to 'Execute flowchart'.
Steps
Expression, concept set
Use a concept set as source for this widget. An arrow will be displayed for each concept of the concept set (left to right).
Current step
datafield, concept
This property is used to display one of the provided steps (concepts) as 'active 'or 'current' step. It's possible to change the appearance of the current step. The example above shows a green current step.
Last completed step
datafield, conceptconcept
This step and all previous steps are marked as 'completed'. Completed steps show an icon, which can be changed using the 'Completed icon ' property. By default all completed steps show a checkmark.
Step visible when
Expression, boolean
This widget loops through all steps of the provided 'Steps' concept set, displaying an arrow for each step. It is possible to skip (don't show) certain steps with this property. For example the value "concept <> 'Steps'.'Done'" will hide the last step of the example above.
Step Action
Flowchart
All completed steps are clickable when using this property. On click the provided flowchart will be executed. Can be used to allow a user to visit or change previous (completed) steps.
Completed icon
text
Changes the icon of completed steps. This value is a font-awesome icon classname. For example: "fa fa-check" or "fa fa-check-square". Visit http://fontawesome.io/icons/ for more information about these icons and their classnames.
Step label
Expression, text
by default each step displays its concept name. Otherwise you can use this property to display a custom label for each step (concept).
Before current step bg color
text
Changes the background color of each step before the current one. In the example above all steps before the current step are displayed dark-blue.
Before current step font color
text
Changes the font color (text and icon) of each step before the current one.
Before current step hover bg color
text
Changes the on hover background color of each step before the current one.
Before current step hover font color
text
Changes the on hover font color (text and icon) of each step before the current one. See the example above.
Current step bg color
text
Changes the background color of the current step. In the example above the current step is displayed green.
Current step font color
text
Changes the font color (text and icon) of the current step.
After current step bg color
text
Changes the background color of each step after the current one. In the example above all steps after the current step are displayed light-grey.
After current step font color
text
Changes the font color (text and icon) of each step after the current one.
Gap bg color
text
Changes the color of the white-space between all steps.
Latitude
number, datafield
The latitude of a location: a coordinate that specifies the north–south position of the location on the map.
Longitude
number, datafield
The longitude of a location: a coordinate that specifies the east-west position of the location on the map.
Api Key
Text, expression
The Google API key (required). You can find more about the google maps API's here: Link
Auto locate
dropdown, boolean
When set to 'Yes': try to pinpoint the (GPS) location of the user when either the property 'Latitude ' or 'Longitude ' is unknown. Otherwise a default location is used (Amsterdam).
Map type
text, expression
Google Maps supports the following map types:
"roadmap" displays the default road map view. This is the default map type.
"satellite" displays Google Earth satellite images
"hybrid" displays a mixture of normal and satellite views
"terrain" displays a physical map based on terrain information.
Zoom
dropdown, boolean
Set the default zoom level of the map.
Responsive
text, expression
When set to 'No': allows you to provide the width of the map in pixels. The width remains the same on smaller screen sizes. When set to 'Yes': the width of the map is as large as possible and changes on smaller screen sizes.
Width
number
Set the width of the map in pixels. Only visible when 'Responsive <dropdown, boolean>' is set to No. A large width may cause the map to be not entirely visible on small screen sizes.
Height
number
Set the height of the map in pixels. The height of the map remains the same on all devices and screen sizes.
Marker icon
Image
Display an image instead of using the default red marker icon.
Data field
datafield, boolean
Use the on/off switch to change the value of this datafield (boolean)
On change
dropdown
When the user switches the on/off button, the following actions can be performed: do nothing, refresh screen or execute flowchart.
Animation time (ms)
number
The duration of the animation in milliseconds when switching between on and off. Minimum value: 0. Maximum value: 500.
On text
expression, text
Display this text when the switch is 'on'. A long text value results in a large on/off switch
Off text
Expression, text
Display this text when the switch is 'off'. A long text value results in a large on/off switch.
Data field
datafield, single select concept
The concept that holds the options information. It displays the selected options and all other options allowing the user to make options selected or unselected.
Filter
boolean, expression
Can be used to filter the options (concepts).
On change
dropdown
When the user clicks on a button to either select or unselect that option, the following actions can be performed: do nothing, refresh screen or execute flowchart.
Execute flowchart
flowchart
Execute the provided flowchart when the user clicks on one of the options. Only visible when 'On change ' is set to 'Execute flowchart'.
Orientation
dropdown
Display the buttons either horizontal or vertical.
Label
text, expression
Changes the button text. By default it displays the concept's name.
Badge
number, expression
Display a number immediately after the button label. Example 1 shows a random number after each label.
Justified
dropdown, boolean
Make the buttons as wide as possible. Only visible when using a horizontal orientation.
Data field
datafield, single select
This widget shows buttons for each available option (concept). It displays the selected option and all other options allowing the user to change the selected option.
Options
concept set
Can be used to filter options (concepts) of 'data field', but is ignored when the provided concept set is empty. This widget does not show an option of the property 'data field' when it is not part of the provided concept set in this property.
On change
dropdown
When the user clicks on an option (changing the datafield value), the following actions can be performed: do nothing, refresh screen or execute flowchart.
Execute flowchart
flowchart
Execute the provided flowchart when the user clicks on one of the options. Only visible when 'On change ' is set to 'Execute flowchart'.
Label
text, expression
Changes the button text. By default it displays the concept's name.
Image
Image
Use an image as button label instead of using text.
Badge
Number, expression
Display the buttons either horizontal or vertical. The option 'Buttons horizontal' is deprecated and should be ignored.
Orientation
Dropdown
Display the buttons either horizontal or vertical. The option buttons horizontal is deprecated and should be ignored.
Justified
Dropdown, boolean
Make the buttons as wide as possible. Only visible when using a horizontal orientation.
Data item
datafield, number
Changing the slider changes the number of this data field. However, at this moment it is not possible to perform an on change action.
Minimum
number
The lowest allowed value of the slider.
Maximum
number
The highest allowed value of the slider.
Step
number
Determines the size or amount of each step the slider takes between the minimum and maximum
Precision
number
Determines the number of digits after the decimal place.
Enabled
boolean
When 'false' the user is not allowed to change the slider value.
Selection Placement
dropdown
Changes the look of the space before or after the handle. See the difference between example 1 (before) and 2 (after). When set to 'none', both sides of the handle look the same.
Orientation
dropdown
Determines whether the slider handle move horizontally or vertically.
Reversed
dropdown
By default the slider works from minimum to maximum value (example 1). When set to 'Yes' the slider works from maximum to minimum (example 2 and 4).
Handle shape
dropdown
Changes the slider handle shape. Accepted values: round, square, triangle or custom. At this moment 'custom' shows a star.
Tooltip shown
dropdown
'Show': show a tooltip on mouse-hover only (example 1)
'Hide': never show a tooltip (example 2 and 3)
'Always': always show a tooltip (example 4)
Tooltip separator
not applicable
deprecated
Split Tooltip
not applicable
deprecated
Stars
Expression, number
Number of marked starts, the rating of the item in question.
Max stars
Number
Maximum rating amount, this represents the amount of score options.
Icon size
Number
The width and height of the provided Icons in pixels. (1 number)
Icon
Image
Execute the provided flowchart when the user changes the value of the star rating widget.
Icon dimmed
Image
The image used to display the set of inactive stars.
Source
Data Model, list
Source is a data model list. It can be also temporary data model list. All the necessary tree information (such as display labels and parent-child relationships) must be stored in this list.
Selected Item
Data model, reference
The Selected Item is a reference field to the source data model list, indicating the currently selected item. Each click in the tree will place the clicked element in this field.
Icon
Expression, Image or concept
This is an optional property that allows the standard folder icons to be changed to other images. You can use an image or an ontology item to change the icon image.
Label text
Expression, text
Label text is the expression that indicates what the view in the tree should be. This will in most cases be a text field in the source data model list, but you can possibly enrich the expression with other related fields.
Parent id
Expression, number
Data list field of the database list (Source) that contains the reference to the parent id of the current tree item. This field must be of data type = Reference. This field is a reference to a record in the same data list (Source).
Root nodes
Expression, boolean
Logical value (true or false) to determine if the current tree item is a root node (has no parents). For example: you can use a function IsEmpty(Treelist.ParentID) to determine if the current tree item has a parent. If true, then the current tree item is a root node
Has children
Expression, boolean
Logical value (true or false) to determine if the current tree item has children. For example: you can use an expression to determine the number of children, [Treelist.CountChildren] > 0. If true, the tree item is preceded with a plus sign [+] to indicate that the tree item has children and can be unfolded.
On select
dropdown
Refresh screen, Execute flowchart, Follow exit
Flowchart
flowchart
Choose what flowchart should be executed on selection.
Events list | List, Required | The source list containing dates of events. Can be empty (no data) but should exist with at least one date-field. |
Event date | Date, Datafield | The field in the event list containing the date to match with the Calendar display. |
Event background color | Text, Expression | Color code for day that has Events in the List. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "info". |
Event text color | Text, Expression | Changes the color of the event-text. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "info". |
Event is disabled | Boolean, Expression | When day has events, day is disabled. Default false |
Selected date | Date, Datafield | The date that is selected by User, when clicked on date in calendar. MUST be initialised PRIOR to showing widget, as it determines the month to be displayed. |
On click | Dropdown | When the user clicks a date, the following actions can be performed: do nothing, execute flowchart, follow button exit, refresh screen, follow navigation item. |
Action button exit | Button Exit | Provide a button exit when the property 'On click' is set to 'follow exit'. |
Action flowchart | Flowchart | Provide a flowchart when the property 'On click' is set to 'execute flowchart'. |
Action navigation item | Navigation item | Provide a navigation item when the property 'On click' is set to 'follow navigation item'. |
Disable all | Boolean, Expression | Disable click action for all days without events. |
Disable past days | Boolean, Expression | Disable click action for days in past. Default false. |
Disable future days | Boolean, Expression | Disable click action for days in future. Default false. |
Disable weekends | Boolean, Expression | Disable click action for weekend days. Default false. |
Selected date background color | Text, Expression | Background color of selected date. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "primary" |
Selected date text color | Text, Expression | Color of the selected date text. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "primary" |
Today highlight color | Text, Expression | Highlighting color for today's date. Either use a bootstrap context such as "success", "danger", "info" or "warning". Or a CSS color value, for example: "red", "#ff0000" or "rgba(255,0,0,0.80)". Default: "primary" |
Max width (in pixels) | Number, Expression | Max width of the calendar in pixels. Default: 480. |
Columns | List | The list for the columns. The reference to rows in this list is one of the "coordinates" used for the cells. Tip: You can use a filter to make it more dynamic. |
Column label | text, expression | Main label used above every column. |
Use extra column label | boolean, toggle | Allow a second label text above the main label. Adds a extra property to the widget. |
*Extra column label | text, expression | The text of the extra label above the main label of every column. |
Column is highlighted when | Boolean, expression | Allows for highlighting specific columns. |
Rows | List | The list for the rows. The reference to items in this list is one of the "coordinates" used for the cells. Tip: You can use a filter to make it more dynamic. |
Row label | Text, Expression | Label shown on the left of the grid for each row. |
Row title | Text, Expression | Tooltip content shown when hovering over a row label |
Row group name | Text, Expression | Used for grouping rows together. See image 1.2 on this page, brand is used as grouping. Rows with the same group name are put together. |
Row is highlighted when | Boolean, Expression | Allows for highlighting specific rows. The highlight of the row overrides the column highlight, column labels keep column highlight. |
Content | List | List for information and the references of the cell's. In this list you bring the row and column information together and allows data for each cell to exist. |
Cell content | Text, Expression | Text shown in the specific cell's. This can be more dynamic when using expressions. |
Cell tooltip | Text, Expression | Text shown when hovering over a cell with content. |
Cell Column reference | Reference, Field | Reference for the cell's column, this is one part of the cell coordinates. Together with the row reference is the location of the cell in the grid. |
Cell row reference | Reference, Field | Reference for the cell's row, this is one part of the cell coordinates. Together with the column reference is the location of the cell in the grid. |
Cell text color | Text, Expression | Color of text inside a cell with text content and in the content list. |
Cell background color | Text, Expression | Color of a cell in the content list. |
Allow multiselect of cells | Boolean, toggle | Enables ability to select multiple cell's at once. |
*Clicked cell offset (multiselect) | Number, field | Field in which the offset of a multi-selection is saved. The offset is amount of cells from the first selected. When this number is 5, and the first cell is number 5 the cells 5, 6, 7, 8, 9 are selected. |
Clicked cell column reference | Reference, field | Field to store Reference to clicked Column at the moment of clicking a cell |
Clicked cell row reference | Reference, field | Field to store Reference to clicked Row at the moment of clicking a cell or row label |
On cell click action | Dropdown | Action taken when a cell is clicked on. |
On cell double click action | Dropdown | Action taken when a cell is double clicked. |
On row click action | Dropdown | Action taken when a row label is clicked. |
Cell content text align | Dropdown | Change the position of text inside cells. |
Cell border color | Text, expression | Color of the border of cells. |
Cell padding (number in pixels) | Number | Amount of pixels padding around the content label. This also increases the size of the column and row. Default is 6 |
Cell min width (number in pixels) | Number | Minimum width a cell can be in pixels. This also increases the column width. |
Cell hover background color | Text, expression | Color of a cell when the mouse hovers over it. |
Cell hover text color | Text, expression | Color of the text content in a cell when the mouse hovers over the cell. |
Cell multiselect background color | Text, expression | Color of cells when multiple cells are selected. |
Cell multiselect text color | Text, expression | Color of text content in cells when multiple cells are selected. |
Enable alphabetical sorting of rows | Boolean, Toggle | Reorders rows in alphabetical order using the first letter of a row label |
Allow newlines | Boolean, Toggle | Allows a column that gets to wide to use a newline and make higher two line rows. |
Make row heading always visible | Boolean, Toggle | Make row label bold and more visible. |
Row label width (number in pixels) | Number | Width of the row label in pixels. |
Column highlighted background color | Text, expression | Color of the column highlight property. |
Column highlighted text color | Text, expression | Color of the text inside highlighted columns. |
Row highlighted background color | Text, expression | Color of the row highlight property. |
Row highlighted text color | Text, expression | Color of the text inside highlighted rows. |
Override border color when highlighted | Boolean, expression | Options to let the color of the border of highlighted cells change with the highlight. On default the border color is kept on highlight. |
Image | datafield, file | The user can edit the provided image or upload a new image or webcam snapshot that will be stored here. This should be a datafield from your datamodel with the type file. |
Width | number | The width of the output image in pixels. |
Height | number | The height of the output image in pixels. |
Webcam not supported message | text | The user will be notified with this message when taking a webcam snapshot is not available. |
Maintain aspect ratio | Boolean | Maintain the aspect ratio of 'width' and 'height' when the width changes because of responsive design. |
Background color | Text, Expression | Changes the background color of the output image. By default this value is set to "white". This value is a CSS (hexadecimal) color code or keyword. Hexadecimal values require a leading number sign (#). RGB(A) colors are also allowed. Examples: "#366dbf", "#ff0000", "rgba(0,0,0,0.5)", "black" or "red". |
Border color | Text, Expression | Changes the border color of the signature widget. The border is not included in the output image. This value is a CSS (hexadecimal) color code or keyword. Hexadecimal values require a leading number sign (#). RGB(A) colors are also allowed. Examples: "#366dbf", "#ff0000", "rgba(0,0,0,0.5)", "black" or "red". |
Clear-button context | dropdown, Bootstrap context | Changes the context of the clear button using bootstrap color contexts, such as "success" and "danger". |
Clear-button size | Dropdown | The clear button can either be: extra small, small, normal or large. |
Clear-button text | Text, Expression | Changes the text on the clear button. By default this value is set to "Clear". |
Clear-button full widt | Boolean | When true: this property makes sure that the clear button has the same width as the canvas. By default this value is false. |
Height | Number, Expression | The height of the canvas in pixels. The default value is 300. The height may change on smaller screens when 'Maintain aspect ratio ' is true. Otherwise the height will remain the same on all devices. |
Width | Number, Expression | The width of the canvas in pixels. The default value is 600. Note that the width will never be larger than the width of its container. Therefore, the canvas width may be smaller on devices with smaller screens. |
Minimal stroke width | Number, Expression | This widget simulates 'pen presure' by changing stroke width. By default the minimal stroke width is 0.5, allowing thin lines when drawing fast. |
Maximum stroke width | Number, Expression | Defines the maximum stroke width of the signature. By default the maximum stroke width is 2.5, 5 times thicker than the minimum stroke width. |
Stroke color | Text, Expression | By default a user can draw a black signature. Use this property to change the pen color. This value is a CSS (hexadecimal) color code or keyword. Hexadecimal values require a leading number sign (#). RGB(A) colors are also allowed. Examples: "#366dbf", "#ff0000", "rgba(0,0,0,0.5)", "black" or "red". |
How to use the reCAPTCHA widget
Google reCAPTCHA is a free service that protects your website from spam and abuse. reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site. It does this while letting your valid users pass through with ease.
reCAPTCHA offers more than just spam protection. Every time our CAPTCHAs are solved, that human effort helps digitize text, annotate images, and build machine learning datasets. This in turn helps preserve books, improve maps, and solve hard AI problems.
reCaptcha works in three steps:
The widget is rendered. The widget contains a public “site key” that can be generated for a specific url. This site key can be generated on the Google reCAPTCHA site.
The user clicks on the checkbox to confirm that he/she is not a robot. The browser will communicate with google and a response code is generated and stored in a data field. This response code confirms that the user is indeed not a robot. The user can proceed with whatever he/she was doing, now that it is verified he/she is not a robot.
The wem runtime server can verify with google that the response code is valid. This step is strictly not necessary, but it is strongly advised to do this. The validation is done by using a HTTP request node. The request contains the response code, the “secret key” and the client IP address. The response is a JSON message.
You can find more information about Google reCAPTCHA on their introduction page.
Before you start, get your site key and secret key from the Google reCAPTCHA site. You need these keys. The site key is needed in the widget itself, while the secret key is needed for communication between your site and Google (usually used to verify the Google response). When you want to use the reCAPTCHA widget, make sure you have created a number of database fields that you need to store request and response information:
a textfield for the request body;
a textfield for the response body;
a textfield for the response.
In the flowchart that contains the form where you use the widget, clear the response field to make sure that every time you use the widget, you start with a clean situation.
Next, add the widget to your form. The widget has two properties that need your attention:
Site Key: enter the key you generated on the Google reCAPTCHA site;
Response: this should point to reCAPTCHA response data field.
The next action on the form should depend on the response from reCAPTCHA: usually the user can only continue when it has been established that he/she is not a robot. Mostly the next action is to click a button (“Next”, “Submit”, etc.). Which means that a check is needed for the next action to be possible. There are two possibilities:
Simply check if the reCAPTACHA response field has a value.
Double check if the response value is correct by asking Google to check the response value. It is advised to do this.
To check the response value, do the following:
Set the reCAPTACHA request body data field (using an assignment node) to the following:
"secret=" + UrlEncode("<secret key>") + "&response=" + UrlEncode([Widgets.ReCaptchaResponse]) + "&remoteip=" + UrlEncode(IpAddress())
The secret key is the key you got from Google.
response field should point to the reCAPTCHA response data field.
remoteip field is the IP address of the client that accesses this form.
Use an HTTP POST request (using an HTTP request node) to validate the response value. The request body is the reCAPTCHA request body data field. The response body is the reCAPTCHA response body data field.
Press the Edit Request Headers of the HTTP request node, and make sure that “Content-Type” field is set to “application/x-www-form-urlencoded”.
Finally check the response body, to find out whether the validation was successful or not. More details can be found here: https://developers.google.com/recaptcha/docs/verify
When the validation was successful, the next user action can be executed.
Hints:
one way to accomplish the validation above, is to create a button, which starts a flowchart. This flowchart contains the actual check and can define the action to be taken when the validation is either successful or not.
If you use the site key and secret key multiple times, it may be useful to store these keys in a calculated fields. One field contains the site kay, another field the secret key. This way you can easily refer to these fields, insteds of entering the keys very time you need it.
Exit
Button exit
The widget will follow this exit when the delay is over.
Delay (milliseconds)
Number
The number of milliseconds before this widget follows the button exit.
Audio file | File, Expression | Play the selected file using the HTML5 Audio Player. The Audio Player currently supports 3 audio formats: MP3, Wav and Ogg. At this moment Wav is not supported by Internet Explorer and Ogg is not supported by Safari and Internet Explorer. Use MP3 for the best browser support. |
Output | Datafield, File | Store the output image in this datafield. |
Image extension (png/jpg) | text, Expression | Changes the output file extension. By default this value is set to "png". Allowed values are "png" and "jpg". Note that JPG does not support transparancy. JPG can be used to create smaller files compared to PNG. Use the 'Background color' property to add a custom background color. |
Image name | text, expression | Changes the output file name. By default this value is: "image". |
Display clear-button | boolean | Allows the user to clear the canvas by showing a clear button. By default this value is true. |
The JSON viewer is a tool designed to display a JSON string in a structured and user-friendly format. Instead of viewing JSON as a string, which can be hard to read, the viewer presents the data in a clean, tree-like structure. This format simplifies exploring key-value pairs, arrays, and nested objects. The Viewer allows users to collapse or expand sections of the JSON, helping them focus on the parts of the data you need.
For example, here’s what a JSON file looks like when displayed in the JSON viewer:
This widget is useful for inspecting JSON web service request messages before sending them or for examining incoming web service responses.
The JSON Viewer has two properties. Only the "JSON data" field is required, which expects an expression resulting in a text string.
The Appearance property allows you to set the maximum height of the viewer window in pixels by entering a number.
Unleashing the Power of a Kanban Board Widget
There are 2 versions of the Kanban Board widget:
Kanban board (the original, first version) > does not support drag&drop
Kanban board DragDrop > new version, supports Drag & Drop and Double-Click.
For the Drag&Drop widget, a demo is accessible at: https://kanban-widget-demo.staging.wem.io/ This project is also available in the App Store in MyWEM, so you can get a copy of this working example project to play with in your own workspace.
The kanban board is a visual project management tool used to track and visualize work in progress. The board typically consists of columns representing different stages of work, and tasks- or work items which are represented by cards that move across the columns as progress is made. By providing a clear visual representation of the workflow, a kanban board helps teams visualize their work, identify bottlenecks, and promote collaboration and efficiency. In the following image you can see the kanban widget used for a ticket management system.
The Effect Scatter Chart is a chart that shows the relationship between two variables. They are an incredibly powerful chart type, allowing viewers to immediately understand a relationship or trend, which would be impossible to see in almost any other form. the effect intensify the point that the user want to difference along all others.
You can find a more in depth explanation about the Effect Scatter on this page:
https://echarts.apache.org/examples/en/editor.html?c=scatter-effect
Properties of Effect Scatter Chart
A Range Bar displays information as a range of data by plotting two Y-values (low and high) per data point. The vertical axis shows the values, and the horizontal axis shows the categories they belong to. So, the range bar chart is a vertical version of the range column chart.
You can find a more in depth explanation about the range bar on this page:
Properties of Range Bar Chart
Property | Datatype | Description |
---|---|---|
Property | Datatype | Description |
---|---|---|
Property | Datatype | Description |
---|---|---|
Property | Datatype | Description |
---|---|---|
Property | Datatype | Description |
---|---|---|
Property | Datatype | Description |
---|---|---|
Property | Datatype | Description |
---|---|---|
Text Input | Result |
---|---|
Property | Datatype | Description |
---|---|---|
Property | Datatype | Description |
---|---|---|
Property | Datatype | Description |
---|---|---|
Minimum
Number, Expression
The minimum value displayed on the progress bar. Any value below the minimum value are not visible on the progress bar, it will show an empty progress bar.
Maximum
Number, Expression
The maximum value displayed on the progress bar. Any value above this value will show a full progress bar.
Value
Number, Expression
Displays the current progress of the progress bar. The current value should be a value between or equal to the minimum and maximum value. The value or current progress is in proportion to the minimum and maximum value and will be displayed on the progress bar.
Unit
Text, Expression
This property displays a label immediately after the value on the progress bar. The property 'Value <number, expression>' can represent a certain unit, this can for example be a percentage or the number of completed steps. Example 1 shows the label " of 100". Examples 2 and 3 are showing the label "%".
Bar color
Text, Expression
Changes the background color of the progress bar using a bootstrap color context. Accepted values: "default", "primary", "success", "info", "warning" and "danger".
Striped
Boolean, Expression
When true: adds oblique thick stripes to the progress bar. View examples 2 and 3 to see a striped progress bar.
Animate
Boolean, Expression
When true: the stripes of a progress bar are animated as shown in example 3. Note: this property only works when 'Striped <boolean, expression>' is set to 'true'.
Font size
Number
The font size of the current value and unit label in pixels.
Bar height
Number
The height of the bar in pixels.
Source
List
A list containing all items of the breadcrumb. Each item of the list should have a label text and parent id.
Label text
Text, Expression
The label text of each item of the breadcrumb.
Parent ID
Number, Expression
Each item is displayed immediately after its parent item creating a basic linear tree. Use this property to select the right parent item.
Endpoint ID
Number, Expression
The ID of the last item in the breadcrumb.
Property Name
Data type
Type
Description
Type of input
Text
Dropdown
To select the type of file. (File field, library field, URL to file).
File field
File
Expression
To set the file in the field.
Library file
File
To set the library file in the field.
URL to file
Text
Expression
To set URL into the file.
Initial zoom
Number
Expression
Set the initial zoom for the pdf viewer.
Border width
Number
Expression
Set border width for the pdf viewer.
Height
Number
Expression
Set the height of the PDF Viewer canvas in number of pixels. Leave empty for 100% width.
Width
Number
Expression
Set the width of the PDF Viewer canvas in number of pixels. Default is 400px.
OnClick
Dropdown
Choose what happens when a card or kanban item is selected.
Exit/flowchart
Dropdown
Choose which exit or flowchart should be used when a card is selected.
OnColumnChange
Dropdown
Choose what happens when a card is being dragged onto another column.
Exit/flowchart
Dropdown
Choose exit or flowchart to be used when a card is dropped in a column.
OnDoubleClick
Dropdown
Choose what happens when a card is being doubleclicked on (single click is needed for grab to start dragging).
ClickExit/ClickFlowchart
Dropdown
Choose exit or flowchart to be used when a card is double-clicked.
Data source
list, Data Item
The source list containing all timeline data. The example above provides a list of events.
Start date
Date, Expression
The start date of the event. When events overlap each other, they will be stacked automatically.
End date
Date, Expression
The end date of the event. The end date is optional. If the end date is provided, the event is displayed as a range. Otherwise the event is displayed as a box (like Event B in the example above).
Text
Text, Expression
The text-content of the event. This can be plain text or html code. The example above shows Event C bold and italic.
Group
Text, Expression
When a group value is provided, all events with the same group are placed on one line. A vertical axis is displayed showing all groups. Grouping events can be useful for example when showing availability of multiple people, rooms, or other resources next to each other.
Image
File, Expression
Add an image below the text-content of the event.
Image size
number
Limits the width of the provided image in pixels. Resizes the image, but keeps its aspect ratio. The default value of this property is 32 (pixels).
Output selected
Reference, data field
A data field to (temporarily) store a reference to the selected or changed event. This reference can be used to change or delete the event.
On double click
Dropdown
When the user double clicks an event, the following actions can be performed: do nothing, execute flowchart or follow button exit.
Editable
Boolean
Allow the user to add or change events. By default set to false.
Add exit
Button exit
When 'editable' is true, you can provide a button exit which will be used for each 'add-event' in the timeline (double click empty area).
Change exit
Button exit
When 'editable' is true, you can provide a button exit which will be used for each 'edit-event' in the timeline (changing start / end date).
Output start date
Date, data field
A data field to (temporarily) store the start date of an edited event. When 'editable' is true, the user is allowed to change the start date. After changing the start date the provided 'Change exit' will be followed. Due to a bug in widgets you are required to provide a data field, even when 'editable' is false.
Output end date
Date, datafield
A data field to (temporarily) store the end date of an edited event. When 'editable' is true, the user is allowed to change the end date. After changing the end date the provided 'Change exit' will be followed. Due to a bug in widgets you are required to provide a data field, even when 'editable' is false.
Width
Text
Changes the width of the timeline using either a percentage or pixel value. For example: "80%" or "500px". By default this value is "100%".
Animated
Boolean
When true, events are moved animated when resizing or moving them. Requires more computational power.
Animated zoom
Boolean
When true, events are moved animated when zooming the Timeline. Requires more computational power.
Show axis on top
Boolean
By default this property is set to false, the horizontal axis is drawn at the bottom. If true, the axis is drawn on top.Sets the start value of the visible date range (zoom level). The user can scroll to zoom in or out (showing a smaller or larger date range).
Initial start range
Date, Expression
Sets the end value of the visible date range (zoom level). The user can scroll to zoom in or out (showing a smaller or larger date range).
Initial end range
Date Expression
Allowed values: "success", "warning", "danger", "info", "default", "primary". Other values will be ignored.
Event bootstrap context
Text, Expression
Allowed values: "success", "warning", "danger", "info", "default", "primary". Other values will be ignored.
Event background color
Text, Expression
Change the background color of one event using a CSS color code, for example: "red", "#ff0000" or "rgba(0,0,0,0.2)".
Event border color
Text, Expression
Change the border color of one event using a CSS color code, for example: "red", "#ff0000" or "rgba(0,0,0,0.2)".
Event text color
Text, Expression
Change the text color of one event using a CSS color code, for example: "red", "#ff0000" or "rgba(0,0,0,0.2)".
Property Name
Data type
Type
Description
Data Source
List
Data Model
Datalist source for the widget.
X axis
Number
Expression
Values displayed on x-axis.
These are expected to be numeric values.
Y axis
Number
Expression
Values displayed on y-axis.
These are expected to be numeric values.
Effect point
Boolean
Expression
Boolean that determines if a given point is has an effect.
SelectedValueOutputID
Text
To select the specific value of the scatter chart, to put the differentiator effect in the point.
Show Xaxis Scale
Boolean
Expression
Show de scale of the x axis.
Show Yaxis Scale
Boolean
Expression
Show de scale of the y axis.
Scatter points color
Text
Expression
Defines the color of the scatter chart points.
Effect Points Color
Text
Expression
Defines the color of the effect points.
Scatter Chart Symbols
Text
Dropdown
To change the style of the scatter symbol. (Cirlce, rect, roundrect, triangle, diamond, pin, arrow).
Effect symbol size
Number
Expression
to change the size of the effect symbol
Scatter symbol size
Number
Expression
to change the size of the symbol.
Height
Text
Expression
Set height of the chart.
Type number.
Width
Text
Expression
Set width of the chart.
Type number.
Property Name
Data type
Type
Description
Data source
List
Data Model
Data list source for the widget.
Label
Text
Expression
Labels displayed on y-axis.
Date start
Date
Expression
Starting date of a range.
Date end
Date
Expression
End date of a range.
Series
Text
Expression
This field is used to create different series from the same data source.
It's not required.
Series color
Text
Expression
This field is used to set the color of the series. If empty a random color will be selected.
Hexadecimal Colors format Ex.: "#2E93fA"
Show tooltip
Boolean
Expression
Show tooltip. Use true or false.
Theme
Text
Dropdown
Change the text and background colors of the chart. (Light, dark).
Background Color
Text
Expression
Change the background color of the chart. It's important to set the opacity with the color to show the gridlines.
Examples:
"#FFFFFF60" or "rgba(255, 255, 255, 0.6)"
Display vertical grid lines
Boolean
Expression
Display vertical grid lines.
Display horizontal grid lines
Boolean
Expression
Display horizontal grid lines.
Grid lines color
Text
Expression
Change color of the lines on the grid.
Example:
"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"
Legend font size
Number
Expression
Change font size of the legend.
Legend position
Text
Dropdown
Change position of the legend. (Bottom, top, left, right).
Fill Type
Text
Dropdown
Change fill type of the chart. (solid, gradient, pattern).
Fill opacity
Number
Expression
Change the fill opacity of the chart.
From 0.00 to 1.00
Show animation
Boolean
Expression
Display animation on render.
Height
Number
Expression
To set the height of the chart.
Width
Number
Expression
To se the width of the chart.
Datasource
List
This is the list that contains the content or data you want to show as the cards. This can be a list from your datamodel or you can use a filter as the list.
SelectedCard
Reference
This should be a reference field that the Datasource as Referenced list. This is used as the selected card in your session.
VisibleColumns
ConceptSet
Set of concepts that represent the columns.
You can use getchildren(concept parent)
or
{ 'concept', 'concept2', etc}
Subject
Text
Column
Single select
This datafield defines the column in which a card is located.
Color
text
Defines the color of the card. Can be written as color name, hex value, etc.
Date
Date Time
Priority
Text
Description
Text
Tooltip
Text
User
Text
Message
Text
Message context
Text
Change the color of the message. You can find the possible values below.
Notification count
Number
Attachment count
Number
Selected Column
Text datafield
Field to store selected column (concept-id) to be used for drag&drop in the Change Columns flow. ONLY available in DragDrop version.
HeaderText
Text
Header or title of the kanban board
Show Counters
Yes/No
Toggle on if the notification and Attachment count should be shown.
Background
Dropdown
Bootstrap context colors
Min width
Number
Minimum size in pixels
Min height
Number
Minimum size in pixels
Date format
Dropdown
*Custom date format
Text
dd-mm-yy hh:mm:ss
"Default"
"Primary"
"Success"
"Info"
"Warning"
"Danger" message and error background
In this example Tostring(concept)
is used.
When empty uses Description.
Choose date format Long with time: Short without time:
Property | Datatype | Description |
---|
Property | Datatype | Description |
---|
Property | Datatype | Description |
---|
Appointments | List | The source list containing all calendar data, providing list of events. |
Subject | Text, expression | The subject of the event. At this moment it is possible to add basic html to your subject. In the example above, event C is bold and italic. |
Start date | Date, expression | The start date of the event. When events overlap each other, they will be displayed next to each other (for example event B and D). Note that this widget only shows events starting from 06:00-23:00. |
End date | Date, expression | The end date of the event. When using a timespan it is possible to calculate the end date of the event by using the MoveDate() function. |
Color | Text, expression | Changes the background color of the event. Use basic CSS colors, for example: "red" or "#ff0000". It is also possible to use RGB(A) colors (with opacity): "rgba(255,0,0,0.5)" |
Show markers | Dropdown | When yes you can use markers to highlight a certain timespan. Otherwise no markers are displayed. In the example above Friday, January 27 is highlighted. |
Marker start date | Date, expression | The start date of the marker |
Marker end date | Date, expression | The end date of the marker. |
Marker text | Text, expression | Add text to the highlighted marker area. Markertext will be centered in the highlighted area and displayed below events (and might not be visible). |
Initial date | Date, expression | The initial date of the calendar. |
Initial view | Dropdown | Changes the initial calendar view to 'day', 'week' or 'month'. The user can change the view using the calendar toolbar. |
On double click | Dropdown | When the user double clicks an event, the following actions can be performed: do nothing, execute flowchart or follow button exit. |
Exit | Button exit | Provide a button exit when the property 'On double click' is set to 'follow exit'. |
Flowchart | Flowchart | Provide a flowchart when the property 'On double click' is set to 'execute flowchart'. |
On click background | Dropdown | When the user clicks on a blank area, the following actions can be performed: do nothing, execute flowchart or follow button exit. |
Exit | Button exit | Provide a button exit when the property 'On click background' is set to 'follow exit'. |
Flowchart | Flowchart | Provide a flowchart when the property 'On click background' is set to 'execute flowchart'. |
Clicked date | Date, datafield | Use this datafield to (temporarily) store the date of the clicked area. In the example above, a new event is created after clicking a blank area. |
Width | Number, text | By default this widget is as wide as possible (100%). Using this property you can change the width of the calendar in pixels. |
Height | Number, text | Changes the height of the calendar widget in pixels. |