Build a Record Preview Page in Salesforce Screen Flow Using LWC : Shubham

August 01, 2025 August 01, 2025

Build a Record Preview Page in Salesforce Screen Flow Using LWC
by: Shubham
blow post content copied from SalesForce FAQs
click here to view original post

### Summary In Salesforce, when creating records through a screen flow, users cannot preview the information they enter before it gets saved. This can lead to incorrect data being stored. To address this issue, a solution was implemented by adding a preview screen that allows users to review and edit their input before finalizing the record creation. This article explains how to create a record preview page in Salesforce screen flow using Lightning Web Components (LWC). The process involves designing an LWC component to display the entered details, retrieving data from Salesforce, and integrating this component into the screen flow. ### Key Steps to Build a Record Preview Page 1. **Create an LWC Component**: - The component is named `recordPreview`, which consists of three files: - `recordPreview.html`: Designs the preview layout. - `recordPreview.js`: Retrieves data using public properties. - `recordPreview.js-meta.xml`: Specifies where the component can be used. 2. **Design the Preview Layout**: - The HTML file displays the user's input, such as name, email, phone, and event details. 3. **Integrate LWC in Screen Flow**: - Create a new screen flow in Salesforce. - Add input fields for user data and a second screen for the preview. - Include the LWC component in the preview screen to show the entered details. 4. **Final Steps**: - Add a Create Record element to save the data if everything is correct. - Provide options for users to edit their details if necessary. - Save and debug the flow before activation. ### Conclusion This method allows users to confirm their information before it is saved, reducing the chances of errors. The article also suggests further reading on related topics like sending custom notifications and using data tables in Salesforce flows. ### Additional Information - **Importance of Data Accuracy**: Ensuring that users can verify their entries before saving is crucial for maintaining data integrity in any system. - **Salesforce Flows**: A powerful tool for automating processes and enhancing user experience in Salesforce. ### Hashtags for SEO #Salesforce #LWC #ScreenFlow #DataPreview #SalesforceDevelopment #LightningWebComponents #Automation #DataIntegrity #SalesforceTips #UserExperience

When we create the records using screen flow in Salesforce, there is no option to preview the provided details. Without the preview, there is a chance that the record is getting saved with the wrong information.

As a solution for this issue, I added a preview screen that displays the entered details before creating the record. In this, the user can preview and correct the details.

In this article, we will learn about how to build a record preview page in Salesforce screen flow using LWC. In this context, I will explain how to display an LWC component in the screen flow and pass values to its variables.

Build a Record Preview Pane in Salesforce Screen Flow Using LWC

In Salesforce, when we create the records from the screen flow by providing values to the screen components, the record is directly saved as we hit the save button.

Next, we will add a preview screen to the screen flow, allowing us to validate details and edit any incorrect information.

We will achieve this using screen flow and LWC (Lightning Web Component) in Salesforce.

Create an LWC (Lightning Web Component) to Create a Preview Page in Salesforce

First, create an LWC component and provide a name, which will make the following files:

I have provided recordPreview as the LWC component name.

recordPreview.html (Page Design)
recordPreview.js (Retrieve Data from Salesforce Org)
recordPreview.js-meta.xml (Control Variables and Exposure)

1. recordPreview.html

In the HTML file below, we designed the page to display a preview after the user provides the value to register for an event.

In this process, we added all the fields we want to use when creating the record.

<template>
  <lightning-card title="Registration Preview">
    <div class="slds-p-around_medium">
      <p><strong>Name:</strong> {name}</p>
      <p><strong>Email:</strong> {email}</p>
      <p><strong>Phone:</strong> {phone}</p>
      <p><strong>Status:</strong> {status}</p>
      <p><strong>Registration Date:</strong> {registrationDate}</p>
      <p><strong>Event Name:</strong> {eventName}</p>
      <p><strong>Session Time:</strong> {sessionTime}</p>
    </div>
  </lightning-card>
</template>

2. recordPreview.js

Next, we use JavaScript to retrieve the values from the Salesforce org. We use @api in the JavaScript (.js) file of an LWC to expose properties and methods publicly.

import { LightningElement, api } from 'lwc';

export default class RecordPreviewFlow extends LightningElement {
  @api name;
  @api email;
  @api phone;
  @api status;
  @api registrationDate;
  @api eventName;
  @api sessionTime;
}

3. recordPreview.js-meta.xml

Now, after deploying the LWC component to the Salesforce org, we need to add a target where we want to add this component in Salesforce, whether it is a record page, homepage, app page, or Flows.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>59.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__FlowScreen</target>
  </targets>
  <targetConfigs>
    <targetConfig targets="lightning__FlowScreen">
      <property name="name" type="String" label="Name" />
      <property name="email" type="String" label="Email" />
      <property name="phone" type="String" label="Phone" />
      <property name="status" type="String" label="Status" />
      <property name="registrationDate" type="String" label="Registration Date" />
      <property name="eventName" type="String" label="Event Name" />
      <property name="sessionTime" type="String" label="Session Time" />
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

Create Screen Flow and Add LWC Component

Next, we will create a Screen Flow where we will create the registration form. For that, click on the Setup. -> Home Page. -> In the Quick Find Box, Search for Flows. You will see an option under Process Automation. -> Click on Flows.

In the flows setup window, click on the button New Flow -> Start From Scratch -> select the Screen Flow -> Next.

Then add the Screen Element to the flow canvas, provide a Label, and the API Name. In this screen, we will take input from the user.

Add the fields that you want to use to create record for Event Registration__c object. You can also create a section to add columns in a screen element.

Next, add another screen element to preview the details provided by the user. If we don’t have this screen, the record is saved directly in the object without a preview, which means there’s a chance of incorrect information being saved.

In this screen, we will add the LWC component that we created above. For that, go to the Components tab.

To find the component, you can either select the LWC component name you provided during creation or scroll down to the Custom section.

If you are not able to see the LWC component in the Flow Screen component, then make sure:

You have deployed the LWC component correctly.
Then, in the meta.xml file, you added the target of Flows.

Then, only you can access the LWC component in the Flows.

After adding the LWC component to the screen element in the right side panel, you will see the field label that you added in the meta.xml file, which takes values from the screen component and provides them to the LWC component to display as a preview.

In the fields, you need to provide the field API name that you provided to the input fields that you added in the input screen.

Add LWC Component in Screen Flow in Salesforce

After that, add a Create Record element to create the record for an object. If the provided details are correct, then you can click the Register For Event button to create a record.

If you want to edit details, then click on the Edit Details button to make the changes.

After that, you need to specify which object you want to create a record for. Here I provided Event Registration.

Then, in the Set Field Values for the object, we need to add a field from the Event Registration object and map the values from the input screen element.

Build a Record Preview Pane in Salesforce Screen Flow

Now we are ready to save the flow. To do this, click the Save button, provide a flow Label, and the API Name will be automatically populated.

After that, always debug the flow before activating it to ensure that the working flow is correct and that there are no runtime errors. Then activate the flow.

Salesforce Flow screen element showing custom LWC component

Proof of Concept:

Now, let’s provide the input for the fields that we added in the screen element and click the Next button to proceed.

Mapping flow variables to LWC input properties in Salesforce Flow

Now, before saving the record, you can see a preview of the details you provided as input to the fields, indicating whether they are correct or incorrect.

This preview page was created using an HTML file in an LWC component. If details are incorrect, then click the Edit Details button to make changes; otherwise, click the Register For Event button to create the record in the Event Registration object.

Build a Record Preview Page in Salesforce Screen Flow Using LWC

After the record is saved in the Event Registration object, you will see the confirmation screen (Optional) that I added after the Create Record Element, along with the Display Text component, which displays a message.

Then click the Finish button to end the process.

Screen Flow displaying record preview before submission

Next, as you navigate to the Event Registration object, you can see the record has been created successfully with the values the user provided.

LWC meta XML configuration for Flow usage

In this way, we can add the preview pane in the screen flow before the record gets saved in the Salesforce object.

Conslusion

In the screen element, we lack a feature to display the record details provided by the user in the input fields. We created a previous page using the LWC component and screen flow to display the details that the user provided before the record gets saved in the Salesforce object.

Salesforce Reader