Setting up FinancialForce KPI Cards

This topic describes how to add and configure an FF KPI Card component on a Lightning app page. For more information about the overall process, see Adding Customizable Lightning Components to FinancialForce Lightning Pages.

The card displays a KPI value that is calculated from the list view, and optionally a field for an object. You can set thresholds that determine the color of the card. If you don't set a threshold the card uses a default color.

To add and configure a KPI card on a Lightning app page:

  1. Edit the Lightning app page you want to add the component to. The Lightning App Builder is displayed.
  2. From the custom components list, drag the FF KPI Card component on to the page.
  3. In the properties pane, add the following details, as needed:
    • Enter the API name of the object that contains the information for the component. For custom objects, include the relevant namespace, such as pse__.
      Note: When adding a Salesforce object, check that it is supported. For more information, see Supported Objects in the User Interface API Developer Guide in the Salesforce Developers Help.
    • Select the API name of the list view that provides information for the card.

      To specify the standard All list view for a custom object, include the relevant namespace, such as pse__All.

    • [Optional] Enter a title for the card. Leave this blank to use the name of the list view.
    • Enter a description for the card. We recommend that you add a description.
    • [Optional] Enter the API name of the field used to calculate the KPI. If blank, the total number of records in the selected list view is used. Enter a field name to display the value of the field for all records in the list view.
    • Select the calculation type for the field name. If you have not entered a field API name, the default calculation type is Count.
    • [Optional] Enter a label for the KPI. If blank, the object name is used.
    • [Optional] Enter a value between 0 and 100 for the higher threshold. Card values higher than this are highlighted with the color defined in the Greater Than Threshold Color field.
    • [Optional] Select a color for the card when its value is higher than the value in the Greater Than Threshold Value field.
    • [Optional] Enter a value between 0 and 100 for the lower threshold. Card values lower than this are highlighted with the color defined in the Less Than Threshold Color field.
    • [Optional] Select a color for the card when its value is lower than the value in the Less Than Threshold Value field.
  4. For more information on controlling component visibility, see the Salesforce Help.

  5. Click Save.