Setting Up Your Org

As part of our challenges for this module, you’ll build a camping list application. You need to do a few more tasks before passing this challenge and continuing.
  • Create an Expense custom object to work with the examples. You probably already have done this.
  • Create a Camping Item custom object to hold the items you need to go camping with the following fields:
    1. Name (use the standard name field)
    2. Quantity: Number(18, 0) – Required
    3. Price: Currency(16, 2) – Required
    4. Packed: Checkbox(default: unchecked)

Create a Simple Camping List Lightning Component

Create a ‘camping’ component that displays a list of camping supplies that you’ll need for your trip. Compose this component by using other components to increase reusability.
  • Create a campingList component that contains an ordered list of camping supplies that include Bug Spray, Bear Repellant, and Goat Food.
  • Create a campingHeader component that displays Camping List wrapped in an H1 tag with a font size of 18.
  • Create a camping component that contains the campingHeader and campingList components.

Create a Packing List Item Component

Create a Lightning Component to display a single item for your packing list.
  • Create a component called campingListItem.
  • Add an attribute named item of type Camping_Item__c that is required.
  • Display Name, Price, Quantity, Packed using an expression.
  • Display Price and Quantity using the appropriate formatted number fields.
  • Display Packed status using a toggle.

Mark Item as Packed

Add a button to the campingListItem component that when clicked, marks the item as packed.
  • Add a button labeled Packed! that calls the packItem controller function when clicked.
  • The controller function should do the following:
    • Mark the item attribute as packed using a value of true
    • Disable the button by marking the disabled attribute using a value of true

 

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.

 

Save and Load Records with a Server-Side Controller

Persist your records to the database using a server-side controller. The campingList component loads existing records when it starts up and saves records to the database when the form is submitted.
  • Create a CampingListController Apex class with a getItems method and saveItem method.
  • Add a doInit initialization handler that loads existing records from the database when the component starts up.
  • Modify the JavaScript controller to use a createItem method in the helper to save records to the database from a valid form submission. The new items are added to the controller’s items value provider.