Developer TrailHead

Aura コンポーネントの基本その6【Trailhead】

Developer
この記事は約13分で読めます。

こんにちは、アンダーソンです。
今回は上級デベロッパー試験でかなりの確率で出題されていたLightningコンポーネント関連の
Trailheadをやっていきます。

モジュールごとに分けています。
今回はその6です。

スポンサーリンク

コンポーネントとイベントの接続

前回までのおさらいをすると

こんな感じでおわってると思います。
作成ボタンの押下で新しいレコードが作成され、下のItmeリストに追加されていくような仕様でした。
今回のTrailheadではこのコンポーネント化をさらに細分化していくイメージです。

下記正解コードです。

Camping.cmp

<aura:component controller="CampingListController">
    <c:campingList/>
</aura:component>	

campingHeader.cmp

<aura:component>
        <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="action:goal" alternativeText="CampingItem"/>
        </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">Camping Item</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>	

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

    <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">
            <h3 class="slds-text-heading--small">Items</h3>
        </header>
    </div>
    <section class="slds-card__body">
        <aura:iteration items="{!v.items}" var="item">
            <c:campingListItem item="{!item}"/>
        </aura:iteration> 
    </section>
</aura:component>	

campingListController.js

({
    clickCreateItem: function(component, event, helper) {
        var validCamping = component.find('campingform').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        if(validCamping){
            var addItem = event.getParam("v.newItem");
            helper.createItem(component, addItem);

            var action = component.get("c.saveItem");
            action.setParams({
                "saveRec" : addItem
            });
            action.setCallback(this, function(response){
                var state = response.getState();
                if ( state === "SUCCESS" ) {
                    var items = component.get("v.items");
                    console.log(response.getReturnValue());
                    
                    items.push(response.getReturnValue());
                    component.set("v.items", items);
                } else {
                    var errors = response.getError();
                    console.log(errors[0].message);
    
                    component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
                                            'Name': '',
                                            'Quantity__c': 0,
                                            'Price__c': 0,
                                            'Packed__c': false});                
                }
            });
            $A.enqueueAction(action);
        }
    },
    doInit : function(component, event, helper) {
        var action = component.get("c.getItems");
        action.setCallback(this,function(response){
            var state = response.getState();
            if ( state === "SUCCESS" ) {
                var record = component.get("v.items");
                console.log(record);
                
                console.log(response.getReturnValue());
                component.set("v.items",response.getReturnValue());
                console.log(component.get("v.items"));
            } else {
                console.log("Failed with state: " + state);
            }
        });
        $A.enqueueAction(action);
    },
    handleAddItem : function(component,event,helper){
        var newItem = event.getParam("item");
        var action = component.get("c.saveItem");
        action.setParam({ "item" : newItem });
        action.setCallback(this, function(response){
            var state = action.getState();
            if ( state === "SUCCESS" ) {
                var items = component.get("v.items");
                items.push(newItem);
                component.set("v.items",items);
            }
        });
        $A.enqueueAction(action);
    },
})

campingListForm.cmp

<aura:component>
    <aura:attribute name="newItem" type="Camping_Item__c" default="{'sobjectType':'Camping_Item__c','Name':'','Price__c': 0,'Quantity__c': 0,'Packed__c':false}"/>
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    <div aria-labelledby="newCampingItem">
        <fieldset class="slds-box slds-theme--default slds-container--small">
            <legend id="newCampingItem" class="slds-text-heading--small slds-p-vertical--medium">
                Add CampingItem
            </legend>
            <form class="slds-form--stacked">
                <lightning:input aura:id="CampingItem" label="CampingName" name="campingname" value="{!v.newItem.Name}" required="true"/>
                <lightning:input aura:id="CampingItem" type="number" label="Price" name="campingprice" value="{!v.newItem.Price__c}" min="1" formatter="currency" step="1"/>
                <lightning:input aura:id="CampingItem" type="number" label="Quantity" name="campingquantity" value="{!v.newItem.Quantity__c}" min="1" step="1"/>
                <lightning:input aura:id="CampingItem" type="checkBox" label="Packed" class="slds-p-around--small" name="campingpacked" checked="{!v.newItem.Packed__c}"/>
                <lightning:button label="作成" onclick="{!c.clickCreateItem}"/>
            </form>
        </fieldset>
    </div>
</aura:component>	

campingListFormController.js

({
    clickCreateItem: function(component, event, helper) {
        var validCamping = component.find('campingform').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        if(validCamping){
            var addItm = event.getParam("v.newItem");
            helper.createItem(component, addItm);
        }
    },
})

campingListFormHelper.js

({
    addItem : function(component, campaign) {
        var createEvent = component.getEvent("addItem");
        createEvent.setParams({ "item": campaign });
        createEvent.fire();
        component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
                                   'Name': '',
                                   'Quantity__c': 0,
                                   'Price__c': 0,
                                   'Packed__c': false });
    },
})

addItemEvent.cmp

<aura:event type="COMPONENT" description="Event template">
    <aura:attribute name="item" type="Camping_Item__c"/>
</aura:event>

まとめ

一旦Auraコンポーネントシリーズはこれで終了となります。
基礎的なことだとは思いますが、コンポーネントを使ってApexの呼び出し、
レコードの作成、またイベントの呼び出しなどができるようになりました。
さらにレベルアップできるようにスーパーバッチの取得も目指していきたいと思います。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。