Lightning : Issue while calling createRecord Event Component

Question

I am trying to embed a lightning component inside a visualforce page -

MytestVFPage visualforce page-

<apex:outputPanel >
       <div id="lightning" />
        <script>
            $Lightning.use("c:createAccountGlobalApp", function() {     
            $Lightning.createComponent("c:CreateAccount",
                                       {},
                                       "lightning",
                                       function(component) {});
        });

        </script>
  </apex:outputPanel>


**createAccountGlobalApp** container -

<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="c:CreateAccount"/>
</aura:application>

**createAccount** component -
<aura:component >
    <div class = "container">
        <ui:button label="Lightning button" press="{!c.createAccountButton}">    </ui:button>
    </div>
</aura:component>

createAccountController.js controller

({
    createAccountButton : function(component, event, helper) {
        helper.createRecord(component);
    }
})

createAccountHelper.js helper-

({
    createRecord:function(component) {
            var createRecordEvent = $A.get("e.force:createRecord");
            createRecordEvent.setParams({
            "entityApiName": "Account"

            });
    createRecordEvent.fire();
    }
})

When I click on the UI button inside visualforce page it throws an error -

"Something has gone wrong. Action failed: c$CreateAccount$controller$createAccountButton [TypeError: Cannot read property 'setParams' of undefined] Failing descriptor: {c$CreateAccount$controller$createAccountButton}. Please try again. "

Can you please help what is wrong here?

Answer 1

I'm afraid you cannot use force:createRecord outside of LEX/SF1, below is the note from the doc.

force:createRecord event is handled by the one.app container. It’s supported in Lightning Experience and Salesforce1 only. If used outside of Lightning Experience or Salesforce1, this event won’t be handled automatically. To use this event outside of one.app, create and wire up an event handler of your own.

Looks like you have to build an custom component to get the account details input and create it.

Answer 2

A sneaky way to get this to work would be to pass in a callback to the VF page.

So you'd call createComponent like so, but include a callback:

$Lightning.use("c:createAccountGlobalApp", function() {     
    $Lightning.createComponent(
        "c:CreateAccount",
        { callback:function(){
            window.location =  '{!URLFOR($Action.Account.New)}';
          }
        },
        "lightning",
        function(component) {});

Your create record handler would then look like:

({
    createRecord:function(component) {
        var callback = component.get("v.callback");
        if (callback){
            callback();
        }
    }
})

And you would also need to define the callback as a global attribute (the type doesn't really matter as javascript will just execute it anyway - I normally just make it of type string)

<aura:attribute name="callback" type="String" description="Call this to communicate results to visualforce page" access="global"/>

Answer 3

Please inject following dependency into your application.

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:CreateAccount"/>
    <!-- Load the navigation events in the force namespace. -->
    <aura:dependency resource="markup://force:*" type="EVENT"/>
</aura:application>

Answer 4

Tried contacting SF support and got to know that {!URLFOR($Action.Account.New)} is declared to be a bug and is being tracked by the salesforce R&D team. Possible solution are -

a. Write your own Event Handler b. Change the whole page to Lightning page and use createRecord event.