Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This page explains how to create 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. 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 another column. This automatically updates the "status" value.

In PhixFlow a kanban board consists of:

Live Search
spaceKey@self
additionalnone
placeholderSearch all help pages
typepage

Panel
borderColor#00374F
titleColorwhite
titleBGColor#00374F
borderStylesolid
titleSections on this page

Table of Contents
maxLevel3
indent12px
stylenone


  • A dashboard
  • Card components bound to a stream (the backing stream)
  • The backing stream has:
    • 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.
  • The card component has properties to define
    • the kanban columns in the Kanban Board section.
    • how the board looks in the Style Settings section.
    • actions that run when the user drags a card onto a column.
       Fiona-todo some combination of action options
    • Action Method, Action, Default Action, Drag Type and Drop Target

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

How To

All the following start with a dashboard.

dashboard

Optionally a header areas with icons and heading text

Area to act as a container for the board

Card container with canbn options

Add a card component and bind it to a stream todo-fiona how to do this

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

Panel
titleExample Data

The backing stream has the attributes:

  • Status
  • Task
  • Assignee

All the records have one of the following statuses:

  • Not started
  • In progress
  • Done

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

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



Select Different Attributes for Columns and Headings

Panel
titleExample Data

The backing stream has the attributes:

  • StatusID
  • StatusName
  • Task
  • Assignee

All the records have one of the following statuses:

StatusIDStatusName
01Not started
02In progress
03Done


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.


Note
titleLimitations 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: todo-Fiona check this is true and add Example expression here e.g. 01, 02, 03
    • Kanban Column Headings Expression → enter an expression to specify the column labels. todo-Fiona Can the user use the Kanban Column Headings instead??


Tip
titleTips for Kanban Expressions

The output values of kanban expressions must result in an array e.g. ["1", "2", "3"]:

You can use context parameters in the expressions. For example, in an action that opens a kanban board, lookup a context parameter to create the columns.Todo-fiona add an example expression

To ensure kanban boards are responsive, expressions can only take the functions that work on the client-side; see Responsive Functions.


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 stream that lists all the statuses.

StatusID
Primary Key
StatusName
Display Name
01Not started
02In progress
03Done
04Blocked
05In review

In the Kanban Column Expression, refer to the stream so that PhixFlow creates a column for each attribute. Todo-fiona add an example expression. When you add more attributes to the stream, 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 todo-Fiona check this - I'm not sure what the internal variable is doing that is different from the properties.

  • _kanban attribute . "StatusID"
  • _kanban headingAttribute . "StatusName"
  • _kanban value  . "5"
  • _kanban headingValue . "Manager"

Temporary excerpt from the internal variable page

  • value: The value of the kanban attribute in the target kanban column.
  • attribute: The kanban attribute name of the card container.
  • heading Value: The value of the kanban heading attribute in the kanban column.
  • heading Attribute: The kanban heading attribute name of the card container.