Kanban boards are one of the most powerful ways to manage tasks visually.
In this blog, Iβll walk you step-by-step through building a fully dynamic Project Task Kanban Board in Oracle APEX using the Material Kanban Board Plugin, including:
- β Database Table Design
- β SQL Query Structure (Columns, Groups, Items)
- β Dynamic Links
- β Avatars & Attachments
- β Status-Based Styling
- β Real UI Implementation
π― Final Output
Your Kanban board will look like this:
- Columns: Backlog, To Do, In Progress, Done, Blocked, Review
- Groups: Project-based grouping
- Cards: Task name, story points, priority, progress %, assignees, due date
- Drag & Drop enabled
ποΈ Step 1: Database Tables
Below is a simplified structure used for this implementation.
π PROJECTS Table
| Column Name | Data Type | Description |
|---|---|---|
| PROJECT_ID | NUMBER | Primary Key |
| PROJECT_NAME | VARCHAR2 | Project Name |
| PROJECT_MANAGER_ID | NUMBER | Manager Reference |
| STATUS | VARCHAR2 | Project Status |
π TASKS Table
| Column Name | Data Type | Description |
|---|---|---|
| TASK_ID | NUMBER | Primary Key |
| TASK_NAME | VARCHAR2 | Task Title |
| PROJECT_ID | NUMBER | Foreign Key |
| STATUS | VARCHAR2 | To Do / Done / etc |
| PRIORITY | VARCHAR2 | Low / Medium / High / Urgent |
| STORY_POINTS | NUMBER | Effort Estimation |
| PROGRESS_PERCENT | NUMBER | Completion % |
| DUE_DATE | DATE | Deadline |
| ASSIGNED_TO | VARCHAR2 | Comma-separated employee IDs |
| DISPLAY_SEQUENCE | NUMBER | Order in Column |
π EMPLOYEES Table
| Column Name | Data Type |
|---|---|
| EMP_NO | NUMBER |
| EMP_NAME | VARCHAR2 |
| EMP_IMAGE | BLOB |
π Step 2: Install Material Kanban Board Plugin
- Download plugin from APEX Plugin Repository
- Go to:
Shared Components β Plugins β ImportOr Directly Download and install from here.
- Install the plugin
- Create new region β Select Material Kanban Board
π§ Step 3: Understanding the Kanban Query Structure
Material Kanban plugin requires 3 logical sections:
| Section | Purpose |
|---|---|
| C | Columns |
| G | Groups |
| I | Items (Cards) |
π Step 4: Define Columns (C)
These define board columns like To Do, Done, etc.
WITH C AS (
SELECT 1 COLUMN_ID, 'To Do' COLUMN_TITLE FROM DUAL
UNION ALL
SELECT 2, 'In Progress' FROM DUAL
UNION ALL
SELECT 3, 'Done' FROM DUAL
)In your implementation, you defined:
- Backlog
- To Do
- In Progress
- Done
- Blocked
- Review
Each column also includes:
- Font Awesome icon
- Header color
- Border styling
π₯ Step 5: Define Groups (G)
Groups represent Projects.
SELECT
P.PROJECT_ID AS GROUP_ID,
P.PROJECT_NAME AS GROUP_TITLE
FROM PROJECTS P
WHERE P.PROJECT_ID = :P32_PROJECT_IDAdvanced Features You Added:
β Project manager avatar using:
APEX_UTIL.GET_BLOB_FILE_SRC
β Dynamic link to project page:
APEX_UTIL.PREPARE_URLβ Status-based header styling
β Animated icon for βIn Progressβ
π Step 6: Define Items (I) β The Task Cards
Items represent individual tasks.
Mapping example:
CASE T.STATUS
WHEN 'To Do' THEN 1
WHEN 'In Progress' THEN 2
WHEN 'Done' THEN 3
END AS COLUMN_IDThis maps task status to column.
π¨ Advanced Card Customization
Your implementation includes:
π₯ Priority Badge Styling
CASE T.PRIORITY
WHEN 'High' THEN 'background-color:#D32F2F;'
WHEN 'Medium' THEN 'background-color:#FF9800;'
ENDπ€ Assignee Avatars
You split comma-separated IDs using:
REGEXP_SUBSTRThen joined with EMPLOYEES table.
If:
- 1 assignee β Show avatar + name
- Multiple β Show group icon + count
Very clean UX design π
π Footer Icons with Modal Links
Each card has:
- Attachments icon
- Related links icon
- Schedule icon
- Assignees icon
All generated using:
APEX_UTIL.PREPARE_URLπ― Final Query Structure
Your final SELECT joins:
FROM C
FULL OUTER JOIN G ON 1=1
LEFT JOIN I ON I.GROUP_ID = G.GROUP_ID
AND I.COLUMN_ID = C.COLUMN_IDOrdered by:
C.COLUMN_ID,
G.GROUP_ID,
I.IDThis ensures proper Kanban rendering.
πΌ Step 7: Region Settings in APEX
After pasting query:
Set mapping in plugin attributes:
| Plugin Field | Column Mapping |
|---|---|
| Column ID | COLUMN_ID |
| Column Title | COLUMN_TITLE |
| Group ID | GROUP_ID |
| Group Title | GROUP_TITLE |
| Item ID | ID |
| Item Title | TITLE |
| Item Footer | FOOTER |
| Item Link | LINK |
| Item Icon | ICON |
| Card Color | CARD_COLOR |
π‘ Why Material Kanban Plugin?
Compared to Classic Reports:
| Classic Report | Material Kanban |
|---|---|
| Static Layout | Drag & Drop |
| No column grouping | Multi-column board |
| Limited UI | Fully customizable |
| No visual workflow | Agile workflow ready |
π Conclusion
With:
- Clean SQL structure
- Proper Column/Group/Item mapping
- APEX_UTIL functions
- Styling logic
You can build a fully enterprise-level Kanban Board inside Oracle APEX without external JS frameworks.
Love coding? Me too! Letβs keep in touch β subscribe to my website for regular chats on Oracle APEX, PL/SQL,SQL JavaScript, and CSS.

