The Kanban View is a process-focused tool designed to help users visualize, manage, and refine workflows efficiently. This view organizes work into columns, with each column representing a distinct stage in the process. As tasks, data points, or project elements move from one stage to the next, they are represented by cards that progress across the board, showing a clear journey from start to finish.
Why Use Kanban?
Visual Workflow Clarity: Tasks are displayed on a Kanban board, making it easy to see what’s being worked on, what’s next, and what’s completed.
Flexibility: Unlike rigid methodologies, Kanban adapts to changes in priorities or workflows without disrupting the system.
Focus on Efficiency: By limiting work in progress (WIP), Kanban ensures teams avoid overloading themselves, leading to faster task completion.
Improved Collaboration: The shared board encourages team discussions and accountability, as everyone can see the task statuses.
Kanban is suitable for various industries and roles because of its versatility. Here are few common use cases:
Use Case
Example 1: Franchise Opening Process for FoodCorp
FoodCorp, the parent company of GrillHouse, oversees franchise applications from potential franchisees interested in opening new GrillHouse locations. This process involves evaluating eligibility, gathering documentation, and managing the entire setup process until the franchise launch. Kanban can streamline this journey, visually tracking each stage from inquiry to opening.
Example 2: Purchase Order Management with Kanban in Quixy
GreenTech Manufacturing uses Kanban in Quixy to manage purchase orders (POs), ensuring timely procurement and effective tracking of supplies. Kanban provides a clear visual structure that simplifies updates and keeps processes on schedule.
How Kanban View Works
Kanban View relies on a Data Source to manage the data displayed. The core functionality of Kanban is to visualize tasks across various stages, allowing users to update task statuses and reorder tasks as priorities shift. Services are integral to Kanban’s real-time functionality, keeping tasks updated as they move through stages and providing a flexible, responsive experience.
Pre-requisites to create a fully functional Kanban View.
Before starting, ensure you have the following elements ready:
Create a Data Table: Include necessary fields for your Kanban board. For instance, in the franchise setup example, fields could include:
Name
Contact Number
Email Address
Location Interest
Financial Details
Documents Status
Color
Create a Data Source: Use the data table to create a data source that serves as the foundation for your Kanban View. Save the data source after creation.
Create a Service: Services enable key Kanban functions, such as updating statuses and reordering. Services keep the board dynamic and responsive. Refer to article on creating Services for detailed instructions.
Add-ons (Optional): An add-on, acts as a plugin that enhances a View by adding extra functionality or customization. It includes tools like Smart Columns, Rules, and Actions, which help automate tasks, organize data more effectively, and improve the overall user experience. Learn how to create an Add-on.
Step-by-Step Guide to Create a Kanban View in Quixy
Select the Data Source for your Kanban View.
From the list of actions in the sidebar, select + View to proceed with the view creation.
Enter a view name and display name. Choose or create an Add-on, if necessary. Under View Type, select Kanban and click Next.
In the View Configuration page, you can configure how your Kanban board is organized and set up Service functions.
Organize Board By:
Choose Column: This dropdown shows available columns from your data source. Select the column to structure your Kanban board (e.g., "Status" for tracking stages like “Inquiry,” “Review,” and “Setup”).
Choose Color Columns: Assign colors to header columns dynamically by storing hex codes in a data table and referencing them. This helps in organizing and visually distinguishing stages.
Choose Reorder Column: Allows you to define and customize the order of columns in a Kanban board. It provides flexibility in arranging the workflow or data representation based on priority, status, or any other preferred criteria.
IMPORTANT
When creating a Kanban View, the boards are organized based on the values in the selected column. By default, these values are arranged alphabetically. If you want to customize the order of the boards to match your workflow preferences, you need to create a Reorder Column.
How to Create a Reorder Column?
Follow these steps to set up a Reorder Column:
Step 1: Create a Smart Column
Navigate to the Add-On associated with the Kanban View.
In the Add-On creation page, select Smart Columns from the top menu.
Click + Add Smart Column.
Set the following details:
Column Name: Order
Element Type: Number
Save the column without assigning any values.
Step 2: Write Rules for Custom Ordering
Define rules to determine the order of the values in the column you are organizing by. These rules specify the sequence in which the boards will appear in the Kanban View.
Example Rule:
If "Document Submission" is the first step and "Approval" is the second step, the rules should be:
Assign a lower value to "Document Submission" to ensure it appears first (e.g., 1).
Assign a higher value to "Approval" to place it second (e.g., 2).
Use If-Else logic to define these conditions:
If the value is "Document Submission," set Order to 1.
Else If the value is "Approval," set Order to 2.
Benefits of a Reorder Column
Customizable Workflow: Organize boards in a sequence that reflects your process, not just alphabetical order.
Flexibility: Easily adjust the order as workflows evolve.
Improved Clarity: Align the Kanban View layout with the logical progression of tasks.
By creating a Reorder Column and defining rules, you can tailor your Kanban View to meet your unique workflow needs.
Service Utilization: Select the Service created earlier and assign it to the Kanban View.
Specify the event (e.g., update, reorder) that will trigger actions as tasks move between columns.
Map data source elements to the service elements.
Under Actions, enable, disable, or delete the Service.
Navigating the Kanban View Page
Once the Kanban View is set up, you can utilize smart columns, rules, and actions. These are available when an Add-on is in use and allow for further customization.
Smart Columns: Smart columns or Static columns which are created in the add-on will appear here for you reference.
Rules: The Rules which are defined or created in the Add-on will appear here for you reference.
Actions: Actions which are configured and defined in the add-on will appear here for you reference.
NOTE
You can make edits to the data source from the Add-On creation page by clicking the hyperlink under the Add-On name. Reload the page after editing to see the updates.
Access Control: Define access levels for users.
Access Page Overview
Manage Roles: To manage roles, select a workspace, click Add Access, assign a role with the required permissions, and click Next to proceed.
Columns & Filter Access: This section allows you to control both column visibility and data access within the List View:
Column Access: Manage visibility and editing permissions for each column:
Hide: Prevent users from viewing the column.
Enable: Allow users to view and edit the column.
Disable: Allow view-only access.
Data Access: Configure permissions for data rows:
Restrict: Limit access to specific rows of data.
No Restrict: Grant full access to all data rows.
Click, Next after configuring these settings.
Data Access: Define advanced permissions to control data visibility and access based on roles and user requirements, then click Save to apply these settings.
Group: Set grouping preferences for data organization.
Filter: Add filters for more precise data views.
Sort: Control the order of data within columns.
Hide Columns: Choose columns to hide for a cleaner layout.
Color Rules: Color rules are used to apply colors to data based on defined rules. These rules are similar to business rules but focus on visualizing data through colors. The colors dynamically reflect the state or category of the data, helping users easily interpret or identify important information at a glance. You can setup colors field level and row level colors.
Customize Settings: These are the setting to personalize and customize the Kanban View.
Column Wise Count: Displays the count of items or tasks in each column on the Kanban board.
Toggle Column: Enables or disables the visibility of specific columns in the Kanban view.
Incremental Flow: Allows tasks or items to move sequentially through the workflow stages in predefined steps.
Choose Global Search Fields: Select fields that will be searchable across the Kanban board or the application.
Customize Cards: The Customize Cards feature allows you to modify the appearance and content of Kanban cards to suit your specific needs. It offers a combination of predefined layouts and a custom layout option, as well as tools to adjust the design and style of the cards.
Card Customization options
Layout Options
Predefined Layouts:
Layout 1: Supports up to 6 fields.
Layout 2: Supports up to 6 fields.
Layout 3: Supports up to 5 fields.
Custom Layout: Allows you to define your own card structure. Supports up to 20 fields.
Additionally, you can define the card width to ensure your layout fits the desired display size and style.
Field Selection and Arrangement
Drag-and-Drop Interface: Use the intuitive drag-and-drop interface to place selected fields into the layout. This interface lets you organize fields according to your preferences, ensuring the most important information is displayed prominently.
UI Preferences for Layouts: Customize the visual design of the cards using a set of UI preferences that enhance usability and aesthetics.
Design Customizations
Header and Data Properties:
Individual styling options are available for the header and data sections, allowing you to differentiate their appearance. These include font adjustments, color changes, and text formatting options as described above.
Adjust the font size for both header and data to fit the design requirements.
Enable text wrap to ensure all text is visible within the card's allocated space.
Apply font styles such as bold, italics, or underline to emphasize key details.
Select text color to match your theme or improve readability.
Background Customizations:
Background Color: Add a solid background color to your Kanban cards and adjust its opacity to achieve the desired transparency.
Background Image: Add an image to the background of your Kanban cards and adjust its opacity to blend it appropriately with the card's content.
Show Label: Labels associated with the data can be displayed on the cards.
Preview: Allows you to ensure the appearance and functionality of the card meet your expectations before finalizing changes.
Select Fields to Display in Cards: Choose specific fields to show on each card for quick reference.
Tool Tip Template: Define the format and information shown in the tooltip when hovering over a card. By enabling this feature, you can select fields to display their associated data. When users hover over a card, a tooltip will appear, providing a concise summary of the selected information.
Expand Card on Click: Opens a detailed view of the card when clicked for more comprehensive information.