ステップバイステップでLightningコンポーネントを楽しもう！ - モジュール7

データを登録してみよう

クライアント側で入力チェックを行い、問題なければApexをコールしLeadを登録します。

画面イメージ

ソース

Apex

モジュール6のApexクラス(LeadController.cls)にメソッドを追加します。

LeadController.cls

    @AuraEnabled
    public static Lead create(Lead ld) {
        insert ld;
        return ld;
    }

Component

m07_Validation.cmp

<aura:component controller="LeadController" implements="force:appHostable">

    <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>

</aura:component>

m07_ValidationController.js

({
    createLead: function(component, event, helper) {

        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);
        }
    },
})

ポイント

入力コンポーネント

さまざまな入力イベントがサポートされ、ユーザインターフェースイベントのイベント処理が簡略化されます。

項目の検証

デフォルトのエラーコンポーネント（ui:inputDefaultError）を使用してエラーメッセージを利用しています。
setValid(true)でエラークリアします。

Salesforce1イベント

e.force:showToast

トーストメッセージを表示するSalesforce1イベントの発火を行います。

Auraオブジェクトのユーティリティ

$A.util.isEmpty

補足

• P86 入力コンポーネントの概要
• P167 項目の検証
• P135 Salesforce1イベント
• P156 JavaScriptでの属性値の操作、$A.util.isEmpty

---

モジュール6へ | モジュール8へ