Basic Workflow for Building Single-Page Applications¶
This guide aims to help developers grasp the basic workflow of building a Single-Page Application in DTV, covering four phases: preparation, configuration, publication, and maintenance.
Preparation: Analyze the needs and objectives based on the design draft. Structure the page and prepare data resources.
Configuration: Create a Single Page Application in DTV Center, then add and configure the navigators, canvases, Widgets, and the linkages between them.
Publication: Publish the page after thorough tests, then make it available to end users.
Maintenance (Optional): Adjust page content based on business needs, including rolling back to historical versions and editing online.
Before getting started, ensure you have read the Single-Page Application Overview.
Preparation¶
After receiving the design mockups, analyze the application’s requirements and objectives, and prepare all necessary data and resources to ensure smooth development process.
Step 1：Analyzing and Planing¶
Before creating the page, map out the page structure and data based on the design mockups.
Page Structure Planning:
Determine how many navigators are needed, including their displayed names and drop-down menu content.
Decide how many canvases to create (e.g. one for Overview, another for Detailed Analysis or Geographical Distribution), enabling users to switch between different perspectives.
Determine how many layers to build within each canvas. Place static background such as pictures or maps at the bottom and widgets above.
Content and Data Planning:
Map out what widgets are needed and their data sources.
Design the linkages between widgets and between widgets and navigators. For example, a modification to the time filter can trigger changes of all metric displays.
Step 2: Preparing Data Resources¶
Data is the core of the visualization application. Ensure your data sources are ready and accessible.
Creating and Validating Data Sources:
Static Data: Organize static data into a CSV file. Create a Static Data source in DTV Center > Data Sources and upload the file.
External Dynamic Data: Create a Restful API data source in DTV Center > Data Sources to integrate data from third-party systems or applications via REST API.
EnOS Built-in Data: Ensure required asset models, measure points, and metrics are available. For more details, see Using TSDB Data Sources and Using CDS Data Sources.
Defining Datasets (Optional): Use datasets to customize data request parameters and return structures, and write JavaScript to transform, aggregate, or calculate data as needed.
Validating Data (Optional): Preview and debug returned data after dataset configuration to ensure fields and values match your expectation.
Step 3: Getting Design Kits Ready¶
Collect all static resources needed for the page to ensure a smooth design-to-development workflow.
Pull required background images, icons, and decorative elements from the design mockups.
Work with UI designers to optimize the dimensions for target displays (e.g., recommend 1920×1080 for large-screen backgrounds).
Test how layouts adapt to various resolutions and unusual screen shapes. Use the adaptive feature in the Canvas Configuration to maintain consistent viewing experiences.
With these materials ready, you can move on to the configuration phase.
Configuration
The basic workflow of building a Single-Page App goes as follows:
Creating a new Single-Page App: Create a Single-Page App within a folder and put in the basic information, such as the label, response mode, and theme.
Configuring Navigation: Add filters for users to select data and switch pages.
Configuring Canvas, Layers and Panels: Add canvas and layers and configure their layouts, background, etc.
Configuring Widgets: Add widgets to the panels and configure their data, style and interactive activities.
Configuring Linkage: Configure the linkage between the filters, canvas, and widgets that you added.
Step 1: Creating a Page¶
Creating a New Page: You can create a Single-Page App from scratch or create one based on an existing template.
Configuring Basic Information: Enter basic information including name, belonged group, folder responsive mode, and theme.
Enable Static Data Entry (Optional): Enable static data entry to support switching between integrated data or static data in runtime.
Selecting Datasets (Optional): Choose data sources and datasets to make them accessible to the navigators and widgets on this page.
Choosing Widget Templates (Optional): Assign a widget template folder to end users with edit permissions for this page.
For more information, see Creating a Single-Page Application.
Step 3: Configuring Canvases, Layers and Panels¶
Adding Canvas: A single-layer canvas is created by default. Add more layers or canvases at the Page Hierarchy area to the left of the canvas.
Configuring Canvas: To configure the name, background, etc. of each canvas that you added.
Adding Layers: A layer is created by default when you added a canvas. You can add another layer to the canvas.
Configuring Layers and Panels: To enter layer name, choose a layout, imbed content for the panels, etc.
For more information, see Configuring Canvas, Layers, and Panels.
Step 4: Configuring Widgets¶
Adding Widgets: In the Canvas Configuration tab, drag widgets from the Widget Library into the panels.
Configuring Widgets: Configure data, styling, filters, and interactions for the widgets you added to the page.
For more information, see Configuring Widgets.
Step 5: Configuring Linkages¶
To enable dynamic data interactions, you configure the following linkages in the Linkage Configuration tab:
Link Canvas to Navigator: When end users filter by specific values in the Navigator, the page displays the Canvas associated with those attributes.
Link Widget to Navigator: When end users change filter conditions in the Navigator, the widget displays data matching the updated criteria.
For more information, see Configuring Linkages.
Publication¶
After completing all configuration, perform final validation and deliver the page for use.
Step 1: Previewing and Testing¶
Select Preview to enter the Runtime Interface and simulate the end-user experience. Test all page functionalities, interactions, and visual rendering.
Step 2: Publishing the Page¶
If the development and application of the page are in the same environment, select Publish in the upper-right corner. This will generate a URL for end-user access.
If you create the page in a test environment, export the page from the test environment and import it into the production environment. Then publish the page to generate the final production URL.
For more information, see Checking and Publishing the Page.
Step 3: Submitting Static Data (Optional)¶
If you have enabled static data entry during page creation, follow the steps below to submit static data:
Copy the Static Data Entry Page URL after publishing the page. Or, obtain it from Others > Publish Information in the configuration interface.
Open the URL to access the Static Data Entry Page, and submit via manual entry or file upload.
For more information, see Submitting Static Data.
Step 4: Using the Page¶
You can put the published page into use in the following ways:
Provide the page URL to end users for access.
Embed the page URL as a menu item in an EnOS application. For instructions, see Creating Applications — EnOS Application Enablement documentation.
Embed the page URL into third-party applications for independent publishing outside the EnOS platform. Contact the system administrator if you need any help.
Step 5: Assigning Permissions¶
Contact the OU Administrator to assign resource permissions for assets to end users. Once assigned, end users will be able to view asset data on the page.
(Optional) If the page is embedded as a menu in an EnOS application, contact the OU Administrator to assign menu group permissions for the application to end users. This grants them access to the menu.
Maintenance (Optional)¶
After the page is launched and in use, you may need to adjust or improve the page content as your business evolves. You can update the page following the guide below:
Modifying the Page¶
To make changes after publication, navigate to the DTV Center in the production environment, modify the page, and republish. Republishing does not change the page URL. End users accessing the page from the original entry point will see the latest version.
Rolling Back to a Previous Version¶
You can undo changes by reverting the page to a historical version and republishing it.
Editing Online¶
To edit the page during runtime, contact the OU Administrator to assign your account the online edit permission. Once granted, you can edit the page directly in runtime, and changes take effect immediately without republishing.
To authorize end users to edit online, in addition to assigning the above-mentioned editing permission to end-user accounts, contact the OU Administrator to assign the page’s folder as a resource to them. End users will be able to edit the page or widgets online based on the permissions they obtain.
Best Practices¶
Environment Isolation
Build and validate pages in a test environment to reduce risks.
Use the export/import feature to deploy across environments and ensure consistency.
Widget Reuse
Save frequently used widgets as templates and store them in a widget template folder to improve development efficiency.
Reuse content from existing dashboard pages in the layer configuration panel.
Performance Optimization
When using JavaScript scripts to customize datasets, avoid complex logic that may impact browser performance.