Mastering UI Builder - Kanban Component & Why everyone hates UI Builder ?
loop91 - ServiceNow
0:00 / 0:00
Mastering UI Builder - Kanban Component & Why everyone hates UI Builder ?
227 просмотров · 4 нед. назад
loop91 - ServiceNow
266 подписчиков
227 просмотров · 4 нед. назад
Kanban Board is one of the most powerful — and most frustrating — components in ServiceNow's Next Experience UI Builder. In this video I build a fully working Kanban board for Incidents starting from an empty page: vertical lanes grouped by Priority, cards with labels, SLA, checklist and due-date info, drag-and-drop that writes the new priority back to the record, a relabeled "Add Card" button, and a custom "Create Incident" modal wired up through completely undocumented internal events.
Along the way I also show exactly how I reverse-engineered ServiceNow's hidden daActionMapping event catalog — the Declarative Action Assignment table, the "Visual Board Demo" page that ships with every instance, and how to pull its page XML to get the exact payload shape for every hidden event the Kanban Board component supports.
What you'll learn in this video:
How the Kanban Board component's lane and card JSON objects are structured
How to drive lanes and cards entirely from data resources + client scripts
The undocumented minimum required properties a card needs to even render
How to persist a drag-and-drop card move back to the source record
How to enable and relabel the lane footer's "Add Card" button
How to find and use hidden component events that aren't in any official doc
How to open a record-creation modal from a Kanban card action
This is a companion video to a written article covering the same configuration with all scripts included.
TIMESTAMPS
00:00 Intro - what we're building today
01:33 Kanban Board anatomy: lanes, cards & swimlanes
02:37 Adding the Kanban Board component to the canvas
02:49 Understanding the lane JSON object (id, title, styles, options)
04:13 Data source for lanes: the "Get Priority Value" data broker
06:06 Creating the lanesData / cardsData state parameters
06:39 The SetLanes script walkthrough
08:08 Preview: lanes render on the board
08:17 Creating cards - the undocumented required-properties gotcha
09:36 Data source for cards: querying active incidents
10:02 The SetCards script walkthrough (labels, checklist, SLA, due date)
13:37 Preview: cards render on the board
14:05 Wiring the CARD_MOVED event - the Move Cards script
15:26 Testing drag-and-drop between lanes
15:34 Persisting the move: updating incident priority via GraphQL
17:14 Recap: lanes, cards & moving cards
17:41 Enabling the lane footer ("Add Card" button)
18:24 Renaming the button to "New Incident"
19:04 The hard part: wiring Add Card to a modal
20:03 Reverse-engineering ServiceNow's undocumented hidden events
21:27 Finding the Declarative Action Assignment table
22:49 Discovering the hidden "Visual Board Demo" page
23:27 Extracting the daActionMapping JSON from the page XML
25:05 Creating the handled event + a "dump payload" debug script
26:30 Wiring the declarative action mapping on the component
28:16 Confirming the event payload in the console
29:06 Building the "Create Incident" modal
30:01 The -1 sys_id trick for new records
30:37 Wiring the footer save button to the form
31:18 Connecting the button to open the modal
31:44 End-to-end test: creating a new incident from the board
32:06 Final thoughts on UI Builder's documentation gaps
RELATED SERVICENOW RESOURCES
Github Gist Link : https://gist.github.com/kunalkhatri/0...
Kanban Board Component - Part 1: Initial Configuration (ServiceNow Community)
https://www.servicenow.com/community/...
Kanban Board Component - Part 2: Configuration Reference (ServiceNow Community)
https://www.servicenow.com/community/...
You & I Builder Live! Mastering the Kanban Component (E32)
• [E32] You & I Builder Live! Mastering the ...
You & I Builder Live! Updates, Styling, and Modals in Kanban (E33)
• [E33] You & I Builder Live! Updates, Styli...
If this saved you a few hours of fighting UI Builder, subscribe and share it with someone else going through the same thing.
#ServiceNow #UIBuilder #KanbanBoard #NextExperience #LowCode