こんにちは、アンダーソンです。
今回は上級デベロッパー試験でかなりの確率で出題されていたLightningコンポーネント関連の
Trailheadをやっていきます。
モジュールごとに分けています。
今回はその6です。
Contents
コンポーネントとイベントの接続
前回までのおさらいをすると
こんな感じでおわってると思います。
作成ボタンの押下で新しいレコードが作成され、下の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も含めた試験問題にチャレンジしてみましょう。
