この記事はバージョン Winter ’26 において執筆しています。
現在の動作と異なる場合がありますので、ご認識おきください。
前回の記事では、Salesforceのデータを表示する「レコード詳細」について解説しました。 しかし、実際にサイトを構築していると、こんな壁にぶつかることがあります。
- 「ユーザーに編集させたいけど、全ての項目は見せたくない」
- 「入力項目を2列にしたり、説明文を入れたりして、親切な入力画面にしたい」
- 「保存ボタンを押した後に、独自の完了メッセージを出したい」
標準の「レコード詳細」コンポーネントはページレイアウトに依存するため、こうした柔軟な画面作りは苦手です。 そこで活躍するのが、Salesforceの最強ツール「画面フロー (Screen Flow)」です。
今回は、LWRサイト上で動作する「会員情報（住所・電話番号）変更フォーム」を作成し、サイトのデザインに違和感なく溶け込ませる方法を解説します。
作成するフローのイメージ
今回は「ログインユーザーが自分の登録情報を変更する」というシナリオで作ります。
フローの処理・流れ:
- レコード取得: 現在ログインしているユーザーの情報を取得。
- 画面: 現在の住所や電話番号を「初期値」として表示し、ユーザーに入力させる。
- レコード更新: 入力された内容でSalesforce上のデータを更新する。
- 完了画面: 「変更を受け付けました」というメッセージを表示。
実践：画面フローの作成
Salesforceの [設定] > [フロー] から「新規フロー」を作成し、「画面フロー」を選択します。
ステップ①：レコードの取得
まずは表示中のユーザー情報を取得するため、「レコードを取得」要素を配置します。
LWRサイトでユーザーIDを入手するには、フローの「グローバル変数」を使用します。
実行ユーザーのID {!$User.Id} を入力します。
ステップ②：入力画面の作成
要素の追加から「画面」を選びます。ここがLWRサイト上に表示されるフォーム部分になります。
- セクション機能: フローの「セクション」コンポーネントを使うと、画面を2列や3列に分割できます。これが「自由なレイアウト」の肝です。
- コンポーネント: 「電話番号」「住所」「メール」などを配置します。
LWRサイトに埋め込む場合、フローのフッター（[次へ][完了]ボタン）のラベルは標準のままだと味気ありません。画面設定の「フッターを構成」から、「保存する」「変更する」など、ユーザーに分かりやすいラベルに変更しておきましょう。
ステップ③：レコードの更新
画面の後ろに「レコードを更新」要素を配置します。画面で入力された値を使って、対象のレコードを更新する設定を行います。
※今回は詳細なフローの作り方は割愛しますが、動作確認ができたらフローを「有効化」することを忘れないでください。
画面フローの実行方法は「ユーザーまたはシステムコンテキスト — フローの起動方法に依存します」で取得・更新が可能です。
LWRサイトへのフロー埋め込み
ここからが本番です。エクスペリエンスビルダーを開き、作成したフローをページに配置します。
※すでに「ユーザー情報変更画面」の標準シングルページが存在する前提です。
手順
- コンポーネントパレットから 「フロー (Flow)」 をドラッグ＆ドロップします。
- プロパティパネルの「フロー」プルダウンから、先ほど作成したフローを選択します。
- ※場合によって、セクションの最大コンテンツ幅を狭くするなどして調整します。
これだけで、サイト上にフォームが表示されます（一度公開してから実際のサイトを見てください）。 しかし、置いただけだと上下に余裕がなくて窮屈な印象を与えてしまうなどデザインの調整が必要なことがあります。
デザイン調整：サイトに馴染ませるプロパティ
LWRのフローコンポーネントには、Aura時代にはなかった便利なデザインプロパティがあります。
入力欄を広げる
もし、入力欄の枠が狭いと感じる場合は、以下のテクニックを使って広げることができます。
- テーマ設定の活用: [テーマ] パネル > [フォーム] で、入力欄の枠の大きさや線の色、ラベルや入力テキストのフォントや大きさを変更します。また、[色] や [ボタン] なども活用しましょう。LWRではフローの中身もこのテーマ設定の影響を受けます。
- レイアウト設定: フローコンポーネントの「パディング（余白）」設定を調整し、周りのコンポーネントとの間隔を整えます。（
remでの調整を推奨。）
- PCの見た目
- モバイルの見た目
- 標準機能のバグ？
フロー上下の余白が広がって窮屈さが減りました。
モバイルでの見た目もいい感じです。
ところでフロー内の線とボタンが異様に近いのが気になりますがこれは標準のバグだと思います。
.navigationBar[lwc-3uma98d0eu4] {
margin: var(--lwc-spacingNone);
padding-top: var(--lwc-spacingSmall); /* ←これのせい */
border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-1, var(--lwc-colorBorder));
width: 100%;
}LWRサイトでは、フローの標準CSSが強力で、独自のCSS（Overrides）を当てるのが難しい場合があります。基本的にはビルダーのプロパティとテーマ設定で調整し、無理にCSSでねじ伏せようとしないのが「崩れないサイト」を作るコツです。
まとめ
- 標準の「レコード詳細」でレイアウトに限界を感じたら、迷わず「画面フロー」を使う。
- フローなら「セクション」を使って2列・3列の美しいフォームが作れる。
- LWRへの埋め込みは簡単だが、デザインを馴染ませるには「テーマ設定」での調整が重要。
これで、データの「表示（レコード詳細）」と「入力・更新（フロー）」の両方ができるようになりました。
読者の声