Lightning 基本コンポーネントの使用

パート 1: Apex クラスコントローラを作成する

コンポーネントでは Salesforce からのデータが必要になります。また、コンポーネントがページに追加されたときに、Salesforce システム管理者が検索条件を定義して、検索の対象を決定できるようにします。まず、検索条件を受け入れる新しい Apex クラスを作成しましょう。

  1. 開発者コンソールで、[File (ファイル)] > [New (新規)] > [Apex Class (Apex クラス)] を選択します。このクラスに MyPropertyController という名前を付け、[OK] をクリックします。
  2. デフォルトのコードを次のコードに置き換えます。
  3. public with sharing class MyPropertyController {
        public static List<Property__c> findProperties (Id recordId, Decimal priceRange) {
            List<Property__c> property = [SELECT Price__c FROM Property__c WHERE Id=:recordId];
            Decimal propertyPrice = property[0].Price__c;
            List<Property__c> similarProperties = getSimilarProperties(recordId, priceRange, propertyPrice);
            return similarProperties;
        }
        private static List<Property__c> getSimilarProperties (Id recordId, Decimal priceRange, Decimal price ) {
            Decimal range;
            if (priceRange == null) {
                range = 100000;
            } else {
                range = priceRange;
            }
            return [
                SELECT Id, Name, Beds__c, Baths__c, Price__c, Broker__c, Status__c, Thumbnail__c
                FROM Property__c WHERE Id != :recordId AND Price__c > :price - range AND Price__c < :price + range
            ];
        }
    }
    

    findProperties メソッドは、2 つのパラメータ (recordId と priceRange) を取ります。recordId は、現在の Property (物件) レコードの ID です。メソッドはこれらのパラメータを使用して物件価格を決定します。その後、3 つのパラメータ (recordId、priceRange、propertyPrice) は、類似物件のリストを返す getSimilarProperties メソッドに渡されます。


  4. ファイルを保存します。
  5. @AuraEnabled を Apex クラスの 2 行目に追加します。

  6. @AuraEnabled 署名は、クラスにこのメソッドが Lightning コンポーネントからコールされることを許可するように指示します。また、Lightning コンポーネントからコールされるすべてのメソッドは、static として宣言する必要があります。


  7. ファイルを保存します。
  8. 開発者コンソールでタブを閉じます。

パート 2: Similar Properties コンポーネントを作成する

  1. 開発者コンソールで、[File (ファイル)] > [New (新規)] > [Lightning Component (Lightning コンポーネント)] を選択します。
  2. コンポーネントに「SimilarProperties」という名前を付け、[Lightning Record Page (Lightning レコードページ)] を選択して、[Submit (送信)] をクリックします。
  3. controller="MyPropertyController"<aura:component> タグに追加します。
  4. 次のコードを <aura:component> タグ内の新しいコンポーネントに貼り付けます。
  5. <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="similarProperties" type="Object[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:card iconName="custom:custom85" title="Similar Properties">
        <div class="slds-p-left_medium slds-p-right_medium">
            <ul class="slds-list_vertical slds-has-dividers_top-space">
                <aura:iteration items="{!v.similarProperties}" var="item">
                    <li class="slds-list__item">
                        {!item.Name}
                    </li>
                </aura:iteration>
            </ul>
        </div>
    </lightning:card>
    

    <aura:attribute> 宣言に注目してください。


    ここでは [Lightning Record Page (Lightning レコードページ)] を選択しているため、コンポーネントも force:hasRecordId インターフェースを使用します。このインターフェースは、現在のレコードページの ID を自動的に取得して、recordId という名前で <aura:attribute> に保存します。


    次に similarProperties という属性があり、これは Apex クラスによって返された物件を保存します。この属性は JSON 形式のため、型が Object[] に設定されています。


    コンポーネントの UI は、<lightning:card> という Lightning 基本コンポーネントで構成されます。このカードは、SLDS の custom85 というアイコンを使用します。よく見ると、アイコン画像が不動産の看板になっています! カードの本文内には、リスト項目 <li> を含む順序なしリスト <ul> があります。順序なしリストは、similarProperties の配列を反復処理し、配列のエントリごとにリスト項目 <li> を出力します。このコンポーネントは <aura:iteration> を使用して similarProperties 属性のレコードをループ処理し、レコードごとに物件の名前 {!item.Name} を表示します。


    最後に、コンポーネントが読み込まれると、コンポーネントのコントローラで doInit 関数がコールされます。ですから、この関数を作成する必要があります。


  6. 開発者コンソールの右側のバーにある [CONTROLLER (コントローラ)] をクリックします。
  7. デフォルトのコードを次のコードに置き換えます。
  8. ({
        doInit : function(component, event, helper) {
            var action = component.get("c.findProperties");
            action.setParams({
                recordId: component.get("v.recordId"),
                priceRange: "100000"
            });
            action.setCallback(this, function(response){
                var similarProperties = response.getReturnValue();
                component.set("v.similarProperties", similarProperties);
            });
            $A.enqueueAction(action);
        }
    })
    
  9. ファイルを保存します。
  10. [Property (物件)] レコードページに戻り、[Setup (設定)] アイコン 設定アイコン をクリックして [Edit Page (編集ページ)] を選択します。
  11. [Custom (カスタム)] コンポーネントで SimilarProperties コンポーネントを見つけ、ページの右側の列の上部にドラッグします。
  12. [Save (保存)] をクリックして、[Back (戻る)] をクリックします。
  13. これでページに同じ価格帯の物件のリストが表示されます。

パート 3: 子コンポーネントを作成する

Aura コンポーネントを構築する場合、すべてのマークアップを集めて 1 つのコンポーネントにすることができます。ただし、小さめのコンポーネントに分割し、それを大きなコンポーネントにまとめることをお勧めします。こうしたサブコンポーネントにすれば、他のコンポーネントでも使用できるようになります。

このステップでは、各レコードのさらなる情報を表示するコンポーネントを作成します。

  1. 開発者コンソールで、[File (ファイル)] > [New (新規)] > [Lightning Component (Lightning コンポーネント)] を選択します。
  2. このコンポーネントに「SimilarProperty」という名前を付け、チェックボックスはすべてオフのままにします。
  3. [Submit (送信)] ボタンをクリックします。
  4. 次のコードを 2 行目に追加します。
  5. <aura:attribute name="property" type="Property__c"/>
    {!v.property.Name}
    
  6. ファイルを保存します。
  7. SimilarProperties.cmp コンポーネントに戻ります。<li> 内の {!item.Name} を次のコードに置き換えます。
  8. <c:SimilarProperty property="{!item}"/>
    
  9. ファイルを保存して、[Property Detail (物件詳細)] ページを更新します。外観上の変化はありません。

パート 4: インターフェースを改善する

  1. SimilarProperty.cmp 内の {!v.property.Name} を次のコードに置き換えます。
  2. <lightning:recordViewForm aura:id="viewForm" recordId="{!v.property.Id}" objectApiName="Property__c">
        <lightning:outputField fieldName="Name"/>
    </lightning:recordViewForm>
    

    子コンポーネントのユーザインターフェースを改善するために、lightning:recordViewForm ラッパーコンポーネントを使用します。このコンポーネントはレコード ID を受け入れ、lightning:outputField コンポーネントで指定されている、そのレコードに関連付けられた項目を表示します。上記のコードでは、[Name (名前)] 項目を表示するように指定しています。


  3. ファイルを保存して、[Property Detail (物件詳細)] ページを更新します。
  4. 次のコードを SimilarProperty.cmp の、最初の lightning:outputField の後に追加します。
  5. <lightning:outputField fieldName="Beds__c"/>
    <lightning:outputField fieldName="Baths__c"/>
    <lightning:outputField fieldName="Price__c"/>
    <lightning:outputField fieldName="Status__c"/>
    
  6. ファイルを保存して、[Property Detail (物件詳細)] ページを更新します。
  7. 次に、柔軟なグリッドシステムである lightning:layout を使用して、コンポーネントにコンテナを配置します。貼り付けた 4 行のコードを次のコードに置き換えます。
  8. <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>
    
  9. ファイルを保存して、[Property Detail (物件詳細)] ページを更新します。
  10. <lightning:recordViewForm> の内容を次のコードに置き換えます。
  11. <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: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>
    
  12. ファイルを保存して、[Property Detail (物件詳細)] ページを更新します。

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

MyPropertyController.apxc

public with sharing class MyPropertyController {
    @AuraEnabled
    public static List<Property__c> findProperties (Id recordId, Decimal priceRange) {
        List<Property__c> property = [SELECT Price__c FROM Property__c WHERE Id=:recordId];
        Decimal propertyPrice = property[0].Price__c;
        List<Property__c> similarProperties = getSimilarProperties(recordId, priceRange, propertyPrice);return similarProperties;
    }
    private static List<Property__c> getSimilarProperties (Id recordId, Decimal priceRange, Decimal price ) {
    Decimal range;
    if (priceRange == null) {
        range = 100000;
    } else {
        range = priceRange;
    }
    return [
        SELECT Id, Name, Beds__c, Baths__c, Price__c, Broker__c, Status__c, Thumbnail__c
        FROM Property__c WHERE Id != :recordId AND Price__c > :price - range AND Price__c < :price + range];
    }
}

SimilarProperties.cmp

<aura:component controller="myPropertyController" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="similarProperties" type="Object[]"/>
    <aura:handler name="init" value="{! this}" action="{!c.doInit}"/>
    <lightning:card iconName="custom:custom85" title="Similar Properties">
        <div class="slds-p-left_medium slds-p-right_medium">
            <ul class="slds-list_vertical slds-has-dividers_top-space">
                <aura:iteration items="{!v.similarProperties}" var="item">
                    <li class="slds-list__item">
                        <c:SimilarProperty property="{!item}"/>
                    </li>
                </aura:iteration>
            </ul>
        </div>
    </lightning:card>
</aura:component>

SimilarPropertiesController.js

({
    doInit : function(component, event, helper) {
        var action = component.get("c.findProperties");
        action.setParams({
            recordId: component.get("v.recordId"),
            priceRange: "100000"
        });
        action.setCallback(this, function(response){
            var similarProperties = response.getReturnValue();
            component.set("v.similarProperties", similarProperties);
        });
        $A.enqueueAction(action);
    }
})

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: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>
無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる