Timeline
Check out the function of the timeline element.
The Timeline element is a graphic element used in an application development process as a timeline or timeline. In summary, it is the element where the flow of time is indicated. It usually helps users visually track events, transactions, or changes that occur over a specific period of time.
The function of the Timeline Element:
Visualization of Events: It visually represents events, transactions, or changes that occur over a certain period of time. This helps users better understand the sequence and relationships of events.
Tracking History: Users can track which events happened when in the past. This is useful for tracking the progress of a project or a business process.
Showing Future Plans: The timeline can also display future events or plans, allowing users to observe future plans.
When is it used?
The timeline element can be used when a series of information needs to be arranged over time (increasing or decreasing).
The timeline element can be used when a visual connection is needed with a timeline.
Adding the Timeline Element
You can add the timeline element from the Elements panel by dragging and dropping it onto the screen. If you drag it to an empty space on the screen, it is added with the Row element.
The Timeline element is supported in both mobile and web applications.
Properties
When you click on the timeline element, the Properties panel of the timeline element will open.
The Properties panel comes with Options, Mode, Authorization, and Visibility Properties.
Options: Action links, i.e., data binding operations, are made within the Options Property. After the action connection, new fields are opened in this Property.
To see these fields, a table must first be created in the Datasource. Then SQL Actions should be created. The created SQL Actions should be added by clicking the +Add Action button as the Initial Action.
Mode: It is the Property where the display settings of the data in the timeline element are selected with options like right, left, and alternate.
The Timeline element added to the screen comes in Alternate mode by default. You can choose from the mode pop-up window to display the Timeline element the way you want.
For example, create a table in the view mode of the Datasource named Timeline Datasource.
In the created table, define the variables title, description, and color as string type.
Then click the Create Button.
Then, from the Actions on the left panel, click on the + icon and click on New SQL Action. Create the SQL Action as select* from timelinedatasource and click the Create button.
To link the created SQL Action to the page, click +Add Action. Write the Action name (Timelineall) in the Searchbox and call the action.
The action you called will be displayed in the Options property in the properties panel of the timeline element.
You should select the action. The data related to the selected action needs to be matched.
AUTHORIZATION
You can use authorization options for the timeline element.
To perform Authorization/Authorization operations in the timeline element, follow these steps:
Click on the Timeline on the screen to select it.
Open the Properties panel.
Click on the Authorization field.
Depending on the application visitor and/or users, you can use the following options:
Choose All Roles to make it visible to all logged-in users.
If you want it to be viewed without user login (The screen must also have this feature before the element), turn on the Anonymous Access switch.
If you want it to be viewed specifically for the roles you have defined in the application you have developed, select the roles to be opened.
VISIBILITY
Elements in "visibility" or "visibility" allow you to adjust visibility according to a certain situation and/or condition. For each element, you can always make it visible, hide it, or show and hide it according to a condition.
To set the Visibility settings of the timeline element, follow these steps:
Click on the Timeline on the screen to select it.
Open the Properties panel.
Click on the Visibility field and make one of the following selections according to the needs of your application:
With Always visible in the Selectbox, you ensure that it is always visible.
You can hide the element with Hidden.
With Sometimes visible, you can make it visible according to the conditions you will add.
Based on your choice, the visibility of the Timeline will be adjusted.
Styling
You can make Layout, Text, Border, Fill, or Shadow edits of the timeline element from the Styling panel. You can customize the style of the timeline element according to these features.
LAYOUT
In the timeline element, you can make visual edits such as environmental padding (Padding) and sizing (Size) with Layout.
To make the internal spacing and sizing settings of the Timeline, follow these steps:
Click on the Timeline on the screen to select it.
Open the Styling panel.
To make padding settings from the Layout area, enter a value in the Padding area.
To make sizing settings from the Layout area, enter a value in the Size area.
The timeline element does not support Align and Display.
FILL
You can add color or visuals to the background of the timeline element.
To change the background color of the Timeline or add visuals, follow these steps:
Click on the Timeline on the screen to select it.
Open the Styling panel.
Go to the Fill (Fill) option.
You can change the background color of the Timeline by selecting the color you want from the Color (Color) section.
You can set the visual you want as a background from the Background Image (Background image) section.
BORDER
You can add lines to the outer edges of the Timeline to give corner curves.
To create the Border structure of the Header, follow these steps:
Click on the Timeline to select it.
Open the Styling panel.
Go to the Border (Border) option.
You can select the Border color of the Timeline by selecting the color you want from the Color (Color) section.
The Width allows you to specify the thickness measurement of the Border in pixels (px). The Width feature can be set separately for each side of an element, or by activating the lock icon, the thickness measurement of all edges can be ensured to be the same with a single click. Determine the Border thickness by entering a value.
From the Radius (Corner Curves) section, you can give corner curves to the border structure you will create with the values you will give.
SHADOW
Shadow is not used in the timeline element.
Last updated
