Task Management using Kanban Control

Kanban control on DronaHQ Studio is used to provide a popular lean workflow management method for managing and defining workflow of services and it also helps users to improve services through it.

In this article, we will discuss how to make a task management micro app using Kanban Control on DronaHQ Studio for

  • Displaying tasks

  • Adding new tasks

  • Deleting tasks

  • Updating the group of tasks

Here we will use the Supabase PostgreSQL connector consisting of our task and the changes will be saved in real-time in the database.

Prerequisite

Basic knowledge of PostgreSQL is a plus to understand and write queries for our micro app after connecting Supabase connector. To get a detailed overview of connecting Supabase as a connector in DronaHQ studio, give a read to Connecting to a Supabase database.

Supabase Database overview:

Displaying Task

  1. Add Kanban control to the app from the control section under custom section.

  1. Go to the Bind Data section of the Kanban Control. Select connector of the Supabase which we have created for the App, which has sets of tasks.

  2. Select the Supabase connector and select the query to get the data from the database.

QUERY: SELECT * FROM taskdata

taskdata is the name of the table which has been created on the Supabase.

  1. Select the Keys/columns to bind. All these details will be available on Kanban Control.

  1. Do test and finish.

  2. Go to the properties section of the Kanban control and under Column Config, choose the property on which you want grouping of the tasks to happen and select the items’ label you want to get displayed.

The items selected in Item label will be displayed on the dashboard in the cards and on the basis of the property selected in Group, the cards will be grouped on the dashboard. This step is very important because right after connecting our database to Kanban Control, the data is not visible until and unless we specify two things:

a. Group: The property from the data, on which grouping is required. This will create separate groups on the Kanban control dashboard with respect to each distinctive group property’s values, we have in the database.

b. Item Label: The property from the data which all we want to display on each of the cards on Kanban control dashboard, after grouping. Only the selected keys will be displayed, irrespective of what we bind in the Kanban control while connecting the connector.

Adding New Tasks

In Kanban control, we already have an event for adding a new card, named as add_card.

I have created a tray, where we will be adding a connector which will get data from input fields present on the tray and add the following to the database. This tray will get navigate to, on click of Add a card from the Kanban control.

Adding an event to navigate

  1. Go to Actions of the Kanban control, select add_card.

  1. Add an action flow of Navigate to towards the tray.

Setting up Tray for Adding a new Card

  1. I have created several input fields, a dropdown field, and a button.

I have set predefined options mentioned in Data from the Bind Data for the Status dropdown control.

  1. Go to Actions of the button. Select sumbit_click.

action

  1. Add the connector with addData query from server side action.

Query:

INSERT INTO taskdata (groupsection, task, duration) VALUES(’{{group}}’,’{{task}}’,’{{dur}}’)

Query Explanation:

In the above query, we are taking values of groupdescription, task, and duration in group, task, and dur variables respectively, and inserting it to the database.

  1. Bind the keywords from the input fields present in the tray for the variables mentioned in the query accordingly.

  1. On the success of the query, I have added several actions:
  • Alert: To show an alert that the data has been inserted.

  • Resetpages: To reset the screen page, so that the data would get reflect on the Kanban control dashboard after inserting new data.

  • Navigate: To go back to the Kanban control screen.

Adding a new task into Kanban Control

Before adding a new task:

Adding details of new task:

After adding a new task:

Deleting a task

Now we will add an event and a query to delete a selected card, on click.

To get started with this, first, we need to add an action to it of DELETE.

Adding delete button to card

Go to properties of Kanban Control, under Action section. Create an action of Delete with icon of trashcan.

delete button

This will add another button to every card present in the Kanban control.

button

Adding action to delete a card

  1. Now go to Actions of the Kanban control, the action1_click will be available, attached to the delete button.

  1. We will add a delete confirmation action, which will get triggered on the click of the delete button.

  2. Now we will add a server side action of PostgreSQL connector with DELETE query.

Query:

DELETE FROM taskdata WHERE id = {{id}}

Query explanation:

The above query will take the id from the user and delete the data related to that id from the table in the database.

  1. Add kanbancontrol.id in the key binding section, to provide the id for the variable requirement for the delete query. This key will have the unique id of the selected/ clicked card.

  1. Finally add a Resetpage action on the success of the delete query, so that the newly updated data will be reflected after delete.

Deleting a task from the Kanban Control

Kanban control before delete:

Deleting a card/task:

Kanban control after delete:

Updating the group of Tasks

Under this section, we want to change the group property of a task, after drag and drop. To accomplish this we will add actions to Kanban control on the movement of a card.

Adding action to change the group

  1. Go to actions of Kanban control, there is an action already provided with respect to the movement of the card named as card_move.

  1. Next, we will add a server side action, here we will add the connector with update query in it.

Query:

UPDATE taskdata set “groupsection” = ‘{{group}}’ where id ={{id}}

Query explanation:

In the above query, we will get the group and id of the card as variables group and id respectively and update it in the table.

  1. Select the kanbancontrol.id and kanbancontrol.group keys for the variables: id and group respectively. This will provide the selected card id and the group name of the card after drag and drop to the connector.

Do continue then finish.

Updating group of a card in Kanban Control

The table before updating:

Drag and drop of a card:

After updating card: