Insurance Insurance Policy Record Header Component

This component is composed of a FlexCard and the LWC compiled from the FlexCard:

• FlexCard: insInsurancePolicyHeader

• LWC: cfInsInsurancePolicyHeader

• Master Label: Insurance Insurance Policy Record Header

This component is optimized for both desktop and mobile.

This component uses the Lightning design system. Newport isn't supported.

Here's what the Insurance Policy Record Header component looks like when it's rendered in the Broker site:

The parts of this component are:

1. Policy icon.

2. The name of this policy.

3. The account name attached to this policy.

4. The effective date of this policy.

5. The type of policy.

6. The total premium for this policy.

7. Weather information at the policyholder's location.

8. Status of this policy.

9. Map showing the location of the policyholder.

FlexCard Structure

1. insRecordHeader Custom LWC

   This LWC structures data pulled from the record by the data source and adds the weather component from Google.

Data Sources Called by this Component

This component calls an Integration Procedure named InsRecordHeaderInsurancePolicy_getDetails as its data source.

If you want to change what data is pulled into the Insurance Insurance Policy Record Header, you can open and make changes to this Integration Procedure.

The JSON output of this Integration Procedure looks like this:

{
    "recordImage": "https://url.to/companylogo.jpg",
    "recordName": "Edge Communications",
    "fallbackIcon": "standard:account",
    "backgroundImage": "https://maps.googleapis.com/maps/api/staticmap?center=Salesforce%20Tower&size=400x300&key=API_KEY",
    "fields": {
        "Address": "123 Front St. San Francisco, CA 94040",
        "Lead Agent": "Aaron Smith",
        "Client Phone": "(512) 757-6000",
        "Total Premium": "$3,100.00",
        "Total Commission": "$425.00"
    },

    "weather": {
        "icon": "http://openweathermap.org/img/wn/10d.png",
        "description": "Sunny",
        "temperature": 75
    },

    "status": {
        "value": "Active",
        "fontColor": "#0070d2",
        "backgroundColor": "#b0c4df"
    }
}

Customize this Component

To learn about how to customize this kind of component, see the Digital Experience Site Component Customization Overview