You need to sign in to do that
Don't have an account?
Internal Partner
Trailhead: Aura Components Basics / Connect Components with Events - The campingList component appears to be using UI Components instead of Base Lightning Components in the form. You should be using only Base Lightning Components
Hi all,
I am trying to pass the Aura Components Basics trail --> Connect Components with Events.
Following code has been implemented but at the end I can not pass this trail step because I am getting the message
Following is the code:
campingList.cmp
campingListController
campingList Helper
campingListForm component
campingListForm Controller
addItemEvent.evt
What I am doing wrong? I would appreciate any advice.
I am trying to pass the Aura Components Basics trail --> Connect Components with Events.
Following code has been implemented but at the end I can not pass this trail step because I am getting the message
"Challenge not yet complete in My Trailhead Playground 6 The campingList component appears to be using UI Components instead of Base Lightning Components in the form. You should be using only Base Lightning Component
Following is the code:
campingList.cmp
<aura:component controller="CampingListController"> <aura:handler name="init" action="{!c.doInit}" value="{!this}"/> <aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem }"/> <aura:attribute name="items" type="Camping_Item__c[]"/> <ol> <li>Bug Spray</li> <li>Bear Repellant</li> <li>Goat Food</li> </ol> <!-- NEW ITEM FORM --> <div class="slds-col slds-col--padded slds-p-top--large"> <c:campingListForm /> </div> <!-- / NEW ITEM FORM --> <div class="slds-card slds-p-top--medium"> <header class="slds-card__header"> <h3 class="slds-text-heading--small">Items</h3> </header> <section class="slds-card__body"> <div id="list" class="row"> <aura:iteration items="{!v.items}" var="items"> <c:campingListItem item="{!item}"/> </aura:iteration> </div> </section> </div> </aura:component>
campingListController
({ // Load items 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 newItem = event.getParam("item"); //helper.addItem(component, newItem); var action = component.get("c.saveItem"); action.setParams({"item": newItem}); action.setCallback(this, function(response){ var state = response.getState(); if (component.isValid() && state === "SUCCESS") { // all good, nothing to do. var items = component.get("v.items"); items.push(response.getReturnValue()); component.set("v.items", items); } }); $A.enqueueAction(action); } })
campingList Helper
({ addItem: function(component, item) { this.saveItem(component, item, function(response){ var state = response.getState(); if (component.isValid() && state === "SUCCESS") { // all good, nothing to do. /* var items = component.get("v.items"); items.push(response.getReturnValue()); component.set("v.items", items);*/ } }); }, })
campingListForm component
<aura:component > <aura:attribute name="newItem" type="Camping_Item__c" default="{ 'sobjectType': 'Camping_Item__c', 'Name': '', 'Quantity__c': 0, 'Price__c': 0, 'Packed__c': false }"/> <aura:registerEvent name="addItem" type="c:addItemEvent"/> <!-- CREATE NEW ITEM FORM --> <form class="slds-form--stacked"> <div class="slds-form-element slds-is-required"> <div class="slds-form-element__control"> <ui:inputText aura:id="itemname" label="Name" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Name}" required="true"/> </div> </div> <div class="slds-form-element slds-is-required"> <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}" required="true"/> </div> </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"> <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"> <ui:button label="Create Camping Item" class="slds-button slds-button--brand" press="{!c.submitForm}"/> </div> </form> <!-- / CREATE NEW ITEM FORM --> </aura:component>
campingListForm Controller
({ submitForm: function(component, event, helper) { if(helper.validateItemForm(component)){ // Create the new item var newItem = component.get("v.newItem"); helper.createItem(component, newItem); } } })campingListForm Helper
({ addItem: function(component, newItem) { var addItem = component.getItem("addItem"); addItem.setParams({ "item": item }); addItem.fire(); component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c', 'Name': '', 'Quantity__c': 0, 'Price__c': 0, 'Packed__c': false } />); }, validateItemForm: function(component) { // Simplistic error checking var validItem = true; // Name must not be blank var nameField = component.find("itemname"); var itemname = nameField.get("v.value"); if ($A.util.isEmpty(itemname)){ validItem = false; nameField.set("v.errors", [{message:"Item name can't be blank."}]); } else { nameField.set("v.errors", null); } // Quantity must not be blank var quantityField = component.find("quantity"); var quantity = nameField.get("v.value"); if ($A.util.isEmpty(quantity)){ validItem = false; quantityField.set("v.errors", [{message:"Quantity can't be blank."}]); } else { quantityField.set("v.errors", null); } // Price must not be blank var priceField = component.find("price"); var price = priceField.get("v.value"); if ($A.util.isEmpty(price)){ validItem = false; priceField.set("v.errors", [{message:"Price can't be blank."}]); } else { quantityField.set("v.errors", null); } return (validItem); } })
addItemEvent.evt
<aura:event type="COMPONENT"> <aura:attribute name="item" type="Camping_Item__c"/> </aura:event>
What I am doing wrong? I would appreciate any advice.
You have used UI components in campingListForm component e.g. ui:inputText, ui:inputNumber etc. To fix this you have to replace all these ui: components with lightning: components e.g. lightning:input, lightning:button.
campingListForm component
Thanks
All Answers
You have used UI components in campingListForm component e.g. ui:inputText, ui:inputNumber etc. To fix this you have to replace all these ui: components with lightning: components e.g. lightning:input, lightning:button.
campingListForm component
Thanks