Configuring a Kanban Board

Create a table to store the tasks that will be displayed in the Kanban board, configure a data source, and use a special interface to configure the Kanban control in your model.

Implementation:

  1. Create the table structure to store the Kanban tasks. Add the following Text data properties: Title, Column, Summary, Tags, followed by two Number properties called TaskId and Priority. For more information, refer to Designing Your Own Data.
  2. (Optional) To display images in Kanban cards, create an additional field called Images.
  3. (Optional) To use swim lanes in your board, create an additional field called SwimLane. This feature will be explained in more detail later in this topic.
  4. (Optional) To assign a colour key to your cards, create an additional field called ColourKey.
  5. Create a data source and connect it to the table.
  6. Add aliases to each table's data source fields.
  7. Create two actions - both of which should use the WriteData function to add a new row of task data or update an existing one.
  8. Add another action using the DeleteData function for deleting tasks.
  9. Switch to the Definition tab.
  10. Create a question with the type set to Kanban.
  11. Double-click the question to open the Properties tab.
  12. Click the Configure button. This will open the Kanban Definition dialog.
  13. Use the Data Source drop-down menu to select the data source you created earlier.
  14. Use the Insert, Update, and Delete Action drop-down menus to select the respective actions you created earlier.
  15. Switch to the Columns panel.
  16. Use the Column Keys Field to select the Column field you created earlier.
  17. Click the Add button to create the columns you want to include on your board.
  18. (Optional) Switch to the Swim Lanes tab.
  19. (Optional) If you want your board to be divided into 'swim lanes', where cards are located on a unique row rather than collected in ordered columns, tick Use Swim Lanes.
  20. (Optional) Use the Swim Lane Key drop-down menu to select the data source field that will be used to determine how cards are separated into individual lanes.
  21. (Optional) Tick the Allow Drag and Drop Between Swim Lanes check box to make it possible to move cards from one swim lane to another.
  22. (Optional) Tick the Show Unassigned Cards check box to display items that haven't been assigned to a swim lane.
  23. Switch to the Cards panel.
  24. Map the fields of the data source you created earlier to the corresponding drop-down menus.
  25. (Optional) If you want to display images on your cards and have added a relevant field to your data table, tick the Display Images check box and use the drop-down menu to select a field that store the images.
  26. (Optional) Switch to the Appearance tab.
  27. (Optional) Cards can be assigned a colour key, which you can create and manage in this tab. To use this feature, tick Use Coloured Indicators.
  28. (Optional) Switch to the Workflows panel.
  29. (Optional) Here you can specify how cards can be moved between columns. The rows represents the starting column, with each check box representing the destination column. If you select at least one check box in a row, users will only be able to move cards into the specified destination columns from this starting column.

If you do not tick any check boxes in a row, no movement restrictions will be applied to that column and users will be able to move cards from it into any other column. If you want to restrict users from moving cards out of a column entirely, you can set this when editing the column.

  1. (Optional) Switch to the Settings panel. In this panel, you can change general settings about the appearance and functionality of the board.
  2. (Optional) Use the Height and Width fields to set the board's dimensions in pixels.
  3. (Optional) Tick Show Toolbar if you want the board to contain a toolbar with options.
  4. (Optional) Tick Enable Tooltips if you want the card's description to be displayed as a tooltip when the user hovers over it.
  5. (Optional) Tick Enable Total Count if you want each column to display the number of cards it contains.
  6. (Optional) Tick Allow Adding to give users the ability to add cards to the board.
  7. (Optional) Tick Allow Editing to enable users to edit existing cards.
  8. Click Save to confirm your settings.
  9. Access the Kanban board on the front end to create a card.