function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Soumyodeep Guha 8Soumyodeep Guha 8 

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;
    }

}
NagendraNagendra (Salesforce Developers) 
Hi Guha,

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. Please let us know if this helps.

Kindly mark this as solved if it's resolved.

Thanks,
Nagendra
Soumyodeep Guha 8Soumyodeep Guha 8
Hi 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
VT-VT-
Hi,

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
Kt YadavKt Yadav
Hi 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.