[Salesforce]Lightning コンポーネント‐手順８：ヘルパー

Lightningコンポーネントのヘルパーについて共有します。

コンポーネント

<!-- 手順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>  

    <!-- 手順７ -->
    <h3>リード登録</h3>

    <aura:attribute name="lead" type="Lead" default="{ 'sobjectType': 'Lead', 'LastName': '', 'Company': '' }"/>

    <form>
        <ui:inputText aura:id="company" label="会社名" value="{!v.lead.Company}" required="true"/>
        <ui:inputText aura:id="lastname" label="姓" value="{!v.lead.LastName}" required="true"/>
        <ui:button label="登録" press="{!c.createLead}"/>
    </form>

    <!-- 手順8 -->
    <h3>リード表示</h3>
    <ui:button label="更新" press="{!c.refresh}"/>
    <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);
    },
    
        createLead: function(component, event, helper) {
        //-- 手順7 --

        var isValid = true;
        var company = component.find("company");
        var lastName = component.find("lastname");


        // エラークリア
        //company.setValid("v.value", true);
        //lastName.setValid("v.value", true);

        if ($A.util.isEmpty(company.get("v.value"))) {
            // エラーセット
            //company.setValid("v.value", false);
            //company.addErrors("v.value", [{message:"会社名を入力してください。"}]);
            isValid = false;
        }
        if ($A.util.isEmpty(lastName.get("v.value"))) {
            // エラーセット
            //lastName.setValid("v.value", false);
            //lastName.addErrors("v.value", [{message:"姓を入力してください。"}]);
            isValid = false;
        }


        if (isValid) {
            var lead = component.get("v.lead");
            var action = component.get("c.create");
            action.setParams({
                "ld": lead
            });

            action.setCallback(this, function(a){
                // Salesforce1イベント発火（トーストメッセージ表示）
                /*
                var toastEvent = $A.get("e.force:showToast");
                if (action.getState() === 'SUCCESS') {
                    toastEvent.setParams({
                        "title": "Success",
                        "message": "正常に登録が完了しました"
                    });
                    company.set("v.value", "");
                    lastName.set("v.value", "");
                } else {
                    toastEvent.setParams({
                        "title": "Error",
                        "message": "エラーが発生しました"
                    });
                }
                toastEvent.fire();
                */
            });

            $A.enqueueAction(action);
        }
    },
    
    doRefreshInit: function(component, event, helper) {
        helper.getLeads(component);
    },
    refresh: function(component, event, helper) {
        helper.getLeads(component);
    },
})

ヘルバー

({
    getLeads: function(component) {
    var action = component.get("c.findAll");
    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

結果

エラーあし