この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

layouts プロパティ

layouts キーでは、モバイルレイアウトの各ウィジェットの位置、順序、およびサイズを指定します。このレイアウトは、行、列、セル、ページで構成されます。グリッド内の各セルには 0 個以上のウィジェットを含めることができます。モバイルレイアウト内の行数、列数、およびセル数は、ウィジェット数とページ数によって異なります。

ウィジェット属性

ウィジェットに次の属性を設定できます。各ウィジェットに属性を 0 個以上選択できます。

プロパティ名	詳細
`colspan`	型 Integer 次のウィジェットで使用可能すべてのウィジェット説明ウィジェットがまたがる列数。ウィジェットの幅。ダッシュボードに指定された幅を表示するのに十分な列数がない場合、そのダッシュボードに列が追加されます。例この例では、`“chart_1”` という名前のウィジェットが 3 列にまたがります。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "dimfilter_1 \| dimfilter_2 \| dimfilter_3", 8 "chart_1 {colspan=3}" 9 ] 10 } 11 ] 12 "version": 1 13 }`
`rowspan`	型 Integer 次のウィジェットで使用可能すべてのウィジェット説明ウィジェットがまたがる行数。ウィジェットの高さ。ダッシュボードに指定された高さを表示するのに十分な行数がない場合、行が追加されます。例この例では、`“dimfilter1_1”` という名前のウィジェットが 2 行にまたがります。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "dimfilter_1 {rowspan=2} \| dimfilter_2", 8 "chart_1" 9 ] 10 } 11 ] 12 "version": 1 13 }`
`zIndex`	型 Integer 次のウィジェットで使用可能すべてのウィジェット説明ウィジェットの位置は、ダッシュボードの他のウィジェットに対して相対的です。`zIndex` では、ウィジェットが別のウィジェットの前後どちらに位置するかを指定します。`zIndex` 値が小さいウィジェットは、`zIndex` 値が大きい他のウィジェットよりも後ろに表示されます。 `zIndex` のデフォルト値は 0 です。例この例では、`“box_1”` という名前のウィジェットが `“number_1”` という名前のウィジェットの後ろに表示されます。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "box_1 {zIndex=1}, number_1 {zIndex=2} \| chart_1" 8 ] 9 } 10 ] 11 "version": 1 12 }`
`vpad`	型 Integer 次のウィジェットで使用可能すべてのウィジェット説明ウィジェットのセルの上下に追加されるパディング (ピクセル単位)。`vpad` が 10 の場合、セルの上下に 10 ピクセルが追加されます。 `vpad` のデフォルト値は 0 です。例この例では、`“dimfilter_1”` という名前のウィジェットを含むセルの上下に 5 ピクセルのパディングがあります。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "dimfilter_1 {vpad=5}" 8 ] 9 } 10 ] 11 "version": 1 12 }`
`hpad`	型 Integer 次のウィジェットで使用可能すべてのウィジェット説明ウィジェットのセルの左右に追加されるパディング (ピクセル単位)。`hpad` が 10 の場合、セルの左右に 10 ピクセルが追加されます。負の値を割り当てることができます。 `hpad` のデフォルト値は 0 です。例この例では、`“dimfilter_1”` という名前のウィジェットを含むセルの上下に 5 ピクセルのパディングがあります。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "dimfilter_1 {hpad=5}" 8 ] 9 } 10 ] 11 "version": 1 12 }`
`vAxisWidth`	型 Integer 次のウィジェットで使用可能 `chart` 説明グラフウィジェットの X 軸のサイズ (ピクセル単位)。`vAxisWidth` を使用して複数のグラフウィジェットを配置します。例この例では、`“chart_1”` という名前のウィジェットに 250 ピクセルの幅の X 軸があります。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "chart_1 {vAxisWidth=250}" 8 ] 9 } 10 ] 11 "version": 1 12 }`
`hAxisHeight`	型 Integer 次のウィジェットで使用可能 `chart` 説明グラフウィジェットの Y 軸のサイズ (ピクセル単位)。`hAxisHeight` を使用して複数のグラフウィジェットを配置します。例この例では、`“chart_1”` という名前のウィジェットに 250 ピクセルの高さの Y 軸があります。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "chart_1 {hAxisHeight=250}" 8 ] 9 } 10 ] 11 "version": 1 12 }`

行属性

行に次の属性を設定できます。

プロパティ名詳細

プロパティ名	詳細
`height`	説明 `height` に数値が設定されている場合、`height` は行の高さ (ピクセル単位) です。 `height` に `preferred` が設定されている場合、行の高さは最大の高さと等しくなります。例この例では、最初の行の高さは 300 ピクセルです。2 番目の行の高さは、最も高いウィジェットの高さと等しくなります。 `1"layouts": [ 2 { 3 "device": "default", 4 "pages": [ 5 { 6 "rows": [ 7 "chart_1 {colspan=3} \| row:{height=300}", 8 "dimfilter_1 \| buttongroup_1 \| number_1 \| row:{height=preferred}" 9 ] 10 } 11 ] 12 "version": 1 13 }`

height

説明

height に数値が設定されている場合、height は行の高さ (ピクセル単位) です。

height に preferred が設定されている場合、行の高さは最大の高さと等しくなります。

例

この例では、最初の行の高さは 300 ピクセルです。2 番目の行の高さは、最も高いウィジェットの高さと等しくなります。

1"layouts": [
2  {
3    "device": "default",
4    "pages": [
5      {
6        "rows": [  
7          "chart_1 {colspan=3} | row:{height=300}",
8          "dimfilter_1 | buttongroup_1 | number_1 | row:{height=preferred}"
9        ]
10      }
11    ]
12    "version": 1
13  }

ウィジェット属性の上書き

次の属性をウィジェットに渡して、ウィジェットのデフォルトの動作を上書きできます。すべての色プロパティは「#022B54」のような��字列を使用します。

ウィジェットタイプ	属性
すべてのウィジェット	compact placeholder
`ChartWidget`	legend miniBars fit normalize multiMetrics splitAxis backgroundColor measureAxis (true/false) categoryLabels (true/false) textColor limitBarThickness (true/false)
`BoxWidget`	backgroundColor borderColor imageUrl stretch
`LinkWidget`	destinationType destination visualizationType includeState
`ListSelectorWidget`	instant expanded
`TextWidget`	title または text textColor textAlignment fontSize
`PillBoxWidget`	backgroundColor textColor borderColor selectedColor

次に、属性を渡して chart_1 の背景色、テキストの色、軸や表示ラベルの表示を変更している例を示します。

1"layouts": [
2     {
3       "device": "default",
4       "pages": [
5         {
6           "rows": [
7             "chart_1 {backgroundColor=\"#022B54\", measureAxis=false, categoryLabels=false, textColor=\"#FFFFFF\"}"
8           ]
9         }
10       ],
11       "version": 1
12     }
13   ]

Analytics ダッシュボード JSON リファレンス

layouts プロパティ

ウィジェット属性

行属性

ウィジェット属性の上書き

関連項目: