How to Open Model/Popup using List View Button from the Related List in Salesforce

May 04, 2023

 

In this salesforce tutorial, we will discuss How can we open the model or popup from the list view button which exists on the related list of an object using salesforce flow. So, lets gets dive into this by the following steps.

Let's take an example. For this purpose, we create a custom object named Transaction Quoted and we want to see all the Transaction Quoted records in the table format according to selected the Opportunity from Account record-related list view button.

Note: We can not open the model/popup on the same page, it will redirect you to another page always.

 

To achieve this, we need to cover the following points:

  1. Create a Visualforce page in which we call a lightning application.
  2. Create a Lightning Application that includes the lightning component.
  3. Create a Lightning Component that calls the flow.
  4. Create a Lightning Web Component to show the record in table format.
  5. Create the apex controller to get all the opportunities in Salesforce.
  6. Create a Flow that invokes lightning web components by using a screen element.

 

Let discuss one by one with the help of the following point to achieve this:

  1. Create Process_Transaction_VF visualforce page:

 

<apex:page showHeader="false" sidebar="false" standardController="Transaction_Quoted__c" recordSetVar="TransactionQuotes">

<apex:includeLightning />

<div id="lightning" />

<script>

$Lightning.use("c:ProcessTransactionApp", function() {

$Lightning.createComponent("c:ProcessTransactionAura",

"",

"lightning",

function(cmp) {

// do some stuff

});

});

</script>

</apex:page>

 

 

2. Create ProcessTransactionApp Lightning Application:

<aura:application extends="ltng:outApp">

    <aura:dependency resource="c:ProcessTransactionAura" type="COMPONENT"/>

</aura:application>

 

3. Create ProcessTransactionAura Lightning Component:

ProcessTransactionAura.cmp file:

<aura:component implements="force:appHostable,force:hasRecordId,force:lightningQuickAction" access="global" >

<aura:attribute name="isOpen" type="Boolean" default="false" access="private"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<aura:if isTrue="{!v.isOpen}">

<div style="height: 640px;">

<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">

<div class="slds-modal__container">

<header class="slds-modal__header slds-modal__header_empty">

<lightning:buttonIcon iconName="utility:close" class="slds-modal__close" onclick="{!c.closeFlowModal}"/>

</header>

<div class="slds-modal__content slds-p-around_medium">

<lightning:flow aura:id="flow" onstatuschange="{!c.closeModalOnFinish}" />

</div>

</div>

</section>

<div class="slds-backdrop slds-backdrop_open"></div>

</div>

</aura:if>

</aura:component>

 

ProcessTransactionAuraController.js file:

 

({doInit : function(component, event, helper) {

component.set('v.isOpen', true);

var flow = component.find('flow');

flow.startFlow('Process_Transaction');

closeFlowModal : function(component, event, helper) {

closeModalOnFinish : function(component, event, helper) {

if(event.getParam('status') === "FINISHED") {

window.history.back();

})

 

 

(Important: Do not worry, we will create a flow named Process_Transaction in the next step.)

 

4. Create processTransactionTableList Lightning Web Component:

processTransactionTableList.html file

<template>

    <lightning-quick-action-panel header="Search for Batch by Opportunity">

        <template lwc:if={transList} >

            <lightning-datatable key-field="Id" data={transList} columns={columns} hide-checkbox-column="true">

            </lightning-datatable>

        </template>

    </lightning-quick-action-panel>

</template>

 

 

processTransactionTableList.js file

import { LightningElement, track, api } from 'lwc';

import { CloseActionScreenEvent } from 'lightning/actions';

import getTransactionQuotedRecords from '@salesforce/apex/ReusableLookupController.getTransactionQuotedRecords'

import NAME from '@salesforce/schema/Transaction_Quoted__c.Name';

import BATCH from '@salesforce/schema/Transaction_Quoted__c.Batch__c';

import receiveOppId from '@salesforce/apex/ReusableLookupController.receiveOppId'

export default class ProcessTransactionTableList extends LightningElement {

    @api recordId;

    @track  transList;

    @api oppId;

    @track

    columns = [

        {

            label: 'Name',

            fieldName: NAME.fieldApiName,

            editable: false,

            type: 'text',

        },

        {

            label: 'BATCH',

            fieldName: BATCH.fieldApiName,

            editable: false,

        },

        {

            label: 'AGENCY_NAME',

            fieldName: 'AGENCY_NAME',

            type: 'lookup',

        },

        {

            label: 'INDIVIDUAL_NAME',

            fieldName: 'INDIVIDUAL_NAME',

            editable: false,

        },

        {

            label: 'STATE_NAME',

            fieldName: 'STATE_NAME',

            editable: false,

        },

        {

            label: 'LICENSE_CLASS_NAME',

            fieldName: 'LICENSE_CLASS_NAME',

            editable: false,

        }

    ];

    connectedCallback(){

        console.log('TableList oppId-->>'+ this.oppId);

        getTransactionQuotedRecords({oppId:this.oppId})

        .then(result  => {  

            console.log('TableList result->' + result);

            console.log('TableList JSON.stringify(result)->' + JSON.stringify(result));

            let parsedData = JSON.parse(JSON.stringify(result))

            parsedData.forEach(ele => {

                if(ele.Agency__c != undefined )

                    ele.AGENCY_NAME = ele.Agency__r.Name;

                if(ele.Individual__c != undefined )

                    ele.INDIVIDUAL_NAME = ele.Individual__r.Name;

                if(ele.State__c != undefined )

                    ele.STATE_NAME = ele.State__r.Name;

                if(ele.License_Class__c != undefined )

                    ele.LICENSE_CLASS_NAME = ele.License_Class__r.Name;

            });

            this.transList = parsedData;

        })

        .catch(error => {

            this.errors = reduceErrors(error);

            console.log('TableList Eror', this.errors);

        });

    }

}

 

processTransactionTableList.metaxml file

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>56.0</apiVersion>

<isExposed>true</isExposed>

<targets>

<target>lightning__FlowScreen</target>

</targets>

<targetConfigs>

<targetConfig targets="lightning__FlowScreen">

<property name="oppId" label="SelectedOpportunityRecord" type="string" role="InputOnly"/>

</targetConfig>

</targetConfigs>

</LightningComponentBundle>

 

 

5. Create ReusableLookupController Apex Controller:

public with sharing class ReusableLookupController {

@AuraEnabled

public static List<Transaction_Quoted__c> getTransactionQuotedRecords(String oppId)

{

System.Debug(' getTransactionQuotedRecords ');

List<Opportunity> opps = [select Id, Invoice_Number__c from Opportunity where Id =: oppId];

String batchNumber = null;

if(opps.isEmpty())

return null;

batchNumber = opps[0].Invoice_Number__c;

System.Debug(' batchNumber ' + batchNumber);

String transmissionStatus = 'Ready to Submit';

List<Transaction_Quoted__c> lstTrnsactionQuoted = [select Name, Batch__c, Agency__r.Name, Individual__r.Name,State__r.Name, License_Class__r.Name from Transaction_Quoted__c limit 10];//where Batch__c =:batchNumber and Transmission_Status__c =:transmissionStatus];

System.Debug(' lstTrnsactionQuoted ' + lstTrnsactionQuoted);

return lstTrnsactionQuoted;

}

 

6. Create Process_Transaction Flow:

A. In the first step, we need to create a screen to select opportunity records. So, for that consider the following points:

  1. Drag the Screen Element from the Element tab on the canvas.
  2. Click on the Lookup input from the Component tab and fill in the information in the below figure. Please make sure that you mentioned the object API name for the desired object.
  3. Click on the Done button to completely create this screen element.

 

 

B. In the next step, create another screen which will invoke LWC by the following steps:

  1. Drag the Screen Element from the Element tab on the canvas.
  2. Select the Lightning Web Component from the Custom Component tab we just created in the above steps and fill the information like in the below figure.
  3. Click on the Done button to completely create this screen element.

 

 

Please take a look on the final flow structure:

 

 

Now we need to create a list view button on the Transaction Quoted object same like in the below figure:

(we put the button name as Process Transaction but you can change the button name whatever you want.)

 

 

 

 

Add this button on the related list using tab on the Account record page:

  1. Create a custom tab named Transaction on the Account record page.
  2. Drag the Dynamic Related List Single on the add component area.
  3. Click on the Add Action button and select the button we just created named Process Transaction.

 

 

Now we are done with this. When we click on the Process Transaction list view button from the Account record page, it will look like this:

 

 

When we select the opportunity record, it will all Transaction Record in the table format like:

 

 

When we click on the Next button, it will redirect you to on the Account record detail page back.

 

I hope this blog helped you!