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

Question

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);
        }
    }
})

Answer 1

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");

Answer 2

You need to set force:hasRecordId in implements (note: you can set multiple "forces" by using "comma")

implements="force:lightningQuickActionWithoutHeader, force:hasRecordId"

The second thing, call get method on component as in this example:

var contractId = component.get("v.recordId");

Now you have the current record ID in contractId variable.

Answer 3

I am getting value till the helper, But I am not able pass this value to the component..

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

action.setParams({
            "acctId":accountId
        });

the below link have full details.. How to get current page id in Lightning controller?