Submit Search
Upload
SFDG_画面フローとLightningWebComponentのハイブリッド開発について.pptx
•
0 likes
•
529 views
T
Toru Inoue
Follow
Salesforce Developers Meetup #29
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 17
Recommended
Salesforceの開発についてちょっと詳しくなる
Salesforceの開発についてちょっと詳しくなる
Junko Nakayama
データローダについてちょっと詳しくなる
データローダについてちょっと詳しくなる
Junko Nakayama
Einstein Analyticsでのデータ取り込みと加工
Einstein Analyticsでのデータ取り込みと加工
Salesforce Developers Japan
基本設計+詳細設計の書き方 社内勉強会0304
基本設計+詳細設計の書き方 社内勉強会0304
furuCRM株式会社 CEO/Dreamforce Vietnam Founder
Salesforce 開発入門
Salesforce 開発入門
Salesforce Developers Japan
Visualforceを使ってみよう
Visualforceを使ってみよう
Salesforce Developers Japan
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
gree_tech
はじめようLightningコンポーネント
はじめようLightningコンポーネント
Salesforce Developers Japan
Recommended
Salesforceの開発についてちょっと詳しくなる
Salesforceの開発についてちょっと詳しくなる
Junko Nakayama
データローダについてちょっと詳しくなる
データローダについてちょっと詳しくなる
Junko Nakayama
Einstein Analyticsでのデータ取り込みと加工
Einstein Analyticsでのデータ取り込みと加工
Salesforce Developers Japan
基本設計+詳細設計の書き方 社内勉強会0304
基本設計+詳細設計の書き方 社内勉強会0304
furuCRM株式会社 CEO/Dreamforce Vietnam Founder
Salesforce 開発入門
Salesforce 開発入門
Salesforce Developers Japan
Visualforceを使ってみよう
Visualforceを使ってみよう
Salesforce Developers Japan
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
gree_tech
はじめようLightningコンポーネント
はじめようLightningコンポーネント
Salesforce Developers Japan
Einstein Next Best Action を試してみよう
Einstein Next Best Action を試してみよう
Salesforce Developers Japan
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
Y Watanabe
Salesforceの標準オブジェクトについて復習してみた
Salesforceの標準オブジェクトについて復習してみた
y-maeda
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
Shingo Fukui
MySQL・PostgreSQLだけで作る高速あいまい全文検索システム
MySQL・PostgreSQLだけで作る高速あいまい全文検索システム
Kouhei Sutou
認定Field Service Lightningコンサルタント 合格への第一歩
認定Field Service Lightningコンサルタント 合格への第一歩
Takahito Miyamoto
キメるClojure
キメるClojure
Yoshitaka Kawashima
SharePoint Online で、ポータル実践アイデア
SharePoint Online で、ポータル実践アイデア
Hirofumi Ota
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
Firebase Authを Nuxt + Railsの自前サービス に導入してみた
Firebase Authを Nuxt + Railsの自前サービス に導入してみた
Tomoe Sawai
Web開発者にお勧め .NET MAUI Blazor App
Web開発者にお勧め .NET MAUI Blazor App
TomomitsuKusaba
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
日本マイクロソフト株式会社
ソフトウェアにおける 複雑さとは何なのか?
ソフトウェアにおける 複雑さとは何なのか?
Yoshitaka Kawashima
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
Takuto Wada
SalesforceにおけるCDC(変更データキャプチャ)の実装・活用法について
SalesforceにおけるCDC(変更データキャプチャ)の実装・活用法について
Takashi Hatamoto
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
Nextcloud 16,15の新機能とOnline Office機能
Nextcloud 16,15の新機能とOnline Office機能
Tetsurou Yano
本当は楽しいインターネット
本当は楽しいインターネット
Yuya Rin
Einstein Analyticsによるユースケース別機能、実現例のご紹介(前編)〜Winter’18 新機能紹介を交えて
Einstein Analyticsによるユースケース別機能、実現例のご紹介(前編)〜Winter’18 新機能紹介を交えて
Salesforce Developers Japan
VisualforceでCSV...ちょっとハマったこと
VisualforceでCSV...ちょっとハマったこと
Junji Imaoka
【Devsumi2019】開発者に贈るSalesforceプラットフォーム概論と最新動向
【Devsumi2019】開発者に贈るSalesforceプラットフォーム概論と最新動向
SFDG ROOKIES
Salesforce開発のスタート地点で考えたいこと
Salesforce開発のスタート地点で考えたいこと
Yuki Yamaguchi
More Related Content
What's hot
Einstein Next Best Action を試してみよう
Einstein Next Best Action を試してみよう
Salesforce Developers Japan
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
Y Watanabe
Salesforceの標準オブジェクトについて復習してみた
Salesforceの標準オブジェクトについて復習してみた
y-maeda
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
Shingo Fukui
MySQL・PostgreSQLだけで作る高速あいまい全文検索システム
MySQL・PostgreSQLだけで作る高速あいまい全文検索システム
Kouhei Sutou
認定Field Service Lightningコンサルタント 合格への第一歩
認定Field Service Lightningコンサルタント 合格への第一歩
Takahito Miyamoto
キメるClojure
キメるClojure
Yoshitaka Kawashima
SharePoint Online で、ポータル実践アイデア
SharePoint Online で、ポータル実践アイデア
Hirofumi Ota
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
Firebase Authを Nuxt + Railsの自前サービス に導入してみた
Firebase Authを Nuxt + Railsの自前サービス に導入してみた
Tomoe Sawai
Web開発者にお勧め .NET MAUI Blazor App
Web開発者にお勧め .NET MAUI Blazor App
TomomitsuKusaba
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
日本マイクロソフト株式会社
ソフトウェアにおける 複雑さとは何なのか?
ソフトウェアにおける 複雑さとは何なのか?
Yoshitaka Kawashima
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
Takuto Wada
SalesforceにおけるCDC(変更データキャプチャ)の実装・活用法について
SalesforceにおけるCDC(変更データキャプチャ)の実装・活用法について
Takashi Hatamoto
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
Nextcloud 16,15の新機能とOnline Office機能
Nextcloud 16,15の新機能とOnline Office機能
Tetsurou Yano
本当は楽しいインターネット
本当は楽しいインターネット
Yuya Rin
Einstein Analyticsによるユースケース別機能、実現例のご紹介(前編)〜Winter’18 新機能紹介を交えて
Einstein Analyticsによるユースケース別機能、実現例のご紹介(前編)〜Winter’18 新機能紹介を交えて
Salesforce Developers Japan
VisualforceでCSV...ちょっとハマったこと
VisualforceでCSV...ちょっとハマったこと
Junji Imaoka
What's hot
(20)
Einstein Next Best Action を試してみよう
Einstein Next Best Action を試してみよう
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
Salesforceの標準オブジェクトについて復習してみた
Salesforceの標準オブジェクトについて復習してみた
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
MySQL・PostgreSQLだけで作る高速あいまい全文検索システム
MySQL・PostgreSQLだけで作る高速あいまい全文検索システム
認定Field Service Lightningコンサルタント 合格への第一歩
認定Field Service Lightningコンサルタント 合格への第一歩
キメるClojure
キメるClojure
SharePoint Online で、ポータル実践アイデア
SharePoint Online で、ポータル実践アイデア
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Firebase Authを Nuxt + Railsの自前サービス に導入してみた
Firebase Authを Nuxt + Railsの自前サービス に導入してみた
Web開発者にお勧め .NET MAUI Blazor App
Web開発者にお勧め .NET MAUI Blazor App
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
ソフトウェアにおける 複雑さとは何なのか?
ソフトウェアにおける 複雑さとは何なのか?
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
SalesforceにおけるCDC(変更データキャプチャ)の実装・活用法について
SalesforceにおけるCDC(変更データキャプチャ)の実装・活用法について
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Nextcloud 16,15の新機能とOnline Office機能
Nextcloud 16,15の新機能とOnline Office機能
本当は楽しいインターネット
本当は楽しいインターネット
Einstein Analyticsによるユースケース別機能、実現例のご紹介(前編)〜Winter’18 新機能紹介を交えて
Einstein Analyticsによるユースケース別機能、実現例のご紹介(前編)〜Winter’18 新機能紹介を交えて
VisualforceでCSV...ちょっとハマったこと
VisualforceでCSV...ちょっとハマったこと
Similar to SFDG_画面フローとLightningWebComponentのハイブリッド開発について.pptx
【Devsumi2019】開発者に贈るSalesforceプラットフォーム概論と最新動向
【Devsumi2019】開発者に贈るSalesforceプラットフォーム概論と最新動向
SFDG ROOKIES
Salesforce開発のスタート地点で考えたいこと
Salesforce開発のスタート地点で考えたいこと
Yuki Yamaguchi
2013年08月 夏サミ2013-A5「DevOpsってどうなのよ?」
2013年08月 夏サミ2013-A5「DevOpsってどうなのよ?」
Serverworks Co.,Ltd.
Lightning Component × Lightning Design System
Lightning Component × Lightning Design System
Taiki Yoshikawa
20101127 Android Usability Seminar
20101127 Android Usability Seminar
Visso株式会社
Lync でできる? 仕事効率化
Lync でできる? 仕事効率化
Manato KAMEYA
Html5fun 20150123 JavaScript効率化
Html5fun 20150123 JavaScript効率化
Katsushiro Koizumi
MVCフレームワークとの付き合い方
MVCフレームワークとの付き合い方
Kazuki Shibata
開発者が話すSalesforceのui設計とは?
開発者が話すSalesforceのui設計とは?
Junji Imaoka
Fxug
Fxug
satoshi
デザイナー・コーダーのための黒い画面入門
デザイナー・コーダーのための黒い画面入門
webcampusschoo
デザイナー・コーダーのための黒い画面入門 先生:和田 修一
デザイナー・コーダーのための黒い画面入門 先生:和田 修一
schoowebcampus
LightSwitch で遊んでみた Rev. 2
LightSwitch で遊んでみた Rev. 2
Yoshitaka Seo
Don't Stop Deploying!! SFDX時代のデプロイ体験 リターンズ
Don't Stop Deploying!! SFDX時代のデプロイ体験 リターンズ
Takahito Miyamoto
HoloLens first impression & development
HoloLens first impression & development
c-mitsuba
会話型UI事始め
会話型UI事始め
DeNA
Adminとうまく共存するためのApex開発Tips
Adminとうまく共存するためのApex開発Tips
Takashi Hatamoto
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
典子 松本
早く・良いものを作るための、WordPressサイト構築ワークフロー
早く・良いものを作るための、WordPressサイト構築ワークフロー
Takako Horiuchi
LightSwitchでマルチデータソース
LightSwitchでマルチデータソース
Yoshitaka Seo
Similar to SFDG_画面フローとLightningWebComponentのハイブリッド開発について.pptx
(20)
【Devsumi2019】開発者に贈るSalesforceプラットフォーム概論と最新動向
【Devsumi2019】開発者に贈るSalesforceプラットフォーム概論と最新動向
Salesforce開発のスタート地点で考えたいこと
Salesforce開発のスタート地点で考えたいこと
2013年08月 夏サミ2013-A5「DevOpsってどうなのよ?」
2013年08月 夏サミ2013-A5「DevOpsってどうなのよ?」
Lightning Component × Lightning Design System
Lightning Component × Lightning Design System
20101127 Android Usability Seminar
20101127 Android Usability Seminar
Lync でできる? 仕事効率化
Lync でできる? 仕事効率化
Html5fun 20150123 JavaScript効率化
Html5fun 20150123 JavaScript効率化
MVCフレームワークとの付き合い方
MVCフレームワークとの付き合い方
開発者が話すSalesforceのui設計とは?
開発者が話すSalesforceのui設計とは?
Fxug
Fxug
デザイナー・コーダーのための黒い画面入門
デザイナー・コーダーのための黒い画面入門
デザイナー・コーダーのための黒い画面入門 先生:和田 修一
デザイナー・コーダーのための黒い画面入門 先生:和田 修一
LightSwitch で遊んでみた Rev. 2
LightSwitch で遊んでみた Rev. 2
Don't Stop Deploying!! SFDX時代のデプロイ体験 リターンズ
Don't Stop Deploying!! SFDX時代のデプロイ体験 リターンズ
HoloLens first impression & development
HoloLens first impression & development
会話型UI事始め
会話型UI事始め
Adminとうまく共存するためのApex開発Tips
Adminとうまく共存するためのApex開発Tips
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
早く・良いものを作るための、WordPressサイト構築ワークフロー
早く・良いものを作るための、WordPressサイト構築ワークフロー
LightSwitchでマルチデータソース
LightSwitchでマルチデータソース
SFDG_画面フローとLightningWebComponentのハイブリッド開発について.pptx
1.
Salesforce Developers Meetup
#29 画面フローとLightningWebComponentの ハイブリッド開発について Toru Inoue
2.
自己紹介 井上 徹 (Inoue
Toru) 所属: 株式会社テラスカイ 居住地:大阪 出身地:岡山 Salesforce歴:約6年 ロール:Salesforce開発プロジェクトのPM/PMO、アーキテクト トピック:LWCの勉強始めました! @tiaug30
3.
皆さんフロー使ってますか?? コード開発しなくても色々作れて便利!! かなり使えるようになっているけど、少し物足りない!! 複雑な機能は結局個別開発が必要なんじゃない?
4.
• 標準コンポーネントだけだとやりたいことができない • AppExchangeにあるものだと微妙に機能がマッチしない •
画面フローでできないので、すべて個別開発で対応した 画面フローで使えるLWCを作ります こんなことないですか?? ないなら自分で作ってみよう!!
5.
画面フローとLWCの違い 画面フロー Lightning Web
Component(LWC) タイプ 標準機能(Low-Code) 個別開発(Pro-Code) 利用者 アドミン~開発者 開発者 難易度 〇 低~中 △ 高 コスト 〇 低 △ 高 自由度 △ 基本的に標準設定の範囲内 〇 個別開発により自由度高 特性 シンプルな画面をスピーディに実現したいときに便利 複雑な機能や独自のUIを作り込める どちらもメリット・デメリットがある
6.
• 基本はフローベースで開発 • フローでは実装できない最低限の画面コンポーネントをLWCで開発する •
コーディングは最低限にとどめる(フローでできることはフローでやる) • フローのお手軽さとLWCの自由度のおいしいところ取りをする 画面フローとLWCのハイブリッド開発のアプローチ 画面FLOW 標準コンポーネント カスタムコンポーネント (LWC) 標準コンポーネント
7.
デモアプリ
8.
デモアプリ 住所型項目(Summer’22新機能) 住所項目の地図を表示(フロー) 地図(LWC)
9.
<template> <lightning-map map-markers={mapMarkers} zoom-level={zoomLevel}> </lightning-map> </template> flowMap.html 地図コンポーネントのLWC import { api,
LightningElement } from 'lwc'; export default class FlowMap extends LightningElement { @api city; @api country; @api postalCode; @api state; @api street; @api zoomLevel; mapMarkers; connectedCallback() { let mapMarkers = [ { location: { City: this.city, Country: this.country, PostalCode: this.postalCode, State: this.state, Street: this.street } } ] this.mapMarkers = mapMarkers; } } flowMap.js <?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>55.0</apiVersion> <isExposed>true</isExposed> <masterLabel>Map Component In Flow</masterLabel> <targets> <target>lightning__FlowScreen</target> </targets> <targetConfigs> <targetConfig targets="lightning__FlowScreen"> <property name="country" label="Country" type="String"/> <property name="state" label="State" type="String"/> <property name="city" label="City" type="String"/> <property name="street" label="Street" type="String"/> <property name="postalCode" label="PostalCode" type="String"/> <property name="zoomLevel" label="Zoom Level" type="Integer"/> </targetConfig> </targetConfigs> </LightningComponentBundle> flowMap.js-meta.xml フローから渡すパラメータを指定 LWC標準のタグを置くだけ lightning-mapに渡す住所情報を構成 フローから渡されるパラメータを格納する変数 フローから呼び出し可能に設定
10.
フローで指定したパラメータがLWCに受け渡される パラメータ① ↓ パラメータ② ↓ パラメータ③ ・ ・ ・ LWCのライフサイクルフローとパラメータの設定タイミング constructor() コンポーネントインスタンスの作成時に起動 connectedCallback() コンポーネントが DOM に挿入されると起動 renderedCallback() コンポーネントの表示フェーズが完了したら起動 パラメータはフロービルダーの表示順にセットされる。 LWC側のsetプロパティで何かしらの処理をする場合は 実行順序に注意が必要 ※公式ドキュメントは未確認
11.
デモアプリのフロー定義(Lightningページの地図) パラメータのrecordIdを条件にレコードを取得 カスタムの地図コンポーネントを配置 住所項目から国、郵便番号、都道府県、市区群、 町名番地を地図コンポーネントに渡す。 ① LWCがカスタムセクションに表示される ② 画面にカスタムコンポーネントを配置 ③
LWCに渡すパラメータを指定
12.
住所型項目利用時の注意点 ①住所型項目の国と都道府県は選択リストであり、データベース上はコード値(ラベルでない)で登録される。 レコードは州コード(API参照名)で登録される。 州コードは英数字のみ指定可 住所型項目の選択リスト値の設定 ⇒ 住所型項目の選択リストのコードを地図コンポーネントが国、都道府県として認識されないコード体系で定義すると、 地図が正しく表示されない可能性があるので要注意!!(必要に応じてフローでコード変換する必要がでてくる) ②画面フロー標準の住所入力コンポーネントの選択リスト値は、住所型の選択リストの設定が適用されない。(フロー側で独自設定する) 住所型項目の値(コード値)を渡す場合は要注意!!
13.
デモアプリ完成!! あとはLightningアプリケーションビルダーでフローを配置するだけ
14.
まとめ
15.
• 画面フローとLWCを使ったハイブリッド開発を行うことで、フロー単独ではできないことができるようになる。 • プログラミング開発を最低限にすることで開発コストや難易度を低減させることができる。(フル個別開発>ハイブリッド開発) •
汎用的なコンポーネントを作成しておけば、様々なユースケースで再利用できる。 • プログラミング開発を外注している場合は、外注費用を下げることができる。(システム管理者やユーザにもメリットがある) まとめ
16.
今回の手法を使えば画面フローでこんなこともできます! まとめ データテーブルコンポーネント リッチテキスト入力コンポーネント <lightning-datatable> <lightning-input-rich-text>
17.
資料公開・解説記事 @tiaug30 @tiaug30