In Yeeflow, the Horizontal Timeline Control provides a dynamic and intuitive way to present data that changes over time. This control is ideal for project management, event timeline display, or any scenario that requires displaying key information along a time sequence.
Business Scenarios and Uses
Project Management: Utilize the timeline to display key project milestones and completion stages, helping team members track progress.
Event Planning: Display the sequence of upcoming events or major activities, providing a clear timeline for planning.
Product Development: Show the various development stages from concept to market, clearly marking each significant event.
The Horizontal Timeline Control is an efficient tool for visually presenting time-series data within forms or custom pages. This guide details how to configure various properties of the Horizontal Timeline Control to optimize data presentation and user interaction.
Adding the Horizontal Timeline Control
Locate the Kanban Control: In your form or dashboard designer, navigate to the “Advanced” controls group. Here, you’ll find the Horizontal timeline control, as shown below:
Drag and Drop: Click on the Horizontal 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.
Content Settings
Data
After selecting the Horizontal Timeline Control, go to the settings panel and navigate to Content > Data:
Application: Select the application you are using (usually defaults to the current application).
Data Source: Move to the data source section and select a data source from the chosen application. The data source can be a Data list, Document library, Form report, or Data report. The data you select here will populate the horizontal timeline control.
Data Filters: Click the filter conditions button to filter data from the selected data list.
Set Data Order: Determine primary and secondary order to correctly sort your data, ensuring it is displayed in the desired sequence.
Note: In design mode, only the first three columns are displayed, but in preview mode or after publishing, the actual number of columns will be shown.
Title: Set the control title, which can be static text or dynamically generated based on data.
Point Type: Choose how to display nodes, with options including none, icon, or text.
Appearance settings
Columns: Set the number of columns for the timeline. By default, the column count is set to three.
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.
Show Card narrow: Select whether or not to display sliding arrows that can scroll the card.
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: This setting controls the card's vertical position relative to the timeline. The options include:
Start-aligned: The card aligns with the top of the timeline.
Center-aligned: The card aligns around the center of the timeline.
End-aligned: The card aligns with the bottom of the timeline.
Slides to scroll: Choose the number of cards to scroll, by default set to one.
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 Horizontal 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 Horizontal Timeline Control
Once you connect a data source to the Horizontal Timeline, the timeline will display a blank block for all collection items.
Blank Content Container: After selecting the data source and category field, the items under each category in the Horizontal 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 what the design will look like.
Preview Actual Data: To view the 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 the data will display in real-time.
Add Controls to Cells: To customize each cell, open the control panel and drag controls into any cell. When a control is added to a cell, it will automatically be replicated across all cells in the horizontal timeline, ensuring design consistency across all items.
When a control (such as text, containers, images, etc.) is added to a block in the horizontal timeline, it will automatically replicate in each other collection block. You can insert static content simultaneously in each collection block.
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 (title) 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.
11. Arrow: Set the size of the arrow
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: Choose a color for the timeline line.
Line Height: Set the thickness of the timeline line.
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.
Sliding Arrow
Size, Color, and Background: Set the size, color, and background of the sliding arrows in different states (Normal, Hover, Active), ensuring consistency and functionality of the arrows on the interface.
Border Type and Radius: Choose the appropriate border style and roundness for the arrows.
Shadow: Add a shadow effect to the arrows.
Prev arrow
Left indent: Adjust the left indents of the forward arrows to optimize the position and functionality of the arrows.
Next arrow
Right indent: Adjust the right indents of the backward arrows to optimize the position and functionality of the arrows.
Advanced Settings
Set the Advanced options that are applicable to this control.