What is Kanban Control and When to Use It?
The Kanban control in Yeeflow is a dynamic and versatile tool designed to help you visualize and manage workflows more effectively. It provides a visual representation of tasks, items, or processes in various stages of completion, allowing for better tracking and management.
The Kanban control is ideal for scenarios where you need to organize tasks into categories or phases, such as project management, task tracking, sales pipeline management, or any process that benefits from a visual workflow.
Consider using the Kanban control when:
You want to manage tasks or items that move through different stages or categories.
You need a clear visual overview of the status and progress of items.
Collaboration and transparency in workflow management are essential for your team.
How to Use the Kanban Control
Adding the Kanban Control
To start using the Kanban control, follow these steps:
1. Locate the Kanban Control: In your form or dashboard designer, navigate to the “Advanced” controls group. Here, you’ll find the Kanban control, as shown below:
2. Drag and Drop: Click on the Kanban 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 Kanban Control
Once you’ve added the Kanban 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 Kanban control.
2. Category Field:
Once a data source is selected, additional settings will appear. The most crucial is the Category field, where you select a field from the data source to serve as the category for the Kanban control. You can select any type of field.
Note:
If you choose a Single select or Multiple select field, all the options available in that field will be displayed in the Kanban control, in the order you set in the field properties.
For other field types, only the values present in the selected data source will be displayed.
The selected category field’s values will be displayed as separate columns on the Kanban control.
Note: In design mode, only the first 5 columns will be shown, but in preview mode or after publishing, the actual number of columns will be displayed, with a maximum of 50 columns allowed for performance reasons.
3. Other settings:
Include uncategorized Items: If your selected Category field has items with null values, you can choose to include these in the Kanban control by enabling the “Include uncategorized items” option.
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.
Configuring the Appearance Settings
Once you have configured the data source and category settings for your Kanban control, you can adjust the appearance to match your design and functional needs.
Here’s how you can set up the appearance:
Height Settings
The height of the Kanban control can be customized to suit the layout of your form or dashboard.
Default: By default, the Kanban control automatically adjusts its height based on the content within it. This is ideal for forms where content may dynamically change.
Min height: If you want to ensure that the Kanban control maintains a minimum height, select “Min height” from the dropdown. This setting is useful for maintaining consistency in the layout, even when there is less content.
Custom: For a fixed height, select “Custom” from the dropdown. You can then specify the height using the Custom height field.
Height Units: You can choose from various units such as px (pixels), %, em, rem, etc., depending on your design needs.
Dynamic Height: For more advanced scenarios, you can use the calc function to set a dynamic height. For example, entering calc(100vh - 120px) will ensure the Kanban control fits within the visible area of the screen minus 120 pixels. This is particularly useful for full-page Kanban views.
Allow Add Item
If your data source is a Data list or Document library, you have the option to allow users to add new items directly from the Kanban control.
Allow Add Item: Toggle this option on if you want to enable the “+ New item” button under each category in the Kanban board.
Text of New Item Button: You can customize the label of the “+ New item” button to match your application’s terminology.
Default Values: Click the “Settings” button next to Default values to pre-populate certain fields when creating a new item. This ensures consistency in data entry.
New Item Form: From the dropdown, choose the layout for the form that will be used when a new item is added. You can select the “Default layout” or a custom list form. Additionally, choose how this form will be displayed using the Open in dropdown list (e.g., Slide in, Pop-up window, Full page etc.).
Note: The visibility of the “+ New item” button is tied to the user’s permissions for the selected data list or document library. Only users with editing permissions will see this button; others will not.
View Item Form
The View Item Form settings allow you to control how users interact with individual items on the Kanban board.
View Item Form: Choose whether to allow users to view details of each item in the Kanban control.
Default Layout: When users click on an item, it will open the default view item page by default.
Custom list form: You can select a custom layout from the dropdown if you have designed specific forms for viewing items.
None: If you do not want users to open a detailed view of the item, select “None”.
Custom URL: You can also set a custom URL to redirect users when they click on an item, allowing for more advanced interactions.
Open in: Choose how the item form should be displayed (e.g., Slide in, Pop-up window, Full page etc.).
Additional Appearance Settings
In addition to the height settings and item interaction options, there are three more settings within the “Appearance” settings group that enhance the functionality and usability of your Kanban board:
1. Show Summary Number:
Purpose: When this setting is enabled, it displays the total number of items included in each category on the Kanban board. The number is shown next to the category name, giving users a quick overview of how many items are in each stage.
How it Appears: The summary number appears in parentheses after the category text, providing a clear count of the items.
2. Allow Collapse:
Purpose: This setting, when turned on, adds a collapse/expand arrow button at the end of each category. This allows users to collapse or expand the items within a category, providing a cleaner and more organized view when dealing with large datasets.
How it Works: Users can click the arrow to toggle between showing and hiding the items in a category, making it easier to focus on specific parts of the workflow.
3. Show Footer Container:
Purpose: By enabling this setting, you can display a footer area at the bottom of the Kanban control. The footer area is customizable, allowing you to drag and drop other controls inside to display additional information or actions related to each category.
Use Case Example: You could use a Summary control in the footer to calculate and display the total value of deals in each sales stage, providing immediate insights at the bottom of each category.
Dynamic Display Rules
The Kanban control supports dynamic behavior through “Dynamic display rules,” allowing you to control the visibility and styling of the Kanban board based on specific conditions. There are three options you can select from within the Dynamic display rules:
Hide: This option hides the Kanban control when the condition is met. It’s effective for scenarios where you want to conditionally remove the Kanban board from the user interface. Example: You might want to hide the Kanban board if there are no tasks assigned to the user.
Show: Use this option to display the Kanban control when the defined condition is met. This is useful if you want to make the Kanban board visible only under certain circumstances. Example: You could set a rule to show the Kanban board only if the user has a specific role or if certain data is present.
Dynamic Style: The dynamic style feature allows you to modify the appearance of the Kanban board or its categories based on conditions. This includes changing text color, background color, border type, and more. Example: You can create a rule that changes the background color of a category to purple when its value is “In progress,” providing a visual cue for users.
Configuring and Designing Items in the Kanban Control
Once you have set up your Kanban board and defined the categories, the next step is to design the items that will appear within each category. This is crucial because each data source might contain different types of data, and you may want to present this data in a specific layout that suits your needs.
Adding and Customizing Controls within Items
1. Blank Content Container:
After selecting the data source and category field, the items under each category in the Kanban control will appear as blank content containers.
These containers are ready for you to drag and drop other controls inside, similar to how you would work with the Collection control.
2. Adding Controls:
To start adding content to each item, open the controls panel on the left. Select a control, such as “Text,” and drag it into the item container area.
Once added, this control will appear in all items within the category.
After adding a control, you can click on it within any item to customize its properties. For example, you can set the font, size, color, and other attributes for a Text control.
3. Displaying Item Values:
When configuring items within the Kanban control, you have flexibility in how you display the values from your data source. There are two primary methods to display these values within the item containers:
Method 1: Using Expression Editor
The first method involves using the Expression Editor to dynamically display values based on fields from your selected data source.
1. Drag and Drop a Control: Start by dragging a control, such as the Text control, into the item container area.
2. Access the Expression Editor: Select the newly added control, then navigate to the property settings. For the Text control, this would be the Text property. Switch to the Expression mode by clicking the appropriate toggle.
3. Select Data Fields: Open the Expression Editor and select Context -> Collection item. From there, choose the specific field from your data source (e.g., “Title”, “Status”).
This will ensure that the value of this field is displayed in each item container.
4. Preview and Adjust: Once the expression is set, preview the page to see how the data values are rendered within each item.
Adjust as necessary to meet your design and functional needs.
Method 2: Using Dynamic Controls
The second method leverages dynamic controls like Dynamic field, Dynamic user, Dynamic image, and others to directly bind and display values from your data source.
1. Add a Dynamic Control: Drag a dynamic control, such as Dynamic field, into the item container. These controls are specifically designed to bind directly to a data source field.
2. Configure the Control: Once the dynamic control is in place, select it and configure its properties. For instance, in the Dynamic field control, set the Source to Collection item and then select the appropriate Object fields (e.g., “Status”, “Priority”).
3. Customize the Appearance: Adjust the appearance settings of the dynamic control as needed to ensure the data is displayed in the desired format and style.
Choosing the Right Method
Expression Editor: Use this method when you need more control over how the data is presented, allowing for complex expressions and concatenation of multiple fields or custom logic.
Dynamic Controls: Choose this method for a straightforward and binding approach that automatically handles data retrieval and display, especially useful for fields where the data type is better managed by specific controls (e.g., user profiles, images).
Both methods allow for extensive customization, enabling you to design each item in the Kanban control to reflect the most relevant and visually appealing information.
Layout Customization
Adding More Controls:
You can continue to add other controls to display additional information within each item. For instance, you could add another Text control for a description, a Dynamic Image control to show a thumbnail, or a Button control for user actions.
To organize the data visually, you can use Container controls within the item area. Containers allow you to group controls and set up a layout that ensures the data is presented clearly and consistently.
Adjust the container properties to control how the fields are displayed within each item. You can create multi-column layouts, align items horizontally or vertically, and set spacing as needed.
This approach gives you full control over how each item in your Kanban board looks and functions, making it easier to convey the right information at a glance.
Configuring and Designing the Footer Area
The Footer area in the Kanban control provides an additional space at the bottom of each category where you can display summary information or additional content. This area becomes available when you enable the “Show footer container” option in the Kanban properties settings.
How to Add Controls to the Footer Area
1. Enable the Footer Container: Start by turning on the “Show footer container” option in the Appearance settings of the Kanban properties. This will reveal the footer area at the bottom of each category column.
2. Adding Controls: Similar to adding controls to the item containers, you can drag and drop various controls into the footer container. For instance, you might want to add a Summary control to calculate and display key metrics such as the total number of items, average completion percentages, or the cumulative value of deals in a sales pipeline.
3. Data Filtering for Analytics: When using data analytics controls (e.g., Summary, Pie chart, Column chart) within the footer, it’s essential to ensure these controls are filtering data specific to the items within the respective category. To do this:
Click the “Settings” button of the Data filters setting within the control.
In the Data Filters window, set the field (corresponding to the category field selected in the Kanban control) to equals.
Use the Expression Editor to set the value as Context -> Kanban category. This configuration ensures that each footer only displays data relevant to its corresponding category.
4. Preview and Adjust: Once you’ve added and configured the controls in the footer, preview the form or dashboard to ensure everything displays as intended. Make adjustments to the layout, styles, or data filters as necessary to achieve the desired presentation.
Moving Items Between Categories and the “Show More” Button
The Kanban board control allows users to drag and drop items from one Category to another. To move an item, simply click and hold on the item, then drag it to the desired Category.
Once the item is moved, the value of its Category field is automatically updated to reflect the new Category.
Note: This functionality is only available when the selected data source is a Data List or Document Library, and the user must have editing permissions for these data sources.
If the height of the Kanban board control is set to a fixed value and the number of items within a Category exceeds this height, a scrollbar will appear when hovering over the Category. This allows users to scroll through the items.
By default, the first 20 items in each Category are displayed. If there are more than 20 items, a “Show More” button appears at the bottom of the list. Users can click this button to load additional items.
The text and style of the “Show More” button can be customized in the Styles settings.
Style Settings
Categories Settings
Category width: Set the width of categories in the Kanban to meet different style needs.
Category gap: Control the gap between categories in the Kanban, helping to distinguish different classifications or stages.
Normal/Collapsed: Set different styles for the normal and collapsed states of the Kanban content. The following styles support settings for normal and collapsed states.
Padding: By setting the space inside the category container, affecting the edge margins of category titles and card content.
Alignment: Set the horizontal alignment of category titles (left, center, right, or justify).
Text Color: Choose the color of the field text.
Background Color: Set the background color of the field. By default, the background color is set to transparent.
Border Type: Choose the border style of the category container (default, no border, solid, double solid, dotted, dashed, grooved).
Radius: Adjust the border radius to control the roundness of the corners.
Shadow: Add a shadow effect to the category container.
Category name:
Typography: Set the typography for the text in the category.
Text Color: Choose the color of the category field text.
Summary number:
Typography: Set the typography for the summarized text.
Text Color: Choose the color of the summary text.
Items Settings
Padding: Set the space inside the card, affecting the distance between card content and edges.
Item gap: Adjust the horizontal spacing between cards.
Align items: Set the vertical alignment of elements inside the card, such as top-aligned, center-aligned, bottom-aligned, stretch-aligned, and baseline-aligned.
Justify items: Set the horizontal alignment of elements inside the card.
Align content: Adjust the vertical alignment between cards.
Justify content: Adjust the horizontal alignment between cards.
Content Padding: Control the padding of the card content section, affecting the layout of text and other elements.
Normal/Hover: Set different styles for the normal and hover states of the Kanban items.
Text color: Define the text color inside the card, ensuring readability and aesthetics.
Background color: Set the background color of the card, which can use different colors to identify different task statuses or priorities.
Border type: Choose the border style for the card.
Radius: Adjust the border radius to control the roundness of the corners.
Shadow: Add a shadow effect to the card.
Show More:
Padding: Set the padding for the "Show More" link.
Typography: Control the text alignment of the "Show More".
Text Color: Define the color of the "Show More" text.
Background Color: Set the background color for the "Show More", making it coordinate or stand out from the rest of the Kanban.
Advanced Settings
Set the Advanced options that are applicable to this control.