こんにちは、アンダーソンです。
今回は上級デベロッパー試験でかなりの確率で出題されていたLightningコンポーネント関連の
Trailheadをやっていきます。
モジュールごとに分けています。
今回はその4、前回からJavaScriptが出てきてコントローラが出てきました。
今回はどのような内容でしょうか。
やっていきましょう。
Contents
フォームを使用したデータの入力
- 「items」という名前の属性を、キャンプアイテムのカスタムオブジェクトの配列の型で追加します。
- Camping_Item__cタイプの「newItem」という名前の属性を追加し、デフォルトの数量と価格の値を0にします。
- コンポーネントには、「newItem」属性からの適切な入力コンポーネントタイプと値を含む「名前」、「数量」、「価格」、および「パック」フォームフィールドが表示されます。数量フィールドは、少なくとも1の数値を受け入れます。
- フォームを送信すると、JavaScriptコントローラーでaction clickCreateItemが実行されます。
- フォームが有効な場合、JavaScriptコントローラーは「newItem」を既存のアイテムの配列にプッシュし、「items」値プロバイダーが変更されたという通知をトリガーし、「newItem」値プロバイダーをCamping_Item__cの空のsObjectTypeでリセットします。 この課題のために、ヘルパーではなくコンポーネントのコントローラーにコードを配置します。
前回から比べると一気に難易度が上がった気がします。
チャレンジ前にしっかり説明を読み込んでおきましょう。
コードは下記になります。
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> campingListItem.cmp
<aura:component>
<aura:attribute name="item" type="Camping_Item__c"/>
<lightning:card title="Camping">
<p class="slds-p-horizontal--small">
<p>Name:<ui:outputText value="{!v.item.Name}"/></p>
<p>Price:<lightning:formattedNumber style="currency" value="{!v.item.Price__c}" /></p>
<p>Quantity:<lightning:formattedNumber value="{!v.item.Quantity__c}"/></p>
<p><lightning:input type="checkbox" label="Packed?" name="Packed" checked="
{!v.item.Packed__c}"/></p>
</p>
</lightning:card>
</aura:component>campingList.cmp
<aura:component>
<aura:attribute name="items" type="Camping_Item__c[]"/>
<aura:attribute name="newItem" type="Camping_Item__c"
default="{'sobjectType':'Camping_Item__c','Name':'','Price__c': 0,'Quantity__c': 0,'Packed__c':false}"/>
<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:iteration items="{!v.items}" var="item">
<c:campingListItem item="{!item}"/>
</aura:iteration>
</aura:component> campingListController.js
({
clickCreateItem : function(component, event, helper) {
var validCamping = component.find('CampingItem').reduce(function(validsoFar,inputCmp){
inputCmp.showHelpMessageIfInvalid();
return validsoFar && inputCmp.get('v.validity').valid;
},true );
if (validCamping) {
var newCamping = component.get("v.newItem");
var theCamping = component.get("v.items");
var addCamping = JSON.parse(JSON.stringify(newCamping));
theCamping.push(addCamping);
component.set("v.items",theCamping);
component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0,
'Packed__c': false});
}
},
})落とし穴がありましたｗ
Packed__cのInputの属性でValueで{!v.newItem.Packed__c}を指定していたんですが、
The campingList component doesn’t appear to have a Packed checkbox field in the form using a Lightning Base component.
というエラーがでて、めっちゃ時間取ってしまいました。
チェックボックスの属性はValueではなくCheckedみたいです。
気をつけましょう。
まとめ
今回使ったのはこちら。
- aura:iteration Onclickでコントローラを呼び出しました。
- campingListController.js この中のほとんどの操作
Apexとは違った記述方法なので本当に慣れない。。。
とはいえ、しっかり技術を付けていかないとですね。
JavaScriptについても今後勉強していかないといけないですね。
その他の開発に関する記事はこちらです。
Developerも含めた試験問題にチャレンジしてみましょう。
コメント