データを登録してみよう
クライアント側で入力チェックを行い、問題なければ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