目次
via pixabay.com
はじめに
みなさま、こんにちは!
SalesforceのSummer '25リリースでは、従来の画面フローに関する多くの機能が追加されました。
これまでのフロー画面では、ユーザーが何かを選択する際、テキストが並ぶシンプルなラジオボタンやドロップダウンリストがメジャーでした。
しかし、Summer '25のリリースでUIに直感的な視覚要素をもたらします。
本記事では、VisualPickerの主なメリットと、簡単な設定方法をご紹介します。
SalesforceのSummer '25リリースでは、従来の画面フローに関する多くの機能が追加されました。
これまでのフロー画面では、ユーザーが何かを選択する際、テキストが並ぶシンプルなラジオボタンやドロップダウンリストがメジャーでした。
しかし、Summer '25のリリースでUIに直感的な視覚要素をもたらします。
本記事では、VisualPickerの主なメリットと、簡単な設定方法をご紹介します。
新コンポーネント:VisualPicker(ビジュアルピッカー)とは?
VisualPicker(ビジュアルピッカー) は、Salesforce Summer ’25 で追加された新しい視覚的選択コンポーネントです。
従来のラジオボタンやセレクトボックスでは実現しにくかった、画像・アイコン・カード形式のレイアウトを用いた直感的な選択 UI を実装できる点が大きな特徴です。
これにより、ユーザーが「どの項目を選択しているのか」を視覚的に把握しやすくなり、Salesforceアプリケーションの操作性が大幅に向上します。
特に以下のようなケースで高い効果を発揮します。
・商品やプランを画像付きで選ばせたい
・設定ウィザードで複数の選択肢をカード形式で提示したい
Summer ’25 のアップデートにより、コードを書くことなく便利に利用できる点も魅力で、業務アプリケーションのユーザー体験向上に強力な武器となります。
従来のラジオボタンやセレクトボックスでは実現しにくかった、画像・アイコン・カード形式のレイアウトを用いた直感的な選択 UI を実装できる点が大きな特徴です。
これにより、ユーザーが「どの項目を選択しているのか」を視覚的に把握しやすくなり、Salesforceアプリケーションの操作性が大幅に向上します。
特に以下のようなケースで高い効果を発揮します。
・商品やプランを画像付きで選ばせたい
・設定ウィザードで複数の選択肢をカード形式で提示したい
Summer ’25 のアップデートにより、コードを書くことなく便利に利用できる点も魅力で、業務アプリケーションのユーザー体験向上に強力な武器となります。
VisualPickerの設定手順
では早速、Visual Pickerの設定方法を紹介していきます。
1.画面フローを開き【画面】コンポーネントを選択し、コンポーネントから【Visual Picker】を検索し配置します。
1.画面フローを開き【画面】コンポーネントを選択し、コンポーネントから【Visual Picker】を検索し配置します。
2.新規選択肢リソースを押下し、【選択肢】を選択します。
3.API参照名、ラベル、データ型、アイコンを選択し完了を押下します。
※アイコンはアイコンを選択から選択します。
※アイコンはアイコンを選択から選択します。
アイコンは、下記3種類あります。
・ユーティリティ
・ドックタイプ
・標準
※今回は標準のSMSアイコンを使用しました。
・ユーティリティ
・ドックタイプ
・標準
※今回は標準のSMSアイコンを使用しました。
4.同様の手順でcallのアイコンも作成し、フローを保存します。
レコード画面に配置すると視覚的に分かりやすいUIになります。
おわりに
いかがでしょうか。
VisualPickerがSummer ’25 で追加されたことで、これまで以上に直感的で分かりやすい UI を簡単に実装できるようになりました。
商品の選択などさまざまな場面で効果を発揮します。
みなさんもぜひ、画面フローを作成して使ってみてください!
VisualPickerがSummer ’25 で追加されたことで、これまで以上に直感的で分かりやすい UI を簡単に実装できるようになりました。
商品の選択などさまざまな場面で効果を発揮します。
みなさんもぜひ、画面フローを作成して使ってみてください!