This topic describes how to add the FF Highlight Numbers Panel component to a Lightning record page. For more information about the overall process, see Adding Customizable Lightning Components to FinancialForce Lightning Pages.
Each panel displays up to three cards. Each card displays the value contained in a field on the object that the Lightning record page corresponds to. You can also add thresholds and associated colors to the cards to identify when the card value is higher or lower than these thresholds. If the value does not match the rules set by the threshold, the card is displayed in the default color.
Depending on the space available on the Lightning record page, highlight number panels are displayed horizontally or vertically on the page. If fewer than three cards are added to a highlight number panel, the cards are aligned vertically or horizontally from the top or right of the panel depending on its orientation.
|
Field |
Value |
Details |
|---|---|---|
| Highlight Numbers Panel Title | Project Status | Enter a title for the panel. When blank, the default title ‘Summary' is displayed. |
| Field 1 | Invoice Amount | Select a field on the object that corresponds to the Lightning record page. This field is displayed on the first card on the panel. |
| Field 1 Label (Optional) | Left blank | [Optional] Enter a custom label for Field 1. Leaving this blank displays the default label for the selected field. |
| Field 1 Default Color (Optional) | Grey | [Optional] The default color of the first card on the panel when the card value is within the threshold limits, or there are no threshold values. |
| Field 1 Greater Than Threshold Value (Optional) | 24,999 | [Optional] Enter a number in Field 1 Greater Than Threshold Value. When the value of the field selected as Field 1 is greater than this number the first card on this highlight number panel will be displayed in the color selected in the Field 1 Greater Than Threshold Color. |
| Field 1 Greater Than Threshold Color (Optional) | Green | [Optional] Select a color the first card is displayed in when the value in Field 1 is greater than the threshold set in Field 1 Greater Than Threshold Value. |
| Field 1 Less Than Threshold Value (Optional) | Left Blank | [Optional] Enter a number in Field 1 Less Than Threshold Value. When the value of the field selected as Field 1 is less than this number, the first card on this highlight number panel will be displayed in the color selected in the Field 1 Greater Than Threshold Color. |
| Field 1 Less Than Threshold Color (Optional) | Left Blank | [Optional] Select a color the first card is displayed in when the value in Field 1 is less than the threshold set in Field 1 Less Than Threshold Value. |
| Field 2 | Hours Remaining | Select a field on the object that corresponds to the Lightning record page. This field is displayed on the second card on the panel. |
| Field 2 Label (Optional) | Left Blank | [Optional] Enter a custom label for Field 2. Leaving this blank displays the default label for the selected field. |
| Field 2 Default Color (Optional) | Grey | [Optional] The default color of the second card on the panel when the card value is within the threshold limits, or there are no threshold values. |
| Field 2 Greater Than Threshold Value (Optional) | Left Blank | [Optional] Enter a number in Field 2 Greater Than Threshold Value. When the value of the field selected as Field 2 is greater than this number the second card on this highlight number panel will be displayed in the color selected in Field 2 Greater Than Threshold Color. |
| Field 2 Greater Than Threshold Color (Optional) | Left Blank | [Optional] Select a color the second card is displayed in when the value in Field 2 is greater than the threshold set in Field 2 Greater Than Threshold Value. |
| Field 2 Less Than Threshold Value (Optional) | 40 | [Optional] Enter a number in Field 2 Less Than Threshold Value. When the value of the field selected as Field 2 is less than this number, the second card on this highlight number panel will be displayed in the color selected in the Field 2 Less Than Threshold Color. |
| Field 2 Less Than Threshold Color (Optional) | Red | [Optional] Select a color the second card is displayed in when the value in Field 2 is less than the threshold set in Field 2 Less Than Threshold Value. |
| Field 3 | Open Defects | Select a field on the object that corresponds to the Lightning record page. This field is displayed on the third card on the panel. |
| Field 3 Label (Optional) | Left Blank | [Optional] Enter a custom label for Field 3. Leaving this blank displays the default label for the selected field. |
| Field 3 Default Color (Optional) | Grey | [Optional] The default color of the third card on the panel when the card value is within the threshold limits, or there are no threshold values. |
| Field 3 Greater Than Threshold Value (Optional) | 3 | [Optional] Enter a number in Field 3 Greater Than Threshold Value. When the value of the field selected as Field 3 is greater than this number the second card on this highlight number panel will be displayed in the color selected in the Field 3 Greater Than Threshold Color. |
| Field 3 Greater Than Threshold Color (Optional) | Red | [Optional] Select a color the third card is displayed in when the value in Field 3 is greater than the threshold set in Field 3 Greater Than Threshold Value. |
| Field 3 Less Than Threshold Value (Optional) | 2 | [Optional] Enter a number in Field 3 Less Than Threshold Value. When the value of the field selected as Field 3 is less than this number, the third card on this highlight number panel will be displayed in the color selected in the Field 3 Less Than Threshold Color. |
| Field 3 Less Than Threshold Color (Optional) | Green | [Optional] Select a color the third card is displayed in when the value in Field 3 is less than the threshold set in Field 3 Less Than Threshold Value. |
To add the FF Highlight Numbers Panel component to a Lightning record page:
- Edit the Lightning record page you want to add the component to. Lightning App Builder is displayed.
- Drag the FF Highlight Numbers Panel component on to the record page. Your changes are previewed in the component.
- In the properties pane, complete the following information:
- Enter a title for this highlight numbers panel. When left blank the default title ‘Summary' will be displayed.
- Select Field 1 on the record that you want to display in the first card on this highlight numbers panel.
- [Optional] Enter a custom label for Field 1. Leaving this blank displays the default label for the selected field.
- Select the default color that the first card on this highlight number panel will be displayed as when the criteria set in the relevant cards field greater than or less than threshold value are not met.
- [Optional] Enter a number in Field 1 Greater Than Threshold Value. When the value of the field selected as Field 1 is greater than this number the first card on this highlight number panel will be displayed in the color selected in the Field 1 Greater Than Threshold Color.
- [Optional] Select a color the first card is displayed in when the value in Field 1 is greater than the threshold set in Field 1 Greater Than Threshold Value
- [Optional] Enter a number in Field 1 Less Than Threshold Value. When the value of the field selected as Field 1 is less than this number, the first card on this highlight number panel will be displayed in the color selected in the Field 1 Greater Than Threshold Color.
- [Optional] Select a color the first card is displayed in when the value in Field 1 is less than the threshold set in Field 1 Less Than Threshold Value.
- [Optional] Complete the following information for the remaining two cards you want to display on this highlight number panel :
- Select the field on the record that you want to display in card 2 or 3 on this highlight numbers panel.
- [Optional] if you selected a field enter a custom label for the field. Leaving this blank displays the default label for the selected field.
- Select the default color that the related card on this highlight number panel will be displayed as when the criteria set in the relevant cards field greater than or less than threshold value are not met.
- [Optional] Enter a number in the relevant Field Greater Than Threshold Value. When the value of the corresponding field is greater than this number the related card will be displayed in the color selected in the corresponding Field Greater Than Threshold Color.
- [Optional] Select a color to display the corresponding card as when the value of the selected field is greater than the threshold set in the corresponding Field Greater Than Threshold Value.
- [Optional] Enter a number in the relevant Field Less Than Threshold Value. When the value of the corresponding field is less than this number the related card will be displayed in the color selected in the corresponding Field Greater Than Threshold Color.
- [Optional] Select a color to display the corresponding card as when the value of the selected field is greater than the threshold set in the corresponding Field Greater Than Threshold Value.
- [Optional] Apply additional filter logic to display the information that meets your specific requirements.
For more information on controlling component visibility, see the Salesforce Help.
- Click Save.
Example Highlight Number Panel
This section provides an example of FF Highlight Numbers Panel that highlights the status of a Project for a PSA Project Manager.
