List View

amx:listView, amx:listItem

The List View component is a common method of presenting multiple records of enterprise data. Each list item or row should include only key data that will help the user decide whether to drill into a list item or not. Each list item or row can display one or more Output Texts or Labels. Drilling into the list item will provide additional details on the selected object.

The List View component has many variations, such as:

The following is a list of common elements that may appear in a list view:

This component is commonly used on tablets and phones.


Appearance characteristics for this component.

Full List View

Inset List View

List View with Headers

Editable List View


Common behaviors for this component.


Usage guidelines for this component.


AMX sample code for this component.

The following is the sample code for Full List View.

<amx:listView var="row" id="lv1">
<amx:listItem id="li1">
<amx:outputText value="List Item 1" id="ot4"/>
<amx:listItem id="li2">
<amx:outputText value="List Item 2" id="ot5"/>

The following is the sample code for Full List View with Icons.

<amx:listView var="row" id="lv2">
<amx:listItem showLinkIcon="false" id="li3">
<amx:tableLayout width="100%" id="tl1">
<amx:rowLayout id="rl1">
<amx:cellFormat width="40px" halign="center" id="cf1">
<amx:image source="images/photo1.png" id="i1"/>
<amx:cellFormat width="100%" height="43px" id="cf2">
<amx:outputText value="List Item 1" id="ot6"/>
<amx:rowLayout id="rl2">
<amx:cellFormat width="40px" halign="center" id="cf3">
<amx:image source="images/photo1.png" id="i2"/>
<amx:cellFormat width="100%" height="43px" id="cf4">
<amx:outputText value="List Item 2" id="ot9"/>

The following is the sample code for Inset List View.

<amx:listView styleClass="adfmf-listView-insetList" var="row" id="lv3">
<amx:listItem id="li4">
<amx:outputText value="List Item 1" id="ot7"/>
<amx:listItem id="li5">
<amx:outputText value="List Item 2" id="ot8"/>

The following is the sample code for Inset List View with Icons.

<amx:listView styleClass="adfmf-listView-insetList" var="row" id="lv4">
<amx:listItem showLinkIcon="false" id="li6">
<amx:tableLayout width="100%" id="tl2">
<amx:rowLayout id="rl3">
<amx:cellFormat width="40px" halign="center" id="cf6">
<amx:image source="&lt;add path to your image>" id="i3"/>
<amx:cellFormat width="100%" height="43px" id="cf5">
<amx:outputText value="List Item 1" id="ot12"/>
<amx:rowLayout id="rl13">
<amx:cellFormat width="40px" halign="center" id="cf16">
<amx:image source="&lt;add path to your image>" id="i13"/>
<amx:cellFormat width="100%" height="43px" id="cf15">
<amx:outputText value="List Item 2" id="ot112"/>


Fig 1. iOS List View Full


Fig 2. Android List View Full


Fig 3. iOS List View Inset


Fig 4. Android List View Inset


Fig 5. iOS List View Headers


Fig 6. Android List View Headers


Fig 7. iOS List View Editable


Fig 8. Android List View Editable