Has anyone got the Kanban Board Ui Builder component to work yet?

[Jon Adlum]

Hey ServiceNow people

Im having alot of trouble getting the new Kanban Board ui component (url below) to actually work. I'm getting pretty good at ui-builder nowadays, but my go-to learning method is to have a working version / example to learn from, so hoping someone out there has already cracked this one and could maybe share the config they used?

(https://developer.servicenow.com/dev.do#!/reference/now-experience/sandiego/shared-components/now-visual-board/overview)

Many thanks in advance

Jon

[pmasset]

I know this is an older post - but has anyone found a fix to this? @Brad Tilton  @Jon Adlum @Brian Treichel @johnbrandt 

I attempted those same steps (Install VTB plugin, add card/lane properties, map templates) and am able to view the Kanban Frame (Lane header, lane footer) but am unable to get it to display any of the cards. Any ideas?

[Vedavalli]

Hi @pmasset 

could you share how you are able to view the kanban frame

for me it is showing like this after the configuration of cards and lanes

in cards and lanes they have mentioned  id but id should we take there?

[Brian Treichel]

Hi John,

Unfortunately I was not able to get things working. Support did provide a response that helped me to get the component to at least render, but I wasn't able to figure out how to get things functional (i.e. dragging/dropping cards, opening the detail view, etc.). Here is the response I received in case you are able to get things to work. Good luck! 

They suggested to install the plugin "com.devsnc_sn_vtb":
https://insourcepartnerdemo2testtemp1.service-now.com/nav_to.do?uri=v_plugin.do?sys_id=com.devsnc_sn...

With this, following components will be available:
sn-vtb-card, sn-vtb-lane-header, sn-vtb-lane-footer

For the properties such as cardTag, laneHeaderTag, laneFooterTag, swimlaneHeaderTag in UIB, these values can be used

For cards and lanes use the following:

Lanes:
[
{
"id": "10f5515cc74b1010de6c819a95c2604c",
"title": "To Do",
"is_choice_lane": false,
"sys_id": "10f5515cc74b1010de6c819a95c2604c",
"is_reference_lane": false,
"read_only": false,
"is_swim_lane": false,
"lane_wip_limit": -1,
"primary_key_field": "sys_id",
"name": "To Do",
"board_id": "d0f5515cc74b1010de6c819a95c26048",
"non_localized_name": "To Do",
"value": "",
"order": 0,
"can_delete": true,
"cardsCount": 1,
"_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",
"lane_filter": "",
"lane_count": 3,
"total_lane_count": 3,
"field_reference_table": null,
"lane_field": "__KANBAN__",
"swimlane_field": "",
"table": "vtb_task",
"reference_lane_search_field": null,
"highest_lane_order": 2
}
},
{
"id": "18f5d5dcc74b1010de6c819a95c26000",
"title": "Doing",
"is_choice_lane": false,
"sys_id": "18f5d5dcc74b1010de6c819a95c26000",
"is_reference_lane": false,
"read_only": false,
"is_swim_lane": false,
"lane_wip_limit": -1,
"primary_key_field": "sys_id",
"name": "Doing",
"board_id": "d0f5515cc74b1010de6c819a95c26048",
"non_localized_name": "Doing",
"value": "",
"order": 1,
"can_delete": true,
"cardsCount": 0,
"_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",
"lane_filter": "",
"lane_count": 3,
"total_lane_count": 3,
"field_reference_table": null,
"lane_field": "__KANBAN__",
"swimlane_field": "",
"table": "vtb_task",
"reference_lane_search_field": null,
"highest_lane_order": 2
}
},
{
"id": "14f5d5dcc74b1010de6c819a95c26001",
"title": "Done",
"is_choice_lane": false,
"sys_id": "14f5d5dcc74b1010de6c819a95c26001",
"is_reference_lane": false,
"read_only": false,
"is_swim_lane": false,
"lane_wip_limit": -1,
"primary_key_field": "sys_id",
"name": "Done",
"board_id": "d0f5515cc74b1010de6c819a95c26048",
"non_localized_name": "Done",
"value": "",
"order": 2,
"can_delete": true,
"cardsCount": 0,
"_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",
"lane_filter": "",
"lane_count": 3,
"total_lane_count": 3,
"field_reference_table": null,
"lane_field": "__KANBAN__",
"swimlane_field": "",
"table": "vtb_task",
"reference_lane_search_field": null,
"highest_lane_order": 2
}
},
{
"id": "addNewLane_sysId",
"title": "Add lane button",
"isPlaceholder": true,
"value": "",
"order": 3,
"board_id": "d0f5515cc74b1010de6c819a95c26048",
"lanes_reference_table_records": "",
"options": {
"board_type": "FREEFORM",
"lane_filter": "",
"lane_count": 3,
"total_lane_count": 3,
"field_reference_table": null,
"lane_field": "__KANBAN__",
"swimlane_field": "",
"table": "vtb_task",
"reference_lane_search_field": null,
"highest_lane_order": 2
}
}
]

Cards:
[
{
"id": "adf5d5dcc74b1010de6c819a95c26062",
"title": "a",
"order": 0,
"lane_id": "10f5515cc74b1010de6c819a95c2604c",
"thumbnail": null,
"attachments": [],
"swim_lane_id": "",
"sys_id": "adf5d5dcc74b1010de6c819a95c26062",
"sla": {
"percentage": 80
},
"checklist": {
"items": [
{
"complete": true
},
{
"complete": false
}
]
},
"labelsCount": 0,
"due_date_display_value": "March 15",
"all_sla": [],
"labels": null,
"removed": false,
"primary_key_field": "sys_id",
"record": {
"sys_id": "a1f5d5dcc74b1010de6c819a95c2605f",
"sys_class_name": "vtb_task",
"can_read": true,
"short_description": {
"display_value": "a",
"is_multi_text": false,
"is_choice_table": false,
"can_read": true,
"name": "short_description",
"is_reference": false,
"can_write": true,
"label": "Short description",
"max_length": 160,
"value": "a"
},
"description": {
"display_value": "this is desc",
"is_multi_text": true,
"is_choice_table": false,
"can_read": true,
"name": "description",
"is_reference": false,
"can_write": true,
"label": "Description",
"max_length": 4000,
"value": "this is desc"
},
"assignment_group": {
"display_value": "",
"is_multi_text": false,
"is_choice_table": false,
"can_read": true,
"name": "assignment_group",
"is_reference": true,
"can_write": true,
"label": "Assignment group",
"max_length": 32,
"value": ""
},
"sys_updated_on": {
"display_value": "2020-08-31 16:42:01",
"is_multi_text": false,
"is_choice_table": false,
"can_read": true,
"name": "sys_updated_on",
"is_reference": false,
"can_write": false,
"label": "Updated",
"max_length": 40,
"value": "2020-08-31 11:12:01"
},
"sys_updated_by": {
"display_value": "admin",
"is_multi_text": false,
"is_choice_table": false,
"can_read": true,
"name": "sys_updated_by",
"is_reference": false,
"can_write": false,
"label": "Updated by",
"max_length": 40,
"value": "admin"
},
"number": {
"display_value": "PTSK0001006",
"is_multi_text": false,
"is_choice_table": false,
"can_read": true,
"name": "number",
"is_reference": false,
"can_write": true,
"label": "Number",
"max_length": 40,
"value": "PTSK0001006"
},
"state": {
"display_value": "Open",
"is_multi_text": false,
"is_choice_table": true,
"can_read": true,
"name": "state",
"is_reference": false,
"can_write": true,
"label": "State",
"max_length": 40,
"value": "1"
},
"assigned_to": {
"display_value": "",
"is_multi_text": false,
"is_choice_table": false,
"can_read": true,
"name": "assigned_to",
"is_reference": true,
"can_write": true,
"label": "Assigned to",
"max_length": 32,
"value": null
},
"additional_assignee_list": {
"display_value": "",
"is_multi_text": true,
"is_choice_table": false,
"can_read": true,
"name": "additional_assignee_list",
"is_reference": false,
"can_write": true,
"label": "Additional assignee list",
"max_length": 4000,
"value": []
},
"assigned_to_dependencies": "assignment_group",
"additional_assignee_reference_qualifier": "",
"assigned_to_reference_qualifier": "",
"due_date": {
"display_value": "",
"is_multi_text": false,
"is_choice_table": false,
"can_read": true,
"name": "due_date",
"is_reference": false,
"can_write": true,
"label": "Due date",
"max_length": 40,
"value": ""
}
},
"board_id": "d0f5515cc74b1010de6c819a95c26048",
"task_id": "a1f5d5dcc74b1010de6c819a95c2605f",
"sys_updated_on": "2020-08-31 11:12:01",
"users": {
"primary_assignees": [
{
"name": "test user",
"avatar": "test user avatar url"
}
],
"additional_assignees": []
},
"options": {
"show_sla": true,
"show_labels": true,
"show_info": false,
"board_type": "FREEFORM",
"card_type": "classic",
"show_cover_image": true,
"menu_actions": [
{
"id": "archiveCard_section",
"children": [
{
"id": "archive_card",
"label": "Archive Card",
"uuid": "adf5d5dcc74b1010de6c819a95c26062"
}
],
"uuid": "adf5d5dcc74b1010de6c819a95c26062"
},
{
"id": "cardActions_section",
"children": [
{
"id": "rename_card_title",
"label": "Rename card title",
"uuid": "adf5d5dcc74b1010de6c819a95c26062"
}
],
"uuid": "adf5d5dcc74b1010de6c819a95c26062"
}
]
}
},
{
"id": "bbf9f228c72010109a57797c95c2608d",
"title": "Assessment : ATF Assessor",
"order": 0,
"lane_id": "10f5515cc74b1010de6c819a95c2604c",
"sla": null,
"attachments": [],
"removed": false,
"labelsCount": 0,
"checklist": null,
"all_sla": [],
"sys_updated_on": "2020-04-30 06:30:35",
"sys_id": "bbf9f228c72010109a57797c95c2608d",
"board_id": "d0f5515cc74b1010de6c819a95c26048",
"swim_lane_id": "",
"primary_key_field": "sys_id",
"record": {
"sys_id": "d1c2c94fc75010109a57797c95c2608c",
"sys_class_name": "incident",
"can_read": true,
"short_description": {
"name": "short_description",
"value": "Assessment : ATF Assessor",
"label": "Short description",
"can_read": true,
"can_write": true,
"is_reference": false,
"max_length": 160,
"display_value": "Assessment : ATF Assessor",
"is_choice_table": false,
"is_multi_text": false
},
"description": {
"name": "description",
"value": "",
"label": "Description",
"can_read": true,
"can_write": true,
"is_reference": false,
"max_length": 4000,
"display_value": "",
"is_choice_table": false,
"is_multi_text": true
},
"assignment_group": {
"name": "assignment_group",
"value": "",
"label": "Assignment group",
"can_read": true,
"can_write": true,
"is_reference": true,
"max_length": 32,
"display_value": "",
"is_choice_table": false,
"is_multi_text": false
},
"sys_updated_on": {
"name": "sys_updated_on",
"value": "2020-04-25 05:58:51",
"label": "Updated",
"can_read": true,
"can_write": false,
"is_reference": false,
"max_length": 40,
"display_value": "2020-04-25 11:28:51",
"is_choice_table": false,
"is_multi_text": false
},
"sys_updated_by": {
"name": "sys_updated_by",
"value": "admin",
"label": "Updated by",
"can_read": true,
"can_write": false,
"is_reference": false,
"max_length": 40,
"display_value": "admin",
"is_choice_table": false,
"is_multi_text": false
},
"number": {
"name": "number",
"value": "INC0010048",
"label": "Number",
"can_read": true,
"can_write": true,
"is_reference": false,
"max_length": 40,
"display_value": "INC0010048",
"is_choice_table": false,
"is_multi_text": false
},
"state": {
"name": "state",
"value": "1",
"label": "State",
"can_read": true,
"can_write": true,
"is_reference": false,
"max_length": 40,
"display_value": "New",
"is_choice_table": true,
"is_multi_text": false
},
"assigned_to": {
"name": "assigned_to",
"value": null,
"label": "Assigned to",
"can_read": true,
"can_write": true,
"is_reference": true,
"max_length": 32,
"display_value": "",
"is_choice_table": false,
"is_multi_text": false
},
"additional_assignee_list": {
"name": "additional_assignee_list",
"value": [],
"label": "Additional assignee list",
"can_read": true,
"can_write": true,
"is_reference": false,
"max_length": 4000,
"display_value": "",
"is_choice_table": false,
"is_multi_text": true
},
"assigned_to_dependencies": "assignment_group",
"additional_assignee_reference_qualifier": "",
"assigned_to_reference_qualifier": "roles=itil",
"approval": {
"name": "approval",
"value": "not requested",
"label": "Approval",
"can_read": true,
"can_write": true,
"is_reference": false,
"max_length": 40,
"display_value": "Not Yet Requested",
"is_choice_table": true,
"is_multi_text": false
},
"due_date": {
"name": "due_date",
"value": "",
"label": "Due date",
"can_read": true,
"can_write": true,
"is_reference": false,
"max_length": 40,
"display_value": "",
"is_choice_table": false,
"is_multi_text": false
}
},
"task_id": "d1c2c94fc75010109a57797c95c2608c",
"users": {
"primary_assignees": [],
"additional_assignees": []
},
"options": {
"show_sla": false,
"show_labels": true,
"show_thumbnail": true,
"show_info": true,
"card_type": "classic_card",
"show_description": "I am unable to connect to the email server. It appears to be down."
}
},
{
"id": "53f9b228c72010109a57797c95c260cc",
"title": "ATF : Test1",
"order": 721,
"lane_id": "10f5515cc74b1010de6c819a95c2604c",
"sla": null,
"attachments": [],
"removed": false,
"labelsCount": 0,
"checklist": null,
"all_sla": [],
"sys_updated_on": "2020-04-30 06:30:33",
"sys_id": "53f9b228c72010109a57797c95c260cc",
"board_id": "d0f5515cc74b1010de6c819a95c26048",
"swim_lane_id": "",
"primary_key_field": "sys_id",
"record": {
"sys_id": "940885cbc7d010109a57797c95c260bc",
"sys_class_name": "incident",
"can_read": true,
"short_description": {
"name": "short_description",
"value": "ATF : Test1",
"label": "Short description",
"can_read": true,
"can_write": true,
"is_reference": false,
"max_length": 160,
"display_value": "ATF : Test1",
"is_choice_table": false,
"is_multi_text": false
},
"description": {
"name": "description",
"value": "",
"label": "Description",
"can_read": true,
"can_write": true,
"is_reference": false,
"max_length": 4000,
"display_value": "",
"is_choice_table": false,
"is_multi_text": true
},
"assignment_group": {
"name": "assignment_group",
"value": "",
"label": "Assignment group",
"can_read": true,
"can_write": true,
"is_reference": true,
"max_length": 32,
"display_value": "",
"is_choice_table": false,
"is_multi_text": false
},
"sys_updated_on": {
"name": "sys_updated_on",
"value": "2020-04-25 06:21:43",
"label": "Updated",
"can_read": true,
"can_write": false,
"is_reference": false,
"max_length": 40,
"display_value": "2020-04-25 11:51:43",
"is_choice_table": false,
"is_multi_text": false
},
"sys_updated_by": {
"name": "sys_updated_by",
"value": "itil",
"label": "Updated by",
"can_read": true,
"can_write": false,
"is_reference": false,
"max_length": 40,
"display_value": "itil",
"is_choice_table": false,
"is_multi_text": false
},
"number": {
"name": "number",
"value": "INC0010225",
"label": "Number",
"can_read": true,
"can_write": true,
"is_reference": false,
"max_length": 40,
"display_value": "INC0010225",
"is_choice_table": false,
"is_multi_text": false
},
"state": {
"name": "state",
"value": "1",
"label": "State",
"can_read": true,
"can_write": true,
"is_reference": false,
"max_length": 40,
"display_value": "New",
"is_choice_table": true,
"is_multi_text": false
},
"assigned_to": {
"name": "assigned_to",
"value": null,
"label": "Assigned to",
"can_read": true,
"can_write": true,
"is_reference": true,
"max_length": 32,
"display_value": "",
"is_choice_table": false,
"is_multi_text": false
},
"additional_assignee_list": {
"name": "additional_assignee_list",
"value": [],
"label": "Additional assignee list",
"can_read": true,
"can_write": true,
"is_reference": false,
"max_length": 4000,
"display_value": "",
"is_choice_table": false,
"is_multi_text": true
},
"assigned_to_dependencies": "assignment_group",
"additional_assignee_reference_qualifier": "",
"assigned_to_reference_qualifier": "roles=itil",
"approval": {
"name": "approval",
"value": "not requested",
"label": "Approval",
"can_read": true,
"can_write": true,
"is_reference": false,
"max_length": 40,
"display_value": "Not Yet Requested",
"is_choice_table": true,
"is_multi_text": false
},
"due_date": {
"name": "due_date",
"value": "",
"label": "Due date",
"can_read": true,
"can_write": true,
"is_reference": false,
"max_length": 40,
"display_value": "",
"is_choice_table": false,
"is_multi_text": false
}
},
"task_id": "940885cbc7d010109a57797c95c260bc",
"users": {
"primary_assignees": [],
"additional_assignees": []
},
"options": {
"show_sla": false,
"show_labels": true,
"show_thumbnail": true,
"show_info": true,
"card_type": "classic_card",
"show_description": "I am unable to connect to the email server. It appears to be down."
}
}
]