SlideShare a Scribd company logo
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
3
2
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

More Related Content

Similar to Lighting componentワークブック(経費精算アプリ)

WordPress widget api
WordPress widget apiWordPress widget api
WordPress widget api
Takami Kazuya
 
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
 
Try Jetpack
Try JetpackTry Jetpack
Try Jetpack
Hideaki Miyake
 
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with  .net 6 asp.net core web api, react, and elasti...Let's build a simple app with  .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Shotaro Suzuki
 
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
Yuki Higuchi
 
[Excel VBA] Convert a sheet to Markdown file.
[Excel VBA] Convert a sheet to Markdown file.[Excel VBA] Convert a sheet to Markdown file.
[Excel VBA] Convert a sheet to Markdown file.
Sakai Memoru
 
Vue入門
Vue入門Vue入門
Vue入門
Takeo Noda
 
CodeIgniterによるPhwittr
CodeIgniterによるPhwittrCodeIgniterによるPhwittr
CodeIgniterによるPhwittr
kenjis
 
Tech talk salesforce mobile sdk
Tech talk   salesforce mobile sdkTech talk   salesforce mobile sdk
Tech talk salesforce mobile sdkKazuki Nakajima
 
20091030cakephphandson 01
20091030cakephphandson 0120091030cakephphandson 01
20091030cakephphandson 01Yusuke Ando
 
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
codeal
 
Jqm20120210
Jqm20120210Jqm20120210
Jqm20120210cmtomoda
 
勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発Kazuki Nakajima
 
広告配信現場で使うSpark機械学習
広告配信現場で使うSpark機械学習広告配信現場で使うSpark機械学習
広告配信現場で使うSpark機械学習
x1 ichi
 
Android Architecture Componentsの新機能
Android Architecture Componentsの新機能Android Architecture Componentsの新機能
Android Architecture Componentsの新機能
Damper Matsu
 
Build 番号の自動更新スクリプトについて #cocoa_kansai
Build 番号の自動更新スクリプトについて #cocoa_kansaiBuild 番号の自動更新スクリプトについて #cocoa_kansai
Build 番号の自動更新スクリプトについて #cocoa_kansai
Tomohiro Kumagai
 
OSC2011 Androidハンズオン
OSC2011 AndroidハンズオンOSC2011 Androidハンズオン
OSC2011 Androidハンズオン
Katsumi Honda
 
jQuery超入門編
jQuery超入門編jQuery超入門編
jQuery超入門編
Yasuhito Yabe
 
Hadoop jobbuilder
Hadoop jobbuilderHadoop jobbuilder
Hadoop jobbuilder
Taku Miyakawa
 

Similar to Lighting componentワークブック(経費精算アプリ) (20)

WordPress widget api
WordPress widget apiWordPress widget api
WordPress widget api
 
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
 
Try Jetpack
Try JetpackTry Jetpack
Try Jetpack
 
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with  .net 6 asp.net core web api, react, and elasti...Let's build a simple app with  .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
 
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
 
[Excel VBA] Convert a sheet to Markdown file.
[Excel VBA] Convert a sheet to Markdown file.[Excel VBA] Convert a sheet to Markdown file.
[Excel VBA] Convert a sheet to Markdown file.
 
Vue入門
Vue入門Vue入門
Vue入門
 
CodeIgniterによるPhwittr
CodeIgniterによるPhwittrCodeIgniterによるPhwittr
CodeIgniterによるPhwittr
 
Tech talk salesforce mobile sdk
Tech talk   salesforce mobile sdkTech talk   salesforce mobile sdk
Tech talk salesforce mobile sdk
 
20091030cakephphandson 01
20091030cakephphandson 0120091030cakephphandson 01
20091030cakephphandson 01
 
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
 
Jqm20120210
Jqm20120210Jqm20120210
Jqm20120210
 
勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発勉強会force#2 HTML5によるモバイルアプリ開発
勉強会force#2 HTML5によるモバイルアプリ開発
 
広告配信現場で使うSpark機械学習
広告配信現場で使うSpark機械学習広告配信現場で使うSpark機械学習
広告配信現場で使うSpark機械学習
 
Android Architecture Componentsの新機能
Android Architecture Componentsの新機能Android Architecture Componentsの新機能
Android Architecture Componentsの新機能
 
Build 番号の自動更新スクリプトについて #cocoa_kansai
Build 番号の自動更新スクリプトについて #cocoa_kansaiBuild 番号の自動更新スクリプトについて #cocoa_kansai
Build 番号の自動更新スクリプトについて #cocoa_kansai
 
OSC2011 Androidハンズオン
OSC2011 AndroidハンズオンOSC2011 Androidハンズオン
OSC2011 Androidハンズオン
 
jQuery勉強会#4
jQuery勉強会#4jQuery勉強会#4
jQuery勉強会#4
 
jQuery超入門編
jQuery超入門編jQuery超入門編
jQuery超入門編
 
Hadoop jobbuilder
Hadoop jobbuilderHadoop jobbuilder
Hadoop jobbuilder
 

More from Akihiro Iwaya

Wt13 processing records
Wt13 processing recordsWt13 processing records
Wt13 processing records
Akihiro Iwaya
 
Wt12 triggering flows
Wt12 triggering flowsWt12 triggering flows
Wt12 triggering flows
Akihiro Iwaya
 
Wt11 writing dataweave transformations
Wt11 writing dataweave transformationsWt11 writing dataweave transformations
Wt11 writing dataweave transformations
Akihiro Iwaya
 
Wt9 multicast an event
Wt9 multicast an eventWt9 multicast an event
Wt9 multicast an event
Akihiro Iwaya
 
Wt8 consuming web services
Wt8 consuming web servicesWt8 consuming web services
Wt8 consuming web services
Akihiro Iwaya
 
Wt7 structuring mule applications
Wt7 structuring mule applicationsWt7 structuring mule applications
Wt7 structuring mule applications
Akihiro Iwaya
 
Wt6 accessing and modifying mule event
Wt6 accessing and modifying mule eventWt6 accessing and modifying mule event
Wt6 accessing and modifying mule event
Akihiro Iwaya
 
Wt5 deploying and managing ap is
Wt5 deploying and managing ap isWt5 deploying and managing ap is
Wt5 deploying and managing ap is
Akihiro Iwaya
 
Wt4 building apis
Wt4 building apisWt4 building apis
Wt4 building apis
Akihiro Iwaya
 
Wt3 designing apis
Wt3 designing apisWt3 designing apis
Wt3 designing apis
Akihiro Iwaya
 
Iot explore demo for cross clouds
Iot explore demo for cross cloudsIot explore demo for cross clouds
Iot explore demo for cross clouds
Akihiro Iwaya
 
Iot explorer デモ (MC, CC, Heroku, Core)
Iot explorer デモ (MC, CC, Heroku, Core)Iot explorer デモ (MC, CC, Heroku, Core)
Iot explorer デモ (MC, CC, Heroku, Core)
Akihiro Iwaya
 
Df salesforce dx説明資料
Df salesforce dx説明資料Df salesforce dx説明資料
Df salesforce dx説明資料
Akihiro Iwaya
 
IoT explorer タクシー配車デモ
IoT explorer タクシー配車デモIoT explorer タクシー配車デモ
IoT explorer タクシー配車デモ
Akihiro Iwaya
 
Io t工場機器監視デモ
Io t工場機器監視デモIo t工場機器監視デモ
Io t工場機器監視デモ
Akihiro Iwaya
 
Salesforce X AWS Machine Learning
Salesforce X AWS Machine LearningSalesforce X AWS Machine Learning
Salesforce X AWS Machine Learning
Akihiro Iwaya
 
Visualforceとは
VisualforceとはVisualforceとは
Visualforceとは
Akihiro Iwaya
 
Soracom X AWS Iot X Salesforce
Soracom X AWS Iot X SalesforceSoracom X AWS Iot X Salesforce
Soracom X AWS Iot X Salesforce
Akihiro Iwaya
 
Force.comハンズオン
Force.comハンズオンForce.comハンズオン
Force.comハンズオン
Akihiro Iwaya
 
Lightingコンポーネントベーシック開発
Lightingコンポーネントベーシック開発Lightingコンポーネントベーシック開発
Lightingコンポーネントベーシック開発
Akihiro Iwaya
 

More from Akihiro Iwaya (20)

Wt13 processing records
Wt13 processing recordsWt13 processing records
Wt13 processing records
 
Wt12 triggering flows
Wt12 triggering flowsWt12 triggering flows
Wt12 triggering flows
 
Wt11 writing dataweave transformations
Wt11 writing dataweave transformationsWt11 writing dataweave transformations
Wt11 writing dataweave transformations
 
Wt9 multicast an event
Wt9 multicast an eventWt9 multicast an event
Wt9 multicast an event
 
Wt8 consuming web services
Wt8 consuming web servicesWt8 consuming web services
Wt8 consuming web services
 
Wt7 structuring mule applications
Wt7 structuring mule applicationsWt7 structuring mule applications
Wt7 structuring mule applications
 
Wt6 accessing and modifying mule event
Wt6 accessing and modifying mule eventWt6 accessing and modifying mule event
Wt6 accessing and modifying mule event
 
Wt5 deploying and managing ap is
Wt5 deploying and managing ap isWt5 deploying and managing ap is
Wt5 deploying and managing ap is
 
Wt4 building apis
Wt4 building apisWt4 building apis
Wt4 building apis
 
Wt3 designing apis
Wt3 designing apisWt3 designing apis
Wt3 designing apis
 
Iot explore demo for cross clouds
Iot explore demo for cross cloudsIot explore demo for cross clouds
Iot explore demo for cross clouds
 
Iot explorer デモ (MC, CC, Heroku, Core)
Iot explorer デモ (MC, CC, Heroku, Core)Iot explorer デモ (MC, CC, Heroku, Core)
Iot explorer デモ (MC, CC, Heroku, Core)
 
Df salesforce dx説明資料
Df salesforce dx説明資料Df salesforce dx説明資料
Df salesforce dx説明資料
 
IoT explorer タクシー配車デモ
IoT explorer タクシー配車デモIoT explorer タクシー配車デモ
IoT explorer タクシー配車デモ
 
Io t工場機器監視デモ
Io t工場機器監視デモIo t工場機器監視デモ
Io t工場機器監視デモ
 
Salesforce X AWS Machine Learning
Salesforce X AWS Machine LearningSalesforce X AWS Machine Learning
Salesforce X AWS Machine Learning
 
Visualforceとは
VisualforceとはVisualforceとは
Visualforceとは
 
Soracom X AWS Iot X Salesforce
Soracom X AWS Iot X SalesforceSoracom X AWS Iot X Salesforce
Soracom X AWS Iot X Salesforce
 
Force.comハンズオン
Force.comハンズオンForce.comハンズオン
Force.comハンズオン
 
Lightingコンポーネントベーシック開発
Lightingコンポーネントベーシック開発Lightingコンポーネントベーシック開発
Lightingコンポーネントベーシック開発
 

Lighting componentワークブック(経費精算アプリ)