Crafting a Profile Header

Overview

In this tutorial, you'll learn to design a screen flow featuring an attractive profile card using the Header component. We'll guide you through personalizing the header's design and features, and show you how to tailor various sections to resemble a profile header. Let's dive in!

Result

Steps

Create the screen flow

Type Flow in the setup menu

• Click on the "New Flow" button to create a new flow

• Select "Screen Flow"

Create a Get Records collection

Creating a "get records" collection is useful for fetching contact information from our Salesforce. This allows efficient retrieval of the contact data we need for this example. Additionally, by creating a "get records" collection, the process of retrieving the information can be automated and streamlined, saving time and reducing potential errors.

Adding the Get Records element

• Click on the + sign

• Select the "Get Records" element

• Enter a Get Records collection label

• Select the "Contact" object to get the contact records information

Creating the RecordID variable

We will now create a variable resource to store the current record ID. It will allow us to easily reference and use that information throughout our flow. Getting the contact record ID in a variable will be very useful to pass this into our data processing and manipulation flow.

Steps to follow to create the filter condition:

• In the field box, select ID

• Operator: Equals

• Select "New Resource" in the Value field to create the ContactID variable.

  • Resource Type: Variable

  • API Name: ContactID

  • Data Type: Record

  • Object: Contact

  • Available for input

  • Select ID from our new created variable.

  • Click "Done" and "Done"

Add the Header Component

Header component configuration

• Add a screen element

  • Enter an API name

  • Hide Header and Footer

• Drag the Header component

• Title: Record.FullName (by clicking on the Mapped button to map the correct field for the title)

• Caption: title

• Background image: add your image

• Is Joined: true

• Pull to Boundary true

• Is Text outsize: true

• Avatar:

  • Size: Xx large

  • Image =\> Upload image

  • Position: Bottom Center

When using this example on your Salesforce, don't forget to pass the RecordID when using App Builder to fetch the record ID information