
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-27-2018 03:55 PM
I have a widget in my portal, of type "Data Table from Instance Definition". It displays a bunch of tasks assigned to a user. These tasks can be of different types, so i want a visual hint of that - e.g. an icon in the left-most column, that's specific to the class of the task.
I've played around with adding icon or image fields to my records, and then displaying those columns in the view used by my widget, but only the name of the icon shows up, not the actual icon. Ideally I'm looking to see a glyph for each record. Something like:
Any idea?
Thanks!
Solved! Go to Solution.
- Labels:
-
Service Portal

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-28-2018 11:01 AM
I think I found a cheeky (though still reasonably OOB) way to do this...
1) Add to you list view a drop-down field that you want to use to drive the icons (could be a string, but needs to be a finite list of possible values)
2) Add CSS to the widget definition as follows:
td[aria-label="Slack"]:before, td[aria-label="Pied Piper"]:before, td[aria-label="Rebel Alliance"]:before{
font: normal normal normal 16px/1 FontAwesome;
}
td[aria-label="Slack"]:before{
content: "\f198 ";
}
td[aria-label="Pied Piper"]:before {
content: "\f1a7 ";
}
td[aria-label="Rebel Alliance"]:before {
content: "\f1d0 ";
}
3) You can now see the icons showing up (only tested in Chrome):
Full list of icons can be found here
(FontAwesome should already be part of your Service Portal install)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-27-2018 06:52 PM
Could you please share the code what you are trying to modify?

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-28-2018 06:15 AM
It's really just the OOB data table widget - no custom code (so far)

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-28-2018 11:01 AM
I think I found a cheeky (though still reasonably OOB) way to do this...
1) Add to you list view a drop-down field that you want to use to drive the icons (could be a string, but needs to be a finite list of possible values)
2) Add CSS to the widget definition as follows:
td[aria-label="Slack"]:before, td[aria-label="Pied Piper"]:before, td[aria-label="Rebel Alliance"]:before{
font: normal normal normal 16px/1 FontAwesome;
}
td[aria-label="Slack"]:before{
content: "\f198 ";
}
td[aria-label="Pied Piper"]:before {
content: "\f1a7 ";
}
td[aria-label="Rebel Alliance"]:before {
content: "\f1d0 ";
}
3) You can now see the icons showing up (only tested in Chrome):
Full list of icons can be found here
(FontAwesome should already be part of your Service Portal install)