I'm trying to follow this Trailhead lesson:


In this, we can use a Visualforce page in Quick Action for Salesforce1 and also use the standard "Save" button in quick header bar at the top of screen.

I'm looking to follow the concept but want to use it inside Lightning Component (which has been placed into Visualforce via Lightning Out) and that Visualforce page is used in Quick Action. But I don't see any errors, also don't see the Save button Active or executing my debug code or intended code.

Am i following right path here or missing something?


I took the Trailhead example of simple creating an account with just a name. In the code below, the Lightning Component is not doing much. The entire thing could be done with Visualforce and all the logic is happening there.

Visualforce Page:

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

<apex:remoteObjects >
    <apex:remoteObjectModel name="Account" fields="Id,Name"/>
<apex:includeLightning />

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system.css')}" />
    <script src='/canvas/sdk/js/publisher.js'></script>


    <div class="slds">

        $Lightning.use("c:NameOfApp", function() {
            $Lightning.createComponent("c:NameOfComponent", {}, "nameOfComponent", function(cmp) {});

        // When the panel is displayed, enable the submit button
            name: "publisher.showPanel",
            onData: function(e) {
                    name: "publisher.setValidForSubmit",
                    payload: "true"

        // When the submit button is pressed, create an account, and close the panel
            name: "publisher.post",
            onData: function(e) {
                // Create the account using the Remote Object
                var accountName = document.getElementById("accountName").value;
                var account = new SObjectModel.Account();
                    Name: accountName
                }, function(error, records) {
                    if (error) {
                    } else {
                        //  Close the publisher panel
                            name: "publisher.close",
                            payload: {
                                refresh: "true"
            <div id="nameOfComponent"></div>

Lightning Component:

<aura:component >
    Account Name: <input type="text" id="accountName"/>

Lightning App:

<aura:application access="global" extends="ltng:outApp">
<aura:dependency resource="c:NameOfComponent" />

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.