categorySelect¶
selectの選択項目をグルーピングして表示します。 さらに、[categorySelect]widgetを使用すると ポップアップ画面からグルーピングされたリストから選択することができます。
選択項目のグルーピングはマスタの設定で自動的に行われます。
マスタデータのグルーピングサンプル:
{
"yourMasterName": { "group": [
{ "title": "group_01", "items": [
{ "key": "target_01", "value": "01", "example": "target_example_01" },
{ "key": "target_02", "value": "02", "example": "target_example_02" },
{ "key": "target_03", "value": "03", "example": "target_example_03" }
]
},
{ "title": "group_02", "items": [
{ "key": "target_04", "value": "04", "example": "target_example_04" },
{ "key": "target_05", "value": "05", "example": "target_example_05" }
]
}
]
}
selectにポップアップ画面[categorySelect]を合成するための設定プロパティを記載します。
| プロパティ | 内容 | 必須 | 国際化 | 備考 |
|---|---|---|---|---|
| composite | 合成するオブジェクト | 必須 |
合成するオブジェクトは、ポップアップ画面を呼び出す[button]widgetsです。
| プロパティ | 内容 | 必須 | 国際化 | 備考 |
|---|---|---|---|---|
| type | widgetsの種別 | 必須 | button | |
| kind | 機能種別 | 必須 | popup | |
| icon | アイコン名 | 必須 | 例. view_list | |
| popupWidth | ポップアップ画面の幅 | 必須 | 例. 600px | |
| popupTitle | ポップアップ画面のタイトル | 必須 | 対象 | |
| popupSchema | ポップアップ画面のJSON Schema定義 | 必須 | ||
| popupitems | ポップアップ画面のレイアウト定義 | 必須 |
次に、ポップアップ画面[categorySelect]の設定プロパティを記載します。
| プロパティ | 内容 | 必須 | 国際化 | 備考 |
|---|---|---|---|---|
| type | widgetsの種別 | 必須 | categorySelect | |
| master | 表示するマスタ名 | 必須 | ||
| title | タイトル | 必須 | 対象 | 例. view_list |
| key | ポップアップ画面の項目キー | 必須 | 例. 600px | |
| targetKey | 値を設定する項目キー | |||
| flex | flex定義 | wrapper,section内のみ有効 |
categorySelectのレイアウトサンプル:
[
{
"type": "select",
"master": "category",
"key": "selectCategory",
"title": "selectCategory",
"composite": {
"type": "button",
"kind": "popup",
"icon": "view_list",
"popupWidth": "600px",
"popupTitle": "auxiliaryTitle",
"popupSchema": {
"type": "object",
"properties": {
"auxiliary": {
"type": "string"
}
}
},
"popupitems": [
{
"type": "categorySelect",
"master": "category",
"title": "auxiliaryItem",
"key": "auxiliary",
"targetKey": "selectCategory",
"flex": "3 1 auto"
}
]
}
}
]