Kanban Example

To create a Kanban board, a form and workflow are required. The form and workflow will need ETL chainset to link the two different modules together.

Below is a simple example used a form and a workflow with ETL linking them together.

Create ETL

In the ETL module, create a ETL chainset named “ToDo”. Open the ETL chainset, add a new ETL chain named “Save”.

Left it blank for the time being.

Create Workflow

In the Workflow module, create a workflow named “ToDo”.

Create and setup the workflow as per the screenshot above.

The name of the workflow page is Main by default. It needs to change to Kanban for the Kanban module to recognise it. To do so, click on the “More Actions” icon at the upper right corner of the page. Select the “Edit” option and the “Edit” dialog box will appear. Change the “Name” field to Kanban and click on the “OK” button to save the change.

In the two save transitions, select Save in the “OnTransition” field. This will trigger the Save ETL chainset when the “Save” button in the form is clicked.

Create Form

In the Forms module, create a new form named “ToDo”. Set up the form as per the screenshot.

To link the form to the workflow, the ID of the Workflow component need to match the the name of the workflow, which is changed from Main to Kanban.

Edit the properties of the Select and ButtonBar components as per the screenshot below.

In the Rules tab, add a new rule. The purpose of this rule is to ensure no one can edit the form after it has been completed.

In the “Properties” panel, give the new rule an unique name in the “Name” field. Select the “Inverse” field.

In the “Conditions” and “Actions” panels, select and set up as per the screenshot above.
The condition is that when the elxState.Kanban is in the Complete state, the actions listed in the “Actions” panel will apply. The actions are to hide the “Save” button and disable the “Label”, “Description” and “Priority” fields in the form.

Setup ETL

In the ETL module, open the “ToDo” ETL chainset and add the required ETL steps as per the screenshot below.

Edit the steps as per the screenshot below.

The steps perform the following:

  • First step - adds the required fields to elxPublic so that they can be accessed by other modules
  • Second step - adds a new field priority and load it with the value in elxPublic.priority
  • Third step - creates a lookup array, which determine if the colour of the pin according to the key value
  • Fourth step - lookup the array field created in the third step and set elxPublic.kanbanClass according to the value of priority
  • Fifth step - checks if the value in the kanban item’s “Label” field ends with Module and output to isModule as true or false
  • Sixth step - checks if isModule is true, sets the background colour according to RGBA value (in this case, green) and output to elxPublic.kanbanStyle
  • Seventh step - redirects the URL kanbanClose, which is the Kanban board

Create Kanban Board

In the Kanban module, create a Kanban board named “ToDo” and select the form and workflow created above.

The initial Kanban board is empty with only the columns corresponding the states in the workflow.

Add Kanban Item

Populate the Kanban board by clicking on the icon at the bottom of the column.

To add a Kanban item, click on the icon at the bottom of the column. The “Add Kanban Item” dialog box will appear. The content of the dialog box is actually the content of the form that was defined in the Kanban board.

Key in or select the information and click on the “Save” button. To abort, click on the cross at the upper right corner of the dialog box.

The Kanban item will appear in the Kanban board.

Only the columns corresponding states with transitions linking from the Start state in the workflow will have the icon at the bottom of the column that allows new Kanban items to be added in the column.

Edit Kanban Item

You can edit the Kanban item by clicking on item itself to display the “Kanban Item” dialog box. The History component in the form will capture the actions done with the form.

Kanban items with labels ending with “Module” are green in colour, which is triggered by the sixth ETL step.

The red and orange pins appear in the Kanban items according to the value of the “Priority” field in te form. Changing the value of “Priority” field to “High” will change the colour of the pin to red. Changing it to “Low” will remove the pin altogether.

Move Kanban Item

You move them around the board as desired simply by drag-and-drop it to the desired column that allows the action. The History component in the form will capture the actions done to the item.

Not all column allows the Kanban item to be dragged into. From the workflow, you can see that there is one transition going from the “Not Started” state to the “In Progress” state. There is a transition going from “In Progress” state to the “Completed” state and vice versa.

This means that a Kanban item can only move from “Not Started” column to the “In Progress” column. But you can move a Kanban item to and fro between “In Progress” column and the “Completed” column.

When a Kanban item is moved to the “Completed” column, all fields in the form cannot be edited. This is due to the rule in the form. The form can only be editable when it is moved back to the “In Progress” column.

Other Examples

Do note that not all columns have the icon. Only the columns corresponding states with transitions linking from the Start state in the workflow will be able to add new Kanban items in the Kanban board.
In this example, only “Not Started” state has a transition that links to the “Start” state.

If there are more than one state is linked to the “Start” state, then more than one column in the Kanban board will be able to add Kanban items.

In the example below, “State1” and “State3” are linked to the “Start” state with “Submit1” and “Submit3” transitions respectively. Transition “S2” links “State1” to “State2”, thus Kanban items in “State1” can be moved to “State2” but not the other way around. The same goes for transition “S4” which links “State3” to “State4” states.

You can enhance the workflow by using a Super state and a History state. It will help reduce the number of save transitions and at the same time remembers the status of its substates and return to it. The Kanban board does not change as the states are still the same.