Skip to Content
avatar image
Former Member

how to change the color of StandardListItem text

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Dec 21, 2016 at 05:34 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Dec 22, 2016 at 05:09 PM

    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;
    }
    
    
    Add comment
    10|10000 characters needed characters exceeded