The Vertical Timeline Control provides a dynamic and intuitive way to display data and events over time in Yeeflow. This control organizes and displays information vertically, suitable for any business scenario that requires displaying key information in chronological order, such as project timelines, company milestones, or timelines of important events.
Business Scenarios and Applications:
Project Management: The vertical timeline can clearly display the various phases and key milestones of a project, helping the project team monitor progress and make timely adjustments to the plan.
Event Timeline: Used to plan and display upcoming or past significant events, providing a visual reference for the timing of events and helping participants understand the sequence of events.
Product Development: Tracks the various stages of product development from conceptual design to market release, with each development stage clearly marked and tracked on the timeline.
This control not only presents information in a visually appealing manner but also supports various complex business needs with its flexible configuration, making it an indispensable tool in forms and custom pages.
Adding a Vertical Timeline Control
Locate the Vertical Timeline Control: In your form or dashboard designer, navigate to the “Advanced” controls group. Here, you’ll find the Vertical timeline control, as shown below:
Drag and Drop: Click on the Vertical Timeline control and drag it to the desired location on your form or dashboard.
This control can be used in Approval forms, Data list’s list forms, and Dashboards, providing flexibility in manage your applications across different areas of your application.
Configuring the Vertical Timeline Control
Once you’ve added the Vertical timeline control to your form or dashboard, you can configure its settings to tailor it to your needs:
1. Data Settings:
Application: By default, the Application dropdown list will show the current application. If you want to use data from another application, you can select it from this dropdown.
Data Source: Next, select a data source. The data source can be a Data list, Document library, Form report, or Data report. The data you select here will populate the Vertical timeline control.
Data filters: You can filter the data to show only specific items by setting Data filters.
Primary order / Secondary order: For better organization, you can also define the order in which items are displayed within each category by selecting fields for the Primary order and Secondary order.
Note: After linking a data source, the number of nodes displayed in the vertical timeline in design mode depends on the number of records in the data source, but a maximum of 20 nodes are shown. To see more than 20, you must click to show more.
Title: Set the control title, which can be static text or text dynamically generated based on data.
Point Type: Choose how nodes are displayed, options include None, Icon, or Text.
Appearance:
View item Form: Choose the detailed page for each time point in this vertical timeline.
Default Layout: opens the default item viewing page by default when the user clicks on an item.
Custom List Form: If you have designed a specific view item form, you can select a custom layout from the drop-down menu.
None: Select None if you do not want users to open a detailed view of the project.
Custom url: You can also set a custom URL that redirects users when they click on the item, allowing for more advanced interactions.
Open in: select how the item form will be displayed (e.g., Slide in, Pop up window, Full page, New window).
Size: Select the size of the form display (Default, Large, Medium, Small, Full screen window).
Hide if value is empty: If there are no records in this control, it will not be displayed on the page.
Fallback: Use the fallback field to set default content to use when the control has no content or does not exist.
Animate cards: Turn on the button for animated effects on the vertical timeline.
Horizontal Align: Horizontal alignment refers to how points are positioned along the cards of the horizontal timeline. Options include:
Left-aligned: The timeline will be aligned with the left side of the card
Center-aligned: the timeline will be aligned in the center of the card.
Right-aligned: the timeline will be aligned to the right side of the card.
Vertical Align: Set the alignment of the timeline in the vertical direction with Start, Center and End.
Dynamic Display Rules: When you set dynamic display rules, it will have different presentations based on specific conditions and rules.
Hide: This option hides the horizontal timeline control when conditions are met. It's effective for scenarios where you want to conditionally remove the horizontal timeline from the user interface. For example, if a user is not assigned a task, you might want to hide the control.
Show: Use this option to display the horizontal timeline control when defined conditions are met. This is useful when you only want to show the horizontal timeline in specific situations. For example, you could set rules to display the vertical timeline only when a user has a specific role or certain data exists.
Pagination settings
Start at: Start displaying from which data record.
Limit Records: Turn this ON if you just want to display certain items in this control. By default, this option is OFF, which means all records of the selected data source will be displayed in this Vertical timeline control. If the Limit Records option is set to ON, then enter the number of items you wish to display in the following Limit section.
Records per page: When the button is enabled, this setting is used to determine the number of records displayed per page or per load, and is set to 20 by default. This allows the user to adjust the amount of data displayed per page as needed.
How to Use the Vertical Timeline Control
Once you connect a data source with the vertical timeline, the timeline will display blank blocks for all collection items.
Blank Content Container: After selecting the data source and category field, the items under each category in the Vertical timeline control will appear as blank content containers.
Style Mode: Understand that the collection control will display these three cells in a fixed representation in design mode. This helps you preview how your design will look.
Preview Actual Data: To view actual data in the timeline, switch to preview mode by clicking the "Preview" button at the bottom of the left control panel. This allows you to see how data will be displayed in real-time.
Add Controls to Cells: To customize each cell, open the control panel and drag controls to any cell. When a control is added to a cell, it will automatically be copied in all cells of the vertical timeline. This ensures consistency in the design across all items.
When a control (such as text, container, image, etc.) is added to a block of the vertical timeline, it automatically replicates in each other collection block. You can insert static content in each collection block simultaneously.
When a control in a collection block is connected to a data source, the default content of the control in the collection block will be replaced by the corresponding content from the data source.
For example, you can configure the text control in the collection using the expression editor. Then the corresponding data (Description) will automatically be added to each collection block.
Style Settings
Cards
1. Item Gap: Control the amount of space between each item.
2. Spacing: Control the amount of space between each row.
3. Spacing: Control the amount of space between each row.
4. Align items: Control how the included items will align along the central axis based on the direction selected in the direction field.
5. Justify items: Control how the included items will align along their horizontal axis based on the direction selected in the direction field. It also helps distribute the remaining space in the collection between items.
6. Align content: Horizontally align content within the collection.
7. Justify content: Evenly distribute content along the main axis within the collection.
8. Content Padding: Set the padding for the collection content.
9. Normal/Hover: Set different styles for the normal and hover states of the collection content. The following styles support separate settings for normal and hover states.
Text color: Choose the color of the filename.
Background Color: Set the background color of the file container. By default, the background color is set to transparent.
Border Type: Choose the type of border, options include none, solid, double line, dotted, dashed, or slotted.
Radius: Set the border radius to control the smoothness of the corners.
Shadow: Add shadow and blur effects to each collection item.
10. Show More Options: Set the typography/ Text color/ Background settings for showing more options.
Point
Text/Icon Typographic Style: Set the typography of text and icons in the nodes, ensuring clear information display and attracting user attention.
Point Size: Adjust the diameter size of the node points to coordinate with the overall design of the timeline.
Border Type and Radius: Set the border style and rounded corners for the nodes, enhancing the visual effect. Choose the appropriate border style (such as solid, dashed, etc.) and suitable border radius size.
Color and Background Settings of Normal and Hover state: Customize the color and background color of the nodes in normal and hover modes.
Line
Line color: set the color for the timeline line.
Progress color: set the color for the timeline progress.
Thickness: Set the thickness of the timeline line.
Border Type and Radius: Set a border for the timeline line, choosing the appropriate border style and roundness.
Title
Margin and Padding: Adjust the space around and inside the title, ensuring the visual clarity and neatness of the title area.
Typography: Set the font, size, and style of the title.
Border Type and Radius: Set a border for the title, choosing the appropriate border style and roundness.
Color and Background of Normal and Hover state: Customize the color and background of the title in normal and hover states, making it stand out on the timeline.
Shadow: Add a shadow effect to the title.
Advanced Settings
Set the Advanced options that are applicable to this control.