Challenge not yet complete in My Trailhead Playground 1 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.

Please give me solution. in below i have created componets and it's Code.
campingListForm.cmp
<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"/>

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

</aura:component>

campingListFormController.js
({

submitForm: function(component, event, helper) {
if(helper.validateItemForm(component)){

var newItem = component.get("v.newItem");
helper.createItem(component, newItem);
}
}
})

campingListFormHelper.js
({
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>

May 24, 2019
·
Like
0
·
Follow
1

Best Answer chosen by Dnyanesh Sable

Ajay K Dubedi
Hi Dnyanesh,
Try the following codes:

1. campingListForm.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" > <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"/> <lightning:layout > <lightning:layoutItem padding="around-small" size="6"> <div aria-labelledby="newcampaignform"> <fieldset class="slds-box slds-theme--default slds-container--small"> <legend id="newcampaignform" class="slds-text-heading--small slds-p-vertical--medium"> Add Campaign List </legend> <form class="slds-form--stacked"> <lightning:input aura:id="campaignform" label="Campaign Item Name" name="campaignitemname" value="{!v.newItem.Name}" required="true"/> <lightning:input type="number" aura:id="expenseform" label="Quantity" name="campaignitemprice" min="1" formatter="number" step="0.1" value="{!v.newItem.Quantity__c}" messageWhenRangeUnderflow="Enter quantity that's at least 1."/> <lightning:input type="number" aura:id="expenseform" label="Price" name="campaignitemprice" min="0.1" formatter="currency" step="0.01" value="{!v.newItem.Price__c}" messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/> <lightning:input type="checkbox" aura:id="expenseform" label="Packed?" name="expreimbursed" checked="{!v.newItem.Packed__c}"/> <lightning:button label="Create Camping" class="slds-m-top--medium" variant="brand" onclick="{!c.clickCreateItem}"/> </form> </fieldset> </div> </lightning:layoutItem> </lightning:layout> </aura:component>
2. campingListFormController.js
({ submitForm: function(component, event, helper) { if(helper.validateItemForm(component)){ // Create the new item var newItem = component.get("v.newItem"); helper.createItem(component, newItem); } } })
3. campingListFormHelper.js
({ 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); } })
4. addItemEvent.evt
<aura:event type="COMPONENT"> <aura:attribute name="item" type="Camping_Item__c"/> </aura:event>
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi

May 24, 2019
·
Like
4
·
Dislike
0

This was selected as the best answer

Dnyanesh Sable
Thank you sir, It's Working.

May 25, 2019
·
Like
0
·
Dislike
0

gayan chandima
Thank you sir, It's Working

September 26, 2020
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Challenge not yet complete in My Trailhead Playground 1 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.

All Answers

You need to sign in to do that.