跳到主要内容

Timeline

A timeline component is a graphical representation of events or data points arranged chronologically along a horizontal or vertical axis. It allows users to visualize and navigate through a series of events or milestones in a linear fashion.

Properties

Timeline's available properties. JavaScript may be written to read or alter information about components.

PropertiesDescription
Itemsthe collection of individual events or data points that are displayed on the timeline
Directionthe orientation or layout of the timeline component (horizontal or vertical)
Pendingthe status of an item in the timeline
Heightvertical size or height of the timeline component
Hiddenwhether the timeline component is visible or hidden

Methods

You can use other components to control the component. We support the following two methods:

  • setValue

To set the text area input value, for example, {{"value1"}}

PropertiesDescription
ValueInput value
  • clearValue

To clear the value of the selected component

Data

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
directionorientation or layout of the timeline
dynamicHeightthe ability to adjust the height of the timeline dynamically based on its content or other factors.
displayNamethe name of this component (ie timeline1)
hiddenwhether the timeline component is visible or hidden
itemsthe collection of individual events or data points displayed on the timeline
pendingthe status of an item in the timeline
resizeDirectionthe direction in which the timeline component can be resized by the user

Example: {{timeline1.items}}

Use case

Next, we will demonstrate how to map the data from the data source to the timeline component.

Step 1 Add an action

Let us create a table in Supabase called timeline, including only 1 columns:  milestones. There are 4 milestones we want to map to the timeline component.

Then we can create a new action for Supabase from the action list and named supabasedb1.

To list all data in milestone, put the code snippet below in the SQL query section.

select * from timeline;

Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.

const transformedData = data.map((obj) => Object.values(obj)[0]);
return transformedData;

Click Save and Run to activate this action.

timeline_data

Step 2 Add Components

Next, we can add a timeline component to the canvas.

In the **Items** field in the Inspect page after clicking on the component, put {{supabasedb1.data}} to retrieve the data from supabase.

Step 3 Test

The final look should be as shown.

timeline_test