Adding data to the Timeline component

Queries and Resources
1

Hello people, please help me to understand where I am going wrong when I want to use the Timeline component.

Currently I have a data that I want to display using the Timeline component to show the start and end date of each project. I get this information from a table using the query:

select
Portfolio_ID,
Start_Stage,
Start_Date,
Live_GO_Date
from
{{ Table_initiatives.data }}}

and the resulting data are:

Portfolio_ID: “PORTFOLIO-227”
Initiative_Stage: “Production”.
Fecha_Inicio:“2023-11-23”
Fecha_GO_Live:“2024-02-24”

there are several rows, therefore, there are several data...

But when I want to add the data to the Timeline component does not work, I will attach a screenshot to contextualize, thank you very much!

image
image1846×775 91 KB

2

Hi @LuisHerrera,

Welcome to Retool!

The simple timeline component pretty much just takes an array of strings and displays them however you want. The query itself returns an array of objects, and the objects have properties.

You need to decide what you want shown in your timeline view in the first place.

For example, if you wanted to create an entry for each step, and show it's name, start date, and go live date like this:

  • Produccion. Start: 2023-11-23. Live: 2024-02-24

You'd need to modify the query to just contain that string. There are a couple ways you could do that, but here is an example using a transformer.

Below your query you'll see a see some other settings.
image

Open up Transform Results and click enable. Now you can use Javascript to manipulate the results. To achieve the example above, you could use code like this:

return data.map(item => `${Etapa_Iniciativa} - Start: ${Fecha_Inicio}. Live: ${Fecha GO Live}`)

The above code uses string interpolation to format the properties from the object into a string, you can customize it as needed or add/remove details. For example, if you wanted an individual entry for each of the start and go live dates (instead of including them on the same line) you could tweak the code above to something like this:

return data.flatMap(item => {
 return [
    `${Etapa_Iniciativa} - Start: ${Fecha_Inicio}.`,
    `${Etapa_Iniciativa} - Live: ${Fecha GO Live}`
 ]
})
2 Likes