• Documentation
  • Basic Workflow for Building Single-Page Applications

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.


DTV Center


  • 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：Analyze and Plan


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:

    • List all widgets 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: Prepare Data Resources

Data is the core of the visualization application. Ensure your data sources are ready and accessible.

  1. Create and Validate 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, Using CDS Data Sources, and Using Metric Management Data Sources.

  2. Define Datasets (Optional): Use datasets to customize data request parameters and return structures, and write JavaScript to transform, aggregate, or calculate data as needed.

  3. Validate Data (Optional): Preview and debug returned data after dataset configuration to ensure fields and values match your expectation.

Step 3: Get Design Kits Ready


Collect all static resources needed for the page to ensure a smooth design-to-development workflow.

  1. Pull required background images, icons, and decorative elements from the design mockups.

  2. Work with UI designers to optimize the dimensions for target displays (e.g., recommend 1920×1080 for large-screen backgrounds).

  3. 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:


DTV Center


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

  2. Configuring Navigation: Add filters for users to select data and switch pages.

  3. Configuring Canvas, Layers and Panels: Add canvas and layers and configure their layouts, background, etc.

  4. Configuring Widgets: Add widgets to the panels and configure their data, style and interactive activities.

  5. Configuring Linkage: Configure the linkage between the filters, canvas, and widgets that you added.

Step 1: Create a Page

  1. Create New Page: You can create a Single-Page App from scratch or create one based on an existing template.

  2. Configure Basic Information: Enter basic information including name, belonged group, folder responsive mode, and theme.

  3. Select Datasets (Optional): Choose data sources and datasets to make them accessible to the navigators and widgets on this page.

  4. Choose Widget Templates (Optional): Assign a widget template folder to end users with edit permissions for this page.


Step 2: Configure Navigators


  1. Add Navigator: In the Navigation Configuration tab, add navigators that enable users to switch canvases and filter data.

  2. Configure Navigator: Configure the data source, drop-down options and selection methods.


Step 3: Configure Canvases, Layers and Panels


  1. Add 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.

  2. Configure Canvas: To configure the name, background, etc. of each canvas that you added.

  3. Add Layers: A layer is created by default when you added a canvas. You can add another layer to the canvas.

  4. Configure Layers and Panels: To enter layer name, choose a layout, imbed content for the panels, etc.


Step 4: Configure Widgets

  1. Add Widgets: In the Canvas Configuration tab, drag widgets from the Widget Library into the panels.

  2. Configure Widgets: Configure data, styling, filters, and interactions for the widgets you added to the page.


Step 5: Configure 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.

Publication


After completing all configuration, perform final validation and deliver the page for use.

Step 1: Preview and Test


Click the Preview button in the upper-right corner to enter the Runtime Interface and simulate the end-user experience. Test all page functionality, interactions, and visual rendering.

Step 2: Publish the Page

  • If the development and application of the page are in the same environment, click 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.


Step 3: Use 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 4: Assign Permissions

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

  2. (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:

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

Roll Back to a Previous Version


You can undo changes by reverting the page to a historical version and republishing it.

Edit 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 at the layer configuration drawer.

  • Performance Optimization

    • When using JavaScript scripts to customize datasets, avoid complex logic that may impact browser performance.