Home

Indicators Lightning Web Component

Bring some colour and visibility to the data on your Lightning Pages. Allow users to see at a glance what this record is about and what it's status is. This component is highly customisable and can be used in many record pages.

The icons are based off the standard Lightning Web Component, Avatar.

See the Wiki Page from The Detail Department Wiki for more details about the history, and reason for this component.

Deploy this component to your Salesforce org.

The Component will be installed as a custom component, which you can modify if needed. If there are any updates, it is up to you to deploy the changes. Ensure that your org has My Domain available to use the Component.

If you need to uninstall, you need to remove the component and code manually. We are working on this being a Managed Package, so you may need to wait until then if you are unsure about installing an unmanaged package in your org.

Steps - NEW (CMDT) VERSION

• Edit your Lightning Record Page, and add the Indicator Bundle Component by dragging it to the desired location.

  • Don't forget to Save, Activate, and Assign to all users (or whatever level is appropriate).

• Edit the Settings in CMDT:

  • Navigate to Salesforce Setup --> Custom Metadata Types
  • Scroll to Indicator Bundles or Indicator Items, and click Manage Records
  • Click **Edit **next to the Bundle or Item you want

• Indicator Bundle settings:

  • Label -
  • Card Title - Not Required, but looks best if it is defined
  • Card Icon - The icon name from SLDS Icons or default icons such as standard:account, standard:opportunity
  • sObject -
  • Card Text - The text to display above the icons
  • *Indicator Bundle Name -
  • Active -

Rules

This section needs to be expanded upon

• The indicators work with Boolean or Text fields. Date Fields can be used if you enter Indicator Text Values as the value that is shown does not make much sense. Number fields can be used, if the number is not too big, or you use Indicator Text Values.
• If the field is a Boolean and the value is False the Indicator will not show unless there is an Icons for False entered for that Indicator.
• If there is a value in Indicator Image URLs that image will show. Images do not work for False values,
• If the field is a Boolean and there is a value in Indicator Text Values then that text will show. Limit this text to 3 characters max, and Uppercase.
• If the field is a Boolean and there is no value in Indicator Text Values the Icon will be shown.
• If the field is a Text field and there is no value in Indicator Text Values the first 3 characters will show, in Uppercase.
• If there is an Indicator Text Values, the Icon image will not be shown, but the colour will be from the SLDS icon name entered.
• If you enter none for the icon it makes the spacing smaller between the avatars and sets the text colour as inversed. This is helpful when you want to use Emoji text for the avatars insted of icons. See Building a Checking Component for an example.
• There is no field validation to ensure you don't use a combination of entries that look wierd, so if it looks strange, just go back to simple boolean or text fields.

Examples

This needs to be fleshed out into its own section and incorporate the examples from the TDD Wiki_

Default view after adding component to the page

Suggested location and usage

Hover Text shown

See the Wiki Page from The Detail Department Wiki for more images and extensive examples for using this component.

Tips

This section can go into the Cookbook_

• Create a new Boolean Formula Field - eg Is Active (Is_Active__c) ISPICKVAL(Status__c,"Active")
• Create a new Text field that returns a 3 character (max) value based on Picklist values eg CASE(TEXT(Status__c),"Oh Hold","HLD","Waiting","WT!","Cancelled","X","ACT")
• Create a Formula for Is High Value Donor (Is_High_Value_Donor__c) and use $$$ as the text or the green money bag icon npo02__TotalOppAmount__c > $CustomMetadata.ReportingSettings__mdt.HighValueDonor.Amount__c
• You can traverse to parent field relationships by entering for example Account.IsActive__c on a Component on the Contact page.
• The Images can come from the Salesforce Logos page at https://login.salesforce.com/logos/. Copy the Logo URL value. If using images, the SLDS icon must still be entered, but you can enter a default icon like custom:empty
• To get icons in non-SLDS colours, use an external service like DaButtonFactory or eg IconS8 rounded square (replace the colour in the URL) to generate an icon with the text and download it. Add it to your Asset Library, make the image public, and grab the URL. You can use the images from the external service directly, but it may not be a good idea long term. But beware, it might look a bit crap mixing with the SLDS colours. You may also need to display an attribution somewhere on the page, depending on where the images come from.

Future Component Ideas

This section to go into the About page See Issues Register

Your ideas and your help is needed. This is my very first component so it may be a bit rough around the edges, and I welcome pull requests for suggestions on how to fix or improve it. But be kind, please.

Acknowledgements

• The coloured indicators idea came from the Weathervane App by Christian Carter and Beth Breisnes which was built for Classic and uses Custom Metadata Types. It has a few more features than this Component but it is something we can build upon later. It was a fabulous app but no longer supported as both have moved on to work at Salesforce.
• The Setup section came from Clint Chester's excellent Component, Helpful Links Component
• Further acknowledgements on my Wiki page.

Attribution

• Icon made by itim2101 from www.flaticon.com