Kanban Story

Kanban is a visual task management system where tasks are represented as cards and are moved across columns that represent different stages of a workflow (e.g., Pending, In Progress, Completed, On Hold, Canceled).

Expected output:

1st Step

  1. Begin by adding a blank transaction form.

2nd Step

  1. To start, add the Kanban control to your screen.Specify the name of the database field that will be used for the Kanban control. Define the label that will appear on the Kanban board. Adjust the width of the Kanban columns to fit your layout preferences.

3rd Step

  1. Set the Status Field: The "Status" field will determine how tasks are organized in the Kanban columns.
    1. In this example, we are using the Status attribute, which will get its values from the API.
    2. Based on the values received from the API, your Kanban board will be organized into columns according to these statuses.

4th Step

  1. Map the Status Field with API Values and Set Colors for Kanban Header
  2. Map the Status Field: Map the Status Field to the key-value pairs returned by the API. Each status in the API response will correspond to a specific Kanban column (e.g., Pending, In Progress, Completed, On Hold, Canceled).
  3. Assign Colors for Kanban Header: Set specific colors to visually represent each status on the Kanban board. These colors will be used in the column headers to help users easily identify different stages at a glance (e.g., Pending, In Progress, Completed, On Hold, Canceled).

5th Step

  1. Configure the API Data: Including your database, models, parameters, and any other required fields necessary for data retrieval.

6th Step

  1. Configure the Kanban UI (Mapping): In this step, map the fields in the card that you want to display, ensuring that they align with the data coming from the API. This will allow the system to properly recognize and map the fields accordingly.
    1. Load your Kanban form card: If you have already designed a form card for Kanban using the system, you can load it in the Mapping section, and the card UI will appear in Kanban .
    2. Choose from available card types: We offer various pre-designed card types. You can select the one that fits your needs for the Kanban UI.
    3. Custom HTML card design: If you prefer to create a custom card design using HTML, you can load the HTML code and add your CSS styles accordingly. For better understanding, please refer to the screenshot provided.

7th Step

  1. Configure the Field Mapping: In this step, map the fields in the card that you want to display, ensuring that they align with the data coming from the API. This will allow the system to properly recognize and map the fields accordingly.

8th Step

  1. Configure the Action: If you need to perform any actions related to the card, such as editing, deleting, etc., you can configure these actions here.

9th Step

  1. Configure Advanced Settings: If you need to configure advanced options such as custom Kanban design or "No Data" configurations, you can do. Otherwise, the basic Kanban configuration is complete, and you can start using it.

Final Output: