Timeline Control

Timeline control consists of a vertical list, to display events along with date and time. It is a custom control for displaying list data in a timeline.

It supports HTML rendering of entries, event grouping, and group sorting.

UI Properties

Info

Unique Name: A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name on the basis of the Label name given to the control.

Label: The text that is displayed helps the user to understand the type of control it represents.

Tooltip: The option to add tooltip text as a hint to the user. It is visible when you switch on the visibility toggle property.

Description: The option to provide a description that you can add for your control. It is visible when you switch on the visibility toggle property.

External CSS: With this property, one can imply exclusive CSS on controls. You can customize your control with CSS by selecting the correct class or id of the control. You can read more here.

Caching: When the caching option is selected and if a LOOKUP formula is applied to this control, the value that the LOOKUP returns will be cached and the user will be able to see this value in the fields even when he accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets is not always critical.

Hidden: The hidden option helps to hide control from the user. This helps when you don’t want the user to view the control.

Trigger Dependents: When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here. By default, Trigger dependents are enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.

Hide on desktop: This option hides the selected control in the desktop view.

Hide on Mobile: This option hides the selected control in the mobile view.

Dynamic Height: This option dynamically increases /decreases the height of the text control based on the given content.

Maintain space when hidden: This option maintains the specified space between controls when a particular control is hidden. When control is hidden the space is maintained in the preceding control depending on the space the previous control has occupied.

Note: Hide on desktop, Hide on Mobile, Dynamic Height and Maintain space when hidden are
available in Basic Freeflow Editor Only.

Properties

Grouped: This is a toggle option, which enables us to group the timeline or list of events on the basis of the dates provided.

Grouped:

Ungrouped (when group toggle is off):

Order: This option enables us to set the order of the timeline according to the dates. It can be set as ascending or descending.

Line color: One can set the color of the line (visual attribute) of the timeline.

Columns to evaluate: In this option, users get a dropdown option to select the data from the database to connect with the date and data column of the timeline.

Title: One can set the font size, font-weight, and font color of the title in the timeline.

Body: One can set the font size, font-weight, and font color of the body content in the timeline. (This is only visible when the grouped option is toggled on)

Date/ Time Fonts: One can set the font size, font-weight, and font color of the date and time in the timeline.

Date Time Properties:

In this section we get three options of Date format, Time format, and submit format where we can set the format of the date as Friendly, US, European, and ISO, set the time format as 12 hours or 24 hours and set the submit format as local time or UTC time respectively.

image

Last is Custom format toggle button, which is an input type where user can provide other formats for the date and time display, if toggled on then the format which you specify will overwrite the format selected above.

image

How to use timeline control

Select Timeline control under Customs section from Controls.

Bind data to Timeline control

Under the Bind Data, we get various options to bind our Timeline control with data, such as sheets, controls, variables, connectors, and more.

Using Timeline control

The timeline control can be used for various purposes such as displaying workflow, series of events, and more