Setting up FinancialForce Highlight Date Cards

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

The date card displays the value contained in a date field on the corresponding object. A threshold can then be added to the date card; the threshold determines the color the date card will be displayed in.

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

This section provides an example of a date card that provides milestone information for a PSA service leader.

The component is configured to include the information for the target date for completion of the milestone.

The following information is displayed on the date card:

  • Displays the number of days left approaching the target date for completion of the milestone object.
  • Displays the number of days exceeded when the milestone object target date is completed.

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

Field Value Details
Date Field Target Date The date field that relates to this date card for the milestone object.
Highlight Date Title (Optional)   Leave blank to display the name of the corresponding date field.
Default Color (Optional) Gray

The color that the date card is displayed when the date in the date field does not matches the criteria set in Days Before Warning or Days Before at Risk fields.
Days Before Warning (Optional) 5

The number of days before the date specified in the corresponding date field when you want the date card to display in the warning color.
Warning Color (Optional) Orange The color that the date card is displayed when the value of the corresponding date field exceeds the value specified in Days Before Warning field.
Days Before at Risk (Optional) 10

The number of days before the date specified in the corresponding date field when you want the date card to display in the risk color.
At Risk Color (Optional) Red The color that the date card is displayed when the value of the corresponding date field exceeds the value specified in the Days Before at Risk field.
Number of Days to Reset Color After (Optional)   The number of days when the current calendar date has exceeded the date in the corresponding date field by the number of days specified. If left blank, the color of the date card remains in the last specified color.
Display Number of Days Badge   A checkbox to display the number of days before or the number of days after value as a badge on the date card.

To add a Highlight Date Card to a Lightning Record page:

  1. Edit the Lightning Record page you want to add the component to. The Lightning App Builder is displayed.
  2. Click and drag the FF Highlight Date Card component to the relevant part of the Lightning Record page layout. As you make changes to the component, the Lightning App Builder displays a preview of your updates.
  3. In the properties pane, complete the following information:
    1. Select the Date field that you want to display on this highlight date card. For example, target date field for the milestone object.
    2. [Optional] Enter a custom label for Date Field. Leaving this blank displays the default label for the corresponding date field.
    3. [Optional] Select the color to display the date card when the date specified in the corresponding Date Field is within the set criteria. If you leave the field blank, the default color is used to display the date card.
    4. [Optional] Enter the number of days before the date in the Date Field when you want the date card to display in the warning color.
    5. [Optional] Select the color to display the date card when today's date meets the criteria set in the Days Before Warning field. If you leave the field blank, the default color is used to display the date card.
    6. [Optional] Enter the number of days before the date in the Days Before Risk field when you want the risk color to be applied.
    7. [Optional] Select the color to display the date card when today's date exceeds the criteria set in the Days Before At Risk field. If you leave the field blank, the default color is used to display the date card.
    8. [Optional] Enter a value in the Number of Days to Reset Color After field. The default color is applied when the current calendar date is the specified number of days past the date in the Date Field. If left blank, the color of the date card remains as the last specified color.
    9. Select the Display Number of Days Badge checkbox to display the number of days before or the number of days after value as a badge on the date card.

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

  4. Save the page.