Developer Intermediate Aura Components Basics Connect Components with Events

 

YOUR CHALLENGE

Refactor components and communicate with events

Refactor the input form for camping list items into its own component and communicate with component events.

• Replace the HTML form in the campingList component with a new campingListForm component that calls the clickCreateItem JavaScript controller action when clicked
• The campingList component listens for a c:addItemEvent event and executes the action handleAddItem in the JavaScript controller
• The handleAddItem method saves the record to the database and adds the record to the items value provider
• The addItemEvent event is of type component and has a Camping_Item__c type attribute named item
• The campingListForm registers an addItem event of type c:addItemEvent
• The campingListFormController JavaScript controller calls the helper's createItem method if the form is valid
• The campingListForm Helper JavaScript helper creates an addItem event with the item to be added, fires the event, then resets the newItem value provider with a blank sObjectType of type Camping_Item__c

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[]"/>

    <c:campingHeader/>

    

     <!-- NEW EXPENSE FORM -->

    <lightning:layout >

        <lightning:layoutItem padding="around-small" size="6">

            <c:campingListForm />

        </lightning:layoutItem>

    </lightning:layout>

<div class="slds-card slds-p-top--medium">

    <header class="slds-card__header">

        <c:campingHeader/>

    </header>

    <section class="slds-card__body">

        <div id="list" class="row">

            <aura:iteration items="{!v.items}" var="item">

                <c:campingListItem item="{!item}"/>

            </aura:iteration>

        </div>

    </section>

</div>

</aura:component>

campingListController.js :

({

    doInit : function(component, event, helper){

        var getCampingItemListingAction = component.get('c.getItems');

        getCampingItemListingAction.setCallback(this, function(response){

            var respState = response.getState();

            if(respState == 'SUCCESS'){

                var vItems = component.get('v.items');

                vItems = response.getReturnValue();

                component.set('v.items', vItems);

            }

        });

        $A.enqueueAction(getCampingItemListingAction);

    },

    handleAddItem : function(component, event, helper){

        var newCampingItem = event.getParam('item');

        //var theItems = component.get("v.items");

        //theItems.push(newCampingItem);

        //component.set("v.items", theItems);

        //helper.createItem(component, newCampingItem);

        var saveItemAction = component.get('c.saveItem');

        saveItemAction.setParams({ 'campingItem' :  newCampingItem });

        saveItemAction.setCallback(this, function(response){

            var respState = response.getState();

            console.log(respState);

            if( respState == 'SUCCESS'){

                var theItems = component.get("v.items");

                theItems.push(response.getReturnValue());

                component.set("v.items", theItems);

            }

        });

        

        $A.enqueueAction(saveItemAction);

    }

})

addItemEvent.evt :

 

<aura:event type="COMPONENT">

    <aura:attribute name="item" type="Camping_Item__c"/>

</aura:event>

campingListItem.cmp:

<aura:component >

    <aura:attribute name="item" type="Camping_Item__c"/>

    <lightning:card >

        <p class="slds-p-horizontal_small">

            Name:  {!v.item.Name}

        </p>

        

        <p class="slds-p-horizontal_small">

            Price: <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>

        </p>

        <p class="slds-p-horizontal_small">

            Quantity: {!v.item.Quantity__c}

        </p>

        

        <p class="slds-p-horizontal_small">

            Packed:

            <ui:outputCheckbox value="{!v.item.Packed__c}"/>

        </p>

        

    </lightning:card>

</aura:component>

campingListItem.css:

.THIS.slds-card.slds-theme_success {

    background-color: rgb(75, 202, 129);

}

campingListForm.cmp:

<aura:component controller="CampingListController">

    <aura:registerEvent name="addItem" type="c:addItemEvent" />

    

    <aura:attribute name="newItem" type="Camping_Item__c"

                    default="{ 'sobjectType': 'Camping_Item__c',

                             'Name': '',

                             'Quantity__c': 0,

                             'Price__c': 0,

                             'Packed__c': false }" required="true"/>

    <!-- CREATE NEW EXPENSE -->

    <div aria-labelledby="newexpenseform">

        <!-- BOXED AREA -->

        <fieldset class="slds-box slds-theme_default slds-container_small">

            <legend id="newexpenseform" class="slds-text-heading_small

                                               slds-p-vertical_medium">

                Add Camp

            </legend>

            

            <!-- CREATE NEW ITEM FORM -->

            <form class="slds-form--stacked">

                

                <div class="slds-form-element slds-is-required">

                    <div class="slds-form-element__control">

                        <lightning:input aura:id="campingItem" type="text" name="name" label="Name" value="{!v.newItem.Name}" required="true" />

                    </div>

                </div>

                

                <div class="slds-form-element slds-is-required">

                    <div class="slds-form-element__control">

                        <lightning:input aura:id="campingItem" type="number" label="Quantity" name="quantity" value="{!v.newItem.Quantity__c}" step="1" min="1" required="true" />

                    </div>

                </div>

                

                <div class="slds-form-element">

                    <div class="slds-form-element__control">

                        <lightning:input aura:id="campingItem" type="number" formatter="currency" name="price" label="Price" value="{!v.newItem.Price__c}"  />

                    </div>

</div>

                

                <div class="slds-form-element">

                    <lightning:input aura:id="campingItem" type="checkbox" label="Packed?" name="packed" checked="{!v.newItem.Packed__c}" />

                </div>

                

                <div class="slds-form-element">

                    <lightning:button label="Create Camping Item" variant="brand" onclick="{!c.clickCreateItem}" />

                </div>

                

            </form>

            <!-- / CREATE NEW ITEM FORM -->

        </fieldset>

        <!-- / BOXED AREA -->

    </div>

    <!-- / CREATE NEW Camping -->

</aura:component>

campingListFormContoller.js :

({

    

    clickCreateItem: function(component, event, helper) {

        // Simplistic error checking

        var validItem = true;

        validItem = component.find('campingItem').reduce(function(validSoFar, inputCmp){

            inputCmp.showHelpMessageIfInvalid();

            return validSoFar && inputCmp.get('v.validity').valid;

        }, true);

        if(validItem){

            helper.createItem(component);

        }

    }

})

campingListFormHelper.js::

({

   

    createItem : function(component){

        var campingItem = component.get("v.newItem");

        console.log(campingItem);

        var adItemEvent = component.getEvent('addItem');

        adItemEvent.setParams({'item': campingItem});

        adItemEvent.fire();

        console.log('Event fired');

        component.set("v.newItem",{'sobjectType': 'Camping_Item__c',

                             'Name': '',

                             'Quantity__c': 0,

                             'Price__c': 0,

                             'Packed__c': false });

    }

})

campingHeader.cmp:

<aura:component >

    <lightning:layout class="slds-page-header slds-page-header--object-home">

    <lightning:layoutItem >

    <lightning:icon iconName="action:goal" alternativeText="My Camping"/>

</lightning:layoutItem>

    <lightning:layoutItem padding="horizontal-small">

<div class="page-section page-header">

<h1 class="slds-text-heading--label">Camping</h1>

<h2 class="slds-text-heading--medium">My Camping</h2>

</div>

</lightning:layoutItem>

</lightning:layout>

</aura:component>

campingApp.app:

<aura:application extends="force:slds" >

<c:campingList />

</aura:application>