Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

App cloud lightning-component-20170517

78 views

Published on

UmekitaForceの勉強会資料です。

Published in: Engineering
  • Be the first to comment

App cloud lightning-component-20170517

  1. 1. イノベーションを加速させる Salesforce App Cloud体験セミナー Lightning Componentを作るパート 2017年5月17日
  2. 2. アジェンダ q概要 qLightning Componentを作ろう qCommunity Builderで配置してみよう q技術情報
  3. 3. 概要
  4. 4. Lightningとは q Lightningコンポーネントフレームワーク 再利⽤可能なコンポーネントの作成や、Salesforce1モバイル・アプリのカスタマイズやスタンドアロンアプリの開発を 可能とする、コンポーネント及びエクステンション q Lightning Appビルダー Salesforce及び開発者より提供されたコンポーネントを使って⾼速にアプリケーションを開発できるUIツール q Lightning Connect Force.comアプリとOData対応した外部データソースとを簡単に統合し利⽤できるツール q Lightning プロセスビルダー ビジネス・プロセスを可視化し、作成を⾃動化できるUIツール q Lightning スキーマビルダー オブジェクト、フィールド及び関連を閲覧、作成できるUIツール q Lightning Experience Lightningコンポーネントフレームワーク上で動作している新しいSales Cloud
  5. 5. はじめに Visualforceは無く なりません
  6. 6. ユーザインターフェース移り変わり
  7. 7. Page Centric 対 App Centric
  8. 8. Page Centric (Visualforce + Apex Controller) 1. ユーザがページをリクエスト 2. サーバ側でVFタグの変換、Apexコントローラコードの実⾏を⾏い、リクエスト結果としてHTMLページをブラウザに送信 3. ブラウザは結果を表⽰ 4. ユーザがボタン、リンクをクリックなどのアクションを⾏うと新規ページをリクエストする。(ステップ1にもどる)
  9. 9. App Centric (Lightning Component) Database Apex JS Controller CMP CSS JS Helper 1. ユーザがアプリケーション、あるいはコンポーネントをリクエスト 2. クライアントにアプリケーション、あるいはコンポーネントのバンドル(必要なファイル群)をロード 3. JavaScriptアプリケーションがUIを⽣成 4. ユーザとのインターラクションの結果、JavaScriptアプリケーションがUIを適時変更する
  10. 10. どこに配置できるか § レコードに関連するアクションから呼び出し § カスタムタブ(Lightning Experiece、Salesforce1) § アプリケーションビルダー § コミュニティービルダー § Visualforce ページ § Lightning アプリケーション
  11. 11. レコードに関連するアクション
  12. 12. カスタムタブ(Lightning Experience)
  13. 13. カスタムタブ(Saleforce1)
  14. 14. アプリケーションビルダー
  15. 15. コミュニティビルダー
  16. 16. Visualforceから表⽰ 1 My Domainで設定 したURLを記入
  17. 17. Lightningアプリケーション Lightningアプリケーションは 独自URLからアクセスします
  18. 18. Lightning Componentを作ろう
  19. 19. Salesforce組織へのログイン 19
  20. 20. 開発するComponent 20 1. 最新のMessageBoardカスタムオブジェクトの内容を表⽰するコンポーネント 2. コンポーネントを開いたときとʼupdate messageʼボタンを押された時に最新の状態に更新
  21. 21. MessageBoardカスタムオブジェクト 21
  22. 22. レコード作成 22
  23. 23. 最新のMessageBoardを取得する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; } } 23
  24. 24. 最新のメッセージを表⽰するCOMPONENTを作成 1. ⾃分の名前>開発者コンソールを選択します。 1. File > New > Lightning Componentʼを選択します。 1. ʻNew Lightning BundleʼダイアログのNameにʼMessageBoardʼと⼊⼒します 2. ʻSubmitʼボタンを押します。 3. Componentタグに必要な属性 1) implements=“flexipage:availableForAllPageTypes, ,forceCommunity:availableForAllPageTypes”(アプ リケーションビルダー、コミュニティビルダーで使⽤する際に必要) 2) controller=“MessageBoardController”(Apexクラスと紐付けるために必要) 24
  25. 25. MessageBoard Component 1. <aura:component 2. implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" 3. controller="MessageBoardController"> 4. <aura:handler name="init" action="{!c.doInit}" value="{!this}"/> 5. <aura:attribute name="messageBoard" type="MessageBoard__c"/> 6. <p>Message: 7. <ui:outputText value="{!v.messageBoard.Message__c}"/> 8. </p> 9. <ui:button label="update message" press="{!c.updateMessage}"/> 10. </aura:component> 25
  26. 26. COMPONENTから呼び出されるCONTROLLERを作成 1. ʻCtrl + Shift + 2ʼまたはʼCONTROLLERʼを選択 2. 関数doInitとupdateMessageを定義します。 1) それぞれの関数に、helperのupdateMessageを呼び出す処理を記述します。 2) helperには、コンポーネント内で共通に使われる処理を記述します。 26
  27. 27. MessageBoardController Controller 1. ({ 2. doInit: function(component, event, helper) { 3. helper.updateMessage(component, event); 4. }, 5. updateMessage: function(component, event, helper) { 6. helper.updateMessage(component, event); 7. } 8. }) 27
  28. 28. 1. ʻCtrl + Shift + 3ʼまたはʼHELPERʼを選択 1. 関数updateMessageを定義します。 1) Apex controllerのgetMessageBoardを呼び出す処理を記述します 2) 正常に結果を得られた場合は、COMPONENTの属性messageBoardに取得した値を設定します CONTROLLERから呼び出されるHELPERを作成 28
  29. 29. MessageBoardController Controller 1. ({ 2. updateMessage: function(component, event) { 3. var action = component.get("c.getMessageBoard"); 4. action.setCallback(this, function(response) { 5. var state = response.getState(); 6. if (component.isValid() && state === "SUCCESS") { 7. component.set("v.messageBoard", response.getReturnValue()); 8. } 9. else { 10. console.log("Failed with state: " + state); 11. } 12. }); 13. $A.enqueueAction(action); 14. } 15. }) 29
  30. 30. Community Builderで配置
  31. 31. コミュニティの有効化 1 2 3 4
  32. 32. コミュニティテンプレート 1 2
  33. 33. コミュニティテンプレート 1 2
  34. 34. コミュニティ登録 1 2
  35. 35. コミュニティワークスペース 1
  36. 36. コミュニティビルダー 1 2 作成したMessageBoardを ドラッグ&ドロップ 「Hello Lightning!!!」メッ セージが表示されているこ とを確認
  37. 37. Lightning Component 開発に必要な情報源
  38. 38. Salesforce開発者⽤サイト https://goo.gl/wIJXYO
  39. 39. thank y u

×