How to pass parameters for Lightning component called via quick a action

  • I have a lightning component which is included inside a visualForce page. When accessing the page directly with a url parameter 'Id' this works fine (component loads inside the vf page and display record details)

    My next step is to call this vf page from a quick action, so I created a quick action and referred the vf page.

    PROBLEM; when call from the quick action it doesn't set value to the "Id" parameter

    Can someone tell me what's wrong here, and provide an explanation?

    VF page

    <apex:page standardController="Account">
        <apex:includeScript value="/lightning/lightning.out.js" />
        <apex:stylesheet value="/resource/slds0120/assets/styles/salesforce-lightning-design-system-vf.css"/>
        <apex:includeLightning />
        <div class="slds" style="margin-top:10px;margin-left:10px;"> 
            <div id="lightning" />
        </div>
    
        <script>
            var accountId = "{!$CurrentPage.parameters.id}";
            console.log(accountId);
            $Lightning.use("c:AccountListWrapper1", function() {
              $Lightning.createComponent("c:AccountsList",
                    { "Id" : accountId },
                      "lightning",
                      function(cmp) {
                          alert("{!$CurrentPage.parameters.id}");
                        // do some stuff
                   });
            });
        </script>
    </apex:page>
    

    HELPER.JS (this.getURLParameter('id'); returns null when called via quick action :( )

        ({
         doInit : function(cmp, event, helper) {
             var accountId = this.getURLParameter('id');
             var action = cmp.get("c.getAccount");
             var params = {"id":accountId};
            action.setParams(params);
    
            var self = this;
            action.setCallback(this, function(response) {
                try {
                    self.actionResponseHandler(response, cmp, self, self.gotAccount);
                }
                catch (e) {
                    alert('Exception ' + e);
                }
            });
            $A.enqueueAction(action); 
        },
        gotAccount : function(cmp, helper, acc) {
            console.log(acc);
    
            cmp.set('v.account', acc);
        },
        getURLParameter : function(param) {
            var result=decodeURIComponent((new RegExp('[?|&]' + param + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
            return result;
        },
        actionResponseHandler : function (response, component, helper, cb, cbData) {
            try
            {
                var state = response.getState();
                if (state === "SUCCESS") {
                    var retVal=response.getReturnValue();
                    console.log('response');
                    console.log(response);
                    cb(component, helper, retVal, cbData);
                }
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            alert("Error message: " + errors[0].message);
                        }
                    } 
                    else {
                        alert("Unknown error");
                    }
                }
            }
            catch (e) {
                alert('Exception in actionResponseHandler: ' + e);
            }
        }
    })
    

    This is old thread, but it may help someone. You can now call lightning component directly from Quick Action, no need of VF page.

  • Hasantha

    Hasantha Correct answer

    6 years ago

    I resolved the issue with adding an attribute to the component and, set the account Id to the new attribute as follows and referred it back in the doInitit() helper method.

    New Attribute in component

    <aura:attribute name="accountId" type="String" />
    

    Changes to the script inside the .VFP (setting the value to the accountId component attribute )

    var accountId = "{!$CurrentPage.parameters.id}";
    
    $Lightning.use("c:AccountListWrapper1", function() {
    $Lightning.createComponent("c:AccountsList",
              { "accountId" : accountId },
                "lightning",
                 function(cmp) {
                    // do some stuff
               });
     });
    

    Accessed via doInit() method as follows

    var accountId = cmp.get("v.accountId");
    

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM