Components| Timeline

The "Timeline" component allows you to create time lines that allow you to explain a process (its phases) or facts and milestones within a period of time.

The timeline can be defined by two texts, one start and one end (1). We move through the different milestones by clicking on their points on the line or with the forward/backward button (2) The content of the milestone is displayed in the top area of the line (3) We see which is active by the indication on the line (4) and by the legend in the navigation menu (5). When there are two milestones at the same point, they are displayed on top of each other (6).

By default, this component can be added on a screen, a popup, and within other components (e.g. in a column).

We will find this component in the "Organizer" component group.

Configuration process

1. After adding the component, tap on it and enter the "Properties"tab. Here you must configure:

Number of positions. This property refers to the number of parts in which we are going to split the timeline. For example, if we want to represent data from a decade, we would divide it by 10; if it were a century, in 100.
Start and final text. It will be the texts that help us to represent the starting point and end of our timeline. It can be numbers or any text (e.g. It was Quaternary).
Background color of the header.
Overcome goal:Optional property. Allows you to modify the goal completion settings for this particular component, making it behave differently than the general settings set. We can choose between:
- Inherited: Applies the default value that is defined in the unit's goal settings area (See here).
- Not objective: the component will not be a goal to overcome to finish the unit.
- Interact: You need to interact with the component to overcome the goal.
- Complete: You need to visit all items in the timeline to exceed the goal.

2. By default, the timeline is created with 3 events or milestones. If we need more events we can add them from the"Add"tab.

3. Tap on each event,go to the "Properties" tab and configure them:

Position of the event. Point at which you want to place it, depending on the number of parts or divisions you've set up in the timeline. So, if there are 10 parts (a decade) if you mark 2, it will be the second year and it will appear in a different position than if you have divided the line into 100 parts.
Event text. Text to be displayed as a milestone legend.
Image size. If you add an image within the Event, you can decide how much space it can occupy (33% or 50% of the available width).

4. After setting up events and their properties, you can now:

a. Write the title and subtitle of the timeline.

b. Write the title of each event.

c. Compose the text of each event.

d. Additionally, you can add an image that accompanies the event text.