I want to open an Aura Component as a popup with a help of a button click in visual force page. Aura component contains set of records which will display in a table. Can any one help me with this. ?

Also does the Toast messages are supported when the Aura Component is inside an Aura App?


1 Answer 1


you can use lightning:isUrlAddressable and modals to display in as a pop up

 <aura:component implements="lightning:isUrlAddressable">
<aura:attribute name="recordIdfromVF" type="string"/>

    <div class="slds-modal__container">
        <header class="slds-modal__header">
            <lightning:buttonIcon iconName="utility:close"
                                    onclick="{! c.closeModel }"
            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">About Sfdcmonkey.com</h2>
        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

            <!--- ADD YOUR DATA TABLE HERE ---->
        <footer class="slds-modal__footer">
            <lightning:button variant="neutral" 
                                onclick="{! c.closeModel }"/>
            <lightning:button variant="brand" 
                                label="Like and Close"
                                title="Like and Close"
                                onclick="{! c.likenClose }"/>

Aura controller :

        doAction : function(component, event, helper) {
            var recordId=component.get("v.recordIdfromVF");
            alert('Id from VF'+recordId);
    openModel: function(component, event, helper) {
      // for Display Model,set the "isOpen" attribute to "true"
      component.set("v.isOpen", true);
   closeModel: function(component, event, helper) {
      // for Hide/Close Model,set the "isOpen" attribute to "Fasle"  
      component.set("v.isOpen", false);

in your VF javascript function which you call on button click:

<apex:page standardController="account" >
    <apex:includeLightning />
    <div  id="LightningCompContainer" />
        $Lightning.use("c:yourAuracmp", function() {
            $Lightning.createComponent("c:yourAuracmp", {
            function(component) {
  • is there in possible way to pass the ID of the record to Aura component with the button click?
    – Hiran
    May 17, 2021 at 17:29
  • And this will open the component in a new window. Correct? Not as a popup in the same window. I want to open the aura component as a popup in the same window.
    – Hiran
    May 17, 2021 at 17:38
  • @Hiran did you implement it and try? May 17, 2021 at 17:47
  • @Hiran I updated the code to pass the ID, please select it as answer if it helps you so it can help anyone in future. May 17, 2021 at 18:19
  • Yes I Did. And it opens in a new window. Not in the same window as a popup. Thank you for the ID Passing Part.
    – Hiran
    May 17, 2021 at 18:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .