5

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?

3

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.

  • I too read about it and realized can't use this event in a visualforce page. I am wondering if i change the whole page to lightning and then can the event be called? Also any other way to perform " Create Account " action in the controller in lightning how we use getKeyPrefix and do a set Redirect page reference in classic ? – Hitesh Jun 3 '16 at 6:46
  • The event can be called only in Lightning Experience/SF1,to make it work in your lightning component create a tab for the Lightning component(enough to view it in LEX) and it will be displayed in Other Items in the App Launcher.if you want it in SF1 added implements="force:appHostable" to the component and then Setup -> Mobile Navigation -> Added it to the Selected section – Praveen Jun 3 '16 at 7:01
  • I found {!URLFOR($Action.Account.New)} can be a secondary solution here. Though still it does not work as expected in my visualforce page. It does not throw any error just refreshes back to previous page. Salesforce documentation does'nt specify that this feature will not work in lightning so hoping to get that work here. – Hitesh Jun 7 '16 at 12:01
  • @Praveen : So my requirement is to have a button on a VF page to create an account with a prepopulated value. When I create a button on the VF page using above method and use the VF page in SF1 get the same error as Hitesh is getting. So what does mean by "It’s supported in Lightning Experience and Salesforce1 only."? Hitesh: Did you find any solution? – Lx123 Aug 18 '16 at 20:44
0

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"/>
  • Is their any other way to open the create record event form by using VF page? I tried injecting the above dependancy but it didn worked – Quddus Oct 15 '18 at 17:39
  • Were you able to debug this using the chrome/firefox console? This definitely has worked in the past... perhaps it's something that has been stopped in a new salesforce version. – Caspar Harmer Oct 15 '18 at 18:13
  • @casper: No worries, I figgured it out. I was passing arguments in the call back from the lightning component and it was failing without any errors. But i fixed that, I only issue I am seeing now here is the entire operation is little slow may be due to the call back and all it makes the processing a bit slow. – Quddus Oct 17 '18 at 7:03
0

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>
0

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.

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.