Custom List

Custom List is a component that allows you to add and customize list item components as list items. Actions can also be executed from added components.
v3.3.0 This component was added.

Note

• When handling a large number of records, payload limitations and client load may increase.
• The components that can be added are as follows:

No	List Item Component
1	Text Field
2	Text Area
3	Number Field
4	Big Number
5	Search Field
6	Password
7	Select
8	Combobox
9	Date Picker
10	Date Time Picker
11	Time Picker
12	Radio Button
13	Radio Button Group
14	Checkbox
15	Checkbox Group
16	Switch
17	Rating
18	Slider
19	Button
20	Typography
21	Rich Text
22	Image
23	External Resource
24	Link
25	Box
26	Divider

Properties

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto-set	id	string	Auto-set	The [id] property cannot be set in actions.
2	Width	String	640 390 [Mobile]	width	string	640 390 [Mobile]	Component width
3	Height	String	640	height	string	640	Component height
4	X	String		x	string		X coordinate position
5	Y	String		y	string		Y coordinate position
6	List Item Height	Number	240	listItemHeight	number	240	List row height
7	Background Color	String Color Picker		backgroundColor	string		Background color
8	Selected Background Color	String Color Picker		selectedBackgroundColor	string		Background color when list row is selected
9	Divider	Select 1. None 2. Full Width 3. Middle 4. Inset	None	divider	string	None	Divider display setting
10	Scrollbar	Boolean	OFF	switch	boolean	false	Scrollbar display setting
11	Visibility	Boolean	ON	visibility	boolean	true	Component visibility setting
12	Value	Table format [Detail 1]		value	array of object		Custom list value
13	Click Event	Select 1. None 2. Action	Action				[When Click Event is None] Only actions within list item components are enabled. [When Click Event is Action] Only actions when clicking list rows are enabled.
14	Selected			selected	object		Data of the selected list row The [selected] property cannot be set by actions.

Note

• The following can be entered for the "Width" and "Height" property values:
  • If you want to display in px, specify only numerical values; if you want to display in %, specify % as the unit.
  • Operation will not be supported if you enter anything other than the following:
    • number
    • number%
    • calc() function
• The following can be entered for the [X] and [Y] property values:
  • If you want to display in px, specify only numerical values.
  • Operation will not be supported if you enter anything other than the following:
    • number
    • calc() function
• The calc() function is a CSS function that enables calculations. (e.g. calc(100% - 30px))
  • The units that can be used with the calc() function are "%" and "px".
  • Other units (e.g., em, rem, etc.) are not supported.
• When the calc() function is used to specify the size, the appearance in the editor may differ from the appearance in the application. Please confirm using the preview.

[Detail 1] Value

Gets and sets the value of the entire custom list table. The value format is an array of objects representing rows.
The default state is registered as follows. Register each row from the [Add Row] button.
To delete, select the checkbox and click the [Delete] button.

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

When handling data in actions, setting value in the array of objects format as shown in the example below will display data in each component of the custom list. Similarly, value contains the current display data state of the table in array of objects format.

[
  {"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"}
]

Note

• The list item component types and the corresponding component properties for value are as follows:

No	List Item Component	Corresponding Property
1	Text Field	value
2	Text Area	value
3	Number Field	value
4	Big Number	value
5	Search Field	value
6	Password	value
7	Select	value
8	Combobox	value
9	Date Picker	value
10	Date Time Picker	value
11	Time Picker	value
12	Radio Button	value
13	Radio Button Group	value
14	Checkbox	value
15	Checkbox Group	value
16	Switch	value
17	Rating	value
18	Slider	value
19	Button	label
20	Typography	value
21	Rich Text	value
22	Image	value
23	External Resource	value
24	Link	label
25	Box	-
26	Divider	-

[Detail 2] Getting Clicked Row from List Row Actions

In list row click actions and component actions within list rows, the event occurrence row can be obtained through the selected property. The selected property can get the selected row data. In custom list events, a row object with one element can be obtained through the selected property.

Note

You can also retrieve the data for the single list row where the event occurred by referencing the selected property of the custom list from actions in components other than the custom list itself.

Events

Event Name	Description
onclick	Occurs when a list row is clicked.