Lightning Web Components • Apex • Salesforce UX

Salesforce Kanban Task Board (LWC + Apex)

A custom Kanban board built in Salesforce with Lightning Web Components and Apex: a three-object data model, drag-and-drop cards, priority-based ordering, modal card editing, and email-to-card intake.

Business Problem

Teams managing many Salesforce tasks can benefit from a visual board that organizes work into clear stages, makes priorities easier to scan, and reduces navigation between records. Work also arrives from different places, such as client requests, internal work, training, and email, and needs one place to be triaged.

Solution

Built a Kanban board as a Lightning Web Component backed by an Apex controller and a dedicated Salesforce data model. Users add cards, drag them between lists, and edit them in a modal. Emails sent to the board's Email Service address become cards automatically through an Apex inbound email handler.

Architecture

Lightning App, Home, or Record page taskBoard Lightning Web Component TaskBoardController (Apex, with sharing) Task_Board__c → Board_List__c → Board_Card__c

Email intake runs alongside: inbound email → TaskBoardEmailService → a new card in the board's "Things to Do" list.

What Was Built

Data model

  • Task_Board__c → Board_List__c (ordered lists with an Active flag) → Board_Card__c.
  • Card priority: Low, Medium, High, Urgent.
  • Card status: Open, Waiting, Done, Archived.
  • Card source: Manual, Email, Training, Client, Internal.
  • Due date, completed flag and completed date, and email provenance fields (sender, original subject, original body).

Email-to-card intake

  • TaskBoardEmailService implements Messaging.InboundEmailHandler.
  • Each incoming email creates a Medium-priority card at the end of the active "Things to Do" list, keeping the sender and the original subject and body.
  • The Email Service configuration is kept in source with the Apex class.

Drag and drop

  • Native HTML5 drag-and-drop between and within lists, with visual drop indicators.
  • The drop position is calculated from the pointer's position relative to each card's midpoint.
  • New positions use fractional midpoint sort ordering (computeMidpointSortOrder), kept in a separate, unit-tested module.

Priority ordering

  • Each list shows Urgent → High → Medium → Low, then cards in their stored sort order, using a stable sort.
  • New High or Urgent cards go to the top of their priority tier, and raising an existing card to High or Urgent moves it into that tier.

Card editing

  • Cards are edited in a modal that saves through Apex and refreshes the board.
  • Completing a card sets its status to Done, stamps the completed date, and moves it to the Done list.

Other features

  • Archived cards are excluded from the active board query.
  • Configurable board: a Task Board record Id property on App and Home pages; the component is also available on Record pages.
  • The Apex controller and email service run with sharing; the Task_Board_Admin permission set grants access to the three objects and their fields.
  • Light/dark theme toggle, remembered in the user's browser (localStorage).

Validation

  • Apex: TaskBoardControllerTest has 5 tests covering card creation and card moves (explicit sort order, append to end of list, and missing Ids).
  • Jest: 8 unit tests for the drag-and-drop logic (computeMidpointSortOrder and computeDropPosition), plus 1 component test that checks cards render in priority order.
  • No automated tests cover updateCard or the email service, and no code coverage figure is claimed.

Status & Limitations

This is an actively developed custom app, not a production rollout. The latest priority-ordering improvement is committed in source and covered by the component test above, but it was not confirmed deployed or tested on the live board. Email intake depends on an active list named "Things to Do".

Why It Matters

The project demonstrates practical Apex/LWC application development, state management, user interaction design, and iterative testing beyond declarative Salesforce automation, together with custom data modeling and an Apex inbound email service.