Versions Compared

Key

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

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

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.
CAN WE HAVE A SCREENSHOT OF ONE

Image Added


Note

This example Kanban board can be found in the 'Theme 2.1 Examples' Application

Basic Steps to Creating a Kanban Board

  1. Create a screen.
  2. Optionally add a header area 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 known as 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.

  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:
  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 attributes that has have the values you want to show in columns. should this be plural? Attributes?
  • 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 
Anchor
simple
simple

A simple kanban Kanban board, based on the some example data has 3 columns, Not startedNew, Work In progress and Done Complete, with cards displayed in all the columns. PhixFlow automatically: What example data? 

  • 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

needs a bit of an intro as to what this is for and where is appears. Also what is the difference between a column and a heading?If the user is dividing their data into columns and they are okay to have that attribute value displayed to the user (e.g. New, Work In Progress and Complete) then only one attribute is needed to be used for both the columns and headings. To select a single attribute to appear as the column heading:

Panel
titleExample Data

The backing table has the attributes:

  • Status
  • Task
  • Assignee

All the records have one of the following statuses:

  • Not startedNew
  • Work In progress
  • DoneComplete
  1. In the card properties → Kanban Board → Kanban Columns: select the attribute you want want to use for ?each column. In this example Status.
  2. On the screen, PhixFlow displays 3 columns Not startedNew, Work In progress and Done Complete, with cards displayed in all the columns. Screenshot?
    Image Added

Select Different Attributes for Columns and Headings

small introIn this scenario the user may want to divide their data into columns using an ID attribute but display a different attribute as the column header. To select a different 'display' attribute to appear as the column heading to display to the users:

Panel
titleExample Data

The backing table has the attributes:

  • StatusID
  • StatusName
  • Task
  • Assignee

All the records have one of the following statuses:

StatusIDStatusName
1Not startedNew
2Work In progress
3DoneComplete


  1. In the card properties → Kanban Board 
    1. Kanban Columns: select the attribute you want to use. In this example StatusID.
    2. 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 DoneComplete, then the Done column is not displayed.


Kanban Board with Fixed Columns 
Anchor
fixed
fixed

Usually, you want a kanban Kanban board to continue to display empty columns which have no records in, so that you can drag cards onto them. Explain what you mean by empty columns e.g. if no records have that status etc. To  To do this you can specify the columns using expressions. I've numbered the following section please check it is still accurate.

  1. In the card properties → Kanban Board section:
  2. Tick Evaluate Kanban Columns as Expression.
  3. PhixFlow shows:
    1. Kanban Column Expression→ enter an expression that specifies the attribute and values that you want to uses as columns. For example:

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


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

      Code Block
      _context.StatusNames
      
      //or
      
      ["Not StartedNew", "Work In Progress", "DoneComplete"] 


Tip
titleTips for Kanban Expressions

The output values of kanban expressions must result in an array of strings, for example 

["Not StartedNew", "Work In Progress", "DoneComplete", "Blocked", "In Review"].

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. Link to context variables?To find out more about context parameters see Context Parameter.

To ensure kanban 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 Kanban board. You must update the expressions to add them.

To accommodate ongoing changes to the columns for your kanban Kanban board, create a separate table that lists all the statuses. Does this get around the limitation above? If so you need a segway into this. 

StatusID
Primary Key
StatusName
Display Name
1Not startedNew
2Work In progress
3DoneComplete
4Blocked
5In review

In the Kanban Column Expression, refer to the table using a context parameter so that PhixFlow creates a column for each attribute. When you add more attributes to the table, PhixFlow automatically adds columns to the kanban 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 Kanban column to another. The See Drag and drop action is that the drag handle and drop target? if so can you link to that pageTypes and Drop Targets.


HTML Comment
hiddentrue

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

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

.This section is a bit light can we have a bit more detail or an example, such as "in your actions use these values to obtain..." I'm not 100% where I'd use these
  • .