1

We are using a Lightning Out and have a simple Input Box with a Button. The button when clicked, retrieves the value of the input box and inserts it in the MyCustom_Object__c.

When the lightning attribute type is of "MyCustom_Object__c" then the Lightning Out does not work, however, if we use the type "Object" it works. How do we expose MyCustom_Object__c in a Lightning Out?

<aura:attribute name="MyRecord" type="MyCustom_Object__c" access="GLOBAL"/>

versus

<aura:attribute name="MyRecord" type="Object" access="GLOBAL"/>

testComponent.cmp

<aura:component access="GLOBAL" controller="tempLightningOut" 
    <aura:attribute name="MyRecord" type="MyCustom_Object__c" access="GLOBAL"/>
    <p> Lightning Out Testing </p>
    <lightning:input aura:id="inputNameField" label="Name" name="inputNameField" />
    <lightning:button variant="brand" label="Submit" onclick="{! c.handleClick }" />
</aura:component>

testComponent.app

<aura:application extends="ltng:outApp"  implements="ltng:allowGuestAccess" access="GLOBAL" >

        <aura:dependency resource="markup://c:tempComponent" type="COMPONENT"/>


</aura:application>

testComponentController.js

handleClick : function(component, event, helper) {

    var cmp = component.find('inputNameField');

    var inputValue= cmp.get("v.value");


    helper.callServer(component,"c.insertRecord",function(response){
        var cmp = component.find('inputNameField');
        cmp.set('v.value','');



    },{
        inputValue: inputValue
    });

}

testComponentHelper.js

({
    callServer : function(component,method,callback,params) {
        var action = component.get(method);
        if (params) {
            action.setParams(params);
        }

        action.setCallback(this,function(response) {
            var state = response.getState();
            if (state === "SUCCESS") { 
                // pass returned value to callback function
                callback.call(this,response.getReturnValue());   
            } else if (state === "ERROR") {
                // generic error handler
                var errors = response.getError();
                if (errors) {
                    console.log("Errors", errors);
                    if (errors[0] && errors[0].message) {
                        throw new Error("Error" + errors[0].message);
                    }
                } else {
                    throw new Error("Unknown Error");
                }
            }
        });

        $A.enqueueAction(action);
    }
})

tempLightningOut Apex Controller

public class tempLightningOut {
        @AuraEnabled    
        public static void insertRecord(String inputValue) {

            MyCustom_Object__c rec = new MyCustom_Object__c();
            rec.name = inputValue;
            insert rec ;
        }        

 }

HTML

<script src="https://mydomain.cs62.force.com/lightning/lightning.out.js" type="text/javascript"> </script>

<script type="text/javascript">


    $Lightning.use("c:tempApp",    // name of the Lightning app
        function() {                  // Callback once framework and app loaded
            $Lightning.createComponent(
                "c:tempComponent", // top-level component of your app
                { },                  // attributes to set on the component when created
                "lightningLocator",   // the DOM location to insert the component
                function(cmp) {
                    // callback when component is created and active on the page
                }
            );


        },
        'https://mycommunityendpoint.cs62.force.com/communityendpointtest'  // Community endpoint
    );

</script>
</head>

<body >



        <div id="lightningLocator" style="height:100%;width:100%;"></div>
</body>
</html>

1 Answer 1

0

I am not sure this would help, but I can suggest using 2 best practice fixes:

  1. in your Visualforce do not include script <script src="https://mydomain.cs62.force.com/lightning/lightning.out.js" type="text/javascript"> </script>, Instead use <apex:includeLightning />

  2. in your app remove the markup: <aura:dependency resource="c:tempComponent" type="COMPONENT"/>

Hope this helps

2
  • For #2 it should be changed to testComponent and not removed. It is required for lightning out to create the dependency
    – Eric
    May 14, 2017 at 8:20
  • 1
    You are right - I meant to remove the Markup that he wrote in: ` <aura:dependency resource="markup://c:tempComponent" type="COMPONENT"/>` so it should be like that: <aura:dependency resource="c:tempComponent" type="COMPONENT"/> May 14, 2017 at 8:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .