Configuring Single-Page Applications¶

This article introduces the configuration process of a single-page application. After learning about Single-Page Application Overview, you can follow the instructions below to create and configure a single-page application.

Workflow¶

The process of configuring a single-page application is as follows:

Creating a new single-page application: Create a single-page application within a project.
Configuring basic information: Configure the basic information of the page, such as the project, label, response mode, theme, etc. to which the page belongs.
Configuring Navigation: Configure asset filters, time filters and tabs, and configure function entrances for users to filter data and switch pages.
Adding Canvas, Layers and Widgets: Configure the canvas level of the page, as well as the widgets and elements displayed on each level.
Configuring Linkage: Configure the page linkage between filters, tabs and canvas, and configure the data linkage between filters and widget data.
Publishing Page: Publish the page after completion, and you can embed the page URL into the application for use.

Unit 1: Creating New Single-Page Application¶

In the navigation bar, select DTV Center and choose one of the methods to create a page:

Select New in the Single-Page Apps tab.

Select View More, find the required project in the project list on the single-page application tab, and select + in the project.

Unit 2: Configuring Basic Information¶

On the Basic Configuration page, you need to configure the basic information of the page, including:

Page Name¶

The page name is a name that is convenient for viewing and management within DTV. It can only be seen in DTV and cannot be perceived by users when viewing the page.

Tag¶

Add existing tags to the page, or create new tags. Tags are used to manage pages in bulk.

Belonged Group¶

Assign 1 group to the page. Only groups within the permissions of the current account are supported. For more information, see Managing Groups.

Project¶

A project is a unit of rights management in DTV, and multiple pages can be stored in a project. In the Projects drop-down list, you can only select projects that you have permission to edit. in:

Default Project is open to all users in the OU, and all users can view, edit, and delete pages in the default project.
The projects and pages in Ungrouped will be viewed by all users in the OU. If you need to reassign the group to which a project belongs, you can go to Basic Information > Projects to edit the project after assigning project resource permissions to the current account in the management background.

Theme¶

Specify 1 color theme for the page. The theme will determine the base color of the canvas and widgets in the page. You can also configure other colors for the widget when configuring it.

Response Mode¶

Responsive mode determines the proportions of the page, choosing in which mode the page opens. Once specified, the page will display the canvas, layers, and widgets according to the corresponding proportions.

Unit 3: Configuring Navigation¶

In Navigation Configuration, you can configure the navigator at the top of the page, including filters, tabs, etc. See Single-Page Application Overview for what a navigator is.

After dragging and adding a navigator from the navigation list, you can refer to the following instructions to configure the navigator.

Site Hierarchy Source¶

Configure the site level list displayed in the filter drop-down box when the user selects a site in the filter, including group, region, site type, and site list. Currently, the site-level source only supports Organizational structure of the EnOS application portal. The organizational structure that a specified user has permission to view can be obtained through the Get Structure by User API.

Device Hierarchy Source¶

Configure the device hierarchy list displayed in the filter drop-down box. Currently, the device level source only supports the asset level of the general data service. The hierarchical relationship of the specified device can be obtained through the Query Asset Hierarchy API.

Site Type¶

Configure the site type displayed in the filter drop-down box. The site type comes from Business Objects in Common Data Service. After configuration, users will be able to view and filter only these types of sites and devices within the sites on the page.

Site Selection¶

Configure the selection method in the filter drop-down box:

Site node radio selection: You can select any station. At this time, the page will display the aggregated data of the selected station.
Any node radio selection: You can select any station, region or group. At this point the page will display aggregated data for the region or group.
Multiple Selection: You can multi-select any node. At this time, the page displays the highest level of aggregated data.

Device Type¶

Configure the device type displayed in the filter drop-down box. The device type comes from Business Objects in Common Data Service. Once selected, users will be able to view and filter only these types of devices on the page.

Site/Device Filter Display Name¶

Configure display names in filters. After configuration, the display name of the corresponding type filter will be updated together.

Tab Configuration¶

Users can switch the displayed canvas by switching tabs. In the tab configuration, you can add and delete tabs for the page, customize the page name, and associate attributes for the tab. See Single-Page Application Overview for what a tab is.

By default, when users filter assets, only the asset data range displayed in the canvas is affected, and the tabs displayed on the page are fixed. When you need to display different tabs for different assets, you can associate attributes with the tabs and associate an attribute value with each tab. One tab only corresponds to one value, and it is recommended to associate attributes with enumerable values.

After configuring as shown in the figure, when the user filters assets on the page, if the mdmType attribute value of the selected asset is Solar, the page will display O&M Dashboard and Power Generation Performance 2 tabs . If the mdmType attribute value of the selected asset is Hydro, Steam Cleaning Panel and Thermal Insulation will be displayed on the page.

Time Filter¶

Time filters provide users with access to a specified time range. First, you need to configure the selection method of the time filter. You can choose Time Point or Time Range. The remaining configuration items will differ according to the selection method.

Time Point Filter¶

In the time point filter, the user only needs to specify an end time point, and the system determines the start time based on the default time interval or the user-specified time interval to derive the time range. For example, the time interval is day, and the time point is 2024-08-06 18:23:42. The time range of the data displayed on the page will be 2024-08-06 0:00:00 to 2024-08-06 18 :23:42.

Time Range Filter¶

In the time range filter, users can specify the start and end time of the data.

Selecting Hour/Minute/Second¶

After checking, when the time interval is day, the user is supported to specify hours, minutes and seconds, and the time range will be from 0:00:00 of the day to the specified hour, minutes and seconds.

Selecting Future Time¶

Future times are times that are yet to come within the current time zone. If the time range specified by the user includes future time, and the widget supports displaying future forecast data, the widget will display forecast data for the corresponding period. When the widget does not support displaying forecast data, the widget will still display data from “start time to this moment”.

The timeframe will vary depending on whether future time is supported. For example, the user selects the time interval as day at 11:40:58 on August 6, 2024, and the time point is 2024-08-06,

When Support future time selection is checked, the time range is 2024-08-06 0:00:00 to 2024-08-06 23:59:59, and the end time is the last 1 second of the day, including 8 A time in the future within the 6th month.
When Support future time selection is not checked, the time range is 2024-08-06 0:00:00 to 2024-08-06 11:40:58, that is, the end time is at this moment.

Time Interval Filter¶

The time interval filter allows users to specify the time range of data in natural time units. When the time interval is switched, the options in the time filter will also change. For example, when the user selects the time interval as weeks and selects 2024-07-10 to 2024-07-20, it actually specifies the 28th week of 2024 (the week of 2024-07-10) to the 29th week ( The data of the week of 2024-07-20), the time range is 2024-07-08 0:00:00 to 2024-07-21 23:59:59.

Available Parameters¶

Built-in parameters are the output parameters built into the navigator, and each navigator has different built-in parameters. When the user selects a filter item in the navigator, he actually specifies the values of some parameters. The navigator will pass the selected filter items as output parameter values to the page according to the specified parameter transmission format. On the page, you can configure the relationship between the navigator parameters and the widget data source parameters for the widget, that is, when the user switches which filter item, which parameter values should the widget use to request data from the data source.

For how to configure linkage relationships, see Linkage Configuration.

Unit 4: Configuring Canvas¶

In the canvas configuration, you can add layers and widgets to the canvas and configure the data in each widget. See Single-Page Application Overview for the relationship between canvas, layers, and widgets.

Step 1: Adding Canvas¶

Multiple canvases can be added to a page. Canvases are divided into the following types based on the number of layers added by default:

Single Layer Canvas: After creating this canvas, the canvas contains 1 layer by default. You can still add another layer to the canvas.
Multi-Layer Canvas: After creating this canvas, 2 layers are added by default.

Step 2: Configuring Canvas¶

Select Canvas Configuration, and in the Canvas Configuration pop-up window on the right, you can configure the name, background color, filling method, etc. of the canvas.

Step 3: (Optional)Adding Layer¶

When you create a canvas, 1 or 2 layers are created by default. If necessary, you can add additional layers to the canvas. You can add up to 2 layers to a canvas.

Step 4: Configuring Layer & Panel¶

Select Layer Configuration and configure the layout of the layer and the panels on the layer in the pop-up window on the right.

Refer to the instructions below for details on configuring layers and panels.

Layer Layout¶

In a single-layer canvas, there is only 1 layer, and the default layout is full-screen layout. In a multi-layer canvas, you can define the layer layout for each layer. Refer to the Layer section in Single-Page Application Overview to choose the layout you need.

Embedding Content¶

A panel is a complete area in a layer where content is placed. It can be an entire panel covering the entire screen, or it can be a left/right panel located in a small area of the screen. You need to define the embedded content of each panel in the layer. When the user views the canvas, each panel of the layer can display different content.

You can choose from the following 2 contents:

Editor: The panel defaults to the DTV editor. You can add widgets to the panel and build visual pages.
External link: Insert links to other DTV pages in the panel and treat the panel as a pop-up window displaying other pages. The panel will display embedded page content and cannot be edited in the current page.

Padding¶

Padding is the distance between the inner content of the panel and the border.

Step 6: Configuring Widget¶

Just like in the dashboard page, you can configure the data and styles of the widgets, drag and move widgets, etc. See Common Configurations for Widgets for a description of the widget configuration items.

Data Linkage Between Widget and Navigator¶

After adding a widget, if you want the data in the widget to follow the navigation switch, you can configure the linkage between the widget data items and the navigator parameters for the widget. When the user switches the asset/time range in the navigator, the widget on the page will use the parameter values output by the navigator to request data from the data source and display the returned data in the widget to complete a data filtering behavior. For a description of the configuration items, see Configuring Linkage > Step 2: Configuration parameters.

For example, the linkage condition defined in the above figure is: station ID in the navigator = mdmId in the widget data item. When the user selects an asset with a site ID value of abc in the filter, the widget will request the asset data whose mdmId is abc from the data source and display it in the widget.

Unit 5: Configuring Linkage¶

In the linkage configuration, you need to configure the linkage for the navigator, canvas, and widget data. See Single-Page Application Overview for descriptions and examples of relationships.

Step 1: Linking to Canvas¶

When you add multiple canvases to the page, you need to configure the linkage between the navigator and the canvas.

Follow these steps to associate a canvas:

Select a navigator: Choose a navigator from the navigators you added to the page. If not configured, when the user switches filter items or tabs in the navigator, the canvas will not be switched and only the data will be updated.
Select conditions for switching canvases via the navigator:

Time filter defaults to time interval as condition. When the user switches time intervals, switch canvases. The time interval options are determined by the configuration of Time Filter in Navigation Configuration.

Navigators with tabs use tab as a condition by default. When the user switches tabs, switch canvases.
Site/device filters without tabs will be conditional on properties. Switches the canvas when any of the assets selected by the user in the filter has a property value that matches the defined value.

associates a canvas with each condition. For example, in the picture above, the user needs to select Day in Time Filter, and the selected assets contain assets with Regional attribute value Shanghai before they can switch to Canvas 1.
selects the default canvas. When the user does not select any assets, or the selected assets do not meet the conditions defined in the above steps, the page will display the default canvas.

Step 2: Configuration parameters¶

If you want the data in the widget to follow the navigation switch, you can batch configure the linkage between the navigator parameters and widget data items in Configuration Parameters. When the user switches the asset/time range in the navigator, the widget on the page will use the parameter values output by the navigator to request data from the data source and display the returned data in the widget to complete a data filtering behavior. Follow the steps below to configure widget parameters in batches:

Select the canvas and layer where the widget is located in the drop-down box on the right.
Select the Configure Data Linkage button.
Select parameters and linkage conditions in the pop-up window:
- Navigator Parameters: From the filters, asset types, selection methods, etc. you defined in the Navigation Configuration step.
- Linked widgets: Select the widgets that need to be linked within the selected layer. widgets that use the same data source can be selected in batches to improve configuration efficiency.
- Linked data items: Select data items from the data source being used by the widget. Data items are further divided into 2 categories:
- Data source parameters: The request parameters given by the widget to the data source define the conditions for each request, such as the start time and end time of the data.
- Data items: Return parameters of the data source. The widget selects the required data items from these return parameters and displays them in the widget in the form of indicators, extensions, dimensions, etc.
- Linkage conditions: When the conditions between the navigator parameters and widget data are met, linkage occurs. in:
- <>: Indicates that when the navigator parameter is within the range of the widget parameter value (including the endpoint value), linkage will occur.
- like: Indicates that linkage occurs when the navigator parameters fuzzy match the widget parameter values. Wildcard characters % and _ are supported.
- in: Indicates that linkage occurs when the navigator parameter is in the value list of the widget parameter.
After completed, the configured linkage relationship will be displayed in the corresponding layer.

If a linkage relationship has been configured for a single widget in Canvas Configuration > widget Linkage Navigator, the linkage relationship will also be displayed in the corresponding canvas of the current page.

Unit 6: Publishing Page¶

After completing the page configuration, select Publish in the upper right corner to obtain the page URL and embed the page in the application.