0

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?

0

1 Answer 1

0

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 }"
                                    alternativeText="close"
                                    variant="bare-inverse"
                                    class="slds-modal__close"/>
            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">About Sfdcmonkey.com</h2>
        </header>
        
        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p>

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

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" />
   
    <script>
        $Lightning.use("c:yourAuracmp", function() {
            $Lightning.createComponent("c:yourAuracmp", {
            },
            "LightningCompContainer",
            function(component) {
               component.set("v.recordIdfromVF",'{!$CurrentPage.parameters.id}');
            });
        });
        
    </script>
    </apex:page>
10
  • 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 .