Skip to content

Timeline#

timelineIcon

Overview#

The Timeline widget provides a mechanism to visualize a sequence of events over a specified period of time.

General Steps#

To use the Timeline widget in a UI Page, follow the steps below:

  1. In any UI Page in Build mode, select the Timeline from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
  2. Enter the Settings section of the widget through the three vertical dots.
  3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image.

timeline

Widget Customization#

  1. Optionally, in the Style tab, you can define a Border Width and Color.

    timeline

  2. In the Setup tab, the visual properties and the field names of the widget are configured, namely:

    • Title - The title of the timeline chart.
    • Sub-Title - The subtitle of the timeline chart.
    • Use Auto-Generated Colors - Specifies whether the colors for the range should be auto-generated. This option is set to false by default.
    • Category Field - The path to the category field that will appear in the tooltip for each range.
    • Color Field - The path to the field that defines the color of each range.
    • Date Time Start Path - The path to the start date and time field.
    • Date Time End Path - The path to the end date and time field.

    Screenshot showing the widget customization settings, including the "Date Time End Path" field.

  3. Optionally, define the Links between this widget and other elements of the UI Page.

    Screenshot showing a UI page with options for customizing widget links to other elements on the page.

  4. By saving and closing the settings, the widget will be changed accordingly.

Using the Fill Settings Feature#

When using widgets that can be configured via input, you can take advantage of the Fill Settings feature, which is accessible through the three-dot menu of each widget while in build mode. This functionality automatically updates the widget settings based on its current state.

To use it, simply connect a compatible output from a System Task to the appropriate input of the Timeline widget. Then, select the Fill Settings button, and the widget will be updated accordingly.

Screenshot showing a timeline with fill settings options.