[Salesforce]Lightning コンポーネント‐手順６：データの一覧表示

Lightningコンポーネントのデータのリスト表示を共有します。

Apexコントローラ

public class LeadController {

    @AuraEnabled
    public static List<Lead> findAll() {
        return [SELECT Id, LastName, Company FROM Lead ORDER BY LastModifiedDate DESC LIMIT 50];
    }
        
}

コンポーネント

<!-- 手順6 -->
<aura:component controller="LeadController" implements="force:appHostable">
<!--
<aura:component implements="force:appHostable">
-->
    <!-- 手順2 -->
	<aura:attribute name="target" type="String" default="world"/>
    <!-- 手順3 -->
    <aura:attribute name="switch" type="Boolean" default="false" />
    
    <!-- 手順１ -->
    <h1>Hello, Lightning Component!!</h1>
    
    <!-- 手順2 -->
    <h1>Hello, {!v.target}!</h1>
    
    <!-- 手順3 -->
    <h1>ボタンクリックでON/OFF</h1>

    <!-- 手順3 -->
    <aura:If isTrue="{!v.switch}">
        <p>ON</p>
        <aura:set attribute="else">
            <p>OFF</p>
        </aura:set>
    </aura:If>
    
    <!-- 手順3 -->
    <ui:button label="{!v.switch ? 'OFFにする' : 'ONにする' }" press="{!c.toggle}"/>


    <!-- 手順4 -->
    <ui:inputText aura:id="input" label="名前" value=""/>
    <ui:outputText aura:id="output" value=""/><br/>
    
    <ui:button aura:id="submit" label="設定" press="{!c.set}"/>
 
     <!-- 手順5 -->
    <div class="white">白</div>
    <h3>黒</h3>
    <ul>
        <li class="red">赤</li>
        <li class="blue">青</li>
        <li class="green">緑</li>
    </ul>  
    
    <!-- 手順6 -->
    <!-- Leadオブジェクトの配列を属性にもつ -->
    <aura:attribute name="leads" type="Lead[]"/>

    <!-- 表示ライフサイクル中に発火されるinitイベント購読 -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <h3>リード表示</h3>

    <ul>
        <aura:iteration items="{!v.leads}" var="lead">
            <li>
                <p>
                    {!lead.Company}<br/>
                    {!lead.LastName}
                </p>
            </li>
        </aura:iteration>
    </ul>  
</aura:component>

コンポーネントコントローラ

({
    toggle: function(component, event, helper) {
   	//-- 手順3 --
    	var status = component.get("v.switch");
        component.set("v.switch", !status);

    },
    
      set: function(component, event, helper) {
	　　	//-- 手順4 --

        // 入力コンポーネントから属性値取得
        var inputValue = component.find("input").get("v.value");

        // 入力コンポーネントへ属性値セット
        var output = component.find("output");
        output.set("v.value", inputValue);


        // コンポーネントの属性値取得(仕組みを把握するためのコードでこの変数"target"は利用しない)
        var target = component.get("v.target");

        // コンポーネントの属性値セット
        component.set("v.target", inputValue);
    }, 
    
    
    doInit: function(component, event, helper) {
    	//-- 手順6 --
	    // initイベント処理
        // Apexコントローラのアクションを取得
        var action = component.get("c.findAll");
        // Apexコントローラ処理後のコールバック設定
        action.setCallback(this, function(a){
            component.set("v.leads", a.getReturnValue());
        });
        // 実行アクションキューに追加
        $A.enqueueAction(action);
    }
})

動作確認する。

https://[ yourdomain ]/c/CreateComponentAppliction.app
例えば、
https://testdaeheuitest-test11-dev-ed.lightning.force.com/c/CreateComponentAppliction.app

結果