Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
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.
In PhixFlow a kanban board consists of:
Live Search | ||||||||
---|---|---|---|---|---|---|---|---|
|
Panel | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
- 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
Outline
Note |
---|
This example Kanban board can be found in the 'Serene Grey - Examples' Application |
Basic Steps to Creating a Kanban Board
- Create a screen.
- Add an area to act as a container for the Kanban board.
- 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.
- Save the
- changes.
- 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:
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?
Simple Kanban Board
A simple kanban board, based on the example data has 3 columns,Not started, In progress
and Done
.
- To configure:
- how the board looks, use options in the Screen Styling section.
- 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.
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 | ||||
---|---|---|---|---|
|
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 | ||||||
---|---|---|---|---|---|---|
|
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 | ||
---|---|---|
| ||
The backing |
table has the attributes:
All the records have one of the following |
values in Status: |
Not started
|
Done
|
- As above, in the card properties → Kanban Board → Kanban Columns: select the attribute you
- want to use for each column. In this example Status.
- On the
- screen, PhixFlow displays 3 columns
-
New, Work In progress
and
Done
-
Complete
, with cards displayed in all the columns, when the backing table has data.
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 | ||
---|---|---|
| ||
The backing |
table has the attributes:
All the records have one of the following statuses:
|
01
|
Not started
|
02
|
03
|
Done
|
- 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 | ||
---|---|---|
| ||
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 |
Done
3, then the |
Complete column is not displayed. |
Kanban Board with Fixed
Columns
Anchor | ||||
---|---|---|---|---|
|
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.
- 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
use as columns.
For example: todo-Fiona check this is true and add
Example expression here e.g. 01, 02, 03
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]
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 | ||
---|---|---|
| ||
The output values of kanban expressions must result in an array |
of strings, for example
|
|
|
. 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 the functions that work on the client-side; see Functions → 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
table that lists all the statuses.
StatusID Primary Key | StatusName Display Name |
01
1 |
Not started
New |
02
2 | Work In progress |
03
3 |
Done
Complete |
04
4 | Blocked |
05
5 | In 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 | ||||||
---|---|---|---|---|---|---|
|
To see the full Kanban board, change to
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|
Multiple consecutive cards can be selected using shift clicking.
HTML Comment | ||
---|---|---|
| ||
To configure drag-and-drop actions use the _ |
kanban internal variable |
, for example:
|
|
|
|
|
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
|