The ServiceNow Nested Comments component (sn-nested-comments) in Next Experience renders a simple list of comments, optionally nested. It's the component used to render comments for KB articles.
This component is available in UI Builder (UIB) if you want to use it to, but there is no sample JSON.
Today, I am providing you with that sample JSON:
For "Actions" Property
[
{
"id": "delete",
"label": "Delete",
"icon": "trash-outline",
"ariaLabel": "Delete Comment"
},
{
"id": "flag",
"label": "Flag",
"icon": "flag-outline"
}
]
For "Comments" Property
[
{
"id": "174df62204e19010f87700b07e812f8f",
"created": "2020-06-25 04:55:40",
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis magna vel accumsan ornare. Quisque cursus augue vitae commodo ornare.</p>",
"parent": "",
"user": {
"name": "Aileen Mottern",
"id": "71826bf03710200044e0bfc8bcbe5d3b",
"avatar": "476461183740310042106710ce41f112.iix?t=small"
},
"reactionCount": 1,
"isReacted": true,
"actions": [
{
"id": "flag",
"isHidden": true
}
],
"children": [
{
"children": [
{
"id": "395db6e604e19010f87700b07e812f5d",
"created": "2020-06-25 04:55:51",
"text": "<p>Etiam velit tellus, accumsan eget malesuada nec, convallis vitae diam. Sed a enim quis neque consequat hendrerit. In porta odio lorem, sit amet blandit arcu pulvinar eget. Sed gravida cursus mi ac iaculis. Duis quis neque dui.</p>",
"parent": "a05df66204e19010f87700b07e812f73",
"user": {
"name": "Abel Tuter",
"id": "62826bf03710200044e0bfc8bcbe5df1",
"avatar": "063e38383730310042106710ce41f13b.iix?t=small"
},
"reactionCount": 0,
"isReacted": false,
"children": []
}
],
"id": "a05df66204e19010f87700b07e812f73",
"created": "2020-06-25 04:55:46",
"text": "<p>Curabitur orci nibh, bibendum ut vestibulum eget, ultricies nec arcu. Suspendisse at mi tempus mi dignissim pellentesque. Sed nisi augue, sodales at nisi nec, ornare consectetur nibh.</p>",
"parent": "174df62204e19010f87700b07e812f8f",
"user": {
"name": "Don Goodliffe",
"id": "9ee1b13dc6112271007f9d0efdb69cd0",
"avatar": "de0f78383730310042106710ce41f1f3.iix?t=small"
},
"reactionCount": 0,
"isReacted": false
}
]
},
{
"id": "b84db62204e19010f87700b07e812ffb",
"created": "2020-06-25 04:55:30",
"text": "<p>Aliquam dapibus condimentum sem nec ullamcorper. Aliquam in tellus eget orci mollis pellentesque. In eget lacinia eros, nec tristique risus. Aliquam eu erat eget augue fermentum lacinia. Integer congue ut lectus vitae dignissim. In hac habitasse platea dictumst. Fusce iaculis molestie sem sed hendrerit. Nullam non consequat massa, vel tempor augue.</p>",
"parent": "",
"user": {
"name": "Adela Cervantsz",
"id": "0a826bf03710200044e0bfc8bcbe5d7a",
"avatar": "3c8461183740310042106710ce41f167.iix?t=small"
},
"reactionCount": 0,
"isReacted": false,
"actions": [
{
"id": "delete",
"isHidden": true
}
],
"children": [
{
"children": [
{
"id": "395db6e604e19010f87700b07e812f5c",
"created": "2020-06-25 04:55:51",
"text": "<p>Suspendisse ullamcorper eget justo nec consequat. Morbi sollicitudin sit amet ante eget finibus. Cras vitae quam viverra, molestie diam vitae, fringilla nulla. In congue, ipsum sed pulvinar luctus, mauris ante maximus mi, eu dictum ante quam nec lectus. Pellentesque imperdiet urna neque, non gravida ex efficitur a. Fusce nibh nunc, pharetra quis tellus sit amet, tincidunt laoreet sem. Duis dolor nunc, convallis eget dapibus non, elementum eget arcu.</p>",
"parent": "a05df66204e19010f87700b07e812f76",
"user": {
"name": "Alissa Mountjoy",
"id": "6a826bf03710200044e0bfc8bcbe5dec",
"avatar": "f51521183740310042106710ce41f1c5.iix?t=small"
},
"reactionCount": 0,
"isReacted": false,
"children": []
}
],
"id": "a05df66204e19010f87700b07e812f76",
"created": "2020-06-25 04:55:46",
"text": "<p>Etiam tincidunt dui eget purus maximus, ut semper magna imperdiet. Aliquam a mauris ut urna lobortis interdum et vitae leo. Aenean volutpat nibh vitae est mollis ornare.</p>",
"parent": "b84db62204e19010f87700b07e812ffb",
"user": {
"name": "Alejandro Mascall",
"id": "a2826bf03710200044e0bfc8bcbe5ded",
"avatar": "639e78383730310042106710ce41f106.iix?t=small"
},
"reactionCount": 0,
"isReacted": false
}
]
},
{
"id": "17442b2104651010f87700b07e812fb0",
"created": "2020-06-22 05:12:08",
"text": "Vestibulum condimentum risus eget arcu molestie, nec bibendum lacus finibus. Pellentesque facilisis lectus quis nulla faucibus, sit amet consequat ligula congue. Sed pharetra feugiat blandit. Aenean dapibus ante sed leo porta euismod.",
"parent": "",
"user": {
"name": "Claudio Loose",
"id": "86826bf03710200044e0bfc8bcbe5d79",
"avatar": "67c965d13741310042106710ce41f118.iix?t=small"
},
"reactionCount": 3,
"isReacted": true,
"children": []
},
{
"id": "03d0483d04651010f87700b07e812f39",
"created": "2020-06-22 07:16:54",
"text": "<ol><li>Etiam pretium, turpis eu lobortis aliquam, sapien nibh tincidunt massa, et aliquam justo lacus condimentum nulla. Aliquam leo nisi, pellentesque sed ligula a, bibendum hendrerit neque. Nulla finibus pellentesque ex, feugiat sollicitudin nunc eleifend in. Donec magna eros, lobortis eget faucibus at, faucibus non <a href=\"/kb_view.do?sysparm_article=KB0000002\" target=\"_blank\">lorem</a>.</li><li>Aenean eget sem quis augue consectetur porttitor at vitae nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum non lacinia tortor. Phasellus ac dolor a magna dignissim rhoncus ac ac risus. Suspendisse lectus quam, pharetra non aliquet sed, euismod at nibh. <strong>Praesent id metus id enim malesuada tristique.</strong></li><li>Sed id augue vel nulla rhoncus ultrices. Cras posuere rutrum nulla, ornare pharetra augue maximus et. Curabitur efficitur lectus leo. Donec turpis libero, scelerisque sit amet odio eu, pulvinar eleifend velit. Suspendisse potenti. Ut eu nibh ut orci sagittis mattis vitae vel urna.</li></ol>",
"parent": "",
"user": {
"name": "Beth Anglin",
"id": "46d44a23a9fe19810012d100cca80666",
"avatar": "ee4eebf30a0004d963b5c5ac0d734dc4.iix?t=small"
},
"reactionCount": 1,
"isReacted": false,
"children": []
},
{
"id": "1854236104651010f87700b07e812f5e",
"created": "2020-06-22 05:12:12",
"text": "Nulla porttitor, metus ac blandit pulvinar, est dui viverra turpis, a varius tellus turpis luctus quam. Donec scelerisque, justo mattis efficitur vehicula, mi felis fermentum nunc, eu fringilla dolor lectus sit amet dolor.",
"parent": "",
"user": {
"name": "Beth Anglin",
"id": "46d44a23a9fe19810012d100cca80666",
"avatar": "ee4eebf30a0004d963b5c5ac0d734dc4.iix?t=small"
},
"reactionCount": 0,
"isReacted": false,
"children": []
},
{
"id": "16caf5d604695010f87700b07e812f5c",
"created": "2020-06-22 05:12:12",
"text": "<p><img style=\"max-width: 100%; max-height: 480px;\" src=\"/sys_attachment.do?sys_id=c663b9fd7373101001d32e46fbf6a7e2\" /></p><p> </p><p>Quisque rutrum arcu a velit imperdiet aliquam. Proin tincidunt lacus est. Nulla posuere ipsum et faucibus ultricies. Quisque vitae ante viverra, commodo orci eu, imperdiet leo. In elementum vitae orci at condimentum. Praesent eu nunc augue. Nulla ut ornare ipsum, sed varius est. Etiam quis bibendum massa. Sed at eros diam. Nulla volutpat mi vitae ex eleifend, eget mattis felis porta. Donec in faucibus eros. Aenean tortor ligula, cursus at commodo non, mollis porttitor felis. Phasellus aliquam nulla est, tempus sollicitudin risus pharetra ac. Sed pretium nulla quis ultricies fermentum. Fusce ut tortor et nibh iaculis consequat et vel libero.</p>",
"parent": "",
"user": {
"name": "David Loo",
"id": "5137153cc611227c000bbd1bd8cd2007",
"avatar": "d753add43740310042106710ce41f1b3.iix?t=small"
},
"reactionCount": 0,
"isReacted": false,
"children": []
}
]
Wiring Everything Up
This shows you a sample JSON format to get you started, but this component merely renders the content and interface. All work retrieving the data and implementing the actions (adding a new comment, deleting an existing, etc.) is your responsibility.
For a good example use UI Builder in your instance and open "Service Operations Workspace" (or any workspace with a KB page) and look at the "Knowledge View" page. You will see a variety of data resources for retrieving the list of comments, adding new comments, etc. You can do something similar with any data source you wish to use as long as you return the proper format that the Nested Comments Component is expecting.
