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
...
This is set up using the true / false settings as shown above
Field Name | Sample Values | Notes |
|---|---|---|
TitleAll | Required Contract FieldsChecking Indicators | This could be in left blank and only the Heading entered if you want the text smaller |
Icon(blank) | 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;Not actually required to be entered, so just enter the semicolonsnone | 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.