A timeline is one way to visualize records over time. The records are presented on the y-axis with the possibility to add filter based on categories. The user has the possibility to change between ascending or descending dates by pressing the top caret icon or showing/hiding different months/years by pressing the corresponding value along the axis.
Figure 1 - Timeline
None.
Use a timeline when there is a need to present a sequence of data over time. A timeline is read-only and its purpose is to present data in a visually appealing way.
This control can only be used directly on a page. It appears then within a group on the page where it is exposed.
Define a timeline in the client model file using the following format:
timeline <timeline_name> for <entity> { date <attribute>; header <attribute>; field <attribute>; }
timeline <timeline_name> for <entity> { ... emphasis <emphasis_value1> = [<expression>]; emphasis <emphasis_value2> = [<expression>]; }
timeline <timeline_name> for <entity> { ... legends { legend <emphasis_value1> { label = <label_string>; } legend <emphasis_value2> { label = <label_string>; } } }
timeline <timeline_name> for <entity> { ... contactwidget { enabled = [<expression>]; key = <user_id> } }
timeline <timeline_name> for <entity> { ... preview = <card_name>; }
page <page_name> for <entityset> { timeline <timeline_name> }
page <page_name> for <entityset> { timeline <timeline_name> { details = <details_page_name>(<key>); } }
None.
This section describes the properties or client controls that can be set on the timeline.
collapsed | contact widget | date | details | emphasis | field | label | legends | preview
See example in how to use section.
See example in how to use section.
attributes { key Id NUMBER KMI-L; public Name TEXT(100) AMIUL; public BirthDate DATE A-IU-; }
Example code - Artist.entity
entityset Artists for Artist;
Example code - Artist.projection
timeline ArtistTimeline for Artist { date BirthDate; header Name; field Name; preview = ArtistCard; contactwidget { enabled = [true]; key = Id; } emphasis Complementary1 = [Gender = "Male"]; emphasis Complementary2 = [Gender = "Female"]; emphasis Complementary3 = [Gender = "Other"]; legends { legend Complementary1 { label = "Male"; } legend Complementary2 { label = "Female"; } legend Complementary3 { label = "Other"; } } } page ArtistOverviewPage using Artists { label = "Artist overview"; timeline ArtistTimeline { details = ArtistDetailsPage(Id); }; }
Example code - Artist.client
The code provided above will generate the following timeline:
Figure 2 - Timeline created from the example code above