高度な書式設定の使用

リスト エレメント、インジケーター エレメント、テーブル エレメントの高度な書式設定に Arcade 式を使用して、データ ポイントがどのようにレンダリングされるかをカスタマイズできます。 データ ポイントは、エレメントの構成方法に応じて、フィーチャまたは統計情報のサマリーを表すことができます。 フィーチャを使用する場合は、1 つのデータ ポイントが 1 つのフィーチャを表します。 統計情報を使用する場合は、各データ ポイントがその統計情報の結果を表します。 リスト エレメントは、フィーチャ データ ポイントをライン アイテムとしてレンダリングし、各ラインが 1 つのデータ ポイントを表します。 インジケーター エレメントは、データ ポイントを 1 つずつレンダリングします。 テーブル エレメントは、フィーチャ データ ポイントを行としてレンダリングし、行の各セルのコンテンツを制御し、書式設定することができます。

属性式 (レイヤーのポップアップ、スタイル、およびラベルで使用) とは異なり、エレメントごとに 1 つの式が作成されます。 式はデータ ポイントごとに実行され、そのエレメントのシステム定義プロパティおよびユーザー定義プロパティを返します。 システム定義プロパティは、テキスト色や背景色など、これ以外の場合はエレメントで構成する設定です。 ユーザー定義プロパティは、ユーザーによって式で定義され、エレメントの構成時に参照できます。

注意:

Web マップで作成された属性式は、ダッシュボード エレメントでの使用のために引き継がれません。

次の表に、レイヤーのどのデータが式に渡されるかについてまとめます。

変数名	タイプ	説明
$datapoint	フィーチャまたはディクショナリ	インジケーター、テーブル、リストに適用
$reference	辞書	インジケーターに適用

注意:

Arcade 式を作成する際には、次の点に留意してください。

• ディクショナリ内の各プロパティの後にカンマを含めます (最後のプロパティを除く)。
• 属性名には、スペースも特殊文字も使用できません。

リストの書式設定

リスト エレメントでは、[高度な書式設定] オプションを有効にすることで Arcade 式を使用できます。 高度な書式設定の使用を選択すると、他のシステム定義プロパティとともに、色の入力が使用できなくなります。

式は、ライン アイテムごとに実行され、リスト上の各ラインのレンダリング方法の定義に使用されます。 さらに、ライン アイテム テンプレートで参照できる属性の作成にも式を使用できます。

データ ポイント属性は、Arcade エディターで $datapoint グローバル変数を使用して参照できます。 次の表に、ディクショナリの形式で式から返すことができるプロパティのリストを示します。

プロパティ	値のタイプ	説明
textColor	String	ライン アイテムのベース テキスト色
backgroundColor	String	ライン アイテムの背景色
separatorColor	String	ライン アイテムの下の枠線の色
selectionTextColor	String	ライン アイテムが選択されているときにライン アイテム テキストに使用される色
selectionColor	String	アイテムが選択されているときに使用されるベース テキスト色
属性	辞書	属性値ペアのディクショナリ
yourAttributeName	文字列、数値、日付、またはブール値	{expression/yourAttributeName} 構文を使用して、ライン アイテム テンプレートで参照できる属性

注意:

ジオメトリ関数はサポートされていません。

たとえば、値が特定の閾値を超える場合はリストの背景色を赤にしたいのであれば、次のような変数を作成できます。

var color = IIF($datapoint.[field]>[threshold], '#F3DED7','')

この変数で、[field] は値のフィールド、[threshold] は背景色を変更したい値です。 この変数は、次の例のように、プロパティ値として使用できます。

backgroundColor: color,

背景色プロパティでこの変数を使用して、次のような式を作成できます。ここでは、速度の値が 40 を超えると、リスト アイテムの背景色が赤になります。

リストでの高度な書式設定の有効化

リスト エレメントで高度な書式設定を有効化するには、次の手順を実行します。

1. リストの構成ウィンドウで [リスト] タブをクリックします。
2. [高度な書式設定] セクションで、[有効] をクリックします。

   注意:

   高度な書式設定が有効になると、色の入力などシステム定義の設定が使用できなくなります。 これらの構成は式で行います。 高度な書式設定を有効にする前に値を入力した場合、その値は自動的に式に追加されます。
3. エディターで書式設定の式を作成します。

   ヒント:

   いずれかの Arcade 関数についてヘルプが必要な場合は、関数の横にある [情報] ボタンをクリックすれば、詳細情報が表示されます。
4. 指定した間隔で式を実行したい場合、たとえば、式が [Now()] 関数を使用する場合は、[スクリプトの更新] 切り替えボタンを有効にして、更新間隔を設定します。
5. 構文 {expression/yourAttributeName} を使用し、[ライン アイテム テンプレート] フィールドに新しい属性を入力します。

インジケーターの書式設定

インジケーター エレメントでは、[高度な書式設定] オプションを有効にすることで Arcade 式を使用できます。 高度な書式設定を有効にすると、色のオプションや値の書式設定など、システム定義プロパティが使用できなくなり、条件付き書式がオフになります。 式を使用して、これらのレンダリング プロパティおよび条件付きのロジックを定義します。 さらに、式は、[一般] タブの [タイトル] フィールドと [説明] フィールドで参照されるようにユーザー定義属性を配布できます。

インジケーターに参照値を含める場合、高度な書式設定が有効であると、[データ] タブで統計ベースの参照タイプのみを使用できます。 以前に固定値の参照タイプを定義した場合、その参照タイプは、変換係数、テキスト、および色の書式設定とともに、式に自動的に追加されます。 高度な書式設定を有効にする前に行った値の書式設定は削除されるため、値パターンを使用して式で定義する必要があります。

注意:

Arcade では、前の値はサポートされていません。 高度な書式設定を有効にする前に、前の値の参照タイプを設定した場合は、現在値に変換されます。

データ ポイント属性は、Arcade エディターで $datapoint グローバル変数を使用して参照できます。 値のタイプがフィーチャであるか統計情報であるかに応じて、$datapoint がそれぞれフィーチャまたはディクショナリのタイプとなります。 [データ] タブで参照統計情報が構成されている場合、エディターで $reference グローバル変数も使用できます。

次の表に、ディクショナリの形式で式から返すことができるプロパティのリストを示します。

プロパティ	値のタイプ	説明
textColor	String	インジケーター エレメントのベース テキスト色
backgroundColor	String	インジケーター エレメントの背景色
topText	String	上位テキストとして表示
topTextColor	String	上位テキストの色
topTextOutlineColor	String	上位テキストのアウトライン色
topTextMaxSize	String	上位テキストの最大サイズ (超極小 | 極小 | 小 | 中 | 大 | 特大 | 超特大)
middleText	String	中位テキストとして表示
middleTextColor	String	中位テキストの色
middleTextOutlineColor	String	中位テキストのアウトライン色
middleTextMaxSize	String	中位テキストの最大サイズ (超極小 | 極小 | 小 | 中 | 大 | 特大 | 超特大)
bottomText	String	下位テキストとして表示
bottomTextColor	String	下位テキストの色
bottomTextOutlineColor	String	下位テキストのアウトライン色
bottomTextMaxSize	String	下位テキストの最大サイズ (超極小 | 極小 | 小 | 中 | 大 | 特大 | 超特大)
iconName	String	インジケーターに定義されたアイコンの名前 注意: アイコン名は、式の外部で定義されます。
iconAlign	String	中位テキストに隣接するアイコンの配置 (左 | 右)
iconColor	String	アイコンの塗りつぶし色
iconOutlineColor	String	アイコンのアウトライン色
noValue	Boolean	インジケーターの代わりに、値がないというテキストを表示するフラグ (true | false)
属性	辞書	属性値ペアのディクショナリ
yourAttributeName	文字列、数値、日付、またはブール値	{expression/yourAttributeName} 構文を使用して、[タイトル] フィールドおよび [説明] フィールドで参照できる属性

たとえば、ある計測単位で値を表示するインジケーターがあるが、同じ値をそれより下の別の単位でも表示したい場合は、既存の値を変換する変数を作成できます。 平均気温を摂氏で表示するインジケーターでは、値を華氏でも表示するために、式で使用する Fahrenheit 変数を作成できます。

var fahrenheit = Floor(($datapoint["avg_Temperature"]/5*9)+32)

その後、この変数を次のようにプロパティ値として含めることができます。

bottomText: fahrenheit,

下位テキスト プロパティでこの変数を使用して、次のような式を作成できます。ここでは、平均気温 (摂氏) がインジケーターの中位テキストで表示され、華氏の値が下位テキストで表示されます。

インジケーターでの高度な書式設定の有効化

インジケーター エレメントで高度な書式設定を有効化するには、次の手順を実行します。

1. インジケーターの構成ウィンドウで、[インジケーター] タブをクリックします。
2. [高度な書式設定] セクションで、[有効] をクリックします。

   注意:

   高度な書式設定が有効になると、色の入力などシステム定義の設定が使用できなくなります。 これらの構成は式で行います。 高度な書式設定を有効にする前に値を入力した場合、その値は自動的に式に追加されます。
3. エディターで書式設定の式を作成します。

   ヒント:

   いずれかの Arcade 関数についてヘルプが必要な場合は、関数の横にある [情報] ボタンをクリックすれば、詳細情報が表示されます。
4. 指定した間隔で式を実行したい場合、たとえば、式が [Now()] 関数を使用する場合は、[スクリプトの更新] 切り替えボタンを有効にして、更新間隔を設定します。
5. 必要に応じ、構文 {expression/yourAttributeName} を使用して、[タイトル] および [説明] フィールドで新しい属性を参照できます。

テーブルの書式設定

テーブル エレメントでは、[高度な書式設定] オプションを有効にすることで Arcade 式を使用できます。 高度な書式設定を使用するよう選択すると、色の入力、テキストの配置オプション、およびその他のシステム定義されたプロパティが使用できなくなり、代わりに式で設定されます。

式はテーブル内の行ごとに実行され、列の各セルのコンテンツと書式設定を定義するために使用されます。 データ ポイント属性は、Arcade エディターで $datapoint グローバル変数を使用して参照できます。

cells 辞書には、テーブルの構成の [データ] タブで定義された各フィールドのプロパティが必要です。 たとえば、Zone のカテゴリ フィールドと、Transaction Amounts の値フィールドを持つ、グループ化された値のテーブルでは、cells 辞書には zone と sum_transaction_amounts の 2 つのプロパティがあります。

次の表に、ディクショナリの形式で式から返すことができるプロパティのリストを示します。

プロパティ	値のタイプ	説明
セル	辞書	[データ] タブで定義されたフィールドに基づく列名の辞書
displayText	String	セルに表示されるテキスト 注意: displayText プロパティが必要です。
hoverText	String	値にポインターを合わせると表示されるテキスト。 注意: 最初にホバー テキストを [テーブル] タブで有効にしておく必要があります。
textColor	String	セルのテキスト色
backgroundColor	String	セルの背景色
textAlign	String	配置 (左 | 中央 | 右)
iconName	String	テーブルに定義されたアイコンの名前 注意: アイコン名は、式の外部で定義されます。
iconAlign	String	セルのテキストに隣接するアイコンの配置 (左 | 右)
iconColor	String	アイコンの塗りつぶし色
iconOutlineColor	String	アイコンのアウトライン色

高度な書式設定を使用し、テーブルで条件付きの書式設定を作成することもできます。 たとえば、最近の復元要求を表示するテーブルで、条件付き書式設定を適用することで、要求のステータスを区別するなどです。 次のような変数を使用し、ステータスに基づいてセルの色を変更する変数を作成できます。

var statusColor = When($datapoint.status== 'new', 'yellow', $datapoint.status== 'closed', 'lightgray', 'white')

変数を backgroundColor プロパティに割り当て、新しいインシデントについてはセルをハイライト表示し、クローズしたインシデントについてはセルの強調を解除できます。

注意:

式は、テーブルのサマリー行には適用されません。

テーブルでの高度な書式設定の有効化

テーブル エレメントで高度な書式設定を有効化するには、次の手順を実行します。

1. テーブルの構成ウィンドウで [値] タブをクリックします。
2. [高度な書式設定] セクションで、[有効] をクリックします。

   注意:

   高度な書式設定が有効になると、色の入力などシステム定義の設定が使用できなくなります。 これらの構成は式で行います。 高度な書式設定を有効にする前に値を入力した場合、その値は自動的に式に追加されます。
3. エディターで書式設定の式を作成します。

   ヒント:

   いずれかの Arcade 関数についてヘルプが必要な場合は、関数の横にある [情報] ボタンをクリックすれば、詳細情報が表示されます。
4. 指定した間隔で式を実行したい場合、たとえば、式が [Now()] 関数を使用する場合は、[スクリプトの更新] 切り替えボタンを有効にして、更新間隔を設定します。

アイコン名の定義

インジケーター エレメントとテーブル エレメントを使用すると、エレメントの構成に SVG アイコンを含めることが可能になります。 高度な書式設定を使用する場合、アイコンは Arcade 式に追加されます。

Arcade 式にアイコンを追加するには、次の手順を実行します。

1. Arcade エディターの下の [アイコン] セクションで [追加] をクリックします。
2. アイコンを選択するか、カスタム アイコンを作成します。
3. アイコンの名前を入力します。
4. Arcade 式で、アイコン名を iconName プロパティの値として返します。

カラー値

式にカラー値を含める場合、その値は文字列 (引用符で囲まれる) として返される必要があります。 未定義のままのカラー値または無効なカラー値は、自動的にデフォルトを使用します。 受け入れられるカラー値タイプには、Hex 値、RGB、RGBA、HSL、および HSLA が含まれます。 次に、サポートされている構文とともにいくつかの例を示します。

• Hex
  • #090
  • #009900
  • #090a
  • #009900aa
• RGB および RGBA
  • rgb(34, 12, 64)
  • rgba(34, 12, 64, 0.6)
• HSL および HSLA
  • hsl(50, 33%, 25%)
  • hsla(50, 33%, 25%, 0.75)