Post on 09-Feb-2017
Lightning Component ハンズオン経費精算アプリケーション
株式会社セールスフォース・ドットコム
経費精算アプリケーション
経費オブジェクトの合計金額を表示
新規作成ボタン
経費オブジェクトの総数を表示
“Reimbursed?”項目編集可能
カスタムオブジェクト作成+データ登録
カスタムオブジェクトとレコードを作成して下さい
Lightingコンポーネント有効化
1
2
Lighting Application作成
1
3
2
1
2
Lighting Application作成
ファイルは必ず保存してください。
次ページのソースコードをコピー &ペーストして下さい
コード
<aura:application> <ltng:require styles="/resource/bootstrap"/> <div class="bootstrap-sf1"> <div class="navbar navbar-inverse">
<div class="navbar-header"> <a href="#" class="navbar-brand">経費精算 </a>
</div> </div> </div></aura:application>
1
2
画面確認
CSSファイル
下記 URLから zipファイルをダウンロードしてください。今回使用する CSSは /dist/css/bootstrap-namespaced.min.cssだけです。http://developer.salesforcefoundation.org/bootstrap-sf1/
1
32
Form Lightning Component作成
1
2
Form Lightning Component作成
1
2
次ページのソースコードをコピー &ペーストして下さい
コード<aura:component> <ltng:require styles="/resource/bootstrap"/> <aura:attribute name="expenses" type="Expense__c[]"/> <aura:attribute name="newExpense" type="Expense__c" default="{ 'sobjectType': 'Expense__c', 'Name': '', 'Amount__c': 0, 'Client__c': '', 'Date__c': '', 'Reimbursed__c': false }"/> <!-- Attributes for Expense Counters --> <aura:attribute name="total" type="Double" default="0.00" /> <aura:attribute name="exp" type="Double" default="0" />
<!-- Input Form using components --> <div class="bootstrap-sf1"> <div class="container"> <form> <fieldset> <ui:inputText aura:id="expname" label="Expense Name" class="form-control" value="{!v.newExpense.Name}" placeholder="My Expense" required="true"/>
<ui:inputNumber aura:id="amount" label="Amount" class="form-control" value="{!v.newExpense.Amount__c}" placeholder="20.80" required="true"/> <ui:inputText aura:id="client" label="Client" class="form-control" value="{!v.newExpense.Client__c}" placeholder="ABC Co."/> <ui:inputDateTime aura:id="expdate" label="Expense Date" class="form-control" value="{!v.newExpense.Date__c}" displayDatePicker="true"/> <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?" class="checkbox" value="{!v.newExpense.Reimbursed__c}"/> <ui:button label="Submit" press="{!c.createExpense}"/> </fieldset> </form> </div><!-- ./container-->
<!-- Expense Counters --> <div class="container"> <div class="row"> <div class="col-sm-6"> <!-- Make the counter red if total amount is more than 100 --> <div class="{!v.total >= 100 ? 'alert alert-danger' : 'alert alert-info'}"> <h3>Total Expenses</h3>$<ui:outputNumber value="{!v.total}" format=".00"/> </div> </div> <div class="col-sm-6"> <div class="alert alert-info"> <h3>No. of Expenses</h3><ui:outputNumber value="{!v.exp}"/> </div> </div> </div> </div> <!-- Display expense records --> <div class="container"> <div id="list" class="row"> <aura:iteration items="{!v.expenses}" var="expense"> <!-- If you’re using a namespace, use the format {!expense.myNamespace__myField__c} instead. -->
<p>{!expense.Name}, {!expense.Client__c}, {!expense.Amount__c}, {!expense.Date__c}, {!expense.Reimbursed__c}</p> </aura:iteration> </div> </div> </div><!--./bootstrap-sf1--></aura:component>
CSSファイル作成
1
2
次ページのソースコードをコピー &ペーストして下さい
ソース
.THIS .uiInputDateTime+.datePicker-openIcon { position: absolute; left: 90%; top: 30px;
}
.THIS .uiInputDefaultError li { list-style: none;
}
アプリケーションに Formコンポーネント追加
1
3
2
アプリケーションに Formコンポーネント追加
1
2
1
2
画面確認
サーバーからデータ取得
1
3
2
次ページのソースコードをコピー &ペーストして下さい
ソース
public with sharing class ExpenseController { @AuraEnabled public static List<Expense__c> getExpenses() {
return [SELECT Id, Name, Amount__c, Client__c, Date__c, Reimbursed__c, CreatedDate FROM Expense__c]; }
}
form.cmpファイルを開く
1
3
2
form.cmpの修正
1
修正前
修正後
2
formController.js
1
2
3
formHelper.js
1
3
2
次ページのソースコードをコピー &ペーストして下さい
ソース({
getExpenses: function(component) {
var action = component.get("c.getExpenses");
var self = this;
action.setCallback(this, function(response) {
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
component.set("v.expenses", response.getReturnValue());
self.updateTotal(component);
}
});
$A.enqueueAction(action);
},
updateTotal : function(component) {
var expenses = component.get("v.expenses");
var total = 0;
for(var i=0; i<expenses.length; i++){
var e = expenses[i];
//If you’re using a namespace, use e.myNamespace__Amount__c instead
total += e.Amount__c;
}
//Update counters
component.set("v.total", total);
component.set("v.exp", expenses.length);
},//Delimiter for future code
})
画面確認
1
3
2
4
画面確認
expenseListコンポーネント作成
1
3
2
4
次ページのソースコードをコピー &ペーストして下さい
ソース
<aura:component> <aura:attribute name="expense" type="Expense__c"/> <!-- Color the item blue if the expense is reimbursed --> <div class="{!v.expense.Reimbursed__c == true ? 'alert alert-success' : 'alert alert-warning'}"> <a aura:id="expense" href="{!'/' + v.expense.Id}"> <h3>{!v.expense.Name}</h3> </a> <p>Amount: <ui:outputNumber value="{!v.expense.Amount__c}" format=".00"/> </p> <p>Client: <ui:outputText value="{!v.expense.Client__c}"/> </p> <p>Date: <ui:outputDateTime value="{!v.expense.Date__c}" /> </p> <p>Reimbursed? <ui:inputCheckbox value="{!v.expense.Reimbursed__c}" click="{!c.update}"/> </p> </div></aura:component>
formコンポーネント編集
1
2
修正前
修正後
formコンポーネント編集
画面確認
1
3
2
画面確認
経費新規ボタン実装
1
メソッド追加
formController編集
1
2
次ページのソースコードをコピー &ペーストして下さい
3
ソース
createExpense : function(component, event, helper) { var amtField = component.find("amount"); var amt = amtField.get("v.value"); if (isNaN(amt)||amt==''){ amtField.setValid("v.value", false); amtField.addErrors("v.value", [{message:"Enter an expense amount."}]); } else { amtField.setValid("v.value", true); var newExpense = component.get("v.newExpense"); helper.createExpense(component, newExpense); }},//Delimiter for future code
formHelper編集
1
2
次ページのソースコードをコピー &ペーストして下さい
3
ソース
createExpense: function(component, expense) { this.upsertExpense(component, expense, function(a) { var expenses = component.get("v.expenses"); expenses.push(a.getReturnValue()); component.set("v.expenses", expenses); this.updateTotal(component); });}, upsertExpense : function(component, expense, callback) { var action = component.get("c.saveExpense"); action.setParams({ "expense": expense }); if (callback) { action.setCallback(this, callback); } $A.enqueueAction(action); }
画面確認
3
2
1
画面確認
1
画面確認
イベント追加
1
3
2
4
1
3
2
expenseList Contoller
expenseList Contoller次ページのソースコードをコピー &ペーストして下さい
3
ソース
({ update: function(component, evt, helper) { var expense = component.get("v.expense"); var updateEvent = $A.get("e.c:updateExpenseItem"); updateEvent.setParams({ "expense": expense }).fire(); }})
Form.cmp編集
1
2
1
1行追加
2
Form.cmp編集
1
次ページのソースコードをコピー &ペーストして下さい
32
ソース
updateEvent : function(component, event, helper) { helper.upsertExpense(component, event.getParam("expense"));}
アプリケーション動作確認
新規作成、変更、リスト表示が正常動作していることを確認してください
END