イベントとアクションの使用

パート 1: 類似物件に移動する

SimilarProperty コンポーネントでは、住所 ([Name (名前)] 項目に保存) がクリック可能なリンクになっています。<a> 要素 に navToRecord 関数を起動する onclick イベントがあります。

  1. 開発者コンソールで、SimilarProperty コンポーネントをクリックして表示します。
  2. [CONTROLLER (コントローラ)] をクリックして、プレースホルダコードを次のコードに置き換えます。
  3. ({
        navToRecord : function (component, event, helper) {
            var navEvt = $A.get("e.force:navigateToSObject");
            navEvt.setParams({
                "recordId": component.get("v.property.Id")
            });
            navEvt.fire();
        }
    })

    これは単純明快な関数で、Lightning フレームワーク ($A) に e.force:navigateToSObject イベントをコールするよう指示する変数を宣言します。イベントのパラメータとして物件の ID が渡されます。

  4. ファイルを保存して、[Property Detail (物件詳細)] ページを更新します。
  5. ページの [Similar Properties (類似物件)] コンポーネントで、物件の名前をクリックすると、その物件のレコードページに移動します。

パート 2: 類似物件を「その場」で編集する

最後にこのコンポーネントにちょっとした機能を追加して、ユーザが類似物件リストの 1 つを、そのレコードに移動しなくても編集できるようにしてみましょう。

  1. 開発者コンソールで、SimilarProperty コンポーネントマークアップに戻ります。
  2. <h3> をラップする </a> 終了タグの後に新しい行を追加し、次のコードを貼り付けます。
  3. <lightning:buttonIcon iconName="utility:edit" class="slds-col_bump-left" iconClass="slds-button__icon_hint" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}" />
    

    また別の Lightning 基本コンポーネントである <lightning:buttonIcon> を使用すると、アイコンをボタンとして使用できます。この場合は、SLDS のアイコンのユーティリティセクションにある編集アイコン (鉛筆マーク) を使用します。ユーザがこのボタンをクリックすると、これから追加する editRecord 関数が起動します。

  4. ファイルを保存します。
  5. サイドバーの [CONTROLLER (コントローラ)] をクリックして、navToRecord 関数の下に次の関数を追加します (前述のとおり、関数はカンマで区切ります)。
  6. editRecord : function(component, event, helper) {
        var editRecordEvent = $A.get("e.force:editRecord");
        editRecordEvent.setParams({
            "recordId": component.get("v.property.Id")
        });
        editRecordEvent.fire();
    }
  7. ファイルを保存します。
  8. [Property Detail (物件詳細)] ページに戻って更新します。
  9. [Similar Properties (類似物件)] コンポーネントで、物件の編集アイコンをクリックし、デフォルトのポップアップモーダルの編集ボックスを使用して物件をその場で編集します。

問題がある場合は、コードが次のようになっているか確認してください。

SimilarProperty.cmp

<aura:component>
    <aura:attribute name="property" type="Property__c"/>
        <lightning:recordViewForm aura:id="viewForm" recordId="{!v.property.Id}" objectApiName="Property__c">
        <div class="slds-media">
            <div class="slds-media__figure">
                <img src="{!v.property.Thumbnail__c}" class="slds-avatar_large slds-avatar_circle" alt="{!v.targetFields.Title_c}"/>
            </div>
            <div class="slds-media__body">
            <lightning:layout class="slds-hint-parent">
                <a onclick="{!c.navToRecord}">
                    <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.property.Name}</h3>
                </a>
            <lightning:buttonIcon iconName="utility:edit" class="slds-col_bump-left" iconClass="slds-button__icon_hint" variant="bare" alternativeText="Edit Record" onclick="{!c.editRecord}"/>
            </lightning:layout>
                <lightning:layout multipleRows="true">
                    <lightning:layoutItem size="6">
                        <lightning:outputField fieldName="Beds__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:outputField fieldName="Baths__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:outputField fieldName="Price__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:outputField fieldName="Status__c"/>
                    </lightning:layoutItem>
                </lightning:layout>
            </div>
        </div>
    </lightning:recordViewForm>
</aura:component>

SimilarPropertyController.js

({
    navToRecord : function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": component.get("v.property.Id")
        });
        navEvt.fire();
    },
    editRecord : function(component, event, helper) {
        var editRecordEvent = $A.get("e.force:editRecord");
        editRecordEvent.setParams({
            "recordId": component.get("v.property.Id")
        });
        editRecordEvent.fire();
    }
})
無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる