Optimizing user experience within Salesforce is crucial for efficiency and productivity. One key aspect is customizing how Screen Flows are displayed. By configuring Screen Flows to open as pop-ups rather than sidebars, users can focus on tasks without distraction, enhancing workflow fluidity. Let's explore how to seamlessly implement this adjustment for an improved Salesforce experience.
What is flow used for?
Flows in Salesforce are powerful tools used for automating business processes and guiding users through complex tasks with ease. They streamline repetitive tasks by automating processes such as data entry, updates, and record creation, reducing manual effort and ensuring consistency. Flows can integrate with various Salesforce components, including Visualforce pages, Apex classes, and external systems, making them versatile for diverse business needs.
In this blog, I will share the knowledge of how you can open screen flow as a pop-up. I have created a screen flow just to show you how to use it. I have just created a simple example of new Contact being created from an Account on the custom button click 'Create Contact'.
Step 1: Create a flow
Create a screen flow so that we can add it to the button click. I am creating a flow so that related contact will be created on Account.
Create a variable of type text.
Create a new screen flow, add a screen component drag and drop 2 text box names as First Name and Last Name, and make Last Name field as required.
Drag and drop Create Record and fill in the details.
Save and Activate the flow.
Step 2: Create an LWC component
Let's create an LWC component named as buttonRedirectToFlow.
In buttonRedirectToFlow.html inside the template create a lightning button, When the user clicks on the button then a modal will open.
Inside the modal, we have to create a lightning-flow and pass the flow-api-name of the flow we have created, and inside the flow-input-variable, we can pass the variable name.
<template>
<lightning-button variant="success" label={label.CREATE_CONTACT} onclick={showModalBox}></lightning-button>
<template if:true={isShowModal}>
<section role="dialog" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<lightning-icon class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" onclick={hideModalBox} icon-name="utility:close" variant="success" size="small"></lightning-icon>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<lightning-flow data-id="flow" flow-api-name='Create_Contact_on_Account' flow-input-variables={inputVariable} onstatuschange={handleFlowStatusChange}></lightning-flow>
</div>
<lightning-modal-footer>
<div class="slds-modal__footer_directional">
<lightning-button class="slds-align_absolute-center" label={label.CLOSE} onclick={hideModalBox}></lightning-button>
</div>
</lightning-modal-footer>
</div>
</section>
</template>
</template>In the buttonRedirectToFlow.js file create a variable named recordId to get the current ID of the Account.
When the user will click on the button then a showModalBox() method will be called, and here we can pass the value entered by the user in the input box of the contact creation. (like First Name and Last Name)
When the user clicks on the finish button then a lightning alert message will so as a success message.
import { LightningElement, api, track } from 'lwc';
import LightningAlert from 'lightning/alert';
import CREATE_CONTACT from '@salesforce/label/c.Create_Contact';
import CLOSE from '@salesforce/label/c.CLOSE';
import MESSAGE from '@salesforce/label/c.Record_Created_Successfully';
export default class ButtonRedirectToFlow extends LightningElement {
label = {
CREATE_CONTACT,
CLOSE,
MESSAGE
};
@track isShowModal = false;
@api recordId;
@track inputVariable = [];
showModalBox() {
this.isShowModal = true;
this.inputVariable = [{
name: "recordId",
type: "String",
value: this.recordId
}];
}
connectedCallback() {
this.recordId = this.recordId;
}
hideModalBox() {
this.isShowModal = false;
}
async handleFinish() {
this.isShowModal = false;
await LightningAlert.open({
message: this.label.MESSAGE,
theme: 'success',
label: this.label.CREATE_CONTACT,
});
}
handleFlowStatusChange(event) {
if (event.detail.status === 'FINISHED') {
this.handleFinish();
}
}
}We can target this component inside record page and home page.
<?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__RecordPage</target>
</targets>
</LightningComponentBundle>
Conclusion
By integrating Screen Flows as pop-ups, Salesforce users can experience a significant boost in efficiency and productivity. This customization minimizes distractions and keeps the user focused on the task at hand, resulting in a more fluid workflow. Throughout this blog, we demonstrated how to create and configure a Screen Flow to open as a pop-up via a custom button, using Lightning Web Components (LWC).
If you'd like to see the code and resources used in this project, you can access the repository on GitHub.To access the AVENOIRBLOGS repository, click here. Feel free to explore the code and use it as a reference for your projects.
Thank You! You can leave a comment to help me understand how the blog helped you. If you need further assistance, please contact us. You can click "Reach Us" on the website and share the issue with me.
Reference
https://www.avenoir.ai/post/convert-workflow-rules-to-flows-migrate-to-flow
https://www.avenoir.ai/post/communicate-to-unrelated-lwc-components-using-navigation-mixing
https://www.avenoir.ai/post/field-visibility-based-on-record-owner-using-dynamic-form
https://admin.salesforce.com/blog/2023/what-is-a-screen-flow
https://developer.salesforce.com/docs/component-library/bundle/lightning-modal/documentation
Blog Credit:
S. Dash
Salesforce Developer
Avenoir Technologies Pvt. Ltd.
Reach us: team@avenoir.ai