Sfdgr 12 20180906_v1.0
•Télécharger en tant que PPTX, PDF•
0 j'aime•234 vues
Salesforce Lightning Component
Recommandé
Contenu connexe
Tendances
Tendances (11)
Similaire à Sfdgr 12 20180906_v1.0
Similaire à Sfdgr 12 20180906_v1.0 (20)
Plus de SFDG ROOKIES
Dernier
Dernier (9)
Sfdgr 12 20180906_v1.0
- 1. Salesforce Developer Group Rookies #12 2018/09/06(木)＠株式会社LIFULL
- 2. 本日のメニュー 2 • 19:00~19:10 ルーキー会の簡単な説明 • 19:10~19:30 自己紹介タイム • 19:30~20:45 座学＆ハンズオン＆お題 • 20:45~21:00 お題解説&全体写真撮影 • 21:00~21:30 ご歓談タイム 注意事項 会場の様子は写真に撮って公開される可能性があります。予めご了承下さい。 (顔出しNGの方がいらっしゃいましたらサッと隠れるか運営までお知らせ下さ い）
- 3. 今日の進行役 3 讃岐 行（Sanuki Ikou） 株式会社テラスカイ Tw：@i_sanuki FB：isanuki なにやっている人？ Salesforce導入コンサルティング、開発 社内ツール開発、トレーニング Salesforce Developer Group、Developerルーキー会の運営 ユーザグループ「新機能照らす会」のリーダー TrailblazerCommunityにちらほら
- 5. 運営メンバー 5 株式会社テラスカイ 讃岐 行 @i_sanuki 株式会社フレクト 齊藤 俊 株式会社テラスカイ 須山 洋輔 @suyaman_jp 株式会社NSD 小林 亮理 @ryosuke921186 ServiceCloud の達人 Apexの神MVP テストの鬼 お休み
- 6. 6 3年未満 2年未満 1年未満 未経験 3年以上 未経験 半年未満 1年未満 2年未満 3年未満 SFでの 開発経験 プログラミングの経験 2 1 ３ 2 1 1 1 5 1 3年以上 4 2 1 半年未満 2 人数=50 1 1 1 1 不明
- 8. Lightning Componentを開発しよう 1. Lightning Component概要（座学） 2. 開発ハンズオン 3. もっと作ってみよう（お題にチャレンジ） 8
- 10. Salesforce UI開発の選択肢 • Visualforce + Apex Controller – JSP/Servletライクな従来のやり方 • Visualforce + JS – VFはコンテナとしてReactやVueを使う • Lightning Component – SFが提供する新しいSPAフレームワーク 10 Page中心 Application中心 いわゆるSPA
- 11. Page 中心(Visualforce + Apex Controller) 11 1. ユーザがページをリクエスト 2. サーバ側でVFタグの変換Apexコントローラコードの実行を行い、リクエスト結果としてHTML ページをブラウザに送信 3. ブラウザは結果を表⽰ 4. ユーザがボタン、リンクをクリックなどのアクションを行うと新規ページをリクエストする。 （ステップ１にもどる）
- 12. App 中心 (Lightning Component) 12 1. ユーザがアプリケーション、あるいはコンポーネントをリクエスト 2. クライアントにアプリケーション、あるいはコンポーネントのバンドル（必要なファイル群） をロード 3. JavaScriptアプリケーションがUIを⽣成 4. ユーザとのインターラクションの結果、JavaScriptアプリケーションがUIを適時変更する
- 13. SPA（Lightning Component） 13 Component (HTML+独 自タグ) Controller (JS) Helper (JS) Style (CSS) その他Renderer, Document等 Apex データ (オブジェクト) 構造 イベント処理 クライアント側 ロジック サーバー側 ロジック Lightning Component(Bundle) 通信 SOQL DML
- 15. Lightning Componentを従来のVFと比較した時 15 • SPAフレームワーク • LEXフレンドリー • モバイルフレンドリー • よりコンポーネントフレンドリー • フローからの呼び出し • SalesforceのUI戦略に乗れる • 習得コスト • 発展途上/安定性 • LockerServiceによる制約 Good Bad
- 17. 開発するComponent：ハンズオンゴール 1. MessageBoardカスタムオブジェクトに登録された最新のメッセージを表⽰するコ ンポーネント 2. コンポーネントを開いたときとʼupdate messageʼボタンを押された時に最新の状 態に更新 17
- 23. MessageBordレコードの作成 • タブから新規レコードを作成する – MessageBoard名に何か入れる – Messageに「Hello world!」と入力（何でもよい） 23
- 25. 最新のMessageを取得するApexクラスを作成 public class MessageBoardController { @AuraEnabled public static MessageBoard__c getMessageBoard() { // 最新のMessageBoardカスタムオブジェクトを返却するメソッドです。 // 【注】レコードがない場合は例外が発⽣します。 MessageBoard__c m = [SELECT Id, Name, Message__c FROM MessageBoard__c Order By CreatedDate DESC LIMIT 1]; return m; } } 25
- 26. 最新のメッセージを表⽰するCOMPONENTを作成① File > New > Lightning Componentʼを選択します。 26
- 27. 1. ʻNew Lightning BundleʼダイアログのNameに ʼMessageBoardʼと入力します 2. ʻSubmitʼボタンを押します。 最新のメッセージを表⽰するCOMPONENTを作成② 27
- 28. MessageBoard Component <aura:component implements="flexipage:availableForAllPageTypes" controller="MessageBoardController"> <aura:handler name="init" action="{!c.doInit}" value="{!this}"/> <aura:attribute name="messageBoard" type="MessageBoard__c"/> <p> Message:<ui:outputText value="{!v.messageBoard.Message__c}"/> </p> <ui:button label="update message" press="{!c.updateMessage}"/> </aura:component> 28 どこで使うか サーバーサイドのApex Event処理。initは初期 処理 Componentの属性 テキスト表⽰ ボタン
- 29. COMPONENTから呼び出されるCONTROLLERを作成 1. 開発者コンソール右側のʼCONTROLLERʼを選択 2. 関数doInitとupdateMessageを定義します。 – コードは次ページ 29
- 30. MessageBoard Controller ({ doInit: function(component, event, helper) { helper.updateMessage(component, event); }, updateMessage: function(component, event, helper) { helper.updateMessage(component, event); } }) 30 Componentのhandlerから 呼ばれる関数定義 Componentのボタンから 呼ばれる関数定義 ControllerではComponentから呼ばれる処理をハンドリングして、具体的な処 理を行うHelperに渡すのが一般的。
- 32. MessageBoard Helper ({ updateMessage: function(component, event) { var action = component.get("c.getMessageBoard"); action.setCallback(this, function(response) { var state = response.getState(); if (component.isValid() && state === "SUCCESS") { component.set("v.messageBoard", response.getReturnValue()); } else { console.log("簡易エラーログ: " + state); } }); $A.enqueueAction(action); } }) 32 Apexのメソッド名を指定 Apex後のコールバック処理 Apex側でエラーがない メソッドの戻り値を componentの属性にセット Apexでエラーが発⽣ Apexを呼び出すキューに 入れる
- 34. MessageBoard STYLE 34 p.THIS{ background-color : white; font-size : 20px; height : 100px; } .THISは自身のComponent
- 37. Component配置② • 任意のページ名を入れる • ビルダーでMessageBoardコンポーネントを右に配置 • その他自由に標準コンポーネントを配置 37
- 40. 更新確認 • 既存のホームをそのままに別タブで新規にレコード作成 • Update messageボタンを押すことで新たなメッセージを取得 40 完成！
- 43. ヒント1 • Componentのimplements属性にレコードIdを持たせる – 取引先画面に配置した時に取引先Idを保持し、関連する商談の取得に使う – <aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" ... • 取引先IdをApexのControllerに渡す 43 var action = component.get("c.getOpportunities"); action.setParams({ “accId” : component.get(“v.recordId”) //accIdはApexメソッドの引数名 }); action.setCallback(this, function(response) { ...
- 44. ヒント2 • 取得したレコードを表⽰ – Attributeに入った商談リストをiterationで繰り返しながら表⽰ 44 <aura:attribute name="oppList" type="Opportunity[]"/> （中略） <aura:iteration items="{!v.oppList}" var="opp"> ループ変数oppに商談1レコードが入るので、opp.Nameとかでアクセス可能 具体的な出し方は考えてみてください </aura:iteration>
- 46. Trailblazer Community Salesforceのユーザやアドミンや開発者が集まるコミュニティ 46 https://success.salesforce.com/_ui/core /chatter/groups/GroupProfilePage?g=0F 93A000000HTtr 【開発者向け】 • Salesforce Developer Group ルーキー会 • Tokyo Salesforce Developer Group • Salesforce女子部 など 今日の勉強会レポートを書いてくれる方 大募集！
- 47. 直近のコミュニティイベント紹介 • 9月8日(土) 13:00- 第12回 恵比寿Salesforce勉強会（Trailheadもくもく会） – https://ebisu-salesforce.connpass.com/event/99828/ • 9月8日(土) 19:00- Salesforce女子部#21 ～最強のDreamforceの歩き方を作る～ – https://sfggjp.connpass.com/event/96090/ • 9月21日(金) 19:00- QSD Salesforce勉強会 #9 in 鹿児島 – https://fsdg.connpass.com/event/100360/ • 9月28日(金) 19:00- dreamforce2018 Japan Night in Japan – https://connpass.com/event/100037/ 47