Saturday, August 31, 2019

How to create modal box in lightning by dynamic component creation

Today i will be going to explain how we can dynamically create component using
$A.createComponent and display information using showCustomModal in lightning.

To explain this i am going to use an input text field and based on the search i am going to display accounts information using lightning card and inside lightning card i will be going to display lightning button and on click of which i will be going to create a component dynamically using $A.createComponent to which i will be passing account id and this component will display account details using lightning:recordForm in read only mode in modal box which will be displayed using showCustomModal. 



<aura:component controller="searchAccountController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global">
    <aura:attribute name="keywordHolder" type="string" />
    <aura:attribute name="accountList" type="list" />
    <aura:attribute name="AccountIdForDisplayingDeatil" type="string"/>
    <lightning:input name="AccountSearch"  label="Enter Account Name" value="{!v.keywordHolder}"/>
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <lightning:button label="Search Account" onclick="{!c.findAccount}" />
    <div class="slds-grid slds-wrap">
    <aura:iteration var="acc" items="{!v.accountList}" indexVar="index" >
        <div class="slds-col slds-size_1-of-4 slds-p-around_small">
    <lightning:card title="Account Info" >
        <aura:set attribute="actions">
                <lightning:button name="{!acc.Id}" onclick="{!c.showDetails}" label="FULL DETAILS"/>
        <p class="slds-p-horizontal_small">
        <b>Account Name:</b> {!acc.Name}<br></br>
        <b>Account Type:</b> {!acc.Type}<br></br>
        <b>Account Industry:</b> {!acc.Industry} <br></br>
        <b>Account Phone:</b> {!acc.Phone}<br></br>


    findAccount: function(component, event, helper) {
        var action = component.get('c.fetchAccount');
            searchKeyWord: component.get("v.keywordHolder")
        action.setCallback(this, function(response) {
            var state = response.getState();
            var response1 = response.getReturnValue();
            if (state === "SUCCESS") {
                component.set("v.accountList", response1);
    showDetails: function(component, event, helper) {
        var eventSource = event.getSource();
        var accId = eventSource.get('');
        var modalBody;
        $A.createComponent("c:ShowCompleteAccountDetail", {
            "accountId": accId
        }, function(content, status) {
            if (status === 'SUCCESS') {
                //alert('Inside success');
                       header: "Account Detail",
                       body: modalBody, 
                       showCloseButton: true,
                       closeCallback: function() {
                           alert('You closed the alert');


<aura:component >
    <aura:attribute name="accountId" type="string"/>
    <div class="sld-p-around_small">
        mode="readonly" />


public class searchAccountController {
 public static List < account > fetchAccount(String searchKeyWord) {
  String searchKey = searchKeyWord + '%';
  List < Account > returnList = new List < Account > ();
  List < Account > lstOfAccount = [select id, Name, Type, Industry, Phone, Fax from account where Name LIKE: searchKey limit 10];

  for (Account acc: lstOfAccount) {
  return returnList;


No comments:

Post a Comment