Timeline Element Usage: Example with SQL Datasource

In this example, the Timeline element will display data by connecting to a SQL Datasource.

1. Creating a Datasource

1. Enter the Datasource module.
2. Create a new table and define the following variables:
   
   • title (String): Title of the event
   • description (String): Description of the event
   • color (String): Color code to be used for each event
3. Create the table by clicking the CREATE button.

2. Create SQL Action

1. Click on the + icon in the Actions section in the left panel.
2. Select New SQL Action.
3. Create a new SQL Action by entering the following SQL command:

SELECT * FROM timeline_datasource

      4. Complete the process by clicking the CREATE button.

3. Binding SQL Action to Timeline Element

1. Select the Timeline element.
2. Click the +Add Action button in the Properties panel on the right side.
3. In the Search Box field, type the name of the SQL Action you created (for example, TimelineAll) and select the action.
4. The selected action will be displayed in the Options field of the Timeline element.
5. At this stage, match the data as follows:
   
   • Title: title
   • Description: description
   • Color: color

Important Notes

• Using the Mode field you can set whether the Timeline is displayed right, left or alternately.
• The Timeline element will automatically update as the data is updated.

Once you have done this, your Timeline element will now work with the data you have specified.

‍