# Using the Kanban Board Component in UI Builder > Source: > Published: 2026-08-14 09:51:25+00:00 Disclaimer:This article was written by an LLM. All the underlying content — configuration steps, scripts, and reference material — was carefully collected and verified by Kunal Khatri. This article is a companion write-up to our video walkthrough on building a Kanban board for Incidents in UI Builder (Next Experience). It documents, end to end, the configuration steps we performed on screen and includes the exact client scripts we used, so you can reproduce the same board - lanes, cards, styling, lane footers, and the "Add Card" button - in your own instance. It is meant as an addendum to two excellent ServiceNow Community articles on the same component, and two "You & I Builder Live" sessions that cover the component interactively. Links to all four are in [Further Reading](#further-reading) at the end. The board in this article is bound to the `incident` table and groups incidents into lanes by **Priority**. Everything is driven by three UI Builder building blocks: | Element | Type | Purpose | |---|---|---| `get_priority_values_1` | Transform data resource | Fetches the Priority choice list for `incident` , used to generate one lane per priority value | `look_up_multiple_records_1` | Composite ("Look up multiple records") data resource | Fetches active incidents (`active=true` , up to 1000 rows) with the fields needed for the cards | `update_card` | GraphQL data resource (explicit/manual execution) | Writes `impact` /`urgency` /`work_notes` back to the incident when a card is dragged to a new lane | `lanesData` | Client State Parameter (JSON) | Backing array for the board's `lanes` property | `cardsData` | Client State Parameter (JSON) | Backing array for the board's `cards` property | `newIncidentSysID` | Client State Parameter (string) | Feeds the sys_id of a newly created incident into a record-creation modal | `kanban_board_1` | Kanban Board (`sn-vtb` ) macroponent | The board itself, with `lanes` and `cards` bound to the two state parameters above | Two client scripts run automatically when their data resource fetches succeed (`SetLanes` , `SetCards` ), and one runs in response to the board's `CARD_MOVED` event (`Move cards` ). All three are reproduced in full below, at the step where they're relevant. - Open the page in UI Builder and drag the **Kanban Board** component from the component picker onto the canvas. - Before you can bind any data to it, create two **Client State Parameters** of type`json` :`lanesData` - initial value`null` `cardsData` - initial value`null` - Select the Kanban Board component and bind its properties: `lanes` →**State Binding**→`lanesData` `cards` →**State Binding**→`cardsData` At this point the board renders but is empty - nothing has populated `lanesData` or `cardsData` yet. That's what the next two steps do. The Kanban Board component ships as part of the `sn-vtb` (Visual Task Board) component library - make sure it's installed/enabled on your instance before it shows up in the component picker, as covered in the[Part 1 reference article]. Lanes come from data, not from manual configuration in the UI Builder canvas. We added a **Transform** data resource, `get_priority_values_1` , that returns the Priority choice list for the `incident` table (an array of `{ sys_id, label, value }` objects). A Transform data resource is backed by a server-side script (the "transform data broker"), which runs on the server and returns whatever the client-side data resource then exposes as `.output` . Ours queries `sys_choice` for the `task` table's `priority` element, ordered by value: ``` js function transform(){ let choice_list = []; var gr = new GlideRecord("sys_choice"); gr.addEncodedQuery("language=en^name=task^elementSTARTSWITHpriority"); gr.orderBy("value"); gr.query(); while(gr.next()){ choice_list.push({ "sys_id":gr.getUniqueValue(), "label":gr.getValue("label"), "value":gr.getValue("value") }); } return choice_list; } ``` A couple of notes on this query: - We query `sys_choice` on`name=task` (not`name=incident` ) because`priority` is defined on the base`task` table and inherited by`incident` - querying`task` picks up the choice list regardless of which task-derived table you point the board at. `elementSTARTSWITHpriority` matches the`priority` element; using`STARTSWITH` rather than an exact match is a defensive habit here, though an exact`element=priority` would work identically for this field.`orderBy("value")` gives us the choices in priority order (1–Critical through 5–Planning), which becomes the left-to-right lane order on the board since`SetLanes` below just maps the array in place. This script only produces the raw choice list - it doesn't know anything about lanes, styling, or the board. That transformation happens client-side, in the script mapped to the data resource's `DATA_FETCH_SUCCEEDED` event. We mapped a client script to that event. This script (`SetLanes` ) turns each priority choice into a lane object and writes the result to `lanesData` : ``` /** * @param {params} params * @param {api} params.api * @param {any} params.event * @param {any} params.imports * @param {ApiHelpers} params.helpers */ function handler({api, event, helpers, imports}) { var data = api.data.get_priority_values_1.output; var return_value = data.map(choice=>{ return { "id": "lane_"+choice.value, "title": choice.label, "name": choice.label, "_style_": { "sn-lane": { "width": "285px", "padding": "3px", "overflow-y": "auto", "height": "calc(100% - 58px)" }, "lane-footer-container": { "position": "sticky", "bottom": "30px" } }, "options": { "board_type": "FREEFORM", "is2DBoard": false, "lane_filter": "", "lane_count": 3, "total_lane_count": 3, "lane_field": "__KANBAN__", "swimlane_field": "", "table": "incident", "highest_lane_order": 2, "can_add_task": true, "add_card_footer_button_name": "New Incident" } } }); api.setState("lanesData",return_value); } ``` A couple of things worth calling out: - every lane's`id: "lane_" + choice.value` `id` is derived from the priority value (e.g.`lane_1` ,`lane_2` , …). We use this exact prefix again in the card script, so cards land in the correct lane. This`lane_id` contract between the two scripts is the single most important detail to get right.and`_style_` are set per lane here - see Steps 4–6 below for what each of those keys does.`options` Cards are populated the same way: a data resource plus a client script on `DATA_FETCH_SUCCEEDED` . The data resource, `look_up_multiple_records_1` , is a Composite "Look up multiple records" resource querying `incident` with: `encodedQuery` :`active=true` `returnFields` :`active,short_description,description,priority,number` `limit` :`1000` ,`sortType` :`asc` The mapped client script (`SetCards` ) maps each incident to a card object and writes the array to `cardsData` : ``` /** * @param {params} params * @param {api} params.api * @param {any} params.event * @param {any} params.imports * @param {ApiHelpers} params.helpers */ function handler({ api, event, helpers, imports }) { var incidents = api.data.look_up_multiple_records_1.results; var return_value = incidents.map(incident => { return { "id": incident._row_data.uniqueValue, "title": incident.short_description.displayValue, "order": 0, "lane_id": "lane_" + incident.priority.value, "options": { "board_type": "FREEFORM", "card_type": "classic", "due_date_field": "due_date", "menu_actions": [], "show_card_info": true, "show_cover_image": true, "show_labels": true, "show_sla": true }, "attachments": [], "record": { "short_description": { "display_value": incident.short_description.value }, "description": { "display_value": incident.description.value }, }, "labels": [ { "active": true, "color": "#FFFF00", "value": "Yellow dot" } ], "checklist": { "items": [{ "complete": true }] }, "sla": { "percentage": 23 }, "due_date_display_value": "31/12/2023", } }); api.setState("cardsData", return_value); } ``` Notice `"lane_id": "lane_" + incident.priority.value` mirrors the `id` we built in `SetLanes` - this is what makes each incident's card render inside the lane matching its priority. Card and lane styling happens in two places, both visible in the scripts above: **Lane-level styling** via the`_style_` block inside each lane object (set in`SetLanes` ). The keys are CSS class names the component renders internally -`sn-lane` for the lane body and`lane-footer-container` for the sticky footer bar. We used this to fix each lane's width, add internal padding, enable vertical scrolling per lane, and cap lane height so the footer stays pinned (more on that in Step 5).**Card appearance** via the`options` and data fields inside each card object (set in`SetCards` ):`card_type: "classic"` selects the fuller card layout (vs.`"compact"` ).`show_card_info` ,`show_cover_image` ,`show_labels` ,`show_sla` toggle which visual regions of the card render.`labels` drives the colored label chips/dots on the card (we set a yellow "Yellow dot" label as an example).`sla.percentage` drives the SLA progress indicator.`checklist.items` drives the checklist-complete badge.`due_date_display_value` drives the due-date pill. For the full list of supported `options` keys on cards, lanes, cell headers, and swimlanes (colors, variants, tooltips, menu actions, etc.), see the [Part 2 configuration reference](https://www.servicenow.com/community/next-experience-articles/kanban-board-component-part-2-configuration-reference/ta-p/3057376) - we only used a subset of what's available. By default a lane has no footer at all - the footer isn't just hidden, the component doesn't render one until you tell it which template to use. On the Kanban Board component's property panel, under **Lane footer configuration → Vertical lanes footer template**, set the value to `sn-vtb-lane-footer` . This is what actually switches the footer on; it corresponds to the `laneFooterTag` property on the component (visible in the page definition as `"laneFooterTag": "sn-vtb-lane-footer"` ). With that template wired up, the per-lane `options.can_add_task: true` we set in `SetLanes` controls whether an individual lane's footer shows the **Add Card** affordance (a lane could have a footer template enabled at the board level but still opt out via `can_add_task: false` ). We paired this with the sticky-footer styling from Step 4 - `lane-footer-container: { position: "sticky", bottom: "30px" }` combined with `sn-lane: { height: "calc(100% - 58px)", overflow-y: "auto" }` - so the footer stays pinned to the bottom of the lane while the cards inside scroll independently. The footer's button text defaults to "Add card". We override it per lane with `add_card_footer_button_name` in the lane `options` object - in our script we set it to `"New Incident"` to match the table the board represents: ``` "options": { ... "can_add_task": true, "add_card_footer_button_name": "New Incident" } ``` Clicking that button dispatches the board's `VTB#ADD_CARD_CLICKED` action with the triggering `card` context in the payload. On our page we mapped that action to open a modal containing a record-creation form for `incident` , using the `newIncidentSysID` state parameter to pass the new record's sys_id into the form controller once it's created. That modal wiring is its own topic and outside the scope of this article, but it's the reason the button exists in the first place. When a card is dragged to a new lane or position, the board fires `sn_visual_board.NOW_VISUAL_BOARD#CARD_MOVED` with a payload of `{ id, toLane, fromPosition, toPosition }` . We mapped a client script (`Move cards` ) to that event which: - Re-sequences `order` for both the destination lane and (if the card crossed lanes) the source lane, and writes the updated array back to`cardsData` so the UI reflects the move immediately. - Derives the incident's new `impact` /`urgency` from the destination lane's priority using a small lookup matrix. - Calls the `update_card` GraphQL data resource (configured with`readEvaluationMode: EXPLICIT` so it only runs when explicitly executed, not on every re-render) to persist`impact` ,`urgency` , and a work note back to the incident record. ``` /** * @param {params} params * @param {api} params.api * @param {any} params.event * @param {any} params.imports * @param {ApiHelpers} params.helpers */ function handler({api, event, helpers, imports}) { const { state: { cardsData } } = api; const { payload: { id, toLane, fromPosition, toPosition } } = event; // Work on a shallow copy so we don't mutate state directly let cardsDataCopy = [...cardsData]; // Locate the card being moved const movedCardIndex = cardsDataCopy.findIndex(c => c.id === id); if (movedCardIndex === -1) { return; } const movedCard = { ...cardsDataCopy[movedCardIndex] }; const fromLane = movedCard.lane_id; // Pull it out of the working array cardsDataCopy.splice(movedCardIndex, 1); // Assign new lane movedCard.lane_id = toLane; // Cards currently in the destination lane, ordered let destLaneCards = cardsDataCopy .filter(c => c.lane_id === toLane) .sort((a, b) => a.order - b.order); // Insert moved card at its new position destLaneCards.splice(toPosition, 0, movedCard); // Re-sequence order values for destination lane destLaneCards.forEach((c, idx) => { c.order = idx; }); // If it moved across lanes, re-sequence the source lane too let sourceLaneCards = []; if (fromLane !== toLane) { sourceLaneCards = cardsDataCopy .filter(c => c.lane_id === fromLane) .sort((a, b) => a.order - b.order); sourceLaneCards.forEach((c, idx) => { c.order = idx; }); } // Everything untouched (other lanes) const otherCards = cardsDataCopy.filter( c => c.lane_id !== toLane && c.lane_id !== fromLane ); const updatedCards = [...otherCards, ...sourceLaneCards, ...destLaneCards]; api.setState("cardsData", updatedCards); const priority = toLane.replace('lane_', ''); const fields = getImpactUrgencyForPriority(priority); if (!fields) { console.warn('Unrecognised lane, skipping update:', toLane); return; } api.data.update_card.execute({ "table": "incident", "recordId": id, "templateFields": "impact=" + fields.impact + "^urgency=" + fields.urgency + "^work_notes=Change by moving cards", "useDisplayValue": false }); function getImpactUrgencyForPriority(priority) { const matrix = { "1": { impact: "1", urgency: "1" }, // Critical "2": { impact: "1", urgency: "2" }, // High "3": { impact: "2", urgency: "2" }, // Moderate "4": { impact: "2", urgency: "3" }, // Low "5": { impact: "3", urgency: "3" } // Planning }; return matrix[String(priority)] || null; } } ``` Because `priority` on the `incident` table is derived from `impact` and `urgency` rather than being directly settable, this script reverse-maps the target lane back to an impact/urgency pair via a matrix, rather than writing to `priority` directly. **The** Lanes get an`lane_id` contract is everything.`id` and cards get a matching`lane_id` ; if the prefix/format ever diverges between your lanes script and your cards script, cards silently disappear from the board.**Lanes and cards are just state.** There's no dedicated "lane designer" UI - you populate`lanesData` /`cardsData` from any data resource and any transformation logic you want, which means the board can be driven by GlideRecord queries, Transforms, Scripted REST APIs, or GraphQL, not just the two examples here.**Most visual configuration lives in**, not in the Kanban component's own property panel. The`options` and`_style_` on the lane/card objects`_style_` keys map to internal CSS class names (`sn-lane` ,`lane-footer-container` , etc.), so styling is really "CSS-in-JSON" per lane or card.The board is purely presentational until you map a script to`CARD_MOVED` is your write-back hook.`CARD_MOVED` (and optionally`LANE_MOVED` ) to persist the reordering back to the source table. Everything the board can do beyond rendering lanes and cards — modals, archiving, drag-reordering, attachments, swimlane controls — is exposed as a fixed catalog of internal, "hidden" events on the `daActionMapping` property of the `Now Visual Board` macroponent. We only wired up one of these ourselves (`VTB#ADD_CARD_CLICKED` , in Step 6), the same one shown as an example on the ServiceNow Community reference articles (`VTB#CONFIRMATION_MODAL_SELECTED` ). To document the rest, we pulled the `daActionMapping` definition from the Kanban Board component's own out-of-the-box demo page and extracted it in full — this is the component's built-in default, not something we authored, so it's a reliable reference for every hidden event the board supports and the exact payload shape each one dispatches. Each entry has the same shape: `assignmentId` (fixed, don't change it), `name` /`actionDispatch` (the identifier you dispatch a declarative action against), `actionType` (always `uxf_client_action` ), `label` (what shows up in the UI Builder action picker), and `actionPayload` (a JSON template with `{{handlebars}}` placeholders showing the fields available on the event). **A naming quirk to be aware of:** for three events — `CARD_MOVED` , `LANE_MOVED` , and `SWIMLANE_MOVED` — the *key* in the `daActionMapping` map is prefixed `NOW_VISUAL_BOARD#...` , while the `name` /`actionDispatch` value inside it is `VTB#...` . Those three are also the ones exposed as public events on the component's standard **Events** tab, under the API name `sn_visual_board.NOW_VISUAL_BOARD#` — which is exactly the `sourceEventApiName` we mapped our `Move cards` script to in the Bonus section above. In other words, `CARD_MOVED` can be handled either by mapping a script directly to the public event (what we did) or, if you're building your own declarative action/internal event chain the way `VTB#ADD_CARD_CLICKED` is wired on our page, via `daActionMapping` . | Action key | Dispatch name | Label | Payload fields | |---|---|---|---| `VTB#AMB_MESSAGE_RECEIVED` | `VTB_AMB_MESSAGE_RECIEVED` | AMB Message Recieved | `type` , `payload` | `VTB#LANE_HEADER_UPDATED` | `VTB_LANE_HEADER_UPDATED` | Lane Header Updated | `updateLaneInput` | `VTB#CONFIRMATION_MODAL_SELECTED` | `VTB#CONFIRMATION_MODAL_SELECTED` | Confirmation Modal Selected | `modalId` , `modalData` | `VTB#SWIMLANE_HEADER_UPDATED` | `VTB_SWIMLANE_HEADER_UPDATED` | Swimlane Header Updated | `id` , `value` | `VTB#CARD_ARCHIVED` | `VTB#CARD_ARCHIVED` | Card Archived | `boardId` | `VTB#LANE_HIDE_SELECTED` | `VTB#LANE_HIDE_SELECTED` | Lane Hide | `laneId` | `VTB#CARD_DETAILS_MODAL_CLOSED` | `VTB_CARD_DETAILS_MODAL_CLOSED` | Card Details Modal Closed | `value` | `VTB#LANE_DELETED` | `VTB#LANE_DELETED` | Lane Deleted | `boardId` , `laneId` | `NOW_VISUAL_BOARD#LANE_MOVED` † | `VTB#LANE_MOVED` | Lane Moved | `id` , `fromPosition` , `toPosition` | `VTB#ADD_CARD_CLICKED` | `VTB#ADD_CARD_CLICKED` | Add Card Clicked | `card` (used in Step 6) | `VTB#CREATE_LANE_ACTION_PERFORMED` | `VTB_LANE_CREATED` | Lane Created | `createLaneInput` | `VTB#FREEFORM_CARD_ADDED` | `VTB#FREEFORM_CARD_ADDED` | Freeform card added | `createCardInput` | `VTB#SWIMLANE_EXPAND_ALL` | `VTB#SWIMLANE_EXPAND_ALL` | Swimlane Expand All | (none) | `VTB#SWIMLANE_COLLAPSE_ALL` | `VTB#SWIMLANE_COLLAPSE_ALL` | Swimlane Collapse All | (none) | `VTB#ATTACHMENT_UPLOADED` | `VTB#ATTACHMENT_UPLOADED` | Attachment Uploaded | `type` , `action` , `sysId` , `table` , `loadAttachmentRecord` , `data` | `VTB#DATA_DRIVEN_CARD_ADDED` | `VTB#DATA_DRIVEN_CARD_ADDED` | Data Driven Card Added | `boardId` , `taskId` , `swimlaneId` , `position` , `laneId` | `VTB#TOGGLE_SWIMLANE_BODY` | `VTB#TOGGLE_SWIMLANE_BODY` | Swimlane Body Toggle | (none) | `NOW_VISUAL_BOARD#SWIMLANE_MOVED` † | `VTB#SWIMLANE_MOVED` | Swimlane Moved | `id` , `fromPosition` , `toPosition` | `VTB#FREEFORM_PLACEHOLDER_CARD_REMOVED` | `VTB#FREEFORM_PLACEHOLDER_CARD_REMOVED` | Freeform placeholder card removed | (none) | `VTB#DATA_DRIVEN_CARD_FORM_MODAL_CLOSED` | `VTB#DATA_DRIVEN_CARD_FORM_MODAL_CLOSED` | Data Driven Card Form Modal Closed | (none) | `NOW_VISUAL_BOARD#CARD_MOVED` † | `VTB#CARD_MOVED` | Card Moved | `id` , `fromLane` , `toLane` , `fromSwimlane` , `toSwimlane` , `fromPosition` , `toPosition` (see Bonus section) | `VTB#WRAPPER_DOM_ACTION_PERFORMED` | `VTB#WRAPPER_DOM_ACTION_PERFORMED` | Wrapper DOM action performed | `event` , `name` | `VTB#SWIMLANE_ACTION_PERFORMED` | `VTB#SWIMLANE_ACTION_PERFORMED` | Swimlane Action Performed | `payload` , `type` | † Map key uses the `NOW_VISUAL_BOARD#` prefix instead of `VTB#` ; also available as a public event on the Events tab (`sn_visual_board.NOW_VISUAL_BOARD#` ). Extracted verbatim from the component's out-of-the-box demo page (assignment IDs included) so it can be cross-checked field-for-field against your own instance: ``` { "VTB#AMB_MESSAGE_RECEIVED": { "actionDispatch": "VTB_AMB_MESSAGE_RECIEVED", "actionPayload": "{\r\n \"type\": \"{{type}}\",\r\n \"payload\": \"{{payload}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "0152e2f453922010c5e2ddeeff7b121c", "label": "AMB Message Recieved", "name": "VTB_AMB_MESSAGE_RECIEVED" }, "VTB#LANE_HEADER_UPDATED": { "actionDispatch": "VTB_LANE_HEADER_UPDATED", "actionPayload": "{\r\n \"updateLaneInput\": \"{{updateLaneInput}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "03fdd23453922010c5e2ddeeff7b121c", "label": "Lane Header Updated", "name": "VTB_LANE_HEADER_UPDATED" }, "VTB#CONFIRMATION_MODAL_SELECTED": { "actionDispatch": "VTB#CONFIRMATION_MODAL_SELECTED", "actionPayload": "{\r\n \"modalId\": \"{{modalId}}\",\r\n \"modalData\": \"{{modalData}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "0c8e127453922010c5e2ddeeff7b125f", "label": "Confirmation Modal Selected", "name": "VTB#CONFIRMATION_MODAL_SELECTED" }, "VTB#SWIMLANE_HEADER_UPDATED": { "actionDispatch": "VTB_SWIMLANE_HEADER_UPDATED", "actionPayload": "{\r\n \"id\": \"{{id}}\",\r\n \"value\": \"{{value}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "1c0b9eb053922010c5e2ddeeff7b1202", "label": "Swimlane Header Updated", "name": "VTB_SWIMLANE_HEADER_UPDATED" }, "VTB#CARD_ARCHIVED": { "actionDispatch": "VTB#CARD_ARCHIVED", "actionPayload": "{\r\n \"boardId\": \"{{boardId}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "228a5ab053922010c5e2ddeeff7b1260", "label": "Card Archived", "name": "VTB#CARD_ARCHIVED" }, "VTB#LANE_HIDE_SELECTED": { "actionDispatch": "VTB#LANE_HIDE_SELECTED", "actionPayload": "{\r\n \"laneId\": \"{{laneId}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "3e816eb453922010c5e2ddeeff7b12f1", "label": "Lane Hide", "name": "VTB#LANE_HIDE_SELECTED" }, "VTB#CARD_DETAILS_MODAL_CLOSED": { "actionDispatch": "VTB_CARD_DETAILS_MODAL_CLOSED", "actionPayload": "{\r\n \"value\": \"{{value}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "4492e6f453922010c5e2ddeeff7b1269", "label": "Card Details Modal Closed", "name": "VTB_CARD_DETAILS_MODAL_CLOSED" }, "VTB#LANE_DELETED": { "actionDispatch": "VTB#LANE_DELETED", "actionPayload": "{\r\n \"boardId\": \"{{boardId}}\",\r\n \"laneId\": \"{{laneId}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "4a012ab453922010c5e2ddeeff7b1282", "label": "Lane Deleted", "name": "VTB#LANE_DELETED" }, "NOW_VISUAL_BOARD#LANE_MOVED": { "actionDispatch": "VTB#LANE_MOVED", "actionPayload": "{\r\n \"id\": \"{{id}}\",\r\n \"fromPosition\": \"{{fromPosition}}\",\r\n \"toPosition\": \"{{toPosition}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "4b3e5e3453922010c5e2ddeeff7b1246", "label": "Lane Moved", "name": "VTB#LANE_MOVED" }, "VTB#ADD_CARD_CLICKED": { "actionDispatch": "VTB#ADD_CARD_CLICKED", "actionPayload": "{\r\n \"card\": \"{{card}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "4dc2aaf453922010c5e2ddeeff7b12c8", "label": "Add Card Clicked", "name": "VTB#ADD_CARD_CLICKED" }, "VTB#CREATE_LANE_ACTION_PERFORMED": { "actionDispatch": "VTB_LANE_CREATED", "actionPayload": "{\r\n \"createLaneInput\": \"{{createLaneInput}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "4fc81a7053922010c5e2ddeeff7b12e4", "label": "Lane Created", "name": "VTB_LANE_CREATED" }, "VTB#FREEFORM_CARD_ADDED": { "actionDispatch": "VTB#FREEFORM_CARD_ADDED", "actionPayload": "{\r\n \"createCardInput\": \"{{createCardInput}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "5a9026b453922010c5e2ddeeff7b120a", "label": "Freeform card added", "name": "VTB#FREEFORM_CARD_ADDED" }, "VTB#SWIMLANE_EXPAND_ALL": { "actionDispatch": "VTB#SWIMLANE_EXPAND_ALL", "actionPayload": null, "actionType": "uxf_client_action", "assignmentId": "5ce162f453922010c5e2ddeeff7b1216", "label": "Swimlane Expand All", "name": "VTB#SWIMLANE_EXPAND_ALL" }, "VTB#SWIMLANE_COLLAPSE_ALL": { "actionDispatch": "VTB#SWIMLANE_COLLAPSE_ALL", "actionPayload": null, "actionType": "uxf_client_action", "assignmentId": "661d923453922010c5e2ddeeff7b12d5", "label": "Swimlane Collapse All", "name": "VTB#SWIMLANE_COLLAPSE_ALL" }, "VTB#ATTACHMENT_UPLOADED": { "actionDispatch": "VTB#ATTACHMENT_UPLOADED", "actionPayload": "{\r\n \"type\": \"{{sysparm_type}}\",\r\n \"action\": \"{{action}}\",\r\n \"sysId\": \"{{sys_id}}\",\r\n \"table\": \"{{table}}\",\r\n \"loadAttachmentRecord\": \"{{load_attachment_record}}\",\r\n \"data\": \"{{data}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "88fbd6f053922010c5e2ddeeff7b12d2", "label": "Attachment Uploaded", "name": "VTB#ATTACHMENT_UPLOADED" }, "VTB#DATA_DRIVEN_CARD_ADDED": { "actionDispatch": "VTB#DATA_DRIVEN_CARD_ADDED", "actionPayload": "{\r\n \"boardId\": \"{{boardId}}\",\r\n \"taskId\": \"{{taskId}}\",\r\n \"swimlaneId\": \"{{swimlaneId}}\",\r\n \"position\": \"{{position}}\",\r\n \"laneId\": \"{{laneId}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "9820e67453922010c5e2ddeeff7b1208", "label": "Data Driven Card Added", "name": "VTB#DATA_DRIVEN_CARD_ADDED" }, "VTB#TOGGLE_SWIMLANE_BODY": { "actionDispatch": "VTB#TOGGLE_SWIMLANE_BODY", "actionPayload": null, "actionType": "uxf_client_action", "assignmentId": "b202a2f453922010c5e2ddeeff7b1260", "label": "Swimlane Body Toggle", "name": "VTB#TOGGLE_SWIMLANE_BODY" }, "NOW_VISUAL_BOARD#SWIMLANE_MOVED": { "actionDispatch": "VTB#SWIMLANE_MOVED", "actionPayload": "{\r\n \"id\": \"{{id}}\",\r\n \"fromPosition\": \"{{fromPosition}}\",\r\n \"toPosition\": \"{{toPosition}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "c33a16b053922010c5e2ddeeff7b1217", "label": "Swimlane Moved", "name": "VTB#SWIMLANE_MOVED" }, "VTB#FREEFORM_PLACEHOLDER_CARD_REMOVED": { "actionDispatch": "VTB#FREEFORM_PLACEHOLDER_CARD_REMOVED", "actionPayload": null, "actionType": "uxf_client_action", "assignmentId": "decc123453922010c5e2ddeeff7b1243", "label": "Freeform placeholder card removed", "name": "VTB#FREEFORM_PLACEHOLDER_CARD_REMOVED" }, "VTB#DATA_DRIVEN_CARD_FORM_MODAL_CLOSED": { "actionDispatch": "VTB#DATA_DRIVEN_CARD_FORM_MODAL_CLOSED", "actionPayload": null, "actionType": "uxf_client_action", "assignmentId": "dee992b053922010c5e2ddeeff7b12c3", "label": "Data Driven Card Form Modal Closed", "name": "VTB#DATA_DRIVEN_CARD_FORM_MODAL_CLOSED" }, "NOW_VISUAL_BOARD#CARD_MOVED": { "actionDispatch": "VTB#CARD_MOVED", "actionPayload": "{\r\n \"id\": \"{{id}}\",\r\n \"fromLane\": \"{{fromLane}}\",\r\n \"toLane\": \"{{toLane}}\",\r\n \"fromSwimlane\": \"{{fromSwimlane}}\",\r\n \"toSwimlane\": \"{{toSwimlane}}\",\r\n \"fromPosition\": \"{{fromPosition}}\",\r\n \"toPosition\": \"{{toPosition}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "7dab16f053922010c5e2ddeeff7b122a", "label": "Card Moved", "name": "VTB#CARD_MOVED" }, "VTB#WRAPPER_DOM_ACTION_PERFORMED": { "actionDispatch": "VTB#WRAPPER_DOM_ACTION_PERFORMED", "actionPayload": "{\r\n \"event\": \"{{event}}\",\r\n \"name\": \"{{name}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "7a40e516b7122010c5e229a6ee11a937", "label": "Wrapper DOM action performed", "name": "VTB#WRAPPER_DOM_ACTION_PERFORMED" }, "VTB#SWIMLANE_ACTION_PERFORMED": { "actionDispatch": "VTB#SWIMLANE_ACTION_PERFORMED", "actionPayload": "{\r\n \"payload\": \"{{payload}}\",\r\n \"type\": \"{{type}}\"\r\n}", "actionType": "uxf_client_action", "assignmentId": "f518127053922010c5e2ddeeff7b125a", "label": "Swimlane Action Performed", "name": "VTB#SWIMLANE_ACTION_PERFORMED" } } ```