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

[Brad Tilton]

Hey Jon, what have you tried so far and what exactly doesn't seem to be working?

[Brian Treichel]

Hi Brad, 

Not sure if this is Jon's question or not, but the documentation doesn't outline the format required to configure the component properties. In most components, the 'demo data' loaded shows an example of properties values or JSON structure, but the Kanban component leaves most properties empty when adding to the page.

Many of the properties are called "(xyz) template" and the help text popovers / UIB component docs simply say "Option to load the template that (does xyz)".

For example:

Property "Vertical lane-drag source display template" 

Help Text Popover:"Template that displays the source from which a vertical lane is dragged."

I'm not sure what templates are even available for this.

Another example of an object property: 

Property "Override vertical lane configurations"

Value "{}"

No idea what this object should look like

[johnbrandt]

Hi Brian, any luck? I'm running into similar difficulties with this component.

[brnfbnfbfb]

Hi John, unfortunately I wasn't able to get things working. I did receive a response on Support that got the component to show up, but there was still a ton that I wasn't able to figure out afterwards (i.e. dragging/dropping lanes, etc.). Here is the guidance I received if it is at all helpful to you. 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."
}
}
]