Indicators Examples
Field Type | Field Value | Indicator Icon | Indicator Text Value | Indicator Image URL | Icon for False | Text Value for False | Example Avatar | Notes |
|---|---|---|---|---|---|---|---|---|
Text | Burlington Textiles | custom:custom109 |
|
|
|
| 
| First 3 chars of text on coloured icon. Works for any text or numeric value. Dates will look weird. |
| Any Value | custom:custom109 | ABC |
|
|
|  | Text Value entered, on coloured icon. |
| Any Value | custom:custom109 | ABC | https://www.lightningdesignsystem.com/assets/images/avatar2.jpg |
|
|
| Image entered. Text Value ignored. |
| Blank Value | custom:custom109 | ABC | https://www.lightningdesignsystem.com/assets/images/avatar2.jpg |
|
| Not Shown | All settings ignored because Icon for False not entered. |
| Blank Value | custom:custom109 | ABC |
| standard:empty |
|
| The False Icon only. |
| Blank Value | custom:custom109 | ABC |
| standard:empty | XYZ |
| The False Text entered, on the False Icon colour. |
Boolean | true | custom:custom6 | ACT |
| custom:custom100 | IAV |
| These two are the same settings, just different for true or false |
| false | custom:custom6 | ACT |
| custom:custom100 | IAV |
| |
| true | none | ✔️ |
| none (or blank space) | ❌ | ✔️ | These two are the same settings, just different for true and false. You could also use a utility icon but they would not be coloured. |
| false | none | ✔️ |
| none (or blank space) | ❌ | ❌ | |
| false | custom:custom109 | ABC | https://www.lightningdesignsystem.com/assets/images/avatar2.jpg |
|
| Not Shown | All settings ignored because Icon for False not entered. |
Emojis vs text vs Icons
So I’ve made this pretty flexible and you have a few options you can use. But remember, whether this looks really good, or really crap as a finished component is completely up to you.
Type | Settings | Example | Notes |
|---|---|---|---|
Large emoji with no background | icon = space, text = emoji, icon size = large | ✔️ | Icon can appear floaty. Use sparingly. |
Large emoii with icon | icon = standard:email_chatter, text = emoji, icon size = large | Beware weird colour combos. Note this breaks the SLSD design pattern of using don’t use non-white icon glyphs in object icons. | |
Small emoji with icon | icon = standard:email_chatter, text = emoji, icon size = small |
| |
Large emoji and text with icon | icon = standard:email_chatter, text = emoji and text, icon size = large | One letter is best, it gets crowded otherwise | |
Small emoji and text with light background | icon = none, text = emoji and text, icon size = small |
| when none is entered for the icon and the icon size is small , the text is colour inverse and a light grey background is applied; See Checking Component below. This is based on Fallback User Inverse SLDS pattern. Note: this is possibly breaking the “Don’t make icons overly complicated” SLDS design rules. |
Small text only with light background | icon = none, text = text, icon size = small | There is not much reason to use this. It doesn’t look great. Use coloured icons instead. Note this breaks the SLSD design pattern of using don’t use non-white icon glyphs in object icons. | |
Small text only with icon | icon = none, text = text, icon size = small | May be better as a large icon, or just an icon because the low contrast may not be good for low vision users. I’m not an accessibility expert but this just looks a little crap. | |
Large emoji with circular icon | icon = standard:email_chatter, text = emoji, icon size = large, icon shape = circle | Note this breaks the SLSD design pattern of using don’t use non-white icon glyphs in object icons. |
Building a Checking Component
So I want a Component that can sit on the side of the Lightning Page and show green ticks or red crosses depending on how much of the record you have filled out. The ideal is that it is just based on a field set, and gets hover data from Help Text but for now, I have mocked it up using this component. It’s not great, and we can do better, so let me know your suggestions.
This is set up using the true / false settings as shown above
Field Name | Sample Values | Notes |
|---|---|---|
Title | Checking Indicators | This could be left blank and only the Heading entered if you want the text smaller |
Icon | custom:custom46 |
|
Heading | All Required Contract Fields |
|
Icon Size | medium | Large is a bit too garish. Leave large for Indicator panels |
Icon Shape | base | it doesn’t change anything since we are using text |
Indicator Field Names | Field1__c;Field2__c;Field3__c;Field4__c;Field5__c;JobTitle__c;Address__r.CityStateCountry__c;Field6__c;Manager__r.Email;PayRate__c | Remember you can use spanning relationships |
Indicator Icons | none;none;none;none;none;none;none;none;none;none | Entering “none” makes the light grey box appear around the icon. Any text that is not an emoji will appear in inverse (dark) colour also. |
Indicator Text Values | ✔️;✔️;✔️;✔️;✔️;✔️;✔️;✔️;✔️;✔️ | You could use Icons instead of text. Or you can use real text or different emojis. I chose green text and red cross because it is red-green colour blind safe as it has both the colour and the different symbol. |
Icons for False | none;none;none;none;none;none;none;none;none;none | Important to enter “none” (or just a blank space) so that the False text will display |
Text Values for False | ❌;❌;❌;❌;❌;❌;❌;❌;❌;❌ |
|
How to improve on this
Use images for False also - I think this has to wait until we do the CMDT setup. There are no appropriate SLDS icons that represent a true and false value - and remember people that are colour blind may not like a green and red icon that is the same colour
Potentially have a setting where you can repeat all icons to be the same but not until CMDT
based on a field set, and get hover data from Help Text rather than having to do all this silly setup! Yes it is silly.