Trailhead Challenge : Create a Form to Enter New Items

Create a Form to Enter New Items


In this challenge you’ll create a form to enter new items, a list to display the items entered, and add SLDS styling. First, to make our camping list look more appealing, change the campingHeader component to use lightning: layout and SLDS. Similar to the unit, style the Camping List H1 inside the slds-page-header. Add the action:goal SLDS icon using lightning:icon.

Next, modify the campingList component to contain a new item input form and an iteration of campingListItem components for displaying the items entered. Here are additional details for the modifications to the campingList component.

  • Add an attribute named items with the type of an array of camping item custom objects.
  • Add an attribute named newItem of type Camping_Item__c with default quantity and price values of 0.
  • The component displays the Name, Quantity, Price, and Packed form fields with the appropriate input component types and values from the newItem attribute. The Quantity field accepts a number that’s at least 1.
  • Submitting the form executes the action clickCreateItem in the JavaScript controller.
  • If the form is valid, the JavaScript controller pushes the newItem onto the array of existing items, triggers the notification that the items value provider has changed, and resets the newItem value provider with a blank sObjectType of Camping_Item__c. For this challenge, place the code in your component’s controller, not the helper.


 Challenge Output


Don’t forget to share the post if you like it & bookmark the blog for future references. If you have any comments or doubts on this post, Please comment on the box.




4 thoughts on “Trailhead Challenge : Create a Form to Enter New Items

  1. Natalia October 4, 2018 / 5:16 pm

    Hi- I followed your instructions but I still get this error: “The campingList JavaScript controller doesn’t appear to be checking if form fields are valid.”. Would you happen to know why?


    • Anil Somasundaran October 8, 2018 / 3:24 pm

      This issue was because of JSON.parse and JSON.stringify methods wrapped on the get methods(for fetching the attribute values). Locker service wraps the object with a proxy object for ensuring the security, this will only be required if you are executing the component in lightning apps. Proxy wrapping is not required in the salesforce lightning context. So, remove the JSON parsing methods if you are executing this in the salesforce lightning context. Let me know if you are still facing any issues.


  2. Javier Segarra Martinez October 8, 2018 / 12:27 pm

    Hi, I’ve used you code and I retrieve this error message.
    Thank you so much in advance.
    The campingList JavaScript controller isn’t setting the ‘newItem’ value provider with a blank Camping_Item__c sObject to reset the form.


    • Anil Somasundaran October 8, 2018 / 3:22 pm

      Please remove the “JSON.parse(JSON.stringify() ” wrapped on all component. get method. It was done for parsing the proxy object (Only needs this for standalone app). I hope, this will work if you remove those JSON parser methods.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s