Create Modal/Popup Box In Lightning Component – Salesforce

28 comments

• Love this solution, works great!

  Reply

  • Thanks for your feedback @Bhargav

    Reply

    • I need help after saving a record from using standard create save i need to getback for the same button landing page

      Reply

• Hi Brahmaj,

  is there a way in which we can avoid scrolling of faded background.

  <div class=”slds-modal-backdrop slds-modal-backdrop–open” ></div>

  I mean in my scenario when modal popup opens , we can still scroll background.

   

  Reply

  • Hi Piyush
    try this One ,
    openModel: function(component, event, helper) {
    // for Display Model,set the “isOpen” attribute to “true”
    component.set(“v.isOpen”, true);
    document.body.style.overflow = “hidden”;
    },

    closeModel: function(component, event, helper) {
    // for Hide/Close Model,set the “isOpen” attribute to “Fasle”
    component.set(“v.isOpen”, false);
    document.body.style.overflow = “auto”;
    },

    likenClose: function(component, event, helper) {
    // Display alert message on the click on the “Like and Close” button from Model Footer
    // and set set the “isOpen” attribute to “False for close the model Box.
    alert(‘thanks for like Us :)’);
    component.set(“v.isOpen”, false);
    document.body.style.overflow = “auto”;
    },

    Hopes it helps
    Thanks

    Reply

• Hi Brahmaji,

  Your blog is amazing man. Good insight towards lightning. I have used your code base to create new records by enabling users to select record types. In tat we added that as a tab and on tat we have a button which navigates us to select records types.

  But can we setup a but on a detail page and clicking on the button should directly take us to the record type selection. Can you help me in guiding towards that.

  Appreciate your help

  Thank you.

  Reply

• Hi Brahmaji,

  I made a change in the component and was able to initiate the recordtype selection modal box on the click of a button on a detail page. Below is the code.

  <aura:component controller=”recordtypeController” implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction” access=”global”>
  <aura:handler name=”init” value=”{!this}” action=”{!c.openModal}”/>
  <aura:handler name=”init” value=”{!this}” action=”{!c.fetchListOfRecordTypes}”/>

  <aura:attribute name=”lstOfRecordType” type=”String[]” />
  <aura:attribute name=”isOpen” type=”boolean” default=”false” />

  ………………

  Rest of the code is as it is. So at the top, instead of the lightning button, I used aura:handler to initiate the action.

  But I am facing an issue here. The first time , when I click on the button and see the first recordtype – I click next – I see an error in the back ground “Error! Please contact your administrator” .

  Now when I change the recordtype and then click next, its working as expected.

  So I again reloaded the page,clicked on the button, changed to second recordtype and then changed it to the first record type which is displayed , it worked fine.

  So basically , as soon as the box loads I have to change the recordtype and then proceed. I am unable to capture any error in the inspect element as well.

  Can you tell me what could the issue be.

  Thank you

  Reply
• Pingback: Custom Record Type Selection Lightning Component -Salesforce Lightning

• I have created a record type of opportunity with three values.Now I want if any of the value is selected then a new popup window appears and lets me select some other feild.

   

  Can you suggest me how to proceed?

  Reply
• Pingback: Show Multiple Screens With progress indicator on Modal Box in Lightning Component

• Hi,
  This portal is really helping us a lot in our day to day lightning components implementation. Thanks.

  We have same requirement for modal/popup window, i have used the same code. Unfortunately it is not working for me. I have used the same code as above and created components, still it is not working for me. Please can you please suggest me, are there any other thing which we should take care while implementing the modal windows?

  Thanks and Regards,
  Sreeram.k

  Reply

  • Hi sreeram,
    can you elaborate your issue, and post your query in details here :
    https://developer.salesforce.com/forums
    and share URL here of your post, so i can look into it.

    Reply

• Hey Piyush, thanks for this awesome post. How do i capture the value (cancel and save) from the modal and display it above the button.

  Reply

• Hi,

  Please help me to solve this. I have override the New standard button with my Lightning Component. When I click on the New button, it should not clear the Recently viewed page, it should open on the same page. How to do this?

  Reply

• How to re-position the modal? currently modal is displaying in center of the page, I would like to re-position it in the top of the page.

  Please help!!!

  Thanks

   

   

  Reply

• Hi ,

  i am new to lightning and all together new to modals.

  I have received a requirement where i need to create a spinner, kind of a clock which should pop up for the pages where it takes more than 20sec to load the page. it is asked to use slds and make it as generic as possible.Also using modals they have asked to grey out the whole page and only this clock should pop up.

  How to achieve this.Please help!

  Regards,

  Deepika

  Reply

  • post your issue on developer forums in more details and share question URL here, so i can look into your issue. Thanks
    https://developer.salesforce.com/forums

    Reply

• Hi I want Multi Select Picklist values based on Recordtype so if any component pls Pass to me

  Reply

• Hi SFDC Monkey ,

  Can you please help me out for filtering Multiselect Picklist values based on RecordType.

  So if any code please help me out..and i have seen That blog related to Multiselect Picklist

  Please help me out

  Thanks & Regards

  Basavaraj.A

  9008544026

  [email protected]

  Reply
• Pingback: Dynamically Open Salesforce Files (Document) In Lightning Component

• Hi SFDC Monkey,

  I need to know how can I call the pop up through a standard button ? The button is basically placed on a standard lightning record page.

   

  Thanks.

  Reply

• Hello SFDC Monkey,

  Do you have a solution on how to make the SLDS-FADE-IN-OPEN work? Because even though you put slds-fade-in-open, it doesnt fade-in or out upon calling. Thank you

  Reply
• Pingback: Dynamic Reusable Custom List View In Salesforce Lightning Component

• Nice, easy introduction to modal popups!  Thank you!

  Reply
• Pingback: Display Popup/Modal Window In Salesforce Lightning Web Component

• Hi,
  Is this Modal functionality can be done thru Tab or custom object? I mean we have a requirement to show popup message when the Contract tab is click. if yes, please give a link for more information.

  Reply

• Hii i have placed a record edit form inside the modal as soon as I submit the record edit form the modal automatically gets close does anyone know why this is happening?

  Reply

• haii all,

  can someone help me i need a pop up whenever i tried to del record in lwc
  thanks in advanve
  [email protected]

  js file

  import { LightningElement,track,wire } from ‘lwc’;
  import {refreshApex} from ‘@salesforce/apex’;
  import {ShowToastEvent} from ‘lightning/platformShowToastEvent’;
  import { deleteRecord } from ‘lightning/uiRecordApi’;
  import getAccounts from’@salesforce/apex/listOfAccount.getAccounts’;
  import { NavigationMixin } from ‘lightning/navigation’;
  const actions = [
  { label: ‘Delete’, name: ‘Delete’ },
  { label: ‘Edit’, name: ‘Edit’ },
  ];
  const columns = [
  { label: ‘Name’, fieldName: ‘Name’,sortable:true,type:’text’},
  { label: ‘Industry’, fieldName: ‘Industry’, sortable:true,type:’text’ },
  {
  type:’action’,
  typeAttributes:{ rowActions: actions },
  }
  ];
  export default class DisplayRecordWithDataTable extends NavigationMixin(LightningElement) {
  @track sortBy;
  @track sortDirection;
  @track data;
  @track columns = columns;
  doSorting(event) {
  this.sortBy = event.detail.fieldName;
  this.sortDirection = event.detail.sortDirection;
  this.sortData(this.sortBy, this.sortDirection);
  }
  sortData(fieldname, direction) {
  let parseData = JSON.parse(JSON.stringify(this.data));
  // Return the value stored in the field
  let keyValue = (a) => {
  return a[fieldname];
  };
  // cheking reverse direction
  let isReverse = direction === ‘asc’ ? 1: -1;
  // sorting data
  parseData.sort((x, y) => {
  x = keyValue(x) ? keyValue(x) : ”; // handling null values
  y = keyValue(y) ? keyValue(y) : ”;
  // sorting values based on direction
  return isReverse * ((x > y) – (y > x));
  });
  this.data = parseData;
  }

  @wire(getAccounts)
  accounts(result) {
  if (result.data) {
  let nameUrl;
  this.data = result.data;
  this.error = undefined;
  } else if (result.error) {
  this.error = result.error;
  this.data = undefined;
  }
  }
  callRowAction(event) {
  const recId =  event.detail.row.Id;
  const actionName = event.detail.action.name;
  if ( actionName === ‘Edit’ ) {
  this[NavigationMixin.Navigate]({
  type: ‘standard__recordPage’,
  attributes: {
  recordId: recId,
  objectApiName: ‘Account’,
  actionName: ‘edit’
  }
  })

  } else if ( actionName === ‘Delete’) {
  deleteRecord(event.detail.row.Id)
  .then(()=>{
  this.dispatchEvent(new ShowToastEvent({
  title: ‘Success’,
  message: ‘Record deleted successfully’,
  variant: ‘success’
  }))
  window.location.reload();
  return refreshApex(this.getAccounts);
  })

  }
  }
  }

  html file
  <template>
  <lightning-card title=”Display Account Record List”>
  <div class=”slds-m-around_medium”>
  <template if:true = {accounts}>

  <lightning-datatable data={data} columns={columns} key-field=”id” hide-checkbox-column=”false”
  show-row-number-column=”true”
  onsort={doSorting}
  sorted-by={sortBy}
  sorted-direction={sortDirection}
  row-number-offset =”0″
  onrowaction={callRowAction}>
  ></lightning-datatable>
  </template>
  <template if:true = {error}>

  {error}>

  </template>
  </div>
  </lightning-card>
  </template>

  Reply