• Sebastian Wilke
  • NEWBIE
  • 5 Points
  • Member since 2017

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies
Not sure, what is wrong with following code. While validating, it give me following error:
The campingList component isn't handing the added item correctly.

Here is the code:
1. camping.cmp
<aura:component >
    <c:campingHeader />
    <c:campingList />
</aura:component>
2. CampingList.cmp
<aura:component controller="CampingListController">
    
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:handler name="addItem" action="{!c.handleAddItem}" event="c:addItemEvent"/>
    
    <c:campingListForm />
    
    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Expenses</h3>
        </header>
        
        <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.items}" var="item">
                    <c:campingListItem item="{!item}"/>
                    <br/>
                </aura:iteration>
            </div>
        </section>
    </div>
    
</aura:component>

3. campingListController.js
({
    // Load expenses from Salesforce
    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);
    },
    
    handleAddItem : function(component, event, helper) {
        
        var action = component.get("c.saveItem");
        action.setParams({
            "item": JSON.parse(JSON.stringify(event.getParam("item")))
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                var items = component.get("v.items");
                items.push(response.getReturnValue());
                component.set("v.items", items);
            }
        });
        $A.enqueueAction(action);
    }
})

4. componentListHelper.js
({
    createCamping: function(component,item) {
        
        var action = component.get("c.saveItem");
        action.setParams({
            "item": JSON.parse(JSON.stringify(item))
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                var items = component.get("v.items");
                items.push(response.getReturnValue());
                component.set("v.items", items);
            }
        });
        $A.enqueueAction(action);
    }
})
5. campingListForm.cmp
<aura:component >
    
    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{ 'sobjectType': 'Camping_Item__c',
                             'Name': '',
                             'Packed__c': false,
                             'Price__c': '0',
                             'Quantity__c': '0' }"/>
    
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    
    <div aria-labelledby="newitemform">
        <fieldset class="slds-box slds-theme--default slds-container--small">
            
            <legend id="newitemform" class="slds-text-heading--small 
                                            slds-p-vertical--medium">
                Add Camping Item
            </legend>
            
            <form class="slds-form--stacked">
                
                <div class="slds-form-element slds-is-required">
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="name" label="Camping Item Name"
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.newItem.Name}"
                                      required="true"/>
                    </div>
                </div>
                
                <div class="slds-form-element">
                    <ui:inputCheckbox aura:id="packed" label="Packed?"
                                      class="slds-checkbox"
                                      labelClass="slds-form-element__label"
                                      value="{!v.newItem.Packed__c}"/>
                </div>
                
                <div class="slds-form-element">
                    <div class="slds-form-element__control">
                        <ui:inputCurrency aura:id="price" label="Price"
                                          class="slds-input"
                                          labelClass="slds-form-element__label"
                                          value="{!v.newItem.Price__c}" />
                        
                    </div>
                </div>
                
                <div class="slds-form-element">
                    <div class="slds-form-element__control">
                        <ui:inputNumber aura:id="quantity" label="Quantity"
                                        class="slds-input"
                                        labelClass="slds-form-element__label"
                                        value="{!v.newItem.Quantity__c}"/>
                        
                    </div>
                </div>
                
                <div class="slds-form-element">
                    <ui:button label="Create Camping Item"
                               class="slds-button slds-button--brand"
                               press="{!c.submitForm}"/>
                </div>
                
            </form>
            
        </fieldset>
    </div>
    
</aura:component>
6. campingListFormController
({    
    
    submitForm : function(component, event, helper) {
        
        var validCamping = true;

        // Name must not be blank
        var nameField = component.find("name");
        var expname = nameField.get("v.value");
        if ($A.util.isEmpty(expname)){
            validCamping = false;
            nameField.set("v.errors", [{message:"Camping Item name can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }

        
        var priceField = component.find("price");
        var price = priceField.get("v.value");
        if ($A.util.isEmpty(price) || isNaN(price) || (price <= 0.0)){
            validCamping = false;
            priceField.set("v.errors", [{message:"Camping Item price can't be blank."}]);
        }
        else {
            priceField.set("v.errors", null);
        }
        
        var quantityField = component.find("quantity");
        var quantity = quantityField.get("v.value");
        if ($A.util.isEmpty(quantity) || isNaN(quantity) || (quantity <= 0)){
            validCamping = false;
            quantityField.set("v.errors", [{message:"Camping Item quantity can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }

        if(validCamping){
            
            helper.createItem(component);
        }
    },
})

7. campingListFormHelper.js
({
    
     createItem : function(component) {
        var newItem = component.get("v.newItem");
        var addEvent = component.getEvent("addItem");
        addEvent.setParams({"item" : newItem});
        addEvent.fire();
        component.set("v.newItem",
                     { 'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Packed__c': false,
                    'Price__c': 0,
                    'Quantity__c': 0});
    }
})

8. addItemEvent.evt
<aura:event type="COMPONENT" description="Event template">
    <aura:attribute name="item" type="Camping_Item__c"/>
</aura:event>

It works well, when I test this app. any thought? Can anyone share the working code for this module?