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
結果
エラーあし
