Visualizing data

The App Builder provides a diverse range of display widgets to visualize data in any form. Display widgets are closely aligned with function output, as they commonly receive data to be visualized and other properties to be set from a function.

Display widgets

The following display widgets are available:

  • Chart: Classic line, bar, area, or scatter chart

  • Chat: Allows chatting with AI

  • Circular gauge: Visualizes a value and sub-value in circular form

  • Data grid: Allows visualizing database tables

  • Linear gauge: Visualizes a value and sub-value in linear form

  • Map: Marks geodata in an interactive map

  • Media view: Allows the dynamic display of media such as images

  • Progress bar: Visualizes the percentage or absolute progress of a process or time

  • Sparkline: Small line chart without axes or coordinates

  • Status lamp: Displays the status as a color, e.g., that of a backend function

  • Toast: Time-limited display of notifications

  • Value box: Flexible display of arbitrary data or a data point

Set property from backend

Data and behavior properties of display widgets must be set from one or more functions of the backend. To enable this data transfer, a display widget must be linked with the output box of a function or with a modifier. It's important to note that display widgets have the flexibility to be linked with multiple functions simultaneously.

Link widget and function

To link a display widget with an output box or a modifier:

  1. Select a display widget in the UI editor.

  2. Drag and drop an output/modifier onto the selected widget.

When the link is established, the output/modifier indicates it with stating the property to be set.

Click the x next to the text to unlink an output widget from an output/modifier.

Properties

Most display widgets primarily provide a main data property. However, certain display widgets go beyond, allowing visualization of additional data properties and offering behavior properties to manipulate. To modify the property set by the backend, follow these steps:

  1. Link widget and function as explained above.

  2. Click on the property in the linked output/modifier to open a list of available properties.

  3. Select the desired property from the list.

Last updated