$(function () { pageContext.i18n.modTalk = 'moderation talk'; pageContext.i18n.replyToComment = 'Reply'; pageContext.i18n.modTalkEmpty = 'moderation talk is empty'; pageContext.url.getModTalk = "/comments/%25ID%25/listModTalk.json"; pageContext.url.possibleCommentRecipients = "/comments/%ID%/possibleRecipients.json"; pageContext.url.commentEdit = '/comments/%25ID%25/edit.html'; pageContext.url.commentView = '/comments/%ID%/view.html'; pageContext.i18n.commentVisibility = { 'full': 'Viewable by all users', 'op': 'Viewable by the original poster', 'mod': 'Viewable by moderators', 'opAndMod': 'Viewable by moderators and the original poster', 'other': 'Advanced visibility', 'dialogTitle': 'Comment visibility', 'selectGroups': 'Visible to groups', 'selectOther': 'Other recipients', 'selectOriginalPoster': 'Original poster', 'selectModerators': 'Moderators', 'selectAssignees': 'Asked to answer users' }; pageContext.i18n.commentMenuLabels = { 'comment-edit': 'comments.menu.edit', 'comment-delete': 'comments.menu.delete', 'comment-convert': 'comments.menu.convert' };pageContext.i18n.answer= { bestAnswer: 'Best Answer', controlBar : { accept: 'Accept', unaccept: 'Unaccept', acceptCommand: 'Accept this answer as correct', cancelAcceptedCommand: 'Remove this answers accepted status' } }; window.croles = { u: false, op: false, m: false, og: false, as: false, ag: false, dc: false, doc: false, eo: false, ea: false }; tools.init({ q: { e: false, ew: false, eo: false, r: false, ro: false, d: false, dow: false, fv: false, c: false, co: false, p: false, tm: false , ms: false, mos: false }, n: { f: false, vf: false, vfo: false, vr: false, vro: false, c: false, co: false, vu: false, vd: false, w: false, wo: false, l: false }, c: { e: false, eo: false, d: false, dow: false, ta: false, tao: false, l: false }, a: { e: false, ew: false, eo: false, d: false, dow: false, a: false, aoq: false, ao: false, tc: false, tco: false, p: false, tm: false }, pc: croles }, { tc: true, nsc: true }); commandUtils.initializeLabels(); }); Skip to Content
avatar image
Former Member

SAPUI5 - Display different icons in ColumnListItem

Hello experts,

I have an application that getting a table of data from Ecc and displaying it in a table.

in the table all the data displayed ColumnListItem.

one field content is icon for example : "sap-icon://multiselect-all".

The problem is that the icon is not displayed in the table .

<items>
		<ColumnListItem
			type="Navigation"
			press="onPress">
			<cells>
	   		<Text
	         	    text="{Xblnr}"/>
		       <Text 
			    text="{Bldat}"/>
		       <Text
			    text="{Wrbtr}"/>
	               <Text
			    text="{Waers}"/>
		       <Text
			    text="{Invoice_Name}"/>
		       <Text
			    text="{CREATE_DATE}"/>	
		       <Text
			    text="{Status}"/>
		       <Text	
			    text="{Status_Url}"
			    src="{Status_Url}"				
			    icon="{Status_Url}"/>		    
			</cells>	
		</ColumnListItem>
	</items>

is it possible to display different icons in the table lines?

Thank you.
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • avatar image
    Former Member
    Jul 10, 2017 at 04:04 AM

    You can use the factory function to iterate over the list items and then provide the icon you want.

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hello,

      I am new to this world of ui5.

      But i have a task to do.

      I look at the example in step 15

      but its still not working for my.

      <items>

      <ColumnListItem

      type="Navigation" press="onPress">

      <cells>

      <Text text="{Xblnr}"/>

      <Text text="{Bldat}"/>

      <Text text="{Wrbtr}"/>

      <Text text="{Waers}"/>

      <Text text="{Invoice_Name}"/>

      <Text text="{CREATE_DATE}"/>

      <Text text="{Status}"/>

      <Text text="{Status_Url}" factory= "{.productListFactory}"/>

      </cells> </ColumnListItem>

      I also add code in the Main.Controller

      productListFactory : function(sId,oContext) {

      var oUIControl = null;

      // This item is out of stock and discontinued

      //

      if (oContext.getProperty("Status_Url") === 1 ) {

      // Yup, so use a

      // StandardListItem

      oUIControl = new sap.m.StandardListItem(sId, {

      icon : "sap-icon://warning",

      infoState : "Error"

      });

      return oUIControl; } },

      Any help will be appreciated.

      Thank you.

  • avatar image
    Former Member
    Jul 11, 2017 at 06:20 AM

    Sorry I am confused with what you are doing

    		       <Text	
    			    text="{Status_Url}"
    			    src="{Status_Url}"				
    			    icon="{Status_Url}"/>

    why do you have icon and src properties in sap.m.Text control?

    -D

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hello Sharath,

      Thank you for the answer.

      I changed the code but its not working for me.

      in the .XML

      <items>
      	<ColumnListItem
      	   type="Navigation"
      	   press="onPress">
      	<cells>
      	  <Text
      	    text="{Xblnr}"/>
      	<Text 
      	    text="{Bldat}"/>
      	<Text
      	    text="{Wrbtr}"/>
      	<Text
      	    text="{Waers}"/>
      	<Text
      	    text="{Invoice_Name}"/>
      	<Text
      	    text="{CREATE_DATE}"/>	
      	<Text
      	    text="{Status}"/>
      	<Image	
      	    image="{Status_Url}"
      	    factory= "{.productListFactory}"/> 	  					   
      	</cells>
      	   </ColumnListItem>
      			</items>
      
      In The controller.js
      productListFactory : function(sId,oContext) {
      		var oUIControl = null;
      		// 
      		if (oContext.getProperty("Status_Url") === 1 ) {
      		// Set icone
      		oUIControl = new sap.m.StandardListItem(sId, {
      		icon : "sap-icon://warning",
      		infoState : "Error"
      			});
      			return oUIControl;
      			
      		}	
      	},
      
      Can you help me with the code?
      Thank you.
  • avatar image
    Former Member
    Jul 20, 2017 at 08:27 AM

    Hello Sharath,

    Thank you for the answer.

    I changed the code but its not working for me.

    in the .XML

    <items>
    	<ColumnListItem
    	   type="Navigation"
    	   press="onPress">
    	<cells>
    	  <Text
    	    text="{Xblnr}"/>
    	<Text 
    	    text="{Bldat}"/>
    	<Text
    	    text="{Wrbtr}"/>
    	<Text
    	    text="{Waers}"/>
    	<Text
    	    text="{Invoice_Name}"/>
    	<Text
    	    text="{CREATE_DATE}"/>	
    	<Text
    	    text="{Status}"/>
    	<Image	
    	    image="{Status_Url}"
    	    factory= "{.productListFactory}"/> 	  					   
    	</cells>
    	   </ColumnListItem>
    			</items>
    
    In The controller.js
    productListFactory : function(sId,oContext) {
    		var oUIControl = null;
    		// 
    		if (oContext.getProperty("Status_Url") === 1 ) {
    		// Set icone
    		oUIControl = new sap.m.StandardListItem(sId, {
    		icon : "sap-icon://warning",
    		infoState : "Error"
    			});
    			return oUIControl;
    			
    		}	
    	},
    
    Can you help me with the code?
    Thank you.
    Add comment
    10|10000 characters needed characters exceeded

  • Jul 20, 2017 at 10:44 AM

    can you try this inline expression?

    <StandardListItem

    text="{Status_Url}"

    icon="{= ${"Status_Url} == 1 ? 'sap-icon://warning' : '' }"

    />

    Add comment
    10|10000 characters needed characters exceeded