Versions Compared

Key

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

This page explains how to create a kanban board.

Todo-Anthony - to have a look at this draft

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 another a column. This automatically updates the "status" value.

Image Added


Note

This example Kanban board can be found in the 'Serene Grey - Examples' Application

Basic Steps to Creating a Kanban Board

The backing stream
  1. Create a dashboard.Optionally add a header areas with icons and heading textscreen.
  2. Add an area to act as a container for the Kanban board.
  3. Add a card component and bind it to a stream.table. This is known as the backing table. To do this: 
    • Either, drag a stream table onto the area and select Card viewscreen and create a card container.
    • Or drag a card container from a palette

      (for example Theme 2)

      onto the screen. In the card properties

      drag a stream into

      add a backing table to Basic Settings

      - Stream

      → Table.

  4. Save the changechanges.
  5. In the card properties → Kanban Board options, select the attribute to use as status.use as the Kanban columns, in this example the attribute would be Status. See the sections below for more details on how to do this:
    1. Simple Kanban Board

    - link
    1. Kanban Board with Fixed Columns

    - link
    1. .

  6. To configure:
    1. how the board looks, use options in the 
    Style Settings
    1. Screen Styling section.
    To configure
    1. an action to run if the user clicks on the board or drags a card,
     
    • Fiona-todo some combination of action options
    • Action Method, Action, Default Action, Drag Type and Drop Target

Does this give me all the columns? does this give me the cards?

    1. 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.
  • records to display as cards.
  • optionally, any background filter that you want to apply to the records.

todo-Fiona

  • When you edit Sarah's kanban board, all the columns disappear.
  • When I bind the kanban column to data i still only get one column
  • How to I get teh records to appear as cards?

If a user or process (such as running analysis on a model) updates the backing streamtable, the next time the kanban board 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

Board 
Anchor
simple
simple

A simple kanban Kanban board, based on the some example data has 3 Kanban columns, Not startedNew, Work In progress and Done Complete, with cards displayed in all the columns. If the backing table has data, 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

Kanban column headings can be altered and sorted, if required

Select One Attribute for Both Columns and Headings

Use the toggles for Sort Headings and Sort Reverse in the Kanban Board section of the card component 

Insert excerpt
_property_tabs
_property_tabs
nopaneltrue
 to specific if the column headings should be sorted or reverse sorted.  

The attribute selected as the Kanban column attribute doesn't necessarily have to be the one displayed to the user.

One Attribute for Kanban Column

If you require your data to be divided into columns, with that attribute value displayed to the user (e.g. New, Work In Progress and Complete) then only one attribute is needed for both the columns and headings. To select a single attribute to appear as the column heading:

Panel
titleExample Data

The backing stream table has the attributes:

  • Status
  • Task
  • Assignee

All the records have one of the following statusesvalues in Status:

  • Not startedNew
  • Work In progress
  • Done
In
  • Complete
  1. As above, in the card properties → Kanban Board → Kanban Columns: select the attribute you
want
  1. want to use for each column. In this example Status.
In
  1. On the
dashboard
  1. screen, PhixFlow displays 3 columns
Not started
  1. New, Work In progress and
Done
  1. Complete, with cards displayed in all the columns, when the backing table has data.
Select
  1. Image Added

Different Attributes for

Columns and Headings

Kanban Columns

In 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 stream table has the attributes:

  • StatusID
  • StatusName
  • Task
  • Assignee

All the records have one of the following statuses:

StatusIDStatusName
01
1
Not started
New
02
2Work In progress
03
3
Done
Complete


  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
  • not display a column when there are no records that have its status. For example, if no record has the

    Status

    StatusID of

    Done

    3, then the

    Done

    Complete column is not displayed.


    Kanban Board with Fixed

    Columns

    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. To  To do this you can specify the columns using expressions.

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

    uses
      1. use as columns

    .
    For example: todo-Fiona check this is true and add Example expression here e.g. 01, 02, 03
      1. . The values must corelate to the values in the Kanban column and are case sensitive. For example:

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


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

     todo-Fiona Can the user use the Kanban Column Headings instead??
      1. The returned values can be anything but must be in the same order as those above. For example:

        Code Block
        _context.StatusNames
        
        //or
        
        ["New", "Work In Progress", "Complete"] 


    Tip
    titleTips for Kanban Expressions

    The output values of kanban expressions must result in an array e.g. ["1of strings, for example 

    ["New", "Work In Progress", "Complete", "2Blocked", "3In 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.Todo-fiona add an example expression. 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 FunctionsResponsive 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 stream table that lists all the statuses. 

    StatusID
    Primary Key
    StatusName
    Display Name
    01
    1
    Not started
    New
    02
    2Work In progress
    03
    3
    Done
    Complete
    04
    4Blocked
    05
    5In review

    In the Kanban Column Expression, refer to the stream table using a context parameter so that PhixFlow creates a column for each attribute. Todo-fiona add an example expression. When  When you add more attributes to the streamtable, 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. See Drag Types and Drop Targets.

    Kanban in
    Insert excerpt
    _app_mode
    _app_mode
    nopaneltrue

    To see the full Kanban board, change to 

    Insert excerpt
    _app_mode
    _app_mode
    nopaneltrue
     or 
    Insert excerpt
    _lock
    _lock
    nopaneltrue
     your screen.

    Multiple consecutive cards can be selected using shift clicking.

    Image Added


    HTML Comment
    hiddentrue

    To configure drag-and-drop actions use the _

    kanban 

    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.

    , for example:

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

    headingValue 
    • .headingValue returns "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
    • .