🧩 How to Create a Kanban Board in Oracle APEX Using Material Kanban Board Plugin

🧩 How to Create a Kanban Board in Oracle APEX Using Material Kanban Board Plugin

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 NameData TypeDescription
PROJECT_IDNUMBERPrimary Key
PROJECT_NAMEVARCHAR2Project Name
PROJECT_MANAGER_IDNUMBERManager Reference
STATUSVARCHAR2Project Status

πŸ“Œ TASKS Table

Column NameData TypeDescription
TASK_IDNUMBERPrimary Key
TASK_NAMEVARCHAR2Task Title
PROJECT_IDNUMBERForeign Key
STATUSVARCHAR2To Do / Done / etc
PRIORITYVARCHAR2Low / Medium / High / Urgent
STORY_POINTSNUMBEREffort Estimation
PROGRESS_PERCENTNUMBERCompletion %
DUE_DATEDATEDeadline
ASSIGNED_TOVARCHAR2Comma-separated employee IDs
DISPLAY_SEQUENCENUMBEROrder in Column

πŸ“Œ EMPLOYEES Table

Column NameData Type
EMP_NONUMBER
EMP_NAMEVARCHAR2
EMP_IMAGEBLOB

πŸ”Œ Step 2: Install Material Kanban Board Plugin

  1. Download plugin from APEX Plugin Repository
  2. Go to:
Shared Components β†’ Plugins β†’ Import

Or Directly Download and install from here.

  1. Install the plugin
  2. Create new region β†’ Select Material Kanban Board

🧠 Step 3: Understanding the Kanban Query Structure

Material Kanban plugin requires 3 logical sections:

SectionPurpose
CColumns
GGroups
IItems (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_ID

Advanced 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_ID

This 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_SUBSTR

Then 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_ID

Ordered by:

C.COLUMN_ID,
G.GROUP_ID,
I.ID

This ensures proper Kanban rendering.


πŸ–Ό Step 7: Region Settings in APEX

After pasting query:

Set mapping in plugin attributes:

Plugin FieldColumn Mapping
Column IDCOLUMN_ID
Column TitleCOLUMN_TITLE
Group IDGROUP_ID
Group TitleGROUP_TITLE
Item IDID
Item TitleTITLE
Item FooterFOOTER
Item LinkLINK
Item IconICON
Card ColorCARD_COLOR

πŸ’‘ Why Material Kanban Plugin?

Compared to Classic Reports:

Classic ReportMaterial Kanban
Static LayoutDrag & Drop
No column groupingMulti-column board
Limited UIFully customizable
No visual workflowAgile 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.

Comments

No comments yet. Why don’t you start the discussion?

    Leave a Reply

    Your email address will not be published. Required fields are marked *