Using the Kanban Board Component in UI Builder

kanban.md

Using the Kanban Board Component in UI Builder

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 at the end.

What we built

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.

Step 1 - Add the Kanban component to the canvas

1. Open the page in UI Builder and drag the Kanban Board component from the component picker onto the canvas.
2. Before you can bind any data to it, create two Client State Parameters of type json:
   • lanesData - initial value null
   • cardsData - initial value null
3. 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.

Step 2 - Create the lanes

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:

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:

• id: "lane_" + choice.value - every lane's 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.
• _style_ and options are set per lane here - see Steps 4–6 below for what each of those keys does.

Step 3 - Create the cards

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.

Step 4 - Style the cards

Card and lane styling happens in two places, both visible in the scripts above:

1. 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).
2. 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 - we only used a subset of what's available.

Step 5 - Enable lane footers

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.

Step 6 - Modify the "Add Card" button label

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.

Step 7 - Persisting card moves back to ServiceNow

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:

1. 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.
2. Derives the incident's new impact/urgency from the destination lane's priority using a small lookup matrix.
3. 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.

Key takeaways

• The lane_id contract is everything. Lanes get an 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 options and _style_ on the lane/card objects, not in the Kanban component's own property panel. The _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.
• CARD_MOVED is your write-back hook. The board is purely presentational until you map a script to CARD_MOVED (and optionally LANE_MOVED) to persist the reordering back to the source table.

Appendix: full daActionMapping reference for the Kanban Board component

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#<EVENT> — 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.

Quick-reference table

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#<EVENT>).

Full daActionMapping JSON

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"
  }
}

Further reading

• Kanban Board Component – Part 1: Initial Configuration - ServiceNow Community
• Kanban Board Component – Part 2: Configuration Reference - ServiceNow Community
• E32 - You & I Builder Live! Mastering the Kanban Component
• E33 - You & I Builder Live! Updates, Styling, and Modals in Kanban