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.

Dialog Property

Item	Input value	Option	Default value
ID	string		automatic
Width	number		320
Height	number		240
X	number
Y	number
Visibility	boolean	• on • off	on
Value	string		details 1
Click Event	select	• None • Action	Action

Action Property

Item	Properties	Data Type	Options	Default value
ID	id	string		automatic
Width	width	number		320
Height	height	number		240
X	x	number
Y	y	number
Visibility	visibility	boolean	• true • false	true
Value	value	array of object		details 1

Note

• The "id" property cannot be set by an action.

[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”}