Skip to Content
0

how to change the color of StandardListItem text

Dec 21, 2016 at 04:32 PM

460

avatar image

I have some listItems displayed on my app and would like to change the color of some of them. My app is broken down into a controller.js, index.html and view.xml. I have seen some examples online on how to do this but they don't seem to work for me

First I tried changing the color of the text while the app was running(right click ->inspect->edit as html-> style="color:red") and this works.

I saw online that I can just wrap my text in html and do it that way but I don't think this applies to xml views.

<html><span style="font-color: #CCCCCC;">Your text here</span></html>

On the SAP site under Explored examples there is one example that does that.

<items>
			<StandardListItem
				title="{Name}"
				info="{Status}"
				infoState="{
					path: 'Status',
					formatter: 'sap.m.sample.StandardListItemInfo.Formatter.status'
				}"
				 />
		</items>

The difference with this is that they are setting the color to info but I want it to be set to description.
this is my sample code

<l:VerticalLayout id="priceEvalCol2" width="100%">
    <StandardListItem  title="Price at First Unit" description="$23.97" />
</l:VerticalLayout>

Does anyone know of a way to this?

color.png (8.3 kB)
10 |10000 characters needed characters left characters exceeded

Here is pointer using CSS - Dynamic background color

Other way would be to use path for description for fomatter something like below

<l:VerticalLayout id="priceEvalCol2" width="100%">

<StandardListItem  title="Price at First Unit" description="{path: 'Description',formatter: 'formatter.desc'}" />

</l:VerticalLayout>

Hope this helps.

0
Kedar Nath Tingrikar

I believe this is assuming there is a form of data model where the data is being read from correct? The same way as it's being done with the sap example. https://openui5beta.hana.ondemand.com/explored.html#/sample/sap.m.sample.StandardListItemInfo/preview
What if the data is hard-coded?

0
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Eliu Gonzalez Dec 21, 2016 at 05:34 PM
0

Hi Elisieo

is there any parameter to check, and change text color?,have you tried with SAP theme designer in sap gui transaction /UI5/THEME_DESIGNER... there you can play with ui5 controls an check if you want it's posible.there's other way to change properties in your css file inside your app overwrite the sapMSLIDescription and add the color you want

regards

Share
10 |10000 characters needed characters left characters exceeded
Sudheer Kumar Akkalapotu Dec 22, 2016 at 05:09 PM
0

Hi Eliseo,

You can achieve this by overriding standard styles.

first assign custom class to the control you want to change.

<l:VerticalLayout id="priceEvalCol2" width="100%">

<StandardListItem class="mybackground_listitem"  title="Price at First Unit" description="$23.97" />

</l:VerticalLayout>

now in css you need to add the custom class with the standard style "sapMSLIDescriptionDiv"

.mybackground_listitem .sapMSLIDescriptionDiv
{
font-color: #CCCCCC !important;
}

Share
10 |10000 characters needed characters left characters exceeded