function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
teena jacobteena jacob 

How to display response value in modal pop window in salesforce lightning component.

Hi,
      I have created a lightning component with a model pop window on button click function. When I click the button pop will open and calls a method in apex controller and will get the response(list of events) in the same lighting component. I need to show the result in the same popup box.

How can I able to achieve this, Any suggestion on how to resolve.

Thank you,
Teena Treesa

Best Answer chosen by teena jacob
Khan AnasKhan Anas (Salesforce Developers) 
Hi Teena,

I trust you are doing very well.

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

If you click on Show PopUp button, related contacts (from server controller) will display in Popup box.

Component:
<aura:component controller="ModalPopup_TaskSvrController"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" 
                access="global" >
	
    <aura:attribute name="PageHeading" type="String" default="MODAL POPUP" />
    <aura:attribute name="mydata" type="List"/>
    <aura:attribute name="accdata" type="List"/>
    <aura:attribute name="mydata1" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />
    
    <div class="slds-m-top--xx-large">
    	<div class="slds-page-header">
    		<div class="slds-align--absolute-center">
        		<div class="slds-text-heading--large">       
    				{!v.PageHeading}
                </div>
        	</div>
    	</div>
    </div>
    <br/> <br/>
    
    <div class="slds-section slds-is-open">
        <h3 class="slds-section__title slds-theme_shade">
      		<span class="slds-truncate slds-p-horizontal_small" title="Section Title">Accounts</span>
  		</h3>
        <br/>
        <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
            <thead>
                <tr class="slds-text-heading--label">
                    <th scope="col"><div class="slds-truncate" title="Account Name">Account Name</div></th>
                    <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                    <th scope="col"><div class="slds-truncate" title="Add" aura:id="selectAll"></div></th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.mydata}" var="row" indexVar="index">
                    <tr>
                        <th scope="row"><div class="slds-truncate" title="{!row.Name}">{!row.Name}</div></th>
                        <td><div class="slds-truncate" title="{!row.Phone}">{!row.Phone}</div></td>
                        <td>
                            <div>                           
                                <lightning:button label="Show PopUp"
                                                  value="{!row}"
                                                  name="{!index}"
                                                  iconName="utility:new_window"
                                                  iconPosition="left"
                                                  variant="brand"
                                                  onclick="{!c.showPopup}"
                                                />
                            </div>
                        </td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
    
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal slds-modal_large">
    	<div class="slds-modal__container" style="width: 40%;">
        	<div class="slds-modal__header">
            	<p>Account Details</p>
            </div>
            <div class="slds-modal__content slds-p-around--medium">  
            	<!--<aura:iteration items="{!v.accdata}" var="acc">
                	Account Name : <ui:outputText value="{!acc.Name}" />
                    <br/><br/>
                    Phone : <ui:outputText value="{!acc.Phone}" />
                </aura:iteration>-->
                
                <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
            <thead>
                <tr class="slds-text-heading--label">
                    <th scope="col"><div class="slds-truncate" title="Contact Name">Contact Name</div></th>
                    <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                    <th scope="col"><div class="slds-truncate" title="Add" aura:id="selectAll"></div></th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.mydata1}" var="row1" indexVar="index">
                    <tr>
                        <th scope="row"><div class="slds-truncate" title="{!row1.Name}">{!row1.Name}</div></th>
                        <td><div class="slds-truncate" title="{!row1.Phone}">{!row1.Phone}</div></td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
                
            </div>
            <div class="slds-modal__footer">
            	<lightning:button label="close" onclick="{!c.closeModal}" />
            </div>
        </div>
    </div>
</aura:component>

Controller:
({
	doinit : function(component, event, helper) {
		var action = component.get('c.fetchAcc');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                console.log("allValues--->>> " + allValues);
                component.set('v.mydata', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
	},
    
    showPopup : function(component, event, helper){
        var cmpTarget = component.find('Modalbox');
		var cmpBack = component.find('Modalbackdrop');
		$A.util.addClass(cmpTarget, 'slds-fade-in-open');
		$A.util.addClass(cmpBack, 'slds-backdrop--open'); 
        
        var rowRecord = event.getSource().get('v.value');
        console.log('rowRecord--->>> ' + JSON.stringify(rowRecord));        
        //component.set('v.accdata',rowRecord);
        
        var action = component.get('c.fetchCon');
        action.setParams({rid : rowRecord.Id});
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                console.log("allValues--->>> " + allValues);
                component.set('v.mydata1', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    closeModal : function(component, event, helper){
        var cmpTarget = component.find('Modalbox');
		var cmpBack = component.find('Modalbackdrop');
		$A.util.removeClass(cmpBack,'slds-backdrop--open');
		$A.util.removeClass(cmpTarget, 'slds-fade-in-open');
    }
})

CSS:
.THIS {
}

.THIS .slds-section__title{
    background-color: YellowGreen;
    color: white
}
.THIS .slds-modal__header{
    background-color: OliveDrab;
    color: white
}

Apex Controller:
public class ModalPopup_TaskSvrController {
	
    @AuraEnabled
    public static List<Account> fetchAcc (){
        return [SELECT Id, Name, Phone FROM Account LIMIT 50];
    }
    
    @AuraEnabled
    public static List<Contact> fetchCon (String rid){
        return [SELECT Id, Name, Phone FROM Contact WHERE accountId=:rid];
    }
}


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Teena,

I trust you are doing very well.

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

If you click on Show PopUp button, related contacts (from server controller) will display in Popup box.

Component:
<aura:component controller="ModalPopup_TaskSvrController"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" 
                access="global" >
	
    <aura:attribute name="PageHeading" type="String" default="MODAL POPUP" />
    <aura:attribute name="mydata" type="List"/>
    <aura:attribute name="accdata" type="List"/>
    <aura:attribute name="mydata1" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />
    
    <div class="slds-m-top--xx-large">
    	<div class="slds-page-header">
    		<div class="slds-align--absolute-center">
        		<div class="slds-text-heading--large">       
    				{!v.PageHeading}
                </div>
        	</div>
    	</div>
    </div>
    <br/> <br/>
    
    <div class="slds-section slds-is-open">
        <h3 class="slds-section__title slds-theme_shade">
      		<span class="slds-truncate slds-p-horizontal_small" title="Section Title">Accounts</span>
  		</h3>
        <br/>
        <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
            <thead>
                <tr class="slds-text-heading--label">
                    <th scope="col"><div class="slds-truncate" title="Account Name">Account Name</div></th>
                    <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                    <th scope="col"><div class="slds-truncate" title="Add" aura:id="selectAll"></div></th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.mydata}" var="row" indexVar="index">
                    <tr>
                        <th scope="row"><div class="slds-truncate" title="{!row.Name}">{!row.Name}</div></th>
                        <td><div class="slds-truncate" title="{!row.Phone}">{!row.Phone}</div></td>
                        <td>
                            <div>                           
                                <lightning:button label="Show PopUp"
                                                  value="{!row}"
                                                  name="{!index}"
                                                  iconName="utility:new_window"
                                                  iconPosition="left"
                                                  variant="brand"
                                                  onclick="{!c.showPopup}"
                                                />
                            </div>
                        </td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
    
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal slds-modal_large">
    	<div class="slds-modal__container" style="width: 40%;">
        	<div class="slds-modal__header">
            	<p>Account Details</p>
            </div>
            <div class="slds-modal__content slds-p-around--medium">  
            	<!--<aura:iteration items="{!v.accdata}" var="acc">
                	Account Name : <ui:outputText value="{!acc.Name}" />
                    <br/><br/>
                    Phone : <ui:outputText value="{!acc.Phone}" />
                </aura:iteration>-->
                
                <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
            <thead>
                <tr class="slds-text-heading--label">
                    <th scope="col"><div class="slds-truncate" title="Contact Name">Contact Name</div></th>
                    <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                    <th scope="col"><div class="slds-truncate" title="Add" aura:id="selectAll"></div></th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.mydata1}" var="row1" indexVar="index">
                    <tr>
                        <th scope="row"><div class="slds-truncate" title="{!row1.Name}">{!row1.Name}</div></th>
                        <td><div class="slds-truncate" title="{!row1.Phone}">{!row1.Phone}</div></td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
                
            </div>
            <div class="slds-modal__footer">
            	<lightning:button label="close" onclick="{!c.closeModal}" />
            </div>
        </div>
    </div>
</aura:component>

Controller:
({
	doinit : function(component, event, helper) {
		var action = component.get('c.fetchAcc');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                console.log("allValues--->>> " + allValues);
                component.set('v.mydata', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
	},
    
    showPopup : function(component, event, helper){
        var cmpTarget = component.find('Modalbox');
		var cmpBack = component.find('Modalbackdrop');
		$A.util.addClass(cmpTarget, 'slds-fade-in-open');
		$A.util.addClass(cmpBack, 'slds-backdrop--open'); 
        
        var rowRecord = event.getSource().get('v.value');
        console.log('rowRecord--->>> ' + JSON.stringify(rowRecord));        
        //component.set('v.accdata',rowRecord);
        
        var action = component.get('c.fetchCon');
        action.setParams({rid : rowRecord.Id});
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                console.log("allValues--->>> " + allValues);
                component.set('v.mydata1', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    closeModal : function(component, event, helper){
        var cmpTarget = component.find('Modalbox');
		var cmpBack = component.find('Modalbackdrop');
		$A.util.removeClass(cmpBack,'slds-backdrop--open');
		$A.util.removeClass(cmpTarget, 'slds-fade-in-open');
    }
})

CSS:
.THIS {
}

.THIS .slds-section__title{
    background-color: YellowGreen;
    color: white
}
.THIS .slds-modal__header{
    background-color: OliveDrab;
    color: white
}

Apex Controller:
public class ModalPopup_TaskSvrController {
	
    @AuraEnabled
    public static List<Account> fetchAcc (){
        return [SELECT Id, Name, Phone FROM Account LIMIT 50];
    }
    
    @AuraEnabled
    public static List<Contact> fetchCon (String rid){
        return [SELECT Id, Name, Phone FROM Contact WHERE accountId=:rid];
    }
}


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas
This was selected as the best answer
Raj VakatiRaj Vakati
Use lightning:notificationsLibrary  Library...  Include one <lightning:notificationsLibrary aura:id="notifLib"/> tag in the component that triggers the notifications, where aura:id is a unique local ID. Only one tag is needed for multiple notifications.

 
<aura:component>
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <lightning:button name="notice" label="Show Notice" onclick="{!c.handleShowNotice}"/>
</aura:component>
 
({    
    handleShowNotice : function(component, event, helper) {
        component.find('notifLib').showNotice({
            "variant": "error",
            "header": "Something has gone wrong!",
            "message": "Unfortunately, there was a problem updating the record.",
            closeCallback: function() {
                alert('You closed the alert!');
            }
        });
    }
})