トップへ戻る

高度な書式設定の使用

このトピックの内容

  1. リストの書式設定
  2. インジケーターの書式設定
  3. テーブルの書式設定
  4. アイコン名の定義
  5. カラー値

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

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

注意:

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

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

変数名タイプ説明

$datapoint

フィーチャまたはディクショナリ

インジケーター、テーブル、リストに適用

$reference

ディクショナリ

インジケーターに適用

注意:
Arcade 式を作成する際には、次の点に留意してください。
  • ディクショナリ内の各プロパティの後にカンマを含めます (最後のプロパティを除く)。
  • 属性名には、スペースも特殊文字も使用できません。

リストの書式設定

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

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

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

プロパティ値のタイプ説明

textColor

String

ライン アイテムのベース テキスト色

backgroundColor

String

ライン アイテムの背景色

separatorColor

String

ライン アイテムの下の枠線の色

selectionTextColor

String

ライン アイテムが選択されているときにライン アイテム テキストに使用される色

selectionColor

String

アイテムが選択されているときに使用されるベース テキスト色

attributes

ディクショナリ

属性値ペアのディクショナリ

yourAttributeName

String

{expression/yourAttributeName} 構文を使用して、[テンプレート] で参照できる属性

注意:

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

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

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

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

backgroundColor: color,

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

var color = IIF($datapoint.Speed > 40, '#F3DED7', '');

return {
	backgroundColor: color
}

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

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

  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)

attributes

ディクショナリ

属性値ペアのディクショナリ

yourAttributeName

String

{expression/yourAttributeName} 構文を使用して、[タイトル] フィールドおよび [説明] フィールドで参照できる属性

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

var fahrenheit = Floor(($datapoint.avg_Temperature/5*9)+32)

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

bottomText: fahrenheit,

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

var farenheit = Floor(($datapoint.avg_Temperature/5*9)+32)

return {
	topText: 'Average Temperature',
	middleText: Floor($datapoint.avg_Temperature),
	bottomText: farenheit,
}

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

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

  1. インジケーターの構成ウィンドウで、[インジケーター] タブをクリックします。
  2. [高度な書式設定] セクションで、[有効] をクリックします。
    注意:
    高度な書式設定が有効になると、色の入力などシステム定義の設定が使用できなくなります。 これらの構成は式で行います。 高度な書式設定を有効にする前に値を入力した場合、その値は自動的に式に追加されます。
  3. エディターで書式設定の式を作成します。
    ヒント:
    いずれかの Arcade 関数についてヘルプが必要な場合は、関数の横にある [情報] ボタンをクリックすれば、詳細情報が表示されます。
  4. 指定した間隔で式を実行したい場合、たとえば、式が [Now()] 関数を使用する場合は、[スクリプトの更新] 切り替えボタンを有効にして、更新間隔を設定します。
  5. 必要に応じ、構文 {expression/yourAttributeName} を使用して、[タイトル] および [説明] フィールドで新しい属性を参照できます。

テーブルの書式設定

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

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

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

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

プロパティ値のタイプ説明

cells

ディクショナリ

[データ] タブで定義されたフィールドに基づく列名のディクショナリ

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 プロパティに割り当て、新しいインシデントについてはセルをハイライト表示し、クローズしたインシデントについてはセルの強調を解除できます。

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

return {
	cells:{
		requests:{
			displayText: <span>${$datapoint.requests}</span>, 
			backgroundColor: statusColor,
			}
		}
	}
注意:

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

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

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

  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)

このトピックへのフィードバック

このトピックの内容
  1. リストの書式設定
  2. インジケーターの書式設定
  3. テーブルの書式設定
  4. アイコン名の定義
  5. カラー値