Kanban Task Management Widget

Streamline task management in apps with a simple Kanban Board

*Note - This is a more advanced widget and requires a connector and usage of table app to get best functionality. You need experience with connectors and tulip table api to get full functionality.
*

Purpose

The kanban board widget is an interactive widget that displays cards in columns. The cards can be dragged between columns.

It can be used to show kanban cards or production orders for managing production scheduling Could be used to execute task or actions for a daily management process.

Setup

The widget has the following parameters to set up

• Board Title - text - give the board a name
• Columns - text list - The names of the columns you want to display. Will display left to right in the order of the list. Cards will show on columns that match, (column = card.status). Match is case sensitive so "Done" does not equal "done". If a card status is not matching a column the card will not show.
• Kanban Cards - object list - the cards that you want to display. Each object should contain the following properties
• id - text - a unique id
• title - text -
• description - text -
• dueDate - text -
• status - text - the column where the card will be shown. Must be an exact match.
• owner - text -
  !! You can connect this widget to a Tulip Table using a Tulip connector to the table API. See Tulip Table API reference

Events

• cardUpdate - object - triggered when a card is dragged and dropped in a new column. Returns a single card object with the same properties as the objects in Kanban Cards - expected use us to trigger a table update or connector call to update the card with the column move in the source of truth, if required.

• cardClick -object - triggered when a card is clicked. Returns a single card object with the same properties as the objects in Kanban Cards - a possible use case is to edit the card in the app.
  How it works

The widget renders the cards from the Kanban Cards input prop on the defined columns. Column names need to match the status. Any non-matching status will not be displayed.

User can drag and drop cards to new columns this triggers a event that can be used to update the card in the source of truth using a connector or table record update. Clicking a card also triggers an event that can be used in the app, for example to load the card for editing.

Further Reading

If you would like to know more about custom widgets please visit the site below:

• Custom Widgets Overview