Getting Started with Widgets

Updated on 2025-03-24 GMT+08:00

View PDF

What Is a Widget?

A widget is a reusable page element. A page consists of one or more widgets. Each widget of a page is like a block in a jigsaw game.

A widget runs depending on libraries. If a library is missing, the widget cannot run properly. For pages that require the frontend framework or widget library, for example, the popular Vue, Boot Strap, and Element UI, convert these dependencies into library assets and upload them to the environment.

The widgets are classified into the following types:

Preset widgets
Preset widgets are defined in the system and can be directly dragged to the development page. For details, see Widgets.
Custom widgets
Custom widgets are self-developed by tenants. Generally, the development process is as follows: Select a system widget template and download it to the local. Develop and upload it to the widget library. For details, see Description of Custom Widgets and Custom Widget Development Specifications.

Upload a custom widget to the widget library via My Assets > Widgets. Then set the display scenario for large screens and PCs or for mobile devices. The widget will only appear on the page after this setting is completed.

Figure 1 Uploading custom widgets

Widgets

This section outlines the supported widget types to help you quickly locate and efficiently develop large screens. The platform supports the following widget types. For details, see Widgets. If preset widgets do not meet your requirements, you can create custom widgets and upload them to the platform. For details, see Description of Custom Widgets.

ECharts widgets are currently available only for professional and enterprise instances.

Figure 2 Widgets

General Settings

On a page, click a widget in the canvas. The configuration panel, for example, Figure 3, is displayed above the widget. The configuration menus of widgets are classified into seven types: card, metric, graphic, legend, tooltip, reference line, and coordinate. The display varies according to widgets.

Figure 3 Widget configuration item panel

A card wraps a chart widget. A widget consists of card elements (card title, chart, card background, and card border) and chart elements.
A graphic is a specific graphical expression element that visualizes data in a widget. For example, a graphic can be a slice in a pie chart, a bar in a bar chart, or a line or an inflection point in a line chart.
A legend shows the dimensions in a multi-dimensional visualized graphic expression.
Tooltip (floating prompt) displays metrics of specific dimension nodes in a visualized chart widget.
Metrics provide supplementary text and number information to a graphic in a widget.
You can set the style, color, position, and behavior of the coordinate system for a chart widget.
Reference lines are visual markers to help you compare data on charts.

Widget Data Source

A widget is an element of a large screen page. Configuring a page is configuring widget data. Select a widget and click above the widget to configure the data source. For details, see Data Access.

Figure 4 Configuring widget data

Widget Interaction

The platform provides the event-action mechanism for interactions between widgets and between widgets and pages. For details, see Interaction Configuration.

Figure 5 Interaction between widgets

Theme Color of a Widget

You can use themes to change visual effects with one click. Related effects include decorative elements, chart colors, and font colors. The platform provides different theme colors.

Figure 6 Theme color (large screens and PCs)