TrailheadのVisualforce to LWC サンプルアプリを試してみました。Lightning Web コンポーネントの中にVisualforceページ埋め込む形で開発する方法についてです。
Quick Start: Explore the Visualforce to LWC Sample App | Salesforce
ハンズオン組織を作成
サンプルコードを取得
code-samples-and-sdksのサイトからサンプルコードを取得します。
各サンプルのGitHubリンクがまとまっているサイトです。
使うのは「visualforce-to-lwc」のアプリケーション。
visualforce-to-lwc/README.md at main · trailheadapps/visualforce-to-lwc · GitHub
自分のワークスペースディレクトリに移動して「git clone」コマンドでサンプルコード一式をダウンロードします。
Visual Studio Codeで開きます。
ログインコマンドでハンズオン組織を認証します。
sf org login web -s -a mydevorg -b chrome
デプロイコマンドでサンプルアプリケーションをハンズオンにリリースします。
sf project deploy start -d force-app
権限セットの割り当てを行います。
sf org assign permset -n Visualforce_to_LWC
テストデータのインポートを行います。
sf data tree import -p ./data/sample-data-plan.json
ハンズオン組織をブラウザで表示します。
sf org open -o mydevorg -b chrome
アプリケーションランチャーでVisualforce to LWCを選択できます。これでサンプルアプリケーションの準備ができました。
Basics タブ
3つのLightning Web コンポーネントで構成されています。バインディング、レンダリングフック(前)、レンダリングフック(後)のサンプルです。
Layout タブ
Visualforceのよくあるレイアウト表示のLWC版が確認できます。
Single Records タブ
取引先レコード ページで単一レコード パターンを実装する方法の例。
「Take me there!」ボタンをクリックすると、取引先を1件対象に取引先レコードを表現するVisualforceをLWC化したときのサンプルを確認できる画面を表示できます。
Mixed Records タブ
取引先責任者&商談のような混合レコードを扱う場合のサンプルを確認できます。
Record Lists タブ
レコードリストを表現できるサンプルを確認できます。
Error Handling タブ
エラーハンドリングのサンプルを確認できます。
Interoperability タブ
VisualforceとLightning Web コンポーネントの相互運用のサンプルを確認できます。
これまでVisualforce開発で実現してきたものをLightning Web コンポーネント化するときのサンプルとして必要なもの一式が揃っている感じでした。
