コントロール

コントロールウィジェットカテゴリーは以下のウィジェットで構成されています:

• ボタン
• チェックボックス
• ドロップダウン
• 入力ボックス
• マルチセレクトボックス
• ラジオボタン
• セグメンテッドコントロール
• スライダー
• テキストエリア
• トグル

---

ボタンウィジェット

以下の表は、ボタンウィジェットに使用可能なプロパティについての使用詳細を提供します。表の後にいくつかの例が続きます。

プロパティ

例

ボタン

Copied!
1
2
3
4
5
{
  "cssClasses": ["pt-button","pt-intent-primary"], // CSSクラス ["pt-button","pt-intent-primary"]
  "disabled": false, // 無効化フラグ：false（ボタンは使用可能）
  "text": "Run" // ボタンのテキスト："Run"
}

デフォルト

Copied!
1
2
3
4
5
6
{
  "cssClasses": ["pt-button","pt-intent-primary"], // CSSクラス
  "disabled": false, // 無効化 (falseの場合、ボタンは有効)
  "queryNames": [], // クエリ名
  "text": "Run" // テキスト (ボタンに表示される文字)
}

---

チェックボックスウィジェット

以下の表は、チェックボックスウィジェットで使用可能なプロパティに関する詳細を提供します。

プロパティ

ICheckboxHover

---

ドロップダウンウィジェット

以下の表は、ドロップダウンウィジェットで使用可能なプロパティに関する詳細を提供します。表の後にいくつかの例が続きます。

プロパティ

例

ダイナミックドロップダウン

Copied!
1
2
3
4
5
6
7
8
{
  "disabled": false, // "無効化"がfalseなので、この機能は有効です
  "displayValues": "{{query1.memberName}}", // "displayValues"は"{{query1.memberName}}"を表示します。これはクエリ1のメンバー名を表示します
  "searchText": "John", // "searchText"は"John"です。これは検索テキストフィールドのデフォルト値です
  "selectedValue": "65849", // "selectedValue"は"65849"です。これは初期選択値です
  "serverSearchEnabled": true, // "serverSearchEnabled"がtrueなので、サーバーサイドの検索が有効です
  "values": "{{query1.memberId}}" // "values"は"{{query1.memberId}}"を表示します。これはクエリ1のメンバーIDを表示します
}

スタティックドロップダウン

Copied!
1
2
3
4
5
6
7
8
9
10
11
{
  "disabled": false,  // このフィールドは機能が無効化されているかどうかを示します。falseは有効、trueは無効を意味します。
  "searchText": "",  // このフィールドは検索テキストを保持します。ここは現在空です。
  "selectedValue": "giraffe",  // このフィールドは選択された値を表示します。現在は"キリン"が選択されています。
  "serverSearchEnabled": false,  // このフィールドはサーバー側での検索が有効化されているかどうかを示します。falseは無効、trueは有効を意味します。
  "values": [  // このフィールドは選択可能な値のリストを保持します。
    "giraffe",  // "キリン"
    "rhinoceros",  // "サイ"
    "elephant"  // "象"
  ]
}

デフォルト

Copied!
1
2
3
4
5
6
7
{
  "disabled": false,  // ボタンが無効化されているかどうかを示す。falseなら有効。
  "searchText": "",  // 検索ボックスに入力されたテキストを保持する。
  "selectedValue": null,  // ユーザーが選択した値を保持する。初期値はnull。
  "serverSearchEnabled": false,  // サーバー側の検索が有効かどうかを示す。falseなら無効。
  "values": []  // 選択可能な値のリスト。初期状態は空のリスト。
}

---

Input Box ウィジェット

以下のテーブルは、Input Box ウィジェットで利用できるプロパティについての使用詳細を提供します。テーブルの後にいくつかの例が続きます。

プロパティ

例

Input Box

Copied!
1
2
3
4
5
6
{
  "disabled": false, // 無効にするかどうか (true: 無効, false: 有効)
  "placeholder": "動物を選んでください...", // プレースホルダーテキスト
  "queryName": "query1", // クエリ名
  "text": "" // テキスト
}

デフォルト設定

Copied!
1
2
3
4
5
{
  "disabled": false,  // "disabled"が"false"なので、この要素は無効になっていません
  "placeholder": "placeholder goes here",  // "placeholder"の値はここに入力します
  "text": ""  // 現在"text"は空です
}

---

マルチセレクトボックスウィジェット

以下の表は、マルチセレクトボックスウィジェットで利用できるプロパティについての使用詳細を提供します。表の後にはいくつかの例が続きます。

プロパティ

例

ダイナミックマルチセレクト

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  // "disabled"は機能が無効化されているかどうかを示します。falseは有効を意味します。
  "disabled": false,
  // "displayValues"は表示する値を示します。ここでは"query1.memberName"（メンバーの名前）が表示されます。
  "displayValues": "{{query1.memberName}}",
  // "hasValues"は値が存在するかどうかを示します。falseは値が存在しないことを意味します。
  "hasValues": false,
  // "searchText"は検索テキストを示します。ここでは"John"を検索します。
  "searchText": "John",
  // "selectedDisplayValues"は選択された表示値を示します。選択された表示値がない場合は空の配列が表示されます。
  "selectedDisplayValues": [],
  // "selectedValues"は選択された値を示します。選択された値がない場合は空の配列が表示されます。
  "selectedValues": [],
  // "serverSearchEnabled"はサーバー検索が有効かどうかを示します。trueは有効を意味します。
  "serverSearchEnabled": true,
  // "values"は値を示します。ここでは"query1.memberId"（メンバーのID）が値として使用されます。
  "values": "{{query1.memberId}}"
}

スタティックマルチセレクト

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "disabled": false,  // 無効化されているかどうか。falseなら無効化されていない
  "hasValues": true,  // 値が存在するかどうか。trueなら存在する
  "selectedDisplayValues": [  // 選択されて表示される値
    "giraffe",  // キリン
    "rhinoceros"  // サイ
  ],
  "selectedValues": [  // 選択された値
    "giraffe",  // キリン
    "rhinoceros"  // サイ
  ],
  "serverSearchEnabled": false,  // サーバー検索が有効かどうか。falseなら有効ではない
  "values": [  // 値のリスト
    "giraffe",  // キリン
    "rhinoceros",  // サイ
    "elephant"  // ゾウ
  ]
}

デフォルト

Copied!
1
2
3
4
5
6
7
8
{
  "disabled": false,  // このフィールドが無効化されているかどうかを示すフラグ。falseの場合、フィールドは有効。
  "hasValues": false,  // このフィールドに値があるかどうかを示すフラグ。falseの場合、フィールドには値がない。
  "selectedDisplayValues": [],  // 選択された表示値のリスト。選択された値がない場合、リストは空になります。
  "selectedValues": [],  // 選択された値のリスト。選択された値がない場合、リストは空になります。
  "serverSearchEnabled": false,  // サーバー検索が有効化されているかどうかを示すフラグ。falseの場合、サーバー検索は無効。
  "values": []  // フィールドの値のリスト。値がない場合、リストは空になります。
}

---

ラジオボタンウィジェット

以下の表は、ラジオボタンウィジェットで利用できるプロパティの使用詳細を提供します。

プロパティ

ICheckboxHover

---

セグメンテッドコントロールウィジェット

以下の表は、セグメンテッドコントロールウィジェットで利用できるプロパティの使用詳細を提供します。

プロパティ

ISegmentedControlHover

---

スライダーウィジェット

以下の表は、スライダーウィジェットで利用できるプロパティの使用詳細を提供します。表の後にはいくつかの例があります。

プロパティ

例

スライダー

Copied!
1
2
3
4
5
6
7
8
9
10
11
{
  "disabled": false,  // 無効化されていないことを示すフラグ。Falseの場合、有効。
  "from": 25,  // 範囲の開始値。ここでは25。
  "groupingDelimiter": " ",  // グループ化の区切り文字。ここではスペース。
  "groupingEnabled": true,  // グループ化が有効化されていることを示すフラグ。Trueの場合、有効。
  "max": "{{query1.maxValue}}",  // 範囲の最大値。ここではquery1の最大値。
  "min": 1,  // 範囲の最小値。ここでは1。
  "prefix": "$",  // 値の前につく接頭辞。ここではドル記号。
  "rangeEnabled": true,  // 範囲が有効化されていることを示すフラグ。Trueの場合、有効。
  "to": 50  // 範囲の終了値。ここでは50。
}

デフォルト設定

Copied!
1
2
3
4
5
6
7
8
{
  "disabled": false,  // 無効化されているかどうかを示すフラグ。falseならば有効。
  "from": 25,  // 開始値を示す。ここでは25。
  "groupingEnabled": false,  // グループ化が有効かどうかを示すフラグ。falseならばグループ化は無効。
  "max": 100,  // 最大値を示す。ここでは100。
  "min": 0,  // 最小値を示す。ここでは0。
  "rangeEnabled": false  // 範囲が有効かどうかを示すフラグ。falseならば範囲は無効。
}

---

Textarea ウィジェット

以下の表は、Textarea ウィジェットで利用可能なプロパティの使用詳細を提供します。表の後にいくつかの例が続きます。

プロパティ

例

Textarea

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
{
  "delimiter": ";",  // デリミタ（区切り文字）はセミコロンです
  "disabled": false,  // このフィールドは無効化されていません
  "hasValues": true,  // このフィールドには値が含まれています
  "placeholder": "Choose an animal...",  // プレースホルダーのテキストは「動物を選んでください...」です
  "text": "giraffe; rhinoceros; elephant",  // テキストフィールドには「キリン; サイ; 象」と表示されます
  "values": [  // このフィールドで選択可能な値は次の通りです
    "giraffe",  // キリン
    "rhinoceros",  // サイ
    "elephant"  // 象
  ]
}

デフォルト

Copied!
1
2
3
4
5
6
7
{
  "delimiter": ";", // 区切り文字
  "disabled": false, // 無効化
  "hasValues": false, // 値があるかどうか
  "text": "", // テキスト
  "values": [] // 値のリスト
}

---

トグルウィジェット

以下の表は、トグルウィジェットで利用可能なプロパティに関する使用詳細を提供しています。表の後にはいくつかの例が続きます。

プロパティ