Setting up FinancialForce Highlight Number Cards

This topic describes how to add the FF Highlight Number Card component to a Lightning Record page. For more information about the overall process, see Adding Customizable Lightning Components to FinancialForce Lightning Pages.

The number card displays the value contained in a number field on the object that the Lightning Record page corresponds to. A threshold can then be added to the number card; the threshold determines the color the number card will be displayed in.

The color of the number card changes when the field’s value is above or below the threshold that has been set. If the value does not match the threshold rules, the number card is displayed in the default color.

This section provides an example of the number cards that displays non billable hours submitted status for the milestone object for PSA Billing Manager.

The following table displays the values entered to set up the component.

Field Value Details
Number Field Non Billable Hours Submitted The field that relates to this Highlight Number card.
Label [Optional]   Leave blank to display the name of the corresponding number field.
Default Color [Optional] Gray The color that number card is displayed in. Gray is used as the default color unless you change it.
Greater Than Threshold Value [Optional] 2 If the value of the corresponding number field exceeds this threshold value, the number card is displayed in the color chosen for the Greater Than Threshold Color field.
Greater Than Threshold Color [Optional] Orange The color that the number card is displayed when the value of the corresponding number field exceeds the value specified in Greater Than Threshold Value field.
Less Than Threshold Value [Optional] 5 If the value of the corresponding number field is less than this threshold value, the number card is displayed in the color chosen for the Less Than Threshold Color field.
Less Than Threshold Color [Optional] Red The color that the number card is displayed when the value of the corresponding number field is less than the value specified in the Less Than Threshold Value field.

To add a Number Card to a Lightning record page:

  1. Edit the Lightning record page that you want to add the component to. Lightning App Builder is displayed.
  2. From the custom components list, drag the FF Highlight Number Card component on to the record page.
  3. In the properties pane, complete the following information:
    1. Select the field that you want to display on this number card.
    2. [Optional] Enter a custom label for the number field. Leaving this blank displays the default label for the selected field.
    3. [Optional] Select a default color for the number card.
    4. [Optional] Enter a value in the Greater Than Threshold Value field. When number field values are higher than the threshold, the number card is highlighted with the color defined in the Greater Than Threshold Color field.
    5. [Optional] Select the color to display when value is greater than the value specified in the Greater Than Threshold Value field.
    6. [Optional] Enter a value in the Less Than Threshold Value field. When number field values are lower than the threshold, the card is highlighted with the color defined in the Less Than Threshold Color field.
    7. [Optional] Select the color to display when a value is less than the value specified in the Less Than Threshold Value field.

      For more information on controlling component visibility, see the Salesforce Help.

  4. Save the page.