Configuring Widgets in Single-Page Applications¶
A widget is the smallest configurable unit in DTV pages. Widgets present and analyze data in various ways and represent different business metrics. Widgets are categorized into two types—charts and containers—based on their functions and purposes. For more information, see Widget Overview.
After configuring the canvas, layers, and panels, you can start designing the widgets following the guide below.
Prerequisites¶
Before you start, make sure a single-page application page has been created, and the current account has editing permission for the corresponding page. If not assigned, contact the group administrator.
General Widget Operations¶
Adding a Widget¶
On the editing interface of the single-page application, open the corresponding layer.
Choose one of the following ways to add a widget to the panel:
Add a widget from the Basic tab of the widget library on the left, and configure it from scratch.
Add a widget template from the Templates tab of the widget library on the left, and reuse the template configuration.
Checking Widget Position¶
You can check a widget’s position on the page or a chart’s position in the container by moving the mouse to the Position icon on the top left corner of the widget.
Widget Position in Page¶
Position in page is the coordinate position of a chart or container on the page. DTV uses the upper left corner of the canvas as the origin of the coordinate system. The position of a widget is defined by the location of its own top-left corner.
Vertical axis: extends downward in units based on the configured grid height.
Horizontal axis: extends rightward in units based on the configured grid number.
Chart Position in Container¶
Position in container is the coordinate position of a chart within a container. The upper left corner of the container is the origin of the coordinate system. The position of a chart in a container is defined by the location of the chart’s top-left corner.
Vertical axis: extends downward in units based on the configured grid height.
Horizontal axis: extends rightward in units based on the configured grid number.
Moving a Widget¶
Within the same panel, you can drag a widget directly to reposition it. Drag the lower-right corner of the widget to resize it.
If the current layer has multiple panels, move the mouse to the … icon on the top left corner of the widget, and select Move to Another Panel from the dropdown menu, to move the widget to another panel on the same layer.
Saving as a Template¶
You can save a commonly used widget as a template, to quickly start editing widgets from the template. Follow these steps to save a widget as a template:
Move the mouse to the … icon on the top left corner of the widget, and a dropdown menu will appear.
Select Save as Template from the dropdown menu, and complete the Belonged Group, Folder Name, Template Name, and Tag configuration in the popup window.
Select OK to save the template.
Deleting a Widget¶
Select the widget you want to delete, move the mouse to the … icon on the top left corner of the widget, and select Delete from the dropdown menu.
Note
If you delete a container, all charts in the container will be deleted.
Deleting a widget will erase its relevant linkages.
Duplicating a Chart¶
After completing the specific configuration of a chart, if you need to reuse the chart on the current page, move the mouse to the … icon on the top left corner of the chart, and select Duplicate Widget from the dropdown menu.
The duplicated chart is automatically placed in the same panel; if the chart is in a container, the duplicate will be placed outside the container. If you need to move it to another panel or container, you can adjust it manually.
Configuring Widgets¶
Configuring Containers¶
Move the mouse to an added container, and select the Edit icon in the upper-left corner, to enter the Container Configuration popup. For the description of container configuration items, see Configuring Containers.
Configuring Charts¶
Move the mouse to an added chart, and select the Edit icon in the upper-left corner, to enter the Chart Configuration popup, where you can configure the chart’s layout, style, and data. For the description of each configuration item, see Configuring Charts.
Next Step¶
After completing the widget-related configuration on the Canvas Configuration page, you can proceed to the Configuring Linkages page, to configure the linkage relationship between the navigator, canvas, and widget data.