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?


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 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 at 17:38
  • @Hiran did you implement it and try? May 17 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 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 at 18:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.