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>
