Components | Timeline
"Timeline" component allows creating timelines that help to explain a process (and its stages) or facts and landmarks during a time period.
A timeline can be defined by two texts: one opening plus one closing text 1 that we can configure. We can use the Next/Back button or click on the timeline points to move between different landmarks 2 . The content of each landmark is shown inside a window located over the row 3 . We can see a landmark is active thanks to the content shown over the row 4 and the legendin the navigation menu 5.
When two landmarks have the same date, we will see them grouped vertically 6

This component can be added within a screen, a pop-up or other components (like a column, for instance).
You will find this component in the group of "Cataloguer" components.

Setup process
1. After adding the component, click on it and access to the "Properties" tab. You should configure:
-
Number of positions. This property shows the parts we will create when dividing a timeline. For example, we could divide a timeline into 10 parts to represent a decade, and 100 parts to represent a century.
-
Start text and final text. These are the texts that will help us to represent the starting point and ending point within a timeline. These points can be numbers or texts (i.e. Quaternary period).
-
Colours. Its main color and background color can be customized.
-
Hide header. If desired, you can create the timeline without headlines.
-
Overcome goal.Optional property. It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between:
-
Inherited: this option aply the default value defined in the Completion Objectives Area (See here).
-
Non objetive: this audio will not an objetive to complete the unit.
-
Interact: It is necessary interact with the component to reach the objective.
-
Complete: it is necessary to visit all the items of the to overcome the goal.

2. When created, a timeline includes 3 facts or landmarks by default. If needed, we can add more events from the "Add" tab.

3. Click on each event, access the "Properties" tab and adjust settings:
-
Position of the event. Point where you want to put the event, according to parts or phases created within the timeline. So, if we have 10 parts (years within a decade), the second position would be "year 2" and will appear in a certain position (this position differs from timelines including 100 parts that represent years in a century).
-
Event text. Text that will be shown as the legend of a landmark.
-
Event text. Text to be displayed as a legend for the milestone.
-
Colors: you can configure the color of the milestone and the background color of the event.

4. After configuring the events and its properties, you can:
a. Write a title and subtitle for each timeline.
b. Write a title for each event.
c. Write a text for each event.
d. Additionally, you can add an image that will be displayed next to the event.
