Chapter 17. Using the Default Widgets
DOC offers several components out of the box, as listed in Section Understanding Widgets.
As described in Section Understanding the Management Views, a configurable widget can be a part of a:
Custom View, in which case it will be the only widget visible on the page, or placed on a
Custom Dashboard, with other widgets, where they can be resized and moved.
Widgets reflect real time data from the current scenario, which can be filtered depending on the visualization purpose. For more details, refer to Section Understanding Widget Context.
Some of them allow comparing data between scenarios. For more details, refer to Section Understanding Scenario Comparison.
For each created widget, a configurator allows indicating the entities and attributes to display. Users can also indicate nested entities, i.e. entities used as attributes in other entities, which are tagged with an icon in the configurator. A preset configuration can also be applied to some widgets using custom controllers. For more details, refer to Chapter Customizing the Default Widgets.
To quickly display the capabilities of the application, the Sample Widget, Sample Map Widget and Sample Parameter Widget can be created without further configuration.
Finally, users can also implement their own custom widgets. For more details, refer to Section Creating Custom Widgets.
![[Note]](images/note.svg) | |
Note that "internal entities", not defined in the data model, are generated by the application. For more details, refer to Chapter Generating the Application Structure.
|
1. Using the Workspace List Widget
The Workspace List widget is the only widget on the Workspaces view. For more details, refer to Section Understanding the Workspaces View.
 |
The Workspace List widget displays all the workspaces created in the application as well as a button , next to each one of them, to Rename or Delete them.
The layout of the widget columns can be edited. For more details, refer to Section Understanding Table Widgets.
The widget settings can be edited using a dedicated configurator.
 |
The upper tabs allow configuring the:
Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.
Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.
Toolbar, beneath the widget header, by adding configurable action buttons. For more details, refer to Section Using the Action API.
2. Using the Scenario List Widget
The Scenario List widget is the default widget on the Home view, which is the only view available when launching the web client for the first time. For more details, refer to Section Understanding the Home View.
 |
The Scenario List displays all the scenarios imported into the application for a specific workspace. Scenarios imported in a workspace can be copied, moved or shared to other workspaces. For more details, refer to Chapter Managing the Application Data.
A tooltip displays the number of schema errors in the scenario. When using a composite data model, a dedicated icon indicates the initials of the scenario type, TransactionalData in the figure, and any scenario References. For more details, refer to Section Defining a Composite Data Model (CDM).
The icon in front of each scenario reflects its state, whether it is in the process of importing or already imported in the application database. If it is shared, i.e. ACCESS is granted to EVERYONE — as it can happen when the scenario is associated to a scenario link or when it is referenced by another scenario — an indicator is displayed. An option in the Actions menu described below allows to Stop Sharing the scenario.
 |
Additional information on the last validity check, scenario type full name and scenarios referencing the current scenario can be displayed using the option Scenario details from the Actions menu described below.
 |
The widget toolbar indicates the workspace name and displays icons for the following options:
Move to Trash all scenarios preselected in the Workspace list;
New Scenario creation within the workspace. For more details, refer to Section Managing the Application Data; and
New Folder creation within the workspace to store scenarios.
Additional features:
Empty Trash to permanently delete any scenario listed under Trash at the bottom of the Scenario List, and
Reset Widget to refresh the widget state.
By default, the columns indicate, for each scenario, the Name, Creation Date, Modification Date, Author, Data Status, Latest Job, and the available Actions via a dedicated button .
The layout of the widget columns can be edited. For more details, refer to Section Understanding Table Widgets.
From the Scenario List, users can "preselect" a scenario by double-clicking on it. Selecting a scenario refreshes, with the new value, the Scenario Selector as well as any widget in the same context.
Clicking on the Actions menu of a scenario displays a dropdown menu allowing to perform specific actions on it, such as:
Select a scenario, which is the same as double-clicking on it in the list or picking it from the scenario picker,
Rename the scenario without changing its content,
Move to Trash the scenario, which can be permanently deleted using the Empty Trash option described above.
Duplicate the scenario,
Create Link to share the scenario with other workspaces,
Stop Sharing to remove the ruleset granting
ACCESStoEVERYONEadded by any scenario link or reference from scenarios in other workspaces associated with the scenario,Copy to Workspace to create a duplicate of the scenario in other workspaces,
Move to Workspace to remove the scenario from the workspace and place it in another,
Scenario Details to display additional information about the scenario,
Lock to prevent any edition on the scenario by other users until unlocked,
Session Lock to prevent any edition on the scenario until the user logs out or the session expires,
Unlock to remove any lock on the scenario,
Force unlock to remove any lock left after a failed task — only available to users with the role
PERMISSIONS_ADMIN,Excel Export for all or part of the scenario,
DBRF Export for all or part of the scenario,
Run Schema Checkers on the scenario data, and
Run Job on the scenario.
Clicking on the Actions menu (…) of a scenario in the Trash folder displays a dropdown menu allowing to perform specific actions on it, such as:
Restore, which moves the scenario back to where it was before being put in the trash
Delete, to permanently delete a scenario
For more details on locks, refer to Chapter Managing the Application Data and Section Understanding Scenario Locks.
The widget settings can be edited using a dedicated configurator.
 |
The upper tabs allow configuring the:
Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.
Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.
Toolbar, beneath the widget header, by adding configurable action buttons. For more details, refer to Section Using the Action API.
Custom Controller in charge of customizing the widget behavior, set to None by default.
The main tabs allow configuring the:
General properties of the widget, such as the:
Columns to show, and
Multi-Model columns to show if the application uses a composite data model.
Actions to display or hide in the Actions menu
.Custom Actions that users can add to the Actions menu
. There, custom actions can be added, removed, reordered or duplicated. A custom action consists of an Action Label, an Icon and an Action declared using the Action API.DOCprovides some action samples by default. For more details, refer to Section Using the Action API.Figure 17.7. Scenario List Custom Actions Configuration
3. Using the Scenario Timeline Widget
The Scenario Timeline widget displays the comments and application events that were logged on the given scenario.
 |
The widget settings can be edited using a dedicated configurator.
 |
The upper tabs allow configuring the:
Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.
Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.
Toolbar, beneath the widget header, by adding configurable action buttons. For more details, refer to Section Using the Action API.
Custom Controller in charge of customizing the widget behavior, set to None by default.
The main tab allows to Select the event types to display.
4. Using the Data Grid Widget
The Data Grid represents the data contained in the model in the form of tables. Users can configure the headers and the columns of each table.
 |
A color hint is added in the cells containing nested entities, i.e. entities used as attributes in other entities of the data model through "relationships". For more details, refer to Chapter Defining the Data Model.
The left column indicates the row number and schema errors using a warning icon . In addition, a row gets darker with each error it contains.
The Data Grid and Data Explorer are especially useful to compare scenarios. For more details, refer to Section Understanding Scenario Comparison.
The layout of the widget columns can be edited. For more details, refer to Section Understanding Table Widgets.
In the Data Grid, users can select: a cell, by clicking on it once; or several ones, by holding the Shift key while doing so or by holding and dragging the mouse click across a selection. Right-clicking on an entry, or a selection of entries, displays the following options:
Add new rows — only available when the widget option Edit
is toggled on —, which allows adding a new row before the selected one(s) or at the beginning of the table if no row is selected.Copy, to copy the selected cell(s).
Copy With Headers, to copy the selected row(s) with the column labels as first row.
Cut, to cut the selected cell(s).
Paste as new rows, to paste the cut or copied selection into new rows.
Chart Range, and several options to create a downloadable visualization of the selected rows.
Export, to download the content of the selected cell(s) into a CSV Export or Excel Export.
In use, the widget toolbar can display the:
Show issues only
button, which only appears when there are issues in the displayed table, and which allows filtering the rows in the Data Grid to only display those with issues.Edit
button, which, when toggled, displays the option buttons Add new rows, Delete selected rows and Duplicate selected rows. It also displays the buttons Discard changes and Save changes to confirm, or not, any change on the scenario table, indicated by a yellow tag on the Edit button that shows the number of changes.Selection
button, which can be hidden via the widget configurator and which allows changing the way row selection is handled in the Data Grid.Action
button, which displays the:Delete All rows option, to clear the whole table at once.
Reset Widget option, which is described more in details in Section Understanding Widget State.
Issues filters Other, Error, Warning and Info, which only appear if the Show issues only
button is toggled on.
The widget settings can be edited using a dedicated configurator.
 |
The upper tabs allow configuring the:
Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.
Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.
Toolbar, beneath the widget header, by adding configurable action buttons. For more details, refer to Section Using the Action API.
Custom Controller in charge of customizing the widget behavior, set to None by default.
Scenario Comparison option to Automatically enable the Scenario comparison mode for the widget.
Filters that should only apply to the widget, in addition to any filters set at a more global level, such as the Filter widget. For more details, refer to Section Using the Filter Widget.
The main tabs allow configuring the:
Properties of the table such as the:
Description of the table if need be.
Type, which refers to the specific table to display from the scenario dataset.
Query to filter the data to display, if need be.
Editable option to allow, or not, the modification of data in the table cells, and if so, another option to Forbid adding or deleting rows.
Show Data Validation issues in row number column option which pinpoints, in the table, any issue in the data set.
Show Selection Menu option to display the related Selection button in the toolbar, which allows to change the way row selection is handled in the Data Grid.
Hide 'Show issues only' button option to remove the button filtering only the rows containing issues.
Selection Mode option, set by default to none, which can also be set to select or highlight to change the way selecting rows with the mouse works.
Columns to display, with a list that allows sorting, adding, removing and duplicating them, and options to set the:
Column Header, by default set to the entity attribute to display.
Field, i.e the entity attribute to display, used by default for the column header.
Empty (null) value display, by default set to <NULL>.
Hide this column option, which also updates the column with the indication Hidden in the list.
Show/Edit Time option — only available for date and time columns — to display the time in addition to the date.
Value Format, which can be set to:
Date, using the format 10/3/2023, Oct. 3, 2023, October 3, 2023, or Thursday, October, 2023.
Time, using the format 3:50 PM, 3:50:55 PM, or 3:50:55 PM GMT+2.
Duration, using the format 8760:00:00 (hh:mm:ss), 525600 (Minutes), 8760 (Hours), 365 (Days), 52 (Weeks), 12 (Months), or 1 (Years).
Number, using the format 123,412%, 1,231 (Rounded value), 1,234.1, 1,234.12, 1,234.123, 1.234123e+3 (Scientific), 1.234e+3 (Scientific), 1.234K (thousands), 1K (thousands, rounded), 0.001M (millions), or 0M (millions, rounded).
Currency, using the format $ 1,234 (Rounded value), € 1,234 (Rounded value), 1,234 (Rounded value), $ 1,234.12 (Decimals), € 1,234.12 (Decimals) or 1,234.12 (Decimals).
Custom, which prompts the user to choose a formatter and a format, either ICU (Default), using the ICU message format, or Luxon (Date & Time), using the Luxon message format.
Conditional Formatting, using the button + ADD ANOTHER RULE that displays Custom style options to Apply style when the value Is null, Is not null, Is equal to, Is not equal to, Greater than, Greater than or equal to, Lower than, Lower than or equal to, Is between, Is not between, Is empty, Is not empty, Text contains, Text does not contain, Text starts with or Text ends with a certain value.
Advanced configuration, with parameters such as the:
Hide row number column option if need be.
Use pagination (legacy) option that provides the table with manual pagination settings.
Hide aggregation panel option — not compatible with the Use pagination (legacy) —, true by default, that hides the aggregated information displayed in the bottom-right corner of the table upon range selection (the aggregated information are computed from loaded data only).
Block size (max. elements per request) option, set by default to 50, to limit how many rows at a time are requested from the server.
Max. blocks in cache option, set by default to 20, to limit how many results from the server are kept in the application cache.
5. Using the Data Explorer Widget
The Data Explorer widget allows displaying, in a file-explorer-like interface, all or part of the data contained in the application.
 |
On the left part, the Data Explorer lists all the entities of the data model. If a composite data model is used, the entities that are not present in the currently selected scenario type are greyed out and hovering over them displays a message stating "The selected scenario has no data for this table". The number of schema errors, if any, is indicated next to the entity name.
In the Data Explorer widget,
GeneIssue,GeneParameter, andGeneSchemaIssueinternal entities are hidden by default and, when displayed, they may contain rows referring to other scenarios than the one currently selected. In this case, they cannot be edited until said scenario is selected. For more details, refer to Section Understanding Widget Context.Figure 17.13. Internal entities
On the right part, a panel is populated with a detailed Data Grid representing data of the selected type. For more details, refer to Section Using the Data Grid Widget.
The Data Grid and Data Explorer are especially useful to compare scenarios. For more details, refer to Section Understanding Scenario Comparison.
The layout of the widget columns can be edited. For more details, refer to Section Understanding Table Widgets.
In use, the widget toolbar can display the:
Show issues only
button, which only appears when there are issues in the displayed table, and which allows filtering the rows in the Data Grid to only display those with issues.Edit
button, which, when toggled, displays the option buttons Add new rows, Delete selected rows and Duplicate selected rows. It also displays the buttons Discard changes and Save changes to confirm, or not, any change on the scenario table, indicated by a yellow tag on the Edit button that shows the number of changes.Selection
button, which can be hidden via the widget configurator and which allows changing the way row selection is handled in the Data Grid.Action
button, which displays the:Delete All rows option, to clear the whole table at once.
Reset Widget option, which is described more in details in Section Understanding Widget State.
Issues filters Other, Error, Warning and Info, which only appear if the Show issues only
button is toggled on.
In the Data Grid, users can select: a cell, by clicking on it once; or several ones, by holding the Shift key while doing so or by holding and dragging the mouse click across a selection. Right-clicking on an entry, or a selection of entries, displays the following options:
Add new rows — only available when the widget option Edit
is toggled on —, which allows adding a new row before the selected one(s) or at the beginning of the table if no row is selected.Copy, to copy the selected cell(s).
Copy With Headers, to copy the selected row(s) with the column labels as first row.
Cut, to cut the selected cell(s).
Paste as new rows, to paste the cut or copied selection into new rows.
Chart Range, and several options to create a downloadable visualization of the selected rows.
Export, to download the content of the selected cell(s) into a CSV Export or Excel Export.
The widget settings can be edited using a dedicated configurator.
 |
The upper tabs allow configuring the:
Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.
Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.
Toolbar, beneath the widget header, by adding configurable action buttons. For more details, refer to Section Using the Action API.
Custom Controller in charge of customizing the widget behavior, set to None by default.
Scenario Comparison option to Automatically enable the Scenario comparison mode for the widget.
Filters that should only apply to the widget, in addition to any filters set at a more global level, such as the Filter widget. For more details, refer to Section Using the Filter Widget.
The left panel lists all the entities present in the scenario data set.
The way each entity is displayed in the widget can be configured independently by selecting them in the left panel. Doing so refreshes the main tabs with the specific entity parameters.
Above the main tabs, parameters allow setting, for each entity table, the:
Title to display on the widget left panel to refer to the said Type,
Hide this Table option to remove the entity from the widget left panel — a hidden entity is displayed in italics in the configurator —, and the
Custom Controller to use for the Type, if need be.
The main tabs allow configuring the:
Properties of the table such as the:
Description of the table if need be.
Type, which refers to the specific table to display from the scenario dataset.
Query to filter the data to display, if need be.
Editable option to allow, or not, the modification of data in the table cells, and if so, another option to Forbid adding or deleting rows.
Show Data Validation issues in row number column option which pinpoints, in the table, any issue in the data set.
Show Selection Menu option to display the related Selection button in the toolbar, which allows to change the way row selection is handled in the Data Grid.
Hide 'Show issues only' button option to remove the button filtering only the rows containing issues.
Selection Mode option, set by default to none, which can also be set to select or highlight to change the way selecting rows with the mouse works.
Columns to display, with a list that allows sorting, adding, removing and duplicating them, and options to set the:
Column Header, by default set to the entity attribute to display.
Field, i.e the entity attribute to display, used by default for the column header.
Empty (null) value display, by default set to <NULL>.
Hide this column option, which also updates the column with the indication Hidden in the list.
Show/Edit Time option — only available for date and time columns — to display the time in addition to the date.
Value Format, which can be set to:
Date, using the format 10/3/2023, Oct. 3, 2023, October 3, 2023, or Thursday, October, 2023.
Time, using the format 3:50 PM, 3:50:55 PM, or 3:50:55 PM GMT+2.
Duration, using the format 8760:00:00 (hh:mm:ss), 525600 (Minutes), 8760 (Hours), 365 (Days), 52 (Weeks), 12 (Months), or 1 (Years).
Number, using the format 123,412%, 1,231 (Rounded value), 1,234.1, 1,234.12, 1,234.123, 1.234123e+3 (Scientific), 1.234e+3 (Scientific), 1.234K (thousands), 1K (thousands, rounded), 0.001M (millions), or 0M (millions, rounded).
Currency, using the format $ 1,234 (Rounded value), € 1,234 (Rounded value), 1,234 (Rounded value), $ 1,234.12 (Decimals), € 1,234.12 (Decimals) or 1,234.12 (Decimals).
Custom, which prompts the user to choose a formatter and a format, either ICU (Default), using the ICU message format, or Luxon (Date & Time), using the Luxon message format.
Conditional Formatting, using the button + ADD ANOTHER RULE that displays Custom style options to Apply style when the value Is null, Is not null, Is equal to, Is not equal to, Greater than, Greater than or equal to, Lower than, Lower than or equal to, Is between, Is not between, Is empty, Is not empty, Text contains, Text does not contain, Text starts with or Text ends with a certain value.
Advanced configuration, with parameters such as the:
Hide row number column option if need be.
Use pagination (legacy) option that provides the table with manual pagination settings.
Hide aggregation panel option — not compatible with the Use pagination (legacy) —, true by default, that hides the aggregated information displayed in the bottom-right corner of the table upon range selection (the aggregated information are computed from loaded data only).
Block size (max. elements per request) option, set by default to 50, to limit how many rows at a time are requested from the server.
Max. blocks in cache option, set by default to 20, to limit how many results from the server are kept in the application cache.
6. Using the KPI Widget
The KPI widget displays important metrics or performance indicators in a concise and visually appealing format. It displays any single value requested from the model, for instance a sum or a count of data items.
 |
The widget settings can be edited using a dedicated configurator.
 |
The upper tabs allow configuring the:
Custom Controller in charge of customizing the widget behavior, set to None by default.
Scenario Comparison option to Automatically enable the Scenario comparison mode for the widget.
Filters that should only apply to the widget, in addition to any filters set at a more global level, such as the Filter widget. For more details, refer to Section Using the Filter Widget.
The main tabs allow configuring the:
General properties of the widget, such as the:
Title, or label, to display under the value,
Description of the widget if need be,
Icon of the widget if need be, displayed on the right of the value,
Navigation target which forwards users, upon click, to a specific View or Dashboard,
Data to use in the widget, such as the:
Datasource of the widget, which can be set to a Custom Query,
Type, which refers to the table, in the scenario data set, from which to retrieve the KPI value to display,
Field, which refers to the column, in the specified table, from which to retrieve the KPI value to display,
Value that the KPI widget should display depending on the selected Type, either:
Average, i.e. the mean average of the elements in the column Field,
Count, i.e. the total number of elements in the column Field,
Distinct, i.e. the number of distinct values across the column Field,
Max, i.e.the largest-value element in the column Field,
Min, i.e.the smallest-value element in the column Field,
Sum, i.e.the arithmetic total of all values in the column Field, or
Value, which displays the options Filter Field and Filter Value to indicate another value from a different column in the table Type selected above to display the corresponding value from the aforementioned column Field, and the
Show Progress option — when a numerical Type is selected — that displays a circle or a bar — if an Icon is configured — showing the progression of the value. It is based on a Value Kind, set to Percent by default, which can also be set to Custom to reflect a numerical Max Value.
Formatting of the widget, such as the:
Value Format, which can be set to:
Date, using the format 10/3/2023, Oct. 3, 2023, October 3, 2023, or Thursday, October, 2023.
Time, using the format 3:50 PM, 3:50:55 PM, or 3:50:55 PM GMT+2.
Duration, using the format 8760:00:00 (hh:mm:ss), 525600 (Minutes), 8760 (Hours), 365 (Days), 52 (Weeks), 12 (Months), or 1 (Years).
Number, using the format 123,412%, 1,231 (Rounded value), 1,234.1, 1,234.12, 1,234.123, 1.234123e+3 (Scientific), 1.234e+3 (Scientific), 1.234K (thousands), 1K (thousands, rounded), 0.001M (millions), or 0M (millions, rounded).
Currency, using the format $ 1,234 (Rounded value), € 1,234 (Rounded value), 1,234 (Rounded value), $ 1,234.12 (Decimals), € 1,234.12 (Decimals) or 1,234.12 (Decimals).
Custom, which prompts the user to choose a formatter and a format, either ICU (Default), using the ICU message format, or Luxon (Date & Time), using the Luxon message format.
Colors of the widget, using the dropdown palettes to set the background and text colors,
Conditional Formatting, using the button + ADD ANOTHER RULE that displays Custom style options to Apply style when the value Is null, Is not null, Is equal to, Is not equal to, Greater than, Greater than or equal to, Lower than, Lower than or equal to, Is between or Is not between a certain value.
Comparison configuration, with parameters such as the:
Comparison Value Kind option to reflect a comparison delta between scenarios in Comparison Mode, which is set to Percent by default, but can be expressed as a Raw value,
Comparison Colors for the widget background and text when there is a delta in values in Comparison Mode, as well as the
Comparison Conditional Formatting, which lists the preexisting rules Value is greater than 0 and Value is lower than 0 that can be moved, removed or completed with other rules using the button + ADD ANOTHER RULE that displays Custom style options to Apply style when the value Is null, Is not null, Is equal to, Is not equal to, Greater than, Greater than or equal to, Lower than, Lower than or equal to, Is between or Is not between a certain value.
7. Using the Chart Widget
This widget allows to create a chart representing data from the model. The widget currently supports four types of charts.
 |
Trend/Category chart: uses a category horizontal axis that can represent resources, time buckets, etc., and a value vertical axis.
Vertical/Category chart: uses a category vertical axis that can represent resources, time buckets, etc., and a value horizontal axis.
Pie chart: a single-series pie chart.
Radar chart: a multi-series radar chart with one axis for each category value.
Most charts support multiple series that can be configured to use different data sources (entities), category field and value fields. The value field uses different aggregations such as average, minimum, maximum, count and distinct. If a single data source is used for the chart, an integrated filter widget can be enabled, allowing the user to filter the chart without editing the configuration.
Category based charts can now use the entity business key as category (and split by) field instead of using a scalar field (e.g. name). In this case, the internal id of the instance will be used to split the data, and the display value of the corresponding business key will be used in the tooltip and axis labels.
The widget settings can be edited using a dedicated configurator.
 |
The upper tabs allow configuring the:
Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.
Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.
Toolbar, beneath the widget header, by adding configurable action buttons. For more details, refer to Section Using the Action API.
Custom Controller in charge of customizing the widget behavior, set to None by default.
Scenario Comparison option to Automatically enable the Scenario comparison mode for the widget.
Filters that should only apply to the widget, in addition to any filters set at a more global level, such as the Filter widget. For more details, refer to Section Using the Filter Widget.
The main tabs allow configuring the:
Chart Properties of the widget, such as the:
Chart type of the widget, either Trend/Category, Vertical/Category, Radar, or Pie,
Show Legend option that displays the chart legend which, when selected, displays a tab Legend in the configurator with related settings, and the
Show Zoom Panel option — only available for Trend/Vertical and Vertical/Category charts — which displays zoom options on the chart,
X-axis options — only available for Trend/Vertical and Vertical/Category charts — whose Axis Label can be set to any title or unit.
Clicking on the button Show more Options underneath displays two parameters:
Time axis allows to set the X-axis label format to either:
Time and date.
Day and month.
Weekday and week.
Day, week, and month.
Week and year.
Month and year.
Automatic. This last option sets one of the closest time formats stated above depending on the chart time span, respectively, less than 4 days, 15 days, 60 days, 120 days, 210 days or more.
Figure 17.19. Time Axis Configuration
Tick label rotation (-90 to 90) — not compatible with the Time Axis option above — which is set to Auto by default to automatically tilt the label so it is displayed entirely under the X-axis.
Y-axis options — only available for Trend/Vertical and Vertical/Category charts — whose Axis Label can be set to any title or unit.
Clicking on the button Show more Options underneath displays the:
Axis min, Axis max and Interval options, that allow configuring the Y axis graduation, as well as the
Use logarithmic scale option that implements Y axis intervals increasing based on an automatic factor for curves which evolution is not adapted to small graphs.
Chart Series for the widget, i.e. the data from the scenario data set to be displayed. You can set multiple Series in the related left panel using the buttons + and - and order them using the button located on the right of each series in the said list. When selecting a series in this list, it is grayed out and it can be configured individually using the parameters located on the right, such as the:
Series Title if need be,
Series Type — only available for Trend/Vertical and Vertical/Category charts — which can be set to Bar, Line, Curve, Area or Dot,
Data Source, which refers to the table, in the scenario data set, from which to retrieve the values to display,
Color to use for the graph — not available for Pie charts which use different colors,
Symbol to use for the graph — not available for Bar charts,
Symbol Size to use for the graph — not available for Bar charts,
Categories (X-Axis) parameters with the Category Field that refers to the column, in the scenario data set, from which to retrieve the values to display as categories, or a related value if available as indicated by the icon
that precedes it.Clicking on the button Show more Options underneath displays the:
Color by Category option that uses different colors for each category, as well as the
Parse as ISO date setting to indicate that the values are strings that encode a date in compliance with the ISO 8601 standard.
Values (Y-Axis) parameters with the Value Field that refers to the column, in the scenario data set, from which to retrieve the value to display for each category, or a related value if available as indicated by the icon
that precedes it as well as the Aggregation options Count, Distinct, Average, Sum, Max, and Min.Clicking on the button Show more Options underneath displays the:
Split values by dropdown list, which allows selecting a column to split the category set as Value Field into subcategories.
Use data to sort chart options Unsorted, Ascending and Descending, and the
Value format dropdown list with the options:
Date, using the format 10/3/2023, Oct. 3, 2023, October 3, 2023, or Thursday, October, 2023.
Time, using the format 3:50 PM, 3:50:55 PM, or 3:50:55 PM GMT+2.
Duration, using the format 8760:00:00 (hh:mm:ss), 525600 (Minutes), 8760 (Hours), 365 (Days), 52 (Weeks), 12 (Months), or 1 (Years).
Number, using the format 123,412%, 1,231 (Rounded value), 1,234.1, 1,234.12, 1,234.123, 1.234123e+3 (Scientific), 1.234e+3 (Scientific), 1.234K (thousands), 1K (thousands, rounded), 0.001M (millions), or 0M (millions, rounded).
Currency, using the format $ 1,234 (Rounded value), € 1,234 (Rounded value), 1,234 (Rounded value), $ 1,234.12 (Decimals), € 1,234.12 (Decimals) or 1,234.12 (Decimals).
Custom, which prompts the user to choose a formatter and a format, either ICU (Default), using the ICU message format, or Luxon (Date & Time), using the Luxon message format.
Filter configuration, with parameters such as the:
Apply Context Filters option, which makes the chart take into account any filter inherited from the context.
Filterable option which, when selected, displays the dropdown list Filter Field to select a column to use as interactive filter values for the chart. The filter displayed on the chart can be renamed via the field Filter Label.
Tooltip display configuration that can be set for:
A whole category, which displays the options Skip split and series with missing values, that removes invalid series from the tooltip, as well as the option Limit number of items in split series, which allows to set a maximum Number of Items and Sort values.
A single data point for more granularity.
8. Using the Issues Widgets
In addition to the information present in the Data Explorer and Data Grid widgets, two dedicated widgets are provided to read and analyze data and schema validation issues:
The Issue List widget, which can display all issues and provides grouping and filtering features; and
Figure 17.20. Issue List Widget
The Issue Details widget, which displays the entity related to an issue selected in the Issue List widget. This requires both widgets to be on the same dashboard.
Figure 17.21. Issue Details Widget
For both widgets:
The layout of the widget columns can be edited. For more details, refer to Section Understanding Table Widgets.
The widget settings can be edited using a dedicated configurator.
The upper tabs allow configuring the:
Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.
Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.
Toolbar, beneath the widget header, by adding configurable action buttons. For more details, refer to Section Using the Action API.
Custom Controller in charge of customizing the widget behavior, set to None by default.
In the Issue List widget, the main tab allows to select the issues to display.
Figure 17.22. Issue List Widget Configurator
In the Issue Details widget, no other parameter is required.
Figure 17.23. Issue Details Widget Configurator
9. Using the Job List Widget
The Job List widget displays a history of all the jobs executed by the application within a certain limit and period. For more details on these limits, refer to Section Cleaning Finished Jobs from the Database.
 |
The Job List widget, like the Scenario List widget, displays a tooltip containing the name, status and the number of schema errors of the scenario. The tooltip does not appear on jobs that have multiple scenarios linked to them. When using a composite data model, a dedicated icon indicates the initials of the scenario type, PlanData in the figure, and any scenario References. For more details, refer to Section Defining a Composite Data Model (CDM).
Unlike in the Job List View, which displays all jobs regardless of the scenario, a Job List widget created on a custom view or dashboard can be configured to Filter by current Scenario Selection or Only show current User's Jobs. For more details, refer to Section Understanding the Job List View.
The layout of the widget columns can be edited. For more details, refer to Section Understanding Table Widgets.
The widget settings can be edited using a dedicated configurator.
 |
10. Using the Job Details Widget
The Job Details widget displays detailed information on each step of the last job that has been executed by the application.
 |
The widget settings can be edited using a dedicated configurator.
 |
The upper tabs allow configuring the:
Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.
Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.
Toolbar, beneath the widget header, by adding configurable action buttons. For more details, refer to Section Using the Action API.
Custom Controller in charge of customizing the widget behavior, set to None by default.
The main tab allows configuring the:
Filter by current Scenario Selection option which, when enabled, hides jobs that do not involve the current scenario. For more details, refer to Section Understanding Widget Context.
Type, i.e. the entity to display.
Query, i.e. a custom GraphQL filter query created beforehand. For more details, refer to Section Understanding GraphQL Custom Queries; and
For each entity to display, a:
Custom Header, i.e. a label for the entity;
Field, i.e. the entity attribute to display, and
Value Format, which can be set to:
Date, using the format 10/3/2023, Oct. 3, 2023, October 3, 2023, or Thursday, October, 2023.
Time, using the format 3:50 PM, 3:50:55 PM, or 3:50:55 PM GMT+2.
Duration, using the format 8760:00:00 (hh:mm:ss), 525600 (Minutes), 8760 (Hours), 365 (Days), 52 (Weeks), 12 (Months), or 1 (Years).
Number, using the format 123,412%, 1,231 (Rounded value), 1,234.1, 1,234.12, 1,234.123, 1.234123e+3 (Scientific), 1.234e+3 (Scientific), 1.234K (thousands), 1K (thousands, rounded), 0.001M (millions), or 0M (millions, rounded).
Currency, using the format $ 1,234 (Rounded value), € 1,234 (Rounded value), 1,234 (Rounded value), $ 1,234.12 (Decimals), € 1,234.12 (Decimals) or 1,234.12 (Decimals).
Custom, which prompts the user to choose a formatter and a format, either ICU (Default), using the ICU message format, or Luxon (Date & Time), using the Luxon message format.
11. Using the Filter Widget
| |
Note that best practices in user experience design recommend using the Filter Bar on a custom dashboard or view, rather than the Filter Widget. For more details, refer to Section Understanding the Custom Views and Dashboards. |
The Filter widget allows to display only the data relevant to the purpose at hand.
 |
The Filter widget allows to create one or more Entity filters. For each filter you can select fields and types the filter will apply to.
When using the Filter widget, the Selection menu available in the dashboard or view toolbar allows displaying the current filtering parameters, which can be cleared using the Clear All option in its top right corner.
In the application preferences, the parameter FILTER_SCOPE can be set to:
GLOBAL, in which case, the Filter widget applies to all the application views and dashboards.
VIEW, in which case, the Filter widget only applies to the views or dashboard it is placed on.
For more details, refer to Section Setting Application Preferences.
 |
The widget settings can be edited using a dedicated configurator.
 |
The upper tabs allow configuring the:
Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.
Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.
The main tab allows configuring the:
Layout, i.e. the way each individual filter in the widget is stacked, either Vertical or Horizontal.
Filter(s) to add, using the ADD FILTER
button. For each one, use the Settingbutton toDelete the filter or indicate the:Filter Type, i.e. the entity by which to filter data.
Filter Field, i.e. the entity attribute by which to filter data.
Filter Field Operator, i.e. the condition under which the filter applies, depending on the data type:
None (the entity itself): Equals, Not Equals.
Instant, LocalDate, LocalTime, LocalDateTime: Equals, Greater Than, Less Than, Not Equals.
Integer, Long, Double, Duration: Equals, Not Equals, Less Than, Less Than or Equal, Greater Than, Greater Than or Equal.
String: Contains, Contains (Match case), Not Contains, Not Contains (Match case), Equals, Not Equals, Starts with, Ends with.
Applies to option, to indicate which entities (tables and columns) the filter applies to..
Color Hint, i.e. the color of the entity by which to filter data.
Max selection option, to indicate how many nested entities are displayed in the filter dropdown list, either 1 to 5 or Unlimited. This option is grayed out if the entity does not contain nested entities.
Icon for the filter.
Placeholder text to display in the filter.
12. Using the Composite Widget
A composite widget allows grouping several custom widgets into one.
 |
The widget settings can be edited using a dedicated configurator.
 |
The upper tabs allow configuring the:
Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.
Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.
Toolbar, beneath the widget header, by adding configurable action buttons. For more details, refer to Section Using the Action API.
Custom Controller in charge of customizing the widget behavior, set to None by default.
Scenario Comparison option to Automatically enable the Scenario comparison mode for the widget.
The main tabs allow configuring the:
Layout of the widget, which can be set to:
Tabbed, to display two or several widgets using a tab container, so the user can switch between components using the tab bar.
Horizontal split, to display two widgets side by side, with a separator that can be used to give more space to one widget or the other.
Vertical split, to display two widgets arranged vertically in a container, with a separator that can be used to give more space to one widget or the other.
Components, i.e. the individual widgets to place in the Composite widget.
Note that, in a Composite widget, individual filters can be set on each widget that allows it.
13. Using the Calendar Widget
The Calendar widget allows displaying Events either by Month, Week, Day or in the form of a List. Options in the toolbar allow returning quickly to Today and move around using the buttons < and > as well as filtering the data to display.
 |
The widget settings can be edited using a dedicated configurator.
 |
The upper tabs allow configuring the:
Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.
Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.
Toolbar, beneath the widget header, by adding configurable action buttons. For more details, refer to Section Using the Action API.
Custom Controller in charge of customizing the widget behavior, set to None by default.
Filters that should only apply to the widget, in addition to any filters set at a more global level, such as the Filter widget. For more details, refer to Section Using the Filter Widget.
The main tabs allow configuring the:
Calendar properties, such as the:
Default view, either Day, Week, Month or List;
Button display options, such as Hide Previous/Next navigation buttons, Hide Month button, Hide Week button, Hide Day button, Hide List button, and Hide Today navigation button;
Show business hours option, which grays out time spans in the calendar that do not concur with the parameters set via the options Business days, Business start time, and Business end time;
Events to display, using the
Add event andDelete event buttons, by setting, for each, the:Event Type, i.e. the entity corresponding to the event(s) to display;
Event Name, i.e. the type of event(s) to display;
Start time, i.e. the entity attribute that corresponds to the event(s) start time;
End time, i.e. the entity attribute that corresponds to the event(s) end time;
Label, i.e. the entity attribute that corresponds to the event(s) label;
Tooltip, i.e. the entity attribute that corresponds to the text to display in the tooltip when hovering over the event(s);
Default event color, which can be changed using the conditional formatting options described below.
Background event option, which, when enabled, stacks a semi-opaque layer of the event color in the cell background instead of stacking event labels vertically in the cell. Having multiple events in the same cell merges their colors.
Inverted background event option, available only if the Background event option is enabled, which colors only empty cells.
Conditional Formatting, available only if the Inverted background event option is disabled, by selecting a Field, i.e. an entity and one of its attribute, and using the button + ADD ANOTHER RULE that displays Custom style options to Apply style when the value Is null, Is not null, Is true or Is false.
14. Using the Gantt Chart
The Gantt Chart widget displays Events, sorted by categories and subcategories, represented by bars on a X-axis time scale, which position and size reflect their start date, duration and end date.
Entities can be visually grouped by field using the option Color by in the widget toolbar, which also displays buttons for zooming options. In addition to these, users can scroll the mouse to zoom in and out on the chart and hold a left-click on it to move it around.
The Gantt Chart tooltip is also configurable and allows displaying various information.
 |
The widget settings can be edited using a dedicated configurator.
 |
The upper tabs allow configuring the:
Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.
Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.
Toolbar, beneath the widget header, by adding configurable action buttons. For more details, refer to Section Using the Action API.
Custom Controller in charge of customizing the widget behavior, set to None by default.
Filters that should only apply to the widget, in addition to any filters set at a more global level, such as the Filter widget. For more details, refer to Section Using the Filter Widget.
The main tabs allow configuring the:
Gantt properties, such as the:
Show empty groups / rows option,
Display show-all button in header option,
Display status bar at the bottom of the chart option,
Header display mode option, which can be set to:
Time and date.
Day and month.
Weekday and week.
Day, week, and month.
Week and year.
Month and year.
Automatic. This last option sets one of the closest time formats stated above depending on the chart time span, respectively, less than 4 days, 15 days, 60 days, 120 days, 210 days or more.
Render grid lines option,
Preferred row height option,
Row alternating colors, if need be.
Data source properties, such as the:
Series data options:
Event type, i.e. the entity to display.
Event label, i.e. the name to display.
Group by, i.e. the entity used to group the events to display.
Start time field, i.e. the entity attribute for the event start time.
End time field, i.e. the entity attribute for the event end time.
Series data option Event color by, to select an entity used to group the events. If no field is selected, label field will be used. If more than one field is selected, a selector will be added to the widget header;
Tooltip fields option Event color by, to select the entity attributes that should be displayed in the tooltip in addition to the default label, start, and end.
15. Using the Map Widget
The Map widget allows to display geographic:
Markers, which require setting the location latitude and longitude.
Routes, which require setting a series of locations, each one with a latitude and a longitude.
GeoJson areas, which must respect the GeoJson format. For more details on accepted values, refer to the official GeoJson documentation and the GeoJson.io tool.
In addition to the zoom and rescale options, the Map widget configurator provides users with marker customization, cluster display, color grouping and tooltip configuration options.
To display the map and markers, the Map widget relies on a Maptiler API Key, available from maptiler.com, which must be indicated through the parameter MAP_MAPTILER_API_KEY in the Setting Application Preferences.
To display routes and GeoJson areas, the widget relies on a Mapbox API Token and a Mapbox API URL, both available from mapbox.com, which must be used to set the parameters MAP_MAPBOX_API_KEY and MAP_MAPBOX_DIRECTION_API_URL, respectively, in the Setting Application Preferences.
 |
The widget settings can be edited using a dedicated configurator.
 |
The upper tabs allow configuring the:
Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.
Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.
Toolbar, beneath the widget header, by adding configurable action buttons. For more details, refer to Section Using the Action API.
Custom Controller in charge of customizing the widget behavior, set to None by default.
Filters that should only apply to the widget, in addition to any filters set at a more global level, such as the Filter widget. For more details, refer to Section Using the Filter Widget.
The main tabs allow configuring the:
Markers, using the
andbuttons to add or remove Map items. For each item, it is necessary to indicate the:Entity, i.e. the entity corresponding to the location to display;
Name of the marker;
Marker shape, set to Circle by default. It can be set to Pin icon, which displays the field Marker icon to select a specific one;
Cluster display to group markers in a cluster if some are too close;
Latitude field, i.e. the entity attribute for the marker latitude;
Longitude field, i.e. the entity attribute for the marker longitude;
Color group field (use datatype if empty), i.e. the entity attribute to use to determine the color of the marker;
Tooltip field, i.e. the entity attribute containing information to display in the marker tooltip.
Routes, using the
andbuttons to add or remove Map items. For each item, it is necessary to indicate the Route name as well as a series of locations — at least two — in the list Series Item using the dedicatedandbuttons. For each location item of the series, the user must indicate the:Entity, i.e. the entity that contain the information on the route to display;
Name of the series item;
Route Id field, i.e. the entity attribute corresponding to the route to use;
Latitude field, i.e. the entity attribute for the series item latitude;
Longitude field, i.e. the entity attribute for the series item longitude;
Order by field to indicate an entity as sorting parameter;
Tooltip field, i.e. the entity attribute containing information to display in the series item tooltip;
Query, i.e. a custom GraphQL filter query created beforehand. For more details, refer to Section Understanding GraphQL Custom Queries; and
GeoJson areas, by indicating the:
Entity, i.e. the entity corresponding to the area to display;
Name of the area;
GeoJson field, i.e. the entity attribute for the GeoJson area. For more details on accepted values, refer to the official GeoJson documentation and the GeoJson.io tool.
Id field, i.e. the entity attribute for the GeoJson ID;
Query, i.e. a custom GraphQL filter query created beforehand. For more details, refer to Section Understanding GraphQL Custom Queries.
16. Using the Button Widget
The Button widget allows to trigger an action, which can be customized or selected from default samples provided by DOC.
Customization consists of choosing the icon, label, color and background color, hovering color and background color, size, style and tooltip text of the button. Those options are available in the General tab in the widget configurator.
The widget settings can be edited using a dedicated configurator.
 |
The upper tab allows configuring the:
Custom Controller in charge of customizing the widget behavior, set to None by default.
The main tabs allow configuring the:
General properties of the widget, such as the:
Label to display on the button,
Tooltip text to display when hovering the button,.
Style which can be solid (simple) or link (underlined).
Size which can be normal or small.
Colors of the widget, using the dropdown palettes to set the background and text colors,
Hover Colors of the widget, using the dropdown palettes to set the background and text colors,
Icon to display in front of the text.
Action properties to associate the widget with an action. Custom actions can be registered using the dedicated API. For more details, refer to Section Using the Action API.
Here are the sample actions provided by
DOC:web/src/app/modules/sample-actions/actions/sample-action-copy-url.tsallows to perform a copy to clipboard of the current application URL.web/src/app/modules/sample-actions/actions/sample-action-hello-world-with-data.tsallows to use parameters and dynamic data.web/src/app/modules/sample-actions/actions/sample-action-open-webpage.tsallows to open a URL through a new web browser page, with preconditions.web/src/app/modules/sample-actions/actions/sample-action-scenario-info.tsallows to display information on a scenario and, through dynamic data and parameter resolution, add it to the Actions menuin the Scenario List widget.
Figure 17.40. Using the Button Widget Actions
17. Using the Pivot Table Widget
The Pivot Table widget allows aggregating and configuring various combinations of data related to one entity.
In the widget:
Row group columns are used as "treeview",
Column groups are used as headers, and
Value columns are used as data in the cells.
Users can reorganize columns in the table by dragging them left or right by their header.
 |
In addition, the widget sidebar displays the tabs:
Columns, which lists all the columns configured for the widget. They can be hidden by unticking the checkbox next to them. It differs from the option Hide this column which removes it altogether from the list. Users can look for columns using a search field above the list. They can also drag and reorganize them into the following sidebar lists:
Row Groups, which lists the columns used as row groups. In the widget configurator, said columns must have the option Enable Row group ticked. If they have Use as Default set to Row Group, it will be used as such if the saved widget state is not indicating otherwise. For more details, refer to Section Understanding Widget State. The order in the list impacts how the widget rows are grouped.
Values, which requires the selected column in the widget configurator to have the options Enable Value ticked and Use as Default set to Value. The order in the list impacts how the columns are displayed.
Column Labels, which requires the selected column in the widget configurator to have the options Enable Column group ticked and Use as Default set to Column Group. The order in the list impacts how the column groups are displayed.
Filters, which provides a way to filter the values of each column.
The widget settings can be edited using a dedicated configurator.
 |
The upper tabs allow configuring the:
Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.
Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.
Toolbar, beneath the widget header, by adding configurable action buttons. For more details, refer to Section Using the Action API.
The main tab allows configuring the:
Properties of the widget, which are the:
Type, i.e. the entity to visualize.
Merge grouping columns by default option, which, if multiple columns are set as row groups, merges them into one called Group.
Hide aggregation header row if there's only one option:
If it is not set or if there is more than one active "value" column, an additional header row displays the column name.
If it is set and there is only one value column, the header is masked.
Sidebar parameters to Do not display, Display all, Display only filters, or Display only columns.
Close sidebar by default option.
Columns of the widget, which depend on the entity selected in Type. Users can reorganize them using the
andbuttons and use themenu that displays the optionsAdd Column,Remove Column,Duplicate Column, andReset Columns.The order impacts the display as columns listed higher are higher in the hierarchy of column and row groups. For each column, the following parameters can be set:
Column Header, i.e. the label for the column.
Field, i.e. the entity attribute for which to display values in the column.
Hide this Column, which can be turned on and off from the widget sidebar using the checkbox next to the column name.
Selector filter, which changes the column filter in the widget sidebar to a checkbox list.
Enable Row group, which allows using values of the attribute selected in Field as expandable row groups. Ticking this checkbox displays the parameter Used as Default, which can then be set to Row Group. This displays all the values from the columns listed below the selected one, on the left panel, as part of the row group in the widget. Said columns must have the options Enable Value ticked and Used as Default set to Row Group. The higher a column is listed in the left panel, the higher it is in the grouping hierarchy.
Enable Column group, which allows using values of the attribute selected in Field as column groups. Ticking this checkbox displays the parameter Used as Default, which can then be set to Column Group. This displays all the columns listed below the selected one, on the left panel, as part of the column group in the widget. Said columns must have the options Enable Value ticked and Used as Default set to Value. The higher a column is listed in the left panel, the higher it is in the grouping hierarchy.
Enable Value, which displays the column and its values in the widget. The Column Header can be hidden when it is the only column of a column group, using the option Hide aggregation header row if there's only one. Ticking the Enable Value checkbox displays the parameters:
Used as Default, which can then be set to Value to display the values of the Field attribute.
Aggregation option that can be set to COUNT, DISTINCT, MIN, MAX, AVG, and/or SUM depending on the value type. For more details, refer to Section Understanding GraphQL Default Queries.
Used as Default, which is displayed if the options Enable Row group, Enable Column group, or Enable Value are ticked. It can be set to:
Not used, i.e. the Field attribute is not used to group values.
Row Group, i.e. the Field attribute is used to group rows of values from another lower column. If the column is the lowest, there is no grouping. The checkbox Enable Row group must be ticked.
Column Group, i.e. the Field attribute is used to group lower columns. If the column is the lowest, there is no grouping. The checkbox Enable Column group must be ticked.
Value, i.e. values of the Field attribute are displayed individually.
Value Format, which can be set to:
Date, using the format 10/3/2023, Oct. 3, 2023, October 3, 2023, or Thursday, October, 2023.
Time, using the format 3:50 PM, 3:50:55 PM, or 3:50:55 PM GMT+2.
Duration, using the format 8760:00:00 (hh:mm:ss), 525600 (Minutes), 8760 (Hours), 365 (Days), 52 (Weeks), 12 (Months), or 1 (Years).
Number, using the format 123,412%, 1,231 (Rounded value), 1,234.1, 1,234.12, 1,234.123, 1.234123e+3 (Scientific), 1.234e+3 (Scientific), 1.234K (thousands), 1K (thousands, rounded), 0.001M (millions), or 0M (millions, rounded).
Currency, using the format $ 1,234 (Rounded value), € 1,234 (Rounded value), 1,234 (Rounded value), $ 1,234.12 (Decimals), € 1,234.12 (Decimals) or 1,234.12 (Decimals).
Custom, which prompts the user to choose a formatter and a format, either ICU (Default), using the ICU message format, or Luxon (Date & Time), using the Luxon message format.
18. Using the Rich Text Widget
The Rich Text widget is a customizable area allowing to insert texts, images, videos and sounds. It provides users with basic text-editing parameters.
 |
The widget settings can be edited using a dedicated configurator.
 |
There is no upper tab and the main tab is a WYSIWYG rich text editor.
19. Using the Code Editor Widget
The Code Editor widget allows to author a text and save it in the current scenario. The widget is based on the Monaco editor, a stripped-down version of Microsoft's VS Code editor. As a consequence, its features are more geared toward editing code.
The widget settings can be edited using a dedicated configurator.
 |
The contents of the Code Editor widget is read from and saved to a row of the GeneParameter entity of the current scenario. A row in this entity has a name and a value; the contents of the widget is saved as the value of the parameter whose name is given in Parameter Name.
The check boxes are self-explanatory, except perhaps Show code map, which indicates whether a minified view of the editor contents should be displayed on the right of the editor. The Auto scroll mode setting. Finally, the Language setting controls the syntactic coloring of the editor contents.
20. Using the Rules Script Editor Widget
The Rules Script Editor allows to author rules, execute them, and see their output. This widget embeds two Code Editor widgets with default settings, making it ready to use.
 |
The upper part of the Rules Script Editor widget is a Code Editor tailored for authoring rules. The lower part is a read-only Code Editor with no syntactic coloring, and is meant as a console where log messages are written. The toolbar of the widget contains a Save button and a Run button. The latter triggers the compilation of the rules; if the compilation fails, error messages are logged in the console part; otherwise, the rules are executed on the data of the current scenario, with their output logged in the console part.
The widget settings can be edited using a dedicated configurator.
This configurator has three important parts: the two tabs that configure the upper and lower Code Editor widgets (their titles are not important as they are not shown since they are wrapped in a split composite widget) and the Toolbar tab that defines the Run button.
 |
 |
 |
The configurators for the Code Editors are preset with adequate settings. These settings are described in Section Section 19, “Using the Code Editor Widget”. The Toolbar of the Rules Script Editor widget is equipped with the Run button that triggers a UI Action, namely to launch a scripted task that compiles and executes the rules.
The important link between these three configurators is the Parameter Name. As explained in Section Section 19, “Using the Code Editor Widget”, the rules are saved by the upper Code Editor widget in the row of the GeneParameter entity with the name provided in the Parameter Name setting of this Code Editor widget. In the screenshots above, this parameter is named scriptParameterName. By convention, the compilation messages and the rule log messages are written into a parameter with the same name, extended with -logs?— in our example, scriptParameterName-logs as can be seen in the configurator of the lower Code Editor. Finally, the name of the parameter containing the rules is passed to the scripted task in the configuration of the toolbar action.