This page explains how to create a screen that works like a kanban board.

Overview

Kanban boards are commonly used to track tasks in projects. They consist of columns that display cards. Each column represents a stage in the process. Each piece of work is represented by a card. When the work moves to the next stage of the process, the cards moves to the corresponding column. 

To move a card to another column, the board user can:

• either change a value, such as "status", in a card
• or drag a card into a column. This automatically updates the "status" value.

Basic Steps to Creating a Kanban Board

1. Create a screen.
2. Optionally add a header areas with icons and heading text.
3. Add an area to act as a container for the board.
4. Add a card component and bind it to a table. This is the backing table. 
   • Either, drag a table onto the screen and create a card container.

   • Or drag a card container from a palette onto the screen. In the card properties add a backing table to Basic Settings - Table.

     Some palettes may have example Kanban card containers already

5. Save the change.
6. In the card properties → Kanban Board options, select the attribute to use as the status. See the sections below for more details on how to do this in a:

   • Simple Kanban Board  

   • Kanban Board with Fixed Columns.

7. To configure:
   1. how the board looks, use options in the Style Settings section.
   2. an action to run if the user clicks on the board or drags a card, see Connecting Events to Actions and Drag Types and Drop Targets.

The backing table must have:

• an attribute that has the values you want to show in columns
• records to display as cards
• optionally, any background filter that you want to apply to the records.

If a user or process (such as running analysis on a model) updates the backing table, the next time the kanban board refreshes, PhixFlow automatically moves the cards to the columns that reflect their stage in the process.

Using the Kanban Board Properties

Simple Kanban Board 

A simple kanban board, based on the example data has 3 columns, Not started, In progress and Done, with cards displayed in all the columns. PhixFlow automatically:

• displays columns for each value of the selected Kanban Column
• moves cards automatically if a user changes values in the selected Kanban Column. 

Select One Attribute for Both Columns and Headings

In the card properties → Kanban Board → Kanban Columns: select the attribute you want to use. In this example Status.

On the screen, PhixFlow displays 3 columns Not started, In progress and Done, with cards displayed in all the columns.

Select Different Attributes for Columns and Headings

In the card properties → Kanban Board 

• Kanban Columns: select the attribute you want to use. In this example StatusID.

• Kanban Column Headings: select an attribute to provide the headings for the columns. In this example StatusName.

  Limitations on a simple kanban board

  A simple kanban board does not:

  • respond if a user tries to drag a card to another column
  • display a column when there are no records that have its status. For example, if no record has the Status of Done, then the Done column is not displayed.

Kanban Board with Fixed Columns 

Usually, you want a kanban board to continue to display empty columns, so that you can drag cards onto them. To do this you can specify the columns using expressions. In the card properties → Kanban Board section:

• tick Evaluate Kanban Columns as Expression.
  PhixFlow shows:

  • Kanban Column Expression→ enter an expression that specifies the attribute and values that you want to uses as columns. For example:

    _context.StatusID
    
    //or
    
    [1,2,3]

  • Kanban Column Headings Expression → enter an expression to specify the column labels. For example:

    _context.StatusNames
    
    //or
    
    ["Not Started", "In Progress", "Done"] 

Over time, users can add more values, for example statuses for blocked tasks or those in review. When you fix the columns using expressions, the new statuses will not be automatically displayed as columns in the kanban board. You must update the expressions to add them.

To accommodate ongoing changes to the columns for your kanban board, create a separate table that lists all the statuses.

In the Kanban Column Expression, refer to the table so that PhixFlow creates a column for each attribute. When you add more attributes to the table, PhixFlow automatically adds columns to the kanban board.

Configuring Dragging Between Columns

Configure a drag-and-drop action on the card so that PhixFlow can change the value in attributes when the user drags a card from one kanban column to another. 

To configure drag-and-drop use the _kanban internal variable, for example:

• _kanban.attribute  returns "StatusID"

• _kanban.headingAttribute returns "StatusName"

• _kanban.value  returns "5"

• _kanban.headingValue returns "Manager".