You need to sign in to do that
Don't have an account?

Trailhead Challenge: Connect to Salesforce with Server-Side Controllers - Not able to create data from the lightning page
HI All,
i need some help
i am stuck at there part where i am not able to save the data from the page to the database, and the strange part is, that with my below code i am able to clear the challange
below is my code
CampingList.cmp
<aura:component controller="CampingListController">
<aura:attribute name="items" type="Camping_Item__c[]"/>
<aura:attribute name="newItem" type="Camping_Item__c" default="{'Name':'',
'Quantity__c':0,
'Price__c':0,
'Packed__c':false,
'sobjectType':'Camping_Item__c'}"/>
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<c:campingHeader />
<!-- NEW Item entry FORM -->
<lightning:layout >
<lightning:layoutItem padding="around-small" size="6">
<!-- CREATE NEW Item -->
<div aria-labelledby="newCampaingform">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newCampaingform" class="slds-text-heading--small
slds-p-vertical--medium">
Add Expense
</legend>
<!-- CREATE NEW EXPENSE FORM -->
<form class="slds-form--stacked">
<!-- For Name Field -->
<lightning:input aura:id="expenseform" label="Camping Name"
name="expensename"
value="{!v.newItem.Name}"
required="true"/>
<!-- For Quantity Field -->
<lightning:input type="number" aura:id="campingform" label="Quantity"
name="expenseamount"
min="1"
value="{!v.newItem.Quantity__c}"
messageWhenRangeUnderflow="Enter minimum 1 Quantity"/>
<!-- For Price Field -->
<lightning:input aura:id="campingform" label="Price"
formatter="currency"
name="expenseclient"
value="{!v.newItem.Price__c}"
/>
<!-- For Check Box -->
<lightning:input type="checkbox" aura:id="campingform" label="Packed"
name="expreimbursed"
checked="{!v.newItem.Packed__c}"/>
<lightning:button label="Create Camping"
class="slds-m-top--medium"
variant="brand"
onclick="{!c.createItem}"/>
</form>
</fieldset>
</div>
</lightning:layoutItem>
</lightning:layout>
<!-- ITERATIING ITEM LISTS -->
<div class="slds-card slds-p-top--medium">
<c:campingHeader />
<section class="slds-card__body">
<div id="list" class="row">
<aura:iteration items="{!v.items}" var="item">
<c:campingListItem item="{!item}"/>
</aura:iteration>
</div>
</section>
</div>
<!-- / ITERATIING ITEM LISTS -->
</aura:component>
CampingListController.js
({
doInit: function(component, event, helper) {
// Create the action
var action = component.get("c.getItems");
// Add callback behavior for when response is received
action.setCallback(this, function(response) {
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
component.set("v.items", response.getReturnValue());
}
else {
console.log("Failed with state: " + state);
}
});
// Send action off to be executed
$A.enqueueAction(action);
},
createItem: function(component, event, helper) {
var newCamping = component.get("v.newItem");
helper.createItem(component, newCamping);
}
})
CampingListHelper.js
({
createItem: function(component, camping) {
var action = component.get("c.saveItem");
action.setParams({
"item": camping
});
action.setCallback(this, function(response){
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
var campings = component.get("v.items");
campings.push(response.getReturnValue());
component.set("v.items", campings);
}
});
$A.enqueueAction(action);
}
})
CampingListController
public with sharing class CampingListController{
@AuraEnabled
public static List<Camping_Item__c> getItems(){
return [Select id, name, Packed__c, Price__c, Quantity__c from Camping_Item__c];
}
@AuraEnabled
public static Camping_Item__c saveItem(Camping_Item__c Item){
upsert Item;
return Item;
}
}
i need some help
i am stuck at there part where i am not able to save the data from the page to the database, and the strange part is, that with my below code i am able to clear the challange
below is my code
CampingList.cmp
<aura:component controller="CampingListController">
<aura:attribute name="items" type="Camping_Item__c[]"/>
<aura:attribute name="newItem" type="Camping_Item__c" default="{'Name':'',
'Quantity__c':0,
'Price__c':0,
'Packed__c':false,
'sobjectType':'Camping_Item__c'}"/>
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<c:campingHeader />
<!-- NEW Item entry FORM -->
<lightning:layout >
<lightning:layoutItem padding="around-small" size="6">
<!-- CREATE NEW Item -->
<div aria-labelledby="newCampaingform">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newCampaingform" class="slds-text-heading--small
slds-p-vertical--medium">
Add Expense
</legend>
<!-- CREATE NEW EXPENSE FORM -->
<form class="slds-form--stacked">
<!-- For Name Field -->
<lightning:input aura:id="expenseform" label="Camping Name"
name="expensename"
value="{!v.newItem.Name}"
required="true"/>
<!-- For Quantity Field -->
<lightning:input type="number" aura:id="campingform" label="Quantity"
name="expenseamount"
min="1"
value="{!v.newItem.Quantity__c}"
messageWhenRangeUnderflow="Enter minimum 1 Quantity"/>
<!-- For Price Field -->
<lightning:input aura:id="campingform" label="Price"
formatter="currency"
name="expenseclient"
value="{!v.newItem.Price__c}"
/>
<!-- For Check Box -->
<lightning:input type="checkbox" aura:id="campingform" label="Packed"
name="expreimbursed"
checked="{!v.newItem.Packed__c}"/>
<lightning:button label="Create Camping"
class="slds-m-top--medium"
variant="brand"
onclick="{!c.createItem}"/>
</form>
</fieldset>
</div>
</lightning:layoutItem>
</lightning:layout>
<!-- ITERATIING ITEM LISTS -->
<div class="slds-card slds-p-top--medium">
<c:campingHeader />
<section class="slds-card__body">
<div id="list" class="row">
<aura:iteration items="{!v.items}" var="item">
<c:campingListItem item="{!item}"/>
</aura:iteration>
</div>
</section>
</div>
<!-- / ITERATIING ITEM LISTS -->
</aura:component>
CampingListController.js
({
doInit: function(component, event, helper) {
// Create the action
var action = component.get("c.getItems");
// Add callback behavior for when response is received
action.setCallback(this, function(response) {
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
component.set("v.items", response.getReturnValue());
}
else {
console.log("Failed with state: " + state);
}
});
// Send action off to be executed
$A.enqueueAction(action);
},
createItem: function(component, event, helper) {
var newCamping = component.get("v.newItem");
helper.createItem(component, newCamping);
}
})
CampingListHelper.js
({
createItem: function(component, camping) {
var action = component.get("c.saveItem");
action.setParams({
"item": camping
});
action.setCallback(this, function(response){
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
var campings = component.get("v.items");
campings.push(response.getReturnValue());
component.set("v.items", campings);
}
});
$A.enqueueAction(action);
}
})
CampingListController
public with sharing class CampingListController{
@AuraEnabled
public static List<Camping_Item__c> getItems(){
return [Select id, name, Packed__c, Price__c, Quantity__c from Camping_Item__c];
}
@AuraEnabled
public static Camping_Item__c saveItem(Camping_Item__c Item){
upsert Item;
return Item;
}
}
Sorry for this issue you are encountering.
May I suggest you please check below link from the forums community with a similar discussion and a suggested workaround which might help you further.
- https://developer.salesforce.com/forums/?id=906F0000000kDyfIAE
Please let us know if this helps.Kindly mark this as solved if it's resolved.
Thanks,
Nagendra
thanks for your response, i went through it but unfortunately i did not get much help from it.
Can you provide any more suggestion from looking at my provided code snippet.
thanks
Soumyodeep
I encounter the same issue.
My code cleared the challenge but the apex code is returning an error and therefore is not able to save the data into Salesforce.
The error is :
Action failed: apex://CampingListController/ACTION$saveItem [Converting circular structure to JSON] Failing descriptor: {apex://CampingListController/ACTION$saveItem}
My code is pretty similar to Soumyodeep's code. Sadly, most of the topics on this trailhead refer to the old <ui: elements while the challenge now is requiring <lightning: elements. The difference is not huge but still, maybe there is a slight difference which cause an error which did not existed before.
Regards,
VT
I had faced the same issue, I solved it. Please see my code snippet below.
SaveContinue: function(component, newQuote) {
var quo = component.get("v.newQuote");
var action = component.get("c.saveQuote");
action.setParams({
"quoteObj" : quo // use this variable by fetching it via Component.get method
"quoteObj" : newQuote});
action.setCallback(this, function(response){
var state = response.getState();
console.log('State->'+state);
if (state === "SUCCESS") {
var quotes = component.get("v.quotes");
quotes.push(response.getReturnValue());
component.set("v.quotes", quotes);
}else{
console.log('Some error occured'+response.getState());
}
});
$A.enqueueAction(action);
},
Don't pass the JS variable directly rather then use it via Component.get("v.newQuote");
I removed the direct reference, now my code has started working.
Kindly mark this question as resolved if it helped you to solve your issue.