create a Modal/Popup on click button using aura method -- w3web.net

How to display a Modal/Popup on click button using aura method in lightning component | In lightning component how to display modal popup with a form inside using aura method in salesforce component

1,157 views

Hey guys, today in this post we are going to learn about how to display a Modal/Popup on click button with a form inside a lightning component using aura method.

Files we used in this post example:-

modalPopupaApp.app Lightning Application It is used for call the component to preview on browser.

modalPopupParent.cmp

Lightning Component It is parent component of "childPopup.cmp".

modalPopupParentController.js

Lightning Component Controller It is used for click functionality that gets the value from child component to aura method.
childPopup.cmp Lightning Component It is a child component of "modalPopupParent.cmp" and hold aura method with action method.
childPopupController.js Lightning Component Controller It is used for display and close the Modal/Popup.

Final Output

show modal popup in lightning component -- w3web.net

 

Other related post that would you like to learn in Salesforce

 

 

Step 1:- Create Lightning Application : modalPopupaApp.app

From Developer Console >> File >> New >> Lightning Application

modalPopupaApp.app [Component Application File]

Step 2:- Create Lightning Component : modalPopupParent.cmp

From Developer Console >> File >> New >> Lightning Component

modalPopupParent.cmp [Lightning Component File]

 

Step 3:- Create Lightning Component : modalPopupParentController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

modalPopupParentController.js [JavaScript Controller]

 

Step 4:- Create Lightning Component : childPopup.cmp

From Developer Console >> File >> New >> Lightning Component

childPopup.cmp [Lightning Component File]

 

Step 5:- Create Lightning Component : childPopupController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

childPopupController.js [JavaScript Controller]

 

 
 

Further post that would you like to learn in Salesforce

 

 

 

FAQ (Frequently Asked Questions)

How do I close the modal pop in Aura component?

The correct way to do that is to save the promise returned by showCustomModal() as an aura:attribute and use that to close the modal.

How do I create a modal popup in LWC?

Creating the modal popup is so easy in LWC and it's just few minutes of tasks. Modal Popup creates with the various methods will discuss only one of the way here. Create the Custom Component using VS code. In javascript, you only need to add or change in the value of the property.

What is force recordData?

A force:recordData component defines the parameters for accessing, modifying, or creating a record using Lightning Data Service. You have granular control on how you want to display or render the data in your custom component.

Related Topics | You May Also Like

  • Your reaction of the article ▾
 

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

3 thoughts on “How to display a Modal/Popup on click button using aura method in lightning component | In lightning component how to display modal popup with a form inside using aura method in salesforce component”

  1. You’re a beautiful inspiration. It really helps me in any situation. Where I stuck. Many of my friends told me to comment there post but I stuck what I should comment. Finally I got your post it always help me. Thanks for the lovely post.

    Reply

Leave a Comment