カスタムリスト

カスタムリストは、リストアイテムとしてリストアイテムコンポーネントを追加しカスタムすることができるコンポーネントです。追加したコンポーネントからのアクションの実行も可能です。
[v3.3.0] このコンポーネントは追加されました。

大量のレコードを扱う場合、ペイロードの制限やクライアントへの負荷が大きくなります。
追加できるコンポーネントは以下になります。

No	リストアイテムコンポーネント
1	テキスト入力
2	テキストエリア
3	数値入力
4	高精度数値
5	検索フィールド
6	パスワード入力
7	セレクトボックス
8	コンボボックス
9	日付ピッカー
10	日時ピッカー
11	時刻ピッカー
12	ラジオボタン
13	ラジオボタングループ
14	チェックボックス
15	チェックボックスグループ
16	スイッチ
17	レーティング
18	スライダー
19	ボタン
20	タイポグラフィー
21	リッチテキスト
22	イメージ
23	外部リソース
24	リンク
25	ボックス
26	区切り線

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string	自動設定	`[id]`プロパティはアクションで設定はできません。
2	幅	数値	640	width	number	640	コンポーネントの幅
3	高さ	数値	640	height	number	640	コンポーネントの高さ
4	X	数値		x	number		X座標位置
5	Y	数値		y	number		Y座標位置
6	リスト行の高さ	数値	240	listItemHeight	number	240	リスト行の高さ
7	背景色	文字列カラーピッカー		backgroundColor	string		背景色
8	選択時の背景色	文字列カラーピッカー		selectedBackgroundColor	string		リスト行選択時の背景色
9	区切り線	選択 1. None 2. Full Width 3. Middle 4. Inset	None	divider	string	None	区切り線表示設定
10	スクロールバー	真偽	OFF	switch	boolean	false	スクロールバーの表示設定
11	表示	真偽	ON	visibility	boolean	true	コンポーネントの表示設定
12	値	表形式 `[詳細1]`		value	array of object		カスタムリストの値
13	クリックイベント	選択 1. なし 2. アクション	なし				[クリックイベント`なし`の場合] リストアイテムコンポーネント内のアクションのみ有効になります。 [クリックイベント`アクション`の場合] リスト行クリック時のアクションのみ有効となります。
14	選択値			selected	object		選択されているリスト行のデータ

[詳細1] 値 (value)

カスタムリストの表全体の値を取得・設定します。値の形式は行を示すオブジェクトの配列です。
デフォルトの状態は以下のように登録されています。[行追加]ボタンから各行を登録します。
削除する場合は、チェックボックスを選択して、[削除]ボタンをクリックします

text_field_1	button_1	typography_1
Text_1	Button_1	Description_1
Text_2	Button_2	Description_2
Text_3	Button_3	Description_3

アクションでデータを扱う場合は以下の例のようにオブジェクトの配列形式で値 (value) に設定するとカスタムリストの各コンポーネントにデータ表示できます。同様に値 (value) にはテーブルの現在の表示データの状態がオブジェクトの配列形式で入っています。

[
  {"text_field_1":"Text_1","button_1":"Button_1","typography_1":"Description_1"},
  {"text_field_1":"Text_2","button_1":"Button_2","typography_1":"Description_2"},
  {"text_field_1":"Text_3","button_1":"Button_3","typography_1":"Description_3"}
]

リストアイテムコンポーネントのタイプと、値（value）に対応する各コンポーネントのプロパティは以下となります。

No	リストアイテムコンポーネント	対応するプロパティ
1	テキスト入力	value
2	テキストエリア	value
3	数値入力	value
4	高精度数値	value
5	検索フィールド	value
6	パスワード入力	value
7	セレクトボックス	value
8	コンボボックス	value
9	日付ピッカー	value
10	日時ピッカー	value
11	時刻ピッカー	value
12	ラジオボタン	value
13	ラジオボタングループ	value
14	チェックボックス	value
15	チェックボックスグループ	value
16	スイッチ	value
17	レーティング	value
18	スライダー	value
19	ボタン	label
20	タイポグラフィー	value
21	リッチテキスト	value
22	イメージ	value
23	外部リソース	value
24	リンク	label
25	ボックス	-
26	区切り線	-

[詳細2]リスト行のアクションからクリック行を取得する場合

リスト行のクリックアクションとリスト行内のコンポーネントのアクションではイベント発生行を選択値(selected)プロパティによって取得できます。選択値(selected)は選択した行データを取得することができるプロパティとなります。カスタムリストのイベントで、選択値(selected)プロパティにより要素数1の行オブジェクトが取得できます。

イベント

イベント名	説明
onclick	リスト行をクリックした際に発生します。