Lighting componentワークブック（経費精算アプリ）

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

http://developer.salesforcefoundation.org/bootstrap-sf1/

http://developer.salesforcefoundation.org/bootstrap-sf1/

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 }"/>  <aura:attribute name="total" type="Double" default="0.00" /> <aura:attribute name="exp" type="Double" default="0" />

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

 <div class="container"> <div class="row"> <div class="col-sm-6">  <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>  <div class="container"> <div id="list" class="row"> <aura:iteration items="{!v.expenses}" var="expense"> 

<p>{!expense.Name}, {!expense.Client__c}, {!expense.Amount__c}, {!expense.Date__c}, {!expense.Reimbursed__c}</p> </aura:iteration> </div> </div> </div></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"/>  <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"));}

アプリケーション動作確認

新規作成、変更、リスト表示が正常動作していることを確認してください

Lighting componentワークブック（経費精算アプリ）

Engineering

Transcript of Lighting componentワークブック（経費精算アプリ）