Timeline configuration

[Kenny]

Timelines

This article will explain everything you need to know to start using timelines in your application.

This article contains the following content:

• What is a timeline?
• What do you need to get started
• Naming conventions for timeline
• How to configure your first timeline
• Conclusion

What is a timeline?

A timeline is an overview where data is shown against time. It can be fully customized to suit your needs. Novulo timelines are a powerful tool used to create many useful overviews and effective ways of working.

Below, there is an example of a timeline. In this case, the timeline shows the availability of employees by displaying their standard roster and any potential deviations such as leave and absence.

What do you need to get started

Required:

• M4155 - Novulo Timeline

Optional:

The following components can be used to display the timeline on a page

• M5434 - Novulo Timeline bij Bevoegdheidstype
• M5309 - Novulo Timeline bij Productieplanning
• M5293 - Novulo Timeline bij Inkoopregel
• M5288 - Novulo Timeline bij Productie
• M5271 - Novulo Timeline bij Productiescenario
• M5270 - Novulo Timeline bij Systeem
• M5212 - Novulo Timeline bij Afdeling
• M5211 - Novulo Timeline bij Team
• M5898 - Novulo Timeline bij Persoon
• M8503 - Novulo Timeline bij productietags

The following components can be used for adding documentation to the timeline

• M6855 - Novulo Documentatie bij Timeline
• M6903 - Novulo Documentatie bij Timeline Nederlands

Naming conventions for timeline

A timeline consists of several parts. In order to understand the configuration, it is important to understand what the names of these parts are.
A timeline consists of the following parts. Each number correlates to the number in the screenshot below.

1. Dimensions. These are the groups in which you want your data to be divided. In the example image below you can see 5 groups.
2. Plan items. These are the items to be displayed in time. Every item should have a start and end date/time, and every item should be linked to a dimension one way or another to be displayed (more on this later).
3. Sidebar. The sidebar can be configured to pop-up when clicking a dimension or plan item and can be used to display additional information, links to specific records or actions that can be performed from the sidebar.
4. View mode. The entire overview of plan items within dimensions, including the data displayed. Multiple view modes can exist within one timeline configuration, allowing for switching between them. View mode group. One or multiple view modes can be placed inside a view mode group, allowing for displaying multiple timelines at the same time.

How to configure your first timeline

Step 0. Think about the data you want to display

For the planitem you’ll want to use the item which holds most of your relevant information (often the most detailed record).
For the dimensions you’ll have to think of a logical way of grouping these planitems, this is in most of the cases a direct link from your planitem.

Step 1. Create a new timeline configuration

After adding the required component to your application, you should be able to create a new timeline configuration:

1. Go to settings → timeline configurations, and click the add button.
2. Fill in the description of your timeline configuration.
3. A “Default zoom level number” of 12 is a good starting point for a one-week overview. A lower number means more zoomed out, and a higher number means more zoomed in.
4. The only mandatory fields are “Start date filter reference” and “End date filter reference”. These require a date and can for the moment both be set to date:now().
5. For your first timeline, leave grouping of view modes set to no to keep it simple. You can modify this later to start creating view mode groups if required.
6. Make sure the configuration is active, or otherwise it will not be displayed in step 4.1
7. Save the record
   
   

Step 2. Create the start and end filters.

Decide what your default scope should be. (for example, today minus 3 weeks until today plus 3 weeks)

1. Go to settings → filters, and create two new filters (start and end). Data type should be “date (date)”, the default value expression will determine with which scope the timeline will be opened by default, keep in mind that this will impact the performance on loading.
   
   
2. Go back to the timeline configuration and click on the “add start and/or end filter” button on the “filter” tabbed panel. Select the created filters and click on OK.
   
3. Now edit the timeline configuration again and set the references for the start and end filters:
   

Step 3. Create a timeline view mode

1. Within the timeline configuration, click on the add button inside the timeline view mode grid.
2. Choose which records you will be displaying in the plan items and which in the dimensions, again the plan items need to have a direct correlation to the dimensions.
3. For this example, we want to show the application logs grouped per data source.
4. Start by filling in the dimensions, in this example we want to show all available data sources so the where expression may be true.
   
5. Next up, fill in the plan items, in this example we want to show all application logs under a data source.
6. Always apply a similar where expression as shown below to ensure you don’t retrieve more data than required, as this can cause the timeline to no longer work. You can expand this expression or modify it in order to strengthen the filter and display less data based on your own needs.

boolean:and([
 this.x.in(%dimensions),
 this.A.isbetween(parent.filter_y,parent.filter_z)
])

Where
A = the date used for displaying the plan item
x = the path from the plan item to the dimension
y = the start filter
z = the end filter

The “Start time expression” determines the starting point of a plan item within the timeline
The “End time expression” determines the end point of the plan item within the timeline

For this example, the application log only has a “createdat” date/time, therefore we artificially create a duration by adding an hour to give it volume within the timeline. Often you can use the end date/time of a record instead.

This part of the configuration is the most complicated and has the highest chance of causing the timeline to not work. We advise testing your timeline after this step, as well as after every modification to these fields.

Step 4. Creating the timeline and checking if plan items are displayed

1. Go to All apps → Realisation → timelines, and click on the add button. Click on more → settings, and fill in the configuration and description, then save the record. Now open the timeline and check if you see plan items displayed and do not get errors.
   

Step 5. Adding labels to the dimensions.

1. Go back to the timeline view mode within your timeline configuration. Add a dimension line.
2. Fill in a description and field expression. The field expression must return a string, as this is the data that will be displayed in each dimension.
   
3. We now see the following result in the timeline.
   

Step 6. Adding information to the plan items.

1. Go back to the timeline view mode within your timeline configuration. Add a view mode line.
2. Fill in a description (optional, but usefull) and field expression. The field expression must return a string as this is the data that will be displayed for each plan item.
   
3. When zooming in a lot, we now see the following result in the timeline.
   

Conclusion

You should now have a basic understanding of the different parts of the timeline and how to set up a basic timeline. A lot more can be achieved by adding more information, links, actions, colors and more. Information of some more advanced options will be added to this or a new post at a later time.