Перейти к содержимому

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