Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
This page explains how to create a kanban board.

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.

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

    Image Added


    Note

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

    Basic Steps to Creating a Kanban Board

    1. Create a screen.
    2. Add an area to act as a container for the Kanban board.
    3. Add a card component and bind it to a table. This is known as the backing table. To do this: 
      • 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.

    4. Save the changes.
    5. In the card properties → Kanban Board options, select the attribute to 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

      2. Kanban Board with Fixed Columns.

    6. To configure:
      1. how the board looks, use options in the Screen Styling 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:

    • attributes that 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
    . The card component has properties to define the kanban columns in the Kanban Board section
    • .
  • The card component has properties to define how the board looks in the Style Settings section.
  • Optionally, the card component has
     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

    table, the next time the 

    kanban board

    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. Add a card component and bind it to a stream todo-fiona how to do this

    Simple Kanban Board

    In

    Using the Kanban Board Properties

    Simple Kanban Board 
    Anchor
    simple
    simple

    A simple Kanban board, based on some example data has 3 Kanban columns, New, Work In progress and 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 if a user changes values in the selected Kanban Column

    Kanban column headings can be altered and sorted, if required. 

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

    • Status
    • Task
    • Assignee

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

    • New
    • Work In progress
    • Complete
    1. As above, in the card properties → Kanban Board → Kanban Columns: select the attribute you
    want
    1. want to use
    . Using the Example Data on the right, select
    1. 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.
    Kanban Column Headings → optionally select an attribute to provide the headings for the columns, for example if Kanban Columns is an identifier.
    1. Image Added

    Different Attributes for 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:

    Status
    • StatusID
    • StatusName
    • Task
    • Assignee

    All the records have one of the following statuses:

    • Not started
    • In progress
    • Done

    Attribute is not a useful name

    StatusID is the primary key, and it hasattribute, but the headings will use the StatusName.

    StatusIDStatusName
    01
    1
    Not started
    New
    02
    2Work In progress
    03
    3
    Done
    Complete
  • Add a card component

    1. In the card properties → Kanban
    Board
    1. Board 
      1. Kanban
    Columns → select
      1. Columns: select the attribute you want to use. In this example StatusID.
      2. Kanban Column
    Headings → optionally
      1. Headings: select an attribute to provide the headings for the columns
    , for example if Kanban Columns is an identifier.

    Status changes when card is dragged to another column

    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.

    Showing all possible columns

    By default, PhixFlow shows columns for all the attribute values present in the stream. For example in a stream for the tasks in a project, there are records that have a status of: Backlog, In Progress and Done. The kanban board has columns for these 3 statuses, and each column contains cards. The stream has no records with a status of Scheduled or In Review, so these columns are not present on the board. 

    If the status of a record changes to Scheduled or In Review, PhixFlow displays the column the next time the Kanban board refreshes. If you have configured drag-and-drop, you cannot drag a card onto a column that is not displayed on the board.

    To hard-code the kanban board to display empty columns, use the card properties → Kanban Board

    • Evaluate Kanban Columns as Expression tick so that PhixFlow does not use the Kanban Columns and Kanban Column Heading properties, and to show:
      • Kanban Column Expression→ specifies the attribute and its values to represent as columns
      • Kanban Column Headings Expression → specifies the headings

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

    1. Select the attribute:
      • StatusID to create the kanban columns
      • StatusName to name the kanban columns
    2. Tick Evaluate Kanban Columns as Expression
    3. Enter an expression to always display all 5 statuses: 01, 02, 0304 05 todo-Fiona example expression.
    4. Specify a different heading for a column using the Kanban Column Headings expression. Kanban column headers as expressions. todo-Fiona Can the user use the Kanban Column Headings instead??

    One thing that could be useful in these expressions is that you can use context parameters here. If you do a lookup in a context parameter in an action that opens the Kanban dashboard, then this could be used to create the columns.

    To ensure kanban
      1. . In this example StatusName.
    Note
    titleLimitations on a simple kanban board

    A simple kanban board does not display a column when there are no records that have its status. For example, if no record has the StatusID of 3, then the Complete column is not displayed.


    Kanban Board with Fixed Columns 
    Anchor
    fixed
    fixed

    Usually, you want a Kanban board to continue to display columns which have no records in, so that you can drag cards onto them. To do this you can specify the columns using expressions.

    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 use as columns. 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. 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 of strings, for example 

    ["New", "Work In Progress", "Complete", "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. To find out more about context parameters, see Context Parameter.

    To ensure Kanban boards are responsive, expressions can only take

    a subset of

    the functions that work on the client-side; see FunctionsResponsive Functions.

    Columns can change

    One limitation on hard-coding

    Over time, users can add more values, for example statuses for blocked tasks or those in review. When you fix the columns using expressions

    is that

    ,

    if an additional value is added to the attribute for the column, then you have to change the expression. For PhixFlow to automatically find any new attribute values and to automatically add them to the board, whether or not they have records

    Create lookup (??) stream that has an attribute for each of the values that can appear in the stream that backs the board. In the expression, refer to the stream. When you want a new value, for example In Review, add it to the stream. The expression will find the additional option and the kanban board automatically displays the new column.

    Kanban column headers as expressions. If using the expressions. The output values of these expressions must result in an array e.g. ["1", "2", "3"]:

    One thing that could be useful in these expressions is that you can use context parameters here. If you do a lookup in a context parameter in an action that opens the Kanban dashboard, then this could be used to create the columns.

    Add Blocked and In Review

    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. 

    StatusID
    Primary Key
    StatusName
    Display Name
    1New
    2Work In progress
    3Complete
    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 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. 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 internal variable, for example:

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