Insurance Account Record Header Component

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

• FlexCard: insAccountHeader

• LWC: cfInsAccountHeader

• Label: Insurance Account Record Header

This component is optimized for either desktop or mobile.

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

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

The parts of this component are:

1. Icon for the Account

2. Account name

3. Account physical address

4. Contact phone number

5. Revenue

6. Weather at the account location

7. Map that displays the location of the account

FlexCard Structure

The FlexCard structure you can work with looks like this:

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 InsRecordHeader_getDetails as its data source.

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"
    }
}

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

Customize this Component

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