tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightningページのモバイル設定を試してみました

Lightningページのモバイル設定を試してみました。
f:id:tyoshikawa1106:20200308105021p:plain


Lightningページはデバイスごとに設定を切り替えることができます。共通のページを利用する場合でもある程度最適化されますが、切り替えたほうが便利です。


例えばPC版でタブによる管理をしていた場合です。
f:id:tyoshikawa1106:20200308105223p:plain


モバイルアプリでアクセスするとデフォルトではタブのみが表示された状態となります。(コンパクトレイアウトで数項目は表示されますが)
f:id:tyoshikawa1106:20200308105306p:plain:w200


詳細ページにアクセスするにはタブメニューから対象のタブを選択して初めてアクセス可能になります。
f:id:tyoshikawa1106:20200308105410p:plain:w200


この問題はモバイル専用のページを用意することで解決できます。
f:id:tyoshikawa1106:20200308105518p:plain


まずは新規Lightningページの作成を行います。既存のページをコピーすると作業が楽になるかもしれません。はじめにテンプレートを選択します。スマートフォン用に用意する場合は1つの範囲を選択すると良いと思います。
f:id:tyoshikawa1106:20200308105716p:plain


あとは表示したい情報を配置していくためです。モバイルの場合はアコーディオンメニューをつかって配置すると便利ではないかなと思っています。
f:id:tyoshikawa1106:20200308110147p:plain


基本は詳細の情報を見ることが多いと思いますが、関連リストやChatterを表示したいときに他の情報を非表示にすることができます。タブと違いページ遷移ではないので待ち時間が発生している感覚にはなりづらい気がしました。


ページの作成ができたらモバイルの利用として割り当てを行います。
f:id:tyoshikawa1106:20200308110410p:plain


これでPC版とモバイル版の2つのLightningページの設定ができました。
f:id:tyoshikawa1106:20200308110453p:plain


この設定後にモバイルアプリからアクセスするとこのように表示されます。
f:id:tyoshikawa1106:20200308110741p:plain:w200


アコーディオンメニューで気持ち残念だったのは最低一つはオープンにしておく必要があります。そのため、他のメニューの情報を表示したいときに今見ているメニューを閉じてスクロールするといった使い方はできないみたいです。(開いたままスクロールする必要がある。)