Detailed List

The detailed list is a list consisting of items from the avatar, primary text, secondary text, and supporting text. It is effective for use in applications with small space requirements, such as mobile applications.

Property

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto-generated	id	string	Auto-generated	The [id] property cannot be set by actions.
2	Width	Number	390	width	number	390	Component width
3	Height	Number	200	height	number	200	Component height
4	X	Number		x	number		X coordinate position
5	Y	Number		y	number		Y coordinate position
6	Lock	Boolean	OFF	lock	boolean	false	When ON, the component stays fixed even when the screen is scrolled. When OFF, the component moves along with the screen scroll. Added in v4.1.0.
7	Background Color	String		backgroundColor	string		Detailed list background color. Added in v3.4.0.
8	Visibility	Boolean	ON	visibility	boolean	true	Component show/hide
9	Show Default Avatar If Empty	Boolean	ON	showAvatarIfEmpty	boolean	true	When ON, a default avatar is displayed when the value is empty. When OFF, text is displayed left-aligned when the value is empty.
10	Cache Disabled	Boolean	OFF	cacheDisabled	boolean	false	Cache usage state for avatar image Added in v4.1.0.
11	Value	String	[Details 1]	value	array of object	[Details 1]	Detailed list value
12	Click Event	Selection 1.None 2.Action 3. Detached Action	Action				Event setting for click Detached Action became selectable in v4.1.0.
13	Detached Action	Selection 1. [Detached Action ID]		detachedAction	string		Set a detached action Added in v4.1.0.

[Details 1] Value

The default status is registered as follows. Register from the "Add" button. To delete, select the check box and click the "Delete" button.

Select	ID	Avatar	Primary	Secondary	Support	Divider
Checkbox	item1	https://template-ui-image.webperformer.jp/image/Avatar.png	Brunch this weekend?	Ali Connors	— I will be in your neighborhood doing errands this…	inset
Checkbox	item2	https://template-ui-image.webperformer.jp/image/Avatar.png	Summer BBQ	to Scott, Alex, Jennifer	— Wish I could come, but Im out of town this…	inset

"value" is in the form of an array of objects.

[
  {
    "id": "item1",
    "avatar": "https://template-ui-image.webperformer.jp/image/Avatar.png",
    "primary": "Brunch this weekend?",
    "secondary": "Ali Connors",
    "supporting": " — I will be in your neighborhood doing errands this…",
    "divider": "inset"
  },
  {
    "id": "item2",
    "avatar": "https://template-ui-image.webperformer.jp/image/Avatar.png",
    "primary": "Summer BBQ",
    "secondary": "to Scott, Alex, Jennifer",
    "supporting": " — Wish I could come, but Im out of town this…",
    "divider": "inset"
  }
]

Note

• The property choices for the divider are none | fullWidth | middle | inset.
• The avatar can be a file path uploaded to the file manager or an image address stored outside of the file manager.

Event

Event name	Description
onclick	Performs an action when clicked.

The "selected" property allows you to retrieve the object in the row you clicked on.

Item	Example
Acquisition method	$ui.detailed_list_id.selected
Obtained value	{“id”:“item1”,“avatar”:“/xxx/xxx/xxx.png”,“primary”:“xxx”,“secondary”:“xxx”,“supporting”:“xxx”,“divider”:“inset”}