Chapter 9. Understanding the Web Client

[Note]

Note that:

Once the application is generated, as described in Part Getting Started, DOC web client, or web client, is accessible from a browser. For more details, refer to Section Accessing the Application Endpoints.

The web client is an extensible and configurable Angular application. The generated frontend project contains an empty Angular application that uses DOC web client library.

Web client applications rely on workspaces and scenarios to store application data. For more details, refer to Chapter Understanding the Scenario Service.

DOC web client is composed of three main areas.

Figure 9.1. Understanding DOC Web Client
Understanding DOC Web Client

The first time DOC web client is started, it contains an initial configuration with the:

After understanding the web client interface, one can customize and manage the application configuration. For more details, refer to Chapter Configuring the Application.

1. Understanding the Topbar

The Topbar is located on the top of the web client page and displays the title of the application, the name of the current view, and two menu buttons on the right side of the screen.

Figure 9.2. Understanding the Web Client Topbar
Understanding the Web Client Topbar

1.2. Understanding the Topbar Tasks Menu

The Tasks menu is located on right side of the Topbar.

Figure 9.3. Understanding the Topbar Tasks Menu
Understanding the Topbar Tasks Menu

The Topbar Tasks menu allows performing the following actions:

1.3. Understanding the Topbar Settings Menu

The Settings menu is located on right side of the Topbar.

Figure 9.4. Understanding the Topbar Settings Menu
Understanding the Topbar Settings Menu

This menu lists the:

  • Current user information;

  • About option that displays a dialog with the status and the versions of application components;

  • Application Configuration options, such as:

  • Application Data Model options, such as:

    • Excel Template to download an Excel file of the application data structure emptied of scenario data, as described in Section Managing the Application Data.

  • Workspaces options, such as:

    • Create New Workspace dialog to quickly create a new workspace.

    • Manage Workspaces option that displays the Workspaces view. For more details, refer to Section Understanding the Workspaces View.

  • Views and Dashboards options, such as:

    • Create New View dialog to quickly create a new custom view.

    • Create New Dashboard dialog to quickly create a new dashboard.

    • Configure option that displays the Views and Dashboards Management view. For more details, refer to Section Understanding the Views and Dashboards Management View.

  • Log out option to close the current user session.

2. Understanding the Sidenav

The Sidenav provides user with two main features, the Workspace Selector and the Scenario Selector.

2.1. Understanding the Sidenav Workspace Selector

The Sidenav panel contains the Workspace Selector which allows to view and select the current Workspace. It also displays all the workspaces available to the user.

Figure 9.5. Understanding the Workspace Selector
Understanding the Workspace Selector

Workspaces allow to group scenarios by any criteria relevant for the application. Scenarios can be copied, moved or shared among workspaces. For more details, refer to Chapter Understanding the Scenario Service.

The Workspace Selector contains the following elements:

  • Search for Workspace, which allows filtering the workspaces by name.

  • SHOW ALL, which displays all the workspaces to perform actions on them. For more details, refer to Section Understanding the Workspaces View.

  • My Workspaces, which lists the workspaces available to the user, indicates their number and highlights the current one.

  • Create a Workspace, which displays a dialog to add a new workspace.

2.2. Understanding the Sidenav List

The Sidenav List, which can be collapsed vertically, displays links toward all the views and dashboards available to the user. These can be grouped in folders, and one given view can be present in different folders.

To manage the order and the folders of the Sidenav, refer to Section Understanding the Views and Dashboards Management View.

3. Understanding the Central Area

In the central area, the web client displays "views" and "dashboards" that contain "widgets". This allow users to visualize, in various ways, data chosen from the "Scenario Selector".

On views, users can display only one widget. On dashboards, the number of widgets is not limited.

3.1. Understanding the Scenario Selector

For the Home view, custom views and custom dashboards, the visibility of the toolbar and the Scenario Selector (in the top-left corner) can be configured. For more details, refer to Sections Understanding the Home View, Understanding the Custom Views and Dashboards and Understanding the Views and Dashboards Management View.

Figure 9.6. Understanding the Scenario Selector
Understanding the Scenario Selector

The Scenario Selector allows defining the current active scenario, or "context". The scenario is then used across the whole application to define the data visualized in the views and dashboards. For more details, refer to Section Understanding the Scenario Service.

The Scenario Selector can also allow selecting two scenarios in Comparison Mode. For more details, refer to Section Understanding Scenario Comparison.

Scenarios in the Scenario Selector are those available to the user in the current workspace. For more details, refer to Section Understanding the Workspaces View.

The Scenario Selector tooltip displays the number of schema errors and an icon indicating the initials of the scenario type, TransactionalData in the figure below. In a composite data model application, if the scenario references other scenarios, they are also listed in the tooltip. For more details, refer to Section Defining a Composite Data Model (CDM).

The Scenario Selector contains the following elements:

  • Search for Scenario, which allows filtering the scenarios by name;

  • SHOW ALL, which displays all the scenarios to perform actions on them. For more details, refer to Section Using the Scenario List Widget;

  • My Scenarios, which lists the scenarios available to the user, indicates their number and highlights the current one;

  • New Scenario, which displays a dialog to add a new scenario. For more details, refer to Section Managing the Application Data; and

  • Clear Selection, which "unselects" the current scenario used as context.

3.2. Understanding the Management Views

When the web client is launched for the first time, several management views already exist in the application. For more details, refer to Sections:

[Note]

Note that:

3.2.1. Understanding the Home View

When launching the web client for the first time, the Home view is the only view available, as it can be seen in the Sidenav. For more details, refer to Section Understanding the Sidenav List.

The default Home view only displays the Scenario List widget. For more details, refer to Section Using the Scenario List Widget.

Just like for custom views and dashboards, one can configure the visibility of the toolbar and Scenario Selector for the Home view. For more details, refer to Section Understanding the Views and Dashboards Management View.

Users can define a dashboard — not a view — as their custom Home view, either:

  • Via the Views and Dashboards Management view, or

  • Via the Application Preferences parameter HOME_VIEW_ID, set to the desired dashboard ID. A dashboard ID is located at the end of the page URL, between .../custom-dashboard/ and any interrogation mark (?) followed by parameters, as in:

    https://www.xxx.xxxxxxx.xxx/custom-dashboard/5b2bc372-3ee7-4dc3-95fe-7e7b19ebb4e7?link=ec3a055f-38d3-4520-abc9-0563941998c4

    For more details, refer to Section Setting Application Preferences.

After setting a dashboard as custom Home view, the default Home view is still available in the Sidenav List.

Figure 9.7. Understanding the Custom Home View
Understanding the Custom Home View
[Note]

Note that, to avoid losing the custom Home view configuration, the Application Configuration must be exported and reimported to make sure it is taken into account. For more details, refer to Sections Exporting an Application Configuration File and Importing an Application Configuration File.

3.2.2. Understanding the Permission Management View

The Permission Management view can be accessed, from the Topbar Settings Menu via Application Configuration > Permissions. For more details, refer to Section Understanding the Topbar Settings Menu.

Figure 9.8. Understanding the Permission Management View
Understanding the Permission Management View

Only users with ACCESS and MODIFY rights on the APPLICATION_PERMISSIONS application element or users with the PERMISSIONS_ADMIN role have access to the Permissions Management view.

The Permission Management view allows setting specific permissions to users. For more details, refer to Part Securing.

The Permissions Management widget is split in three tabs to address these three use cases.

What is important to understand is the three-state checkboxes found in the rows for the available Access rights.

When the administrator changes decision checkboxes, a modification icon appears next to the affected user pattern until the user clicks on the "save" icon. The user can also choose to use the "reload" icon, which invalidates all the changes and resets the permissions to their previous state. You must save the rules in the current tab before switching to another tab. You will notice that some of the user patterns are gray while others are black: this allows the user to see at a glance which user patterns have no rules defined. The same display mode is applied to permission groups in the second tab, and to application elements in the third tab.

The three possible states of the checkbox are:

  • Checked: means that the decision is to allow a given access right (the column) to the given User Pattern (selected user in the list on the left) on the given object type (the row in the table).

Figure 9.9. Understanding Checked Permissions
Understanding Checked Permissions
  • Unchecked: means that for this combination we explicitly forbid the access right to this user pattern for this object type.

Figure 9.10. Understanding Unchecked Permissions
Understanding Unchecked Permissions
  • Undefined: means that we choose not to change this access rule for this object type for the selected User Pattern. This combination will be "transparent" during the matching process controlled either by more general rules (EVERYBODY < ROLE < OWNER < USER) or by a more specific rule defined in the "Permission Groups" and "Application Elements Overrides" tabs. This state also implies that this combination of user pattern, object type, and access right is not saved in the rules database as it has no "actual" representation. For more details, refer to Section Understanding Operations

Figure 9.11. Understanding Undefined Permissions
Understanding Undefined Permissions
3.2.2.1. Understanding the "Default Rules" Tab

The Default Rules tab allows granting permissions, over application elements, to users or user roles.

Figure 9.12. Understanding the Default Rules Tab
Understanding the Default Rules Tab

The control widget displayed in this tab is what we call a ruleset editor. On the left are listed all the users and roles, the so-called "user patterns", while the right part shows all element types and access rights for which the permissions can be edited.

When loaded the grid shows the default rules for the selected user pattern.

You can see that some combinations are shown as N/A. This happens when the access right does not have a meaning for a given object type. For instance, one cannot define a permission rule for the combination Tasks/Delete on TASK type since Tasks are defined by the backend code of the application, and cannot be deleted.

3.2.2.2. Understanding the "Permission Groups" Tab

The Permission Groups tab allows to create/edit/delete Permission groups in the left part using command buttons that act on the selected group.

Figure 9.13. Understanding the Permission Groups Tab
Understanding the Permission Groups Tab

A permission group is a collection of application elements. The purpose of a permission group is to gather several elements to which a common set of permission rules apply. Using a permission group is a good way to avoid duplicating the rules from element to element. In this sense, permission groups can be seen as the equivalent for application elements of roles for users.

When a group is selected, the ruleset editor on the left will allow to define a set of specific rules for user patterns and application element types. One can define rules for all the element types in a generic manner so that, as soon as elements are assigned to this group, they will follow the same rules.

This means that, if we define "Workspaces", "Tasks", or "Views and Dashboards" rules for a group in advance, those rules will be used when elements are assigned to it in the third tab.

3.2.2.3. Understanding the "Application Elements Override" Tab

The Application Elements Overrides tab has two functions:

  • Assigning application elements to permission groups

  • Attaching permission rules to a specific application element.

Figure 9.14. Understanding the Application Elements Overrides Tab
Understanding the Application Elements Overrides Tab

All application elements are listed in the left part, represented as a tree view. You will find there all the workspaces with the scenarios they contain, custom views and custom dashboards as well as a folder containing all the tasks available in the application. Note that the groups that the elements are attached to will be displayed after their name, clicking on the groups button will bring up a selection tool allowing to assign one or several permission groups to the selected element:

Figure 9.15. Understanding the Manage Permission Groups of Application Elements Configurator
Understanding the Manage Permission Groups of Application Elements Configurator

For the rules overrides, a ruleset editor is displayed for each element, allowing to see and edit specific rules attached to this element for all the user patterns.

Unlike the other tabs, the lines displayed in the ruleset editor vary according to the type of the selected element. For instance, it does not make sense to attach permissions on application element "Task" while defining rules for a scenario or a dashboard.

This tab is also used to manage orphan scenarios. For more details, refer to Section Addressing Orphan Scenarios.

3.2.3. Understanding the Views and Dashboards Management View

The Views and Dashboards Management view can be accessed, by users with the right permissions, from the Topbar Settings Menu via Views and Dashboards > Configure. For more details, refer to Section Understanding the Topbar Settings Menu.

Figure 9.16. Understanding the Views and Dashboards Management View
Understanding the Views and Dashboards Management View

The Views and Dashboards Management view allows adding, deleting and renaming views and dashboards as well as configuring the way links toward them are displayed in the Sidenav. For more details, refer to Section Understanding the Sidenav.

If you need to hide views, you can remove ACCESS permission to given users or roles from the Permission Management View. For more details, refer to Section Understanding the Permission Management View.

This view has two panels:

  • The left panel contains all the views and dashboards available to the user, sorted alphabetically by name. For each of these elements, the Actions column allows to:

    • Rename the element,

    • Duplicate the element,

    • Delete the element,

    • Set as Home the element — only for dashboards, not views —,

    • Show View Toolbar in the element, and

    • Show Scenario Picker in the element,

  • The right panel replicates the application Sidenav. The user can:

    • Create, edit and delete folders, using the buttons on the top-right corner of the panel, to organize Sidenav links, views and dashboards, and

    • Drag and drop views and dashboards from the left panel to change their order or parent folder,

The right panel Views Structure always displays at least one link toward each view and dashboard available to the user. Every change to the Views Structure panel is automatically saved and reflected in the Sidenav.

There also are two arrows between the panels. The right arrow allows adding additional elements from the left panel to the selected folder or to the root level of the Views Structure panel. The left arrow removes additional elements selected from the Views Structure panel, as does the "trash bin" button in the widget toolbar.

Empty folders are not be displayed in the Sidenav though they are visible in the Views Structure panel.

3.2.4. Understanding the Workspaces View

The Workspaces view can be accessed, by users with the right permissions, from the Topbar Settings Menu via Workspaces > Manage Workspaces. For more details, refer to Section Understanding the Topbar Settings Menu.

Figure 9.17. Understanding the Workspaces View
Understanding the Workspaces View

The Workspaces view contains only a Workspace List widget. For more details, refer to Section Using the Workspace List Widget.

It allows creating, renaming and deleting workspaces via the Action button on each row. Right clicking on a row allows its content to be copied with or without the column names as well as exported in .csv or .xlsx format.

3.2.5. Understanding the API Keys Management View

The API Keys Management view can be accessed, by users with the right permissions, from the Topbar Settings Menu via Application Configuration > API Keys Management. For more details, refer to Section Understanding the Topbar Settings Menu.

Figure 9.18. Understanding the API Keys Management View
Understanding the API Keys Management View

The API Keys Management view allows creating and deleting time-limited API keys that allow the current user to interact with the application through its API from a REST client.

Users cannot create an API Key for other users.

For more details, refer to Chapter Understanding the APIs.

3.2.6. Understanding the Job List View

The Job List view can be accessed, by users with the right permissions, from the Topbar Settings Menu via Job List. For more details, refer to Section Understanding the Topbar Settings Menu.

Figure 9.19. Understanding the Job List View
Understanding the Job List View

The Job List widget is the only one populating this view. For more details, refer to Section Using the Job List Widget.

[Note]

Note that:

  • Unlike a custom view with a Job List widget, this management Job List view is not displayed in the Sidenav.

  • Unlike a Job List widget created on a custom view or dashboard, this management Job List view displays all jobs regardless of the scenario and cannot can be configured to Filter by current Scenario Selection or Only show current User's Jobs.

3.2.7. Understanding the Custom Colors View

The Custom Colors view can be accessed, by users with the right permissions, from the Topbar Settings Menu via Application Configuration > Colors. For more details, refer to Section Understanding the Topbar Settings Menu.

Figure 9.20. Understanding the Custom Colors View
Understanding the Custom Colors View

The Custom Colors view allows displaying and setting color hints entity values. The data from the current scenario is used to display and help configuration, however, the customization mechanism is based on business keys and the custom colors will be applied to all workspaces and scenarios.

The data displayed depends on the application context. It is defined by the scenario currently active, which can be selected via:

The option Define default color allows setting a single color for unset values. In the figure below, a light gray was defined by default. If no default color is defined, entities not having a defined custom color will use the colors generated by the web client.

The option Reset colors for this entity allows resetting the selected entity default colors.

Figure 9.21. Understanding the Custom Colors
Understanding the Custom Colors

Different color parameters can be set, imported and exported in the application configuration. For more details, refer to Section Setting Application Preferences.

3.3. Understanding the Custom Views and Dashboards

DOC provides two types of custom display for the central area:

  • Custom views, which can only contain a single widget that spreads across the page.

  • Dashboards, which can contain multiple widgets in a layout that is defined by the user.

For more details, refer to Section Understanding Widgets.

Users with sufficient privileges can create and configure as many custom views and dashboards as they need. For more details, refer to Part Securing.

For custom views and dashboards, as for the Home view, the visibility of the toolbar and the Scenario Selector (in the top-left corner) can be configured. For more details, refer to Sections Understanding the Home View, Understanding the Custom Views and Dashboards and Understanding the Views and Dashboards Management View.

Upon creation:

  • A new custom view provides users with a wizard to specify the widget to display.

    Figure 9.22. Understanding the Empty Custom View
    Understanding the Empty Custom View
  • A new dashboard is empty. Users need to add widgets and organize the layout.

    Figure 9.23. Understanding the Empty Dashboard
    Understanding the Empty Dashboard

Views and dashboards share similar behaviors materialized by a toolbar on the top-right of the page.

These buttons allow to:

  1. Toggle Scenario Comparison Mode On for the current view or dashboard. For more details, refer to Section Understanding Scenario Comparison.

  2. Toggle Filters On for the current view or dashboard, which can either display:

    • The Filter Bar, if it is configured as described below, or

    • Information on current filters. For more details, refer to Section Understanding Widget Context.

      Figure 9.24. Understanding the Dashboard Layout Edition Mode
      Understanding the Dashboard Layout Edition Mode
  3. Edit Layout for a dashboard or a view, which switches the display so users can configure:

    • General dashboard or view settings, such as:

      • Setting the current dashboard — not a view — as Home View, and

      • Renaming the dashboard or view Title, and

      • Changing the dashboard or view Icon.

    • Widget Edition for a dashboard — not a view — by:

      • Using the mouse to:

        • Move widgets, by dragging and dropping them, and

        • Using the button Add a Widget to perform the related action.

        • Expand the section Display Settings to configure:

          • The Display to choose between Fit to Screen or Scroll Vertical, or

          • The Inner Margin to configure the distance between the widgets,

          • The Outer Margin to configure the outside border of the dashboard,

          • The Columns to adjust the amount of columns in a dashboard,

          • The Rows to adjust the amount of rows in a dashboard (only when Display is Fit to Screen)

          Figure 9.25. Editing Dashboard Layout with Expanded Display Settings
          Editing Dashboard Layout with Expanded Display Settings
        • Resize widgets, by dragging the edges

        • On a small widget, using the button Action on the top-right corner of a widget and selecting either:

          • Edit Configuration to open the related configurator,

          • Duplicate,

          • Remove,

          • Bring Widget Forward, or

          • Bring Widget Backward to perform the related actions;

        • On a bigger widget the same changes can be performed from the buttons in the top-right corner by:

          • Using the Edit Configuration button to open the related configurator,

          • Using the Layer button to open a menu in order to Bring Widget Forward or Bring Widget Backward,

          • Using the Duplicate button, or

          • Using the Remove button to perform the related actions

      Figure 9.26. Editing a Dashboard Layout
      Editing a Dashboard Layout
    • Widget Configuration for a view — not a dashboard —, to open the related configurator once a widget has been selected for the view.

      Figure 9.27. Editing a View Configuration
      Editing a View Configuration
    • Toolbar buttons. This tab is divided in two:

      • The left panel displays the toolbar default buttons as well as any other custom buttons.

        Users can reorganize them using the and buttons and use the menu that displays the options Add Button, Remove, Duplicate and Reset to Default.

      • The right panel displays button options. For default buttons, the option Hide this default toolbar element is displayed. For custom toolbar buttons:

        • The tab Properties allows setting the Label, Tooltip, Icon, Colors and Hover Colors,

        • The tab Action allows setting an action and the parameters it requires to be performed. For more details, please refer to Section Using the Action API.

      Figure 9.28. Understanding the Custom View or Dashboard Toolbar
      Understanding the Custom View or Dashboard Toolbar
    • Filter Bar to display at the top of the dashboard, allowing to filter data, at any time, by typing in the desired value.

      [Note]

      Note that:

      • When a Filter Bar is configured, the Toggle Filters On button in the toolbar displays and hides the Filter Bar. The information on the current hidden filters that is usually displayed is instead available using the button OTHER FILTERS in the Filter Bar.

      • If the filter scope is set to GLOBAL in the Application Preferences, the filters will be applied on all dashboards and views at the same time. In this case, filters defined on a dashboard or view will appear in the dropdown menu Other Filters on all other dashboards or views with a Filter Bar. Otherwise, setting the filter scope to VIEW will apply filters to the current dashboard or view only. For more details, please refer to Sections Understanding Widget Context and Setting Application Preferences.

      • A message in the tab indicates if dashboard filters are configured at the same time, which might impact the data displayed.

      This tab allows adding and reorganizing interactive filters in the Filter Bar using the buttons Move up, Move down and Add filter.

      From the Filter Bar Settings, it is possible to:

      • Select the Default Filter Bar visibility, or

      • Set the Filter Scope for the entire application.

      Figure 9.29. Editing Filter Bar Settings
      Editing Filter Bar Settings

      For each filter, the buttons Duplicate and Remove are available in the list and two tabs allow setting the filter:

      • Appearance properties, such as its:

        • Label, which can only be edited after selecting a Filter Type.

        • Hide Label parameter.

        • Placeholder text to display in the filter.

        • Icon for the filter.

        • Hide Color Hint parameter.

      • Behavior properties, such as its:

        • Filter Type, i.e. the entity by which to filter data. Changing this parameter updates the filter Label accordingly.

        • 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..

        • 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.

      Figure 9.30. Understanding the Custom View or Dashboard Filter Bar
      Understanding the Custom View or Dashboard Filter Bar
    • Dashboard Filters to apply at all times. A tag next to the tab name indicates how many filters are currently configured, if any.

      [Note]

      Note that the Dashboard Filters only apply to the selected custom dashboard or view, regardless of what the filter scope is set to in the Application Preferences. For more details, please refer to Sections Understanding Widget Context and Setting Application Preferences.

      This tab allows using the ADD FILTER button to set individual filters.

      For each one, use the Settings button to Delete 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..

    • Using the button Discard Changes and Exit to perform the related action.

    • Using the button Save Changes and Exit to perform the related action.

  4. Display More options such as:

    • Switch to Fullscreen for the current view or dashboard;

    • Refresh Data of the current view or dashboard;

    • Copy URL of the current view or dashboard;

    • Add a Widget on the current dashboard — not a view; and

3.4. Understanding Widgets

A widget is the elementary component used in the web client to display data, capture user interactions or implement any custom behavior.

You can add and configure a widget on any custom view or dashboard, as described above in Section Understanding the Custom Views and Dashboards.

DOC provides several widgets out of the box:

  • Button

  • Calendar Widget

  • Chart

  • Code Editor

  • Composite Widget

  • Data Explorer

  • Data Grid

  • Filter

  • Gantt Chart

  • Issue Details Widget

  • Issue List Widget

  • Job Details

  • Job List

  • KPI (only available on dashboards)

  • Map Widget

  • New Job Wizard (only available on views)

  • Pivot Table

  • Rich Text

  • Rules Script Editor

  • Sample Map Widget

  • Sample Widget

  • Sample Widget Parameters

  • Scenario List

  • Scenario Timeline

  • Workspace List

For more details on configurable widgets, refer to Section Using the Default Widgets.

3.4.1. Understanding Widget Context

[Note]

Visibility of the application elements depends on:

When using the web client, the data displayed in the widgets depends on the "context". For more details, refer to Section Understanding the Scenario Service Context.

The context is defined by the:

3.4.2. Understanding Widget State

Some widgets, such as the Data Grid or the Data Explorer have a persistent state, so that when you leave a view and reopen the same view later, the widget is restored to the previously saved state (e.g. applied filters, sorts, selected type, column size, ...).

Widget states are saved per user and per widget, to reset a widget to its initial state a menu item is available in the top-right corner menu.

Note that when a view, or a dashboard configuration is modified, all the widget states associated to this view or dashboard are reset.

Figure 9.31. Understanding the Widget Reset
Understanding the Widget Reset

3.4.3. Understanding Table Widgets

Several widgets display data in the form of a table where columns can be manipulated a way or another. Most of the time, the column labels can be set via the widget configurator. For more details, refer to Section Using the Default Widgets.

In the widget, each column label displays a menu button when hovering the mouse over it. This three-tabbed menu can provide users with:

  • Options for the selected column or all, such as:

    • Pin column, with No Pin by default, which can be set to Pin left or Pin Right to always display the selected column when scrolling horizontally;

    • Autosize This Column, to display as much text as possible in this column;

    • Autosize All Columns, to display as much text as possible in all columns;

    • Group by and/or Un-group all — only available for certain columns in certain widgets —, which allows reducing all open folders/groups at once;

    • Reset Columns, which restores all columns size and pinning state to default;

    • Expand All Rows Groups, which allows developing all the list rows at once;

    • Close All Rows Groups, which allows reducing all the list rows at once;

  • An option to Filter the rows — only available for text columns —, with the parameters Contains, Does not contain, Equals, Does not equal, Begins with, Ends with, Blank and Not blank;

  • An option to find and choose which columns should be displayed in the list.

3.4.4. Understanding Scenario Comparison

Scenario comparison offers the ability to highlight differences between two scenarios data.

The Data Grid widget, which is also embedded in the Data Explorer widget, allows to compare scenarios data row by row. For more details, refer to Sections Using the Data Grid Widget and Using the Data Explorer Widget.

When comparison mode is enabled, the Data Grid splits comparison data in three tabs:

  • Rows with modified values.

  • Rows added in the selected scenario compared to the reference scenario.

  • Rows deleted in the selected scenario compared to the reference scenario.

Rows of the compared scenarios are associated between scenarios according to primary key definition of each table, as defined in the application JDL file.

Scenario comparison mode can be enabled through a dedicated button in the views and dashboards toolbar.

Figure 9.32. Understanding the Scenario Selector in Comparison Mode
Understanding the Scenario Selector in Comparison Mode

After activating the comparison mode, the scenario selector will give the ability to select a scenario, and also to select a reference scenario to compare with (orange).

A switch button is also present to switch the selected and the reference scenarios.

The comparison mode is global.

Compatible widgets (Data Grid and the Data Explorer) can individually activate this mode by configuration:

Figure 9.33. Understanding the Automatic Scenario Comparison Mode
Understanding the Automatic Scenario Comparison Mode

When a widget is not configured to automatically enable comparison mode, a button in the widget toolbar allows users to switch between normal and scenario comparison mode.

When scenario comparison mode is enabled the Data Grid will show two columns by entity attributes, one for the selected scenario (in gray) and one for the reference scenario (in yellow).

Note that the primary key attributes will be displayed as a single column since the value is the same for both scenarios.

Figure 9.34. Understanding the Scenario Comparison Mode
Understanding the Scenario Comparison Mode
[Note]

Note that:

  • Only valid scenarios can be compared.

  • Only entities with primary keys are supported.

  • Singleton entities are not supported.

Scenario comparison can be used via a dedicated API. For more details, refer to Section Understanding GraphQL Scenario Comparison.