Create Single-Page Application


To create a single-page application involves five major steps—page creation, basic configuration, navigation configuration, canvas configuration, and linkage configuration. This article walks you through creating a single-page application from scratch and performing its basic configuration.

Before You Start


Before you create a single-page application, you need to:

Create a Single-Page Application


Enter the DTV Center and choose one of the following ways to create a single-page application:

  • Creating from the homepage

    Choose the Single-Page Apps tab and click on the + New button to create a new page.

DTV


  • Creating within a designated folder

    1. Click the View More button, and enter the Single-Page Apps tab.

    2. Choose a folder from the folder list. Existing single-page applications in this folder will be shown on the right.

    3. Click the gray rectangle with a + to create a new page. You will then land on its Basic Configuration page.

dashboard

Configure Basic Information


After creating a single-page application, you will enter the Basic Configuration page, where you fill in basic information of the page, including:


Page Name

Assign a custom name for the newly created single-page application. It is for management purposes within the DTV Center and cannot be perceived by the users of the page.


Tag

Add existing tags to the page or create new tags. You can use tags to manage pages in bulk.


Belonged Group

Assign a group that the page belongs to. You can choose from groups within the permissions of your current account. Groups are used to control and manage user access. For more information, see Managing Groups.


Folder

Choose a folder that you have permission to from the dropdown menu, or you can create a new folder in the current group by clicking on the + Add button. Folder is the access management unit in DTV. A folder may contain multiple single-page applications. For more information, see Managing Basic Info — Digital Twin Visualization documentation


Theme

Specify a color theme for the page. The theme will determine the base color of the canvas, navigators and the widgets on the page. You can modify the colors for the widgets during widget configuration.


Responsive Mode

Choose a mode that the page opens in. Responsive mode determines page proportion and the corresponding size of the canvases, layers, and widgets.


Enable PDF Export

Enable PDF export and type in the default name of the exported PDF file. Once enabled, a PDF View button will appear on the configuration interface, allowing you to style the exported PDF file. The export PDF button will also appear on the runtime interface, enabling users to export the single-page application in PDF format to view the page offline.


Specify Datasets (Optional)

Specify the data source and datasets to be used in this single-page application to make them easily accessible when configuring navigators and widgets. This helps streamline your setup.


Specify Widget Templates (Optional)

Assign widget template folders available to this single-page application. Users of the page can only view and use the widget templates in the folders that you assigned. This is an optional step to control template visibility.


After finishing Basic Configuration, you can go on with the Navigation Configuration, to add and configure navigators on the page.

Learn More

You can also create a single-page application from the templates in DTV’s Template Center. For more information, see Create Single-Page Application from Templates.