FlexCard Pattern #4:  Display Multiple, Related Records

Create beautiful lists of Salesforce records with FlexCards. This post is part of the FlexCard Design Thinking mini series.

This pattern assumes you want a FlexCard to use related record data on a record page (e.g. Account and Case data on a Case record).

---

Benefits / Lessons Learned

• There are several ways to get related record data. It just depends on what you want returned and how you structure your DataRaptor.
  • To get a list of records, see DataRaptor: Extract a List of Records.
  • To get fields from a related record (using a value from a master-detail or lookup relationship field), see the “Extend This: Grab Related Record Details” section of DataRaptor: Extract a Single Record.
    • Author’s Note: After creating tons of separate DataRaptors for getting a few fields from a related record, I finally (FINALLY) learned that if I was already querying the current record, I could just “reach through” a relationship field and grab field values from the related record.  Quelle bête!
• For really complicated data transformations, you can use an Integration Procedure. So far though, I’ve replaced every Integration Procedure I’ve ever created with a DataRaptor once I learned how to do something new.
• Blocks on a card can be marked as collapsible/expandable and you can control their default state. This is really helpful for hiding lots of mundane data on a layout while also including it / making it available to the user when they want to see it.

---

Example #1: Display a Single Related Record

In this example, you’re looking at a grant application record in an Experience Cloud site.

FlexCard #1 shows a related record, not the current record.

The FlexCard is looking at a relationship field on the application for the related grant program and then displaying program-related fields.

The DataRaptor required the grant application’s recordId as an input variable, and then I just followed the steps laid out in DataRaptor: Extract a Single Record.

FlexCard #2 is a header with record details (just like in FlexCard Pattern #2: Display Data From a Single Record). But in this example, I’m showing a little more than just the current grant application – I’m pulling data through relationship fields so I can display the application’s Account and Contact names.

To replicate, see Extend This: Grab Related Record Details.

The other FlexCard (#3) is a static content card (see FlexCard Pattern #1: Display Static Content).

---

Example #2

In this example, an officer’s performance evaluation record is displayed across multiple FlexCards that optimize data layout for a better user experience (and card performance). This is being shown in an Experience Cloud site, but the same cards are used in an LEX console app.

FlexCard #1 is a header card that contains a ton of administrative fields that were required for easy reference by the customer, but they cluttered the page when they were all visible. As a compromise, I included them in an expandable block that was collapsed by default (see second screenshot to see what it looks like fully expanded).

While most of these data points were fields from the main record, I pulled things like a Contact’s name and rank through a relationship field with the same exact DataRaptor (just like in Example #1 above).

The other FlexCards (#2, 3, and 4) are off-topic, but if interested they contain the body of the record. I had a lot of content and conditional rules to control visibility. So for my sanity, I broke up the content across multiple cards – one parent card (#2) to contain it all, with child cards (#3 and 4) embedded to display different sections of the record. Some of this content, including on-screen guidance and button, changed based on the status of the record and the role of the user looking at it.

---