Single-Page Application Overview¶
A Single-Page Application (SPA) is a composite application page that integrates multiple visual pages within a unified interface through configuring Navigators. SPA enables centralized management and dynamic linkages across multiple pages and diverse data perspectives.
The core strength of the SPA lies in its powerful navigation and context-switching capabilities. When the end users modify filtering conditions or switch tabs via a Navigator, they will be instantly presented with updated content focusing on the corresponding data and insight. This creates a coherent, in-depth, and efficient data analysis experience within an application.
SPAs are designed to address two critical challenges in complex business scenarios:
Information Aggregation: SPAs consolidate relevant information that was scattered across different pages or systems into a unified framework. This saves end users the trouble of switching between menus or applications.
Contextual Coherence: SPAs ensure coherence throughout the analysis workflow by preserving navigator states and filtering conditions as the end users explore different data segments.
Key Concepts¶
Before you start creating an SPA page, you need to learn about the Key Concepts of SPA.
Application Scenarios
SPAs are commonly used in the following scenarios:
Asset Management Platform
By combining filters and multiple canvases, application builders can build a global, visual asset operation management and control platform for operation and maintenance personnel to monitor and analyze the production and consumption of resources in the site and the operation data of assets.
In the Resources tab page, operation and maintenance personnel can view resource data in the selected area, such as electricity consumption, power generation, energy usage trend charts and other data, to help understand the resource utilization of the site.
In the Assets tab page, operation and maintenance personnel can view the real-time data of assets in the selected area, including asset online rate, number of active alarms of assets, station status ranking, etc., and discover possible problems with assets in a timely manner. Improve operation and maintenance efficiency.
Energy Monitoring Panel
In a single-page application, “site filter + tab” and multiple canvases can be added to integrate the data overview with various energy dashboards, helping enterprises to fully understand the asset usage of the energy system. The page contains a total of 10 tabs. If you switch to any tab, the operation and maintenance personnel can view the corresponding dashboard of the selected site, track the energy consumption and operating data of various equipment in a timely manner, and optimize the scheduling strategy accordingly to improve the overall energy efficiency and sustainability.
User Interfaces¶
DTV creates integrated application building experiences for both developers and end users, covering the entire life cycle of the application pages.
Configuration Interface¶
The Configuration Interface is designed for application developers. It is built to support the creation, configuration and publishing of SPAs. The following shows the interface and explains the functionality of each area:
Runtime Interface¶
The Runtime Interface is where the end users view and interact with the published SPA. It can be accessed via webpage or large-screen devices. End users can modify configuration or adjust the layout without involving application developers. The following shows the interface and its functional areas.
No. |
Functional Area |
Description |
|---|---|---|
1 |
Navigation Bar |
The navigation bar allows users to set data filtering conditions and switch tabs and will trigger the display of corresponding data and canvas content. |
2 |
Canvas |
The canvas is the major display area for end users to view filtered data and interact with the widgets. |
3 |
Configuration Entry |
Entry to the configuration page, where authorized end users can add new widgets, modify widget configuration, or adjust page layout and PDF layout. Their modifications will apply to the current page or be saved as a new template without further operation from the application developers |
4 |
PDF Export Button |
The button that allows end users to save the current canvas as a PDF file to be viewed offline or shared with others. |
Create a Single-Page App¶
Application developers can visit Basic Process of Building Single-Page Applications to learn about the major configuration steps.