how to create icon and text in list?

Question

I want to create moible application ( sap.m) with list with 4 fields :

     icon label   icon
                  label
     -------------------

I want that in one row the label will be under the icon.

i found good example in standard list item but the problem that StandartdListItem not allow that the title will be icon. ( the idea is to do something like title and description the the title should be icon and need to be in the right screen )

do you know in which sap object I need to use ?

Example for StandartdListItem

      <mvc:View
 controllerName="sap.m.sample.StandardListItemTitle.List"
 xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc"
 xmlns="sap.m">
<List
  id="ShortProductList"
headerText="Products">
  <items>
  <StandardListItem
      title="{0/Name}"
    description="{0/ProductId}"
      icon="{0/ProductPicUrl}" 
    iconDensityAware="false"
    iconInset="false"
    adaptTitleSize="false" />
  <!--  set this item's description be empty -->
  <StandardListItem
    title="{1/Name}"
    description=""
    icon="{1/ProductPicUrl}" 
    iconDensityAware="false"
    iconInset="false"
    adaptTitleSize="false" />
  <StandardListItem
    title="{2/Name}"
    description="{2/ProductId}"
    icon="{2/ProductPicUrl}"
    iconDensityAware="false"
    iconInset="false"
    adaptTitleSize="false" />
  <!--  don't specify a description for this item -->
  <StandardListItem
    title="{3/Name}"
    icon="{3/ProductPicUrl}"
    iconDensityAware="false"
    iconInset="false"
    adaptTitleSize="false" />
</items>

pguddi pguddi · Accepted Answer · 2014-11-11T21:55:17

You have to use CustomListItem and to build this particular row yourself I'm afraid. Probably you have to insert a horizontal layout and then a vertical layout to achieve your goal, but there may be different paths to your desired goal.

how to create icon and text in list?

1 Answers