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!
Type Flow in the setup menu
Click on the "New Flow" button to create a new flow
Select "Screen Flow"
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.
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
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 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
Last updated
Was this helpful?
Was this helpful?
