データを処理するためのレコード編集フォームの作成

パート 1: lightning:recordEditForm を作成する

このステップでは、lightning:recordEditForm ラッパーコンポーネントを使用して編集レイアウトを作成し、レコードを更新できるようにします。lightning:recordEditForm コンポーネント内の lightning:inputField を使用して、レイアウトに編集可能な項目を作成します。

  1. 開発者コンソールで、SimilarProperty コンポーネントマークアップをクリックして表示します。
  2. 次のコードを </lightning:recordViewForm> 終了タグの後に追加します。
  3. <lightning:recordEditForm aura:id="editForm" recordId="{!v.property.Id}" objectApiName="Property__c" class="slds-hide" onsuccess="{!c.handleSuccess}">
        <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>
                    <a onclick="{!c.navToRecord}">
                        <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.property.Name}</h3>
                    </a>
                </lightning:layout>
                <lightning:layout multipleRows="true">
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Beds__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Baths__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Price__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Status__c"/>
                    </lightning:layoutItem>
                </lightning:layout>
                <lightning:layout horizontalAlign="center" class="slds-m-top_large">
                    <lightning:button variant="neutral" label="Cancel" title="Cancel" type="text" onclick="{!c.handleCancel}"/>
                    <lightning:button variant="brand" label="Submit" title="Submit" type="submit"/>
                </lightning:layout>
            </div>
        </div>
    </lightning:recordEditForm>
    
  4. ファイルを保存します。

パート 2: ヘルパー関数を追加する

次は、ヘルパー関数を Aura コンポーネントに追加して、作成したカスタムフォームの編集状態と表示状態を切り替えられるようにします。ヘルパー関数はコンポーネントに対してローカルであり、コードの再利用を促進し、クライアント側コントローラの JavaScript ロジックの複雑な作業を軽減します。

  1. [Helper (ヘルパー)] ボタンをクリックして、ヘルパーファイルを SimilarProperty コンポーネントバンドルに追加します。
  2. デフォルトの関数名を「showHide」に変更し、component を関数のパラメータとして追加します。
  3. 次のコードを showHide 関数に追加します。
  4. var editForm = component.find("editForm");
    $A.util.toggleClass(editForm, "slds-hide");
    var viewForm = component.find("viewForm");
    $A.util.toggleClass(viewForm, "slds-hide");
    
  5. ファイルを保存します。
  6. SimilarPropertyController.js ファイルに切り替え、editRecord 関数の内容を次のコードに置き換えます。
  7. helper.showHide(component);
    
  8. ファイルを保存して、[Property (物件)] レコードページを更新します。
  9. [Edit (編集)] アイコンをクリックして、編集フォームを表示します。

パート 3: 成功とキャンセルを処理する

  1. SimilarPropertyController.js ファイルで、次の関数を次のように追加します (関数はカンマで区切ります)。
  2. handleSuccess : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "The property's info has been updated.",
            "type": "success"
        });
        toastEvent.fire();
        helper.showHide(component);
    },
    handleCancel : function(component, event, helper) {
        helper.showHide(component);
        event.preventDefault();
    }
    
  3. ファイルを保存します。
  4. [Property (物件)] レコードページを更新し、物件の [Edit (編集)] アイコンをクリックします。
  5. いずれかの項目を編集し、[Submit (実行)] をクリックします。
  6. 繰り返し、[Cancel (キャンセル)] をクリックします。

問題がある場合は、コードを次のコードと比較して確認してください。

SimilarProperty.cmp

<aura:component>
    <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>
    <lightning:recordEditForm aura:id="editForm" recordId="{!v.property.Id}" objectApiName="Property__c" class="slds-hide" onsuccess="{!c.handleSuccess}">
        <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>
                    <a onclick="{!c.navToRecord}">
                        <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.property.Name}</h3>
                    </a>
                </lightning:layout>
                <lightning:layout multipleRows="true">
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Beds__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Baths__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Price__c"/>
                    </lightning:layoutItem>
                    <lightning:layoutItem size="6">
                        <lightning:inputField fieldName="Status__c"/>
                    </lightning:layoutItem>
                </lightning:layout>
                <lightning:layout horizontalAlign="center" class="slds-m-top_large">
                    <lightning:button variant="neutral" label="Cancel" title="Cancel" type="text" onclick="{!c.handleCancel}"/>
                    <lightning:button variant="brand" label="Submit" title="Submit" type="submit"/>
                </lightning:layout>
            </div>
        </div>
    </lightning:recordEditForm>
</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) {
        helper.showHide(component);
    },
    handleSuccess : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({"title": "Success!","message": "The property's info has been updated.","type": "success"});toastEvent.fire();
        helper.showHide(component);
    },
    handleCancel : function(component, event, helper) {
        helper.showHide(component);
        event.preventDefault();
    }
})

SimilarPropertyHelper.js

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