$(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
0

SAPUI5 - Display different icons in ColumnListItem

Jul 09, 2017 at 03:01 PM

457

avatar image
Former Member

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.
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

4 Answers

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

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

Show 1 Share
10 |10000 characters needed characters left 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.

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

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

Show 3 Share
10 |10000 characters needed characters left 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.

0

You are trying to put the image in a text control. Replace the text tag with image tag.

Use the column item of type image and then assign the url to the image.

Regards,

Sharath

0
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.
0
avatar image
Former Member Jul 20, 2017 at 08:27 AM
0

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.
Share
10 |10000 characters needed characters left characters exceeded
Sergio Guerrero Jul 20, 2017 at 10:44 AM
0

can you try this inline expression?

<StandardListItem

text="{Status_Url}"

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

/>

Share
10 |10000 characters needed characters left characters exceeded