Technology and Code in Use

How The Indicators Component is Created

The Basis of the Indicators Component is the Lightning Card component and the Avatar Component.

Setup of Indicators List

This was good to get the component out there, and good and easy for learning how to build a component, but using CMDT is way more flexible.

The design attributes take in all the setup values that are needed to display the card and each indicator. I would love these to be in an easier to edit format and potentially in CMDT in the future. Or maybe an advanced setup that is written in JSON (this idea has been mostly rejected though).

The setup checks to ensure that there is exactly the same number of settings in each field, and displays an error if there are any issues. (Thanks Clint for that code!).

The setup strips the semicolons from the field names and creates an array of field names. These are placed into an array with the Object Name (comes by default from placing the component on the page).

The Wire uses the Lightning uiRecordApi getRecord method to return the values from the fields listed in the array. This is how we can use getRecord without hard coding the field names. The optionalFields parameter is used so we do not display the indicator if the user does not have access to that field. (I could not get this working so it’s back to just using fields. Let me know if there is any issue with any errors arising from fields that users don’t have access to).

We use the uiRecordApi getFieldValue method to return the field value as that has the handy dandy feature of being able to traverse up the relationships. (Thanks Szandor for that idea!).

The Avatar component is conditionally rendered to only display if the field value is true (in Javascript that means a boolean true value OR text in a field).

So, a fully customisable, design attribute driven component that returns the fields that you chuck into an array, and displays them in pretty ways.