
- Post History
- Subscribe to RSS Feed
- Mark as New
- Mark as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
on 06-15-2021 02:51 AM
Hey fellow ServiceNow Developers,
If you are currently starting out with the App Engine Studio and using Now Experience Components you might find this little tip helpful.
When using the Timeline Component in one of your pages it is possible to use a wide variety of icons.
If you add this component to your page you will find some example data on how to create one of these "headset" Icons in the components property called "Event Data". It should look something like this:
[{
"name": "Agent Comment",
"icon": "headsetOutline",
"iconHref": "",
"color": "",
"label": "Agent Comment",
"labelPlural": "Agent Comment",
"events": [{
"timestamp": 1574744400000,
"description": "Agent Comment #5",
"data": {}
}, {
"timestamp": 1569124800000,
"description": "Agent Comment #8",
"data": {}
}]
}, {
"name": "Customer Comment",
"icon": "userOutline",
"iconHref": "",
"color": "",
"label": "Customer Comment",
"labelPlural": "Customer Comments",
"events": [{
"timestamp": 1568779200000,
"description": "Customer Comment #2",
"data": {}
}, {
"timestamp": 1563163200000,
"description": "Customer Comment #11",
"data": {}
}]
}]
Now you can see that the objects property "icon" contains userOutline and headsetOutline. I did initially wonder where you can find a list of other icons you could use.
ServiceNow provides here an Icon Gallery from which you can pick.
Unfortunately the displayed icon names do not work right now for the Timeline component if you just try to assign the icon name to the icon property of the objects.
"icon":"bug-outline"
Icon with value "bug-outline" would not show up on your timeline.
What you need to do is give the icon name in camelCase. So "bug-outline" becomes "bugOutline".
This should help you display icons from the Gallery!
I found this because I saw our "headsetOutline" icon in the gallery too.
Hopefully this information can help you save some time.
- 598 Views
- Mark as Read
- Mark as New
- Bookmark
- Permalink
- Report Inappropriate Content
Thanks Kevin, this is helpful