ダッシュボードのモバイルレイアウトの使用
モバイルレイアウトを使用して、モバイルデバイスのダッシュボードの外観をカスタマイズします。
ダッシュボードの JSON ファイルの layouts セクションは、state セクションの子で、widgets および steps セクションの兄弟です。
- 「ダッシュボード JSON ファイルの表示または変更」の指示に従ってダッシュボードの JSON を見つけます。
-
ダッシュボードの JSONに layouts セクションを追加します。
たとえば、この layouts セクションでは、各ページに 2 行のウィジェットがある 2 ページのモバイルレイアウトを定義します。1 番目のページには、各行に 1 つのウィジェットがあります。2 番目のページには、1 行目に 2 つのウィジェットがあり、2 行目に 1 つのウィジェットがあります。
1"layouts": { 2 "default": { 3 "page:0": [ 4 "buttongroup_2", 5 "chart_1" 6 ], 7 "page:1": [ 8 "dimfilter_1 | dimfilter_3", 9 "chart_1" 10 ] 11 } 12} -
必要に応じて、各ウィジェットおよび行に属性を設定することによってダッシュボードをカスタマイズしてください。
たとえば、ステップ 2 の layouts をウィジェットや行の属性を含めるように変更できます。最初のページの最初の行の高さは 300 ピクセルです。2 番目のページのグラフウィジェットには、2 つの列の幅があります。
1"layouts": { 2 "default": { 3 "page:0": [ 4 "buttongroup_2" | row:{height=300}”, 5 "chart_1" 6 ], 7 "page:1": [ 8 "dimfilter_1 | dimfilter_3", 9 "chart_1 {colspan=2}" 10 ] 11 } 12} -
必要に応じて、ダッシュボードにデバイス固有および方向固有のレイアウトを設定します。使用できるデバイスおよび方向に関するオプションについては、「レイアウトの仕様」の「レイアウトオプション」を参照してください。
たとえば、ステップ 3 の layouts は、iPad で画面が横向きのときに 1 ページだけ使用するように変更できます。
1"layouts": { 2 "default": { 3 "page:0": [ 4 "buttongroup_2", 5 "chart_1" 6 ], 7 "page:1": [ 8 "dimfilter_1 | dimfilter_3", 9 "chart_1 {colspan=2}" 10 ] 11 }, 12 “device:ipad, orientation:landscape”:{ 13 “page:0”: [ 14 “dimfilter_1 | dimfilter_3 | buttongroup_2”, 15 “chart_1 {colspan=3}” 16 ] 17 } 18} - ダッシュボード JSON ページで、[レンズを更新] をクリックしてダッシュボードの編集された JSON を保存します。
- モバイルデバイスでダッシュボードを表示してダッシュボードの新しいモバイルレイアウトをテストします。