cancel
Showing results for 
Search instead for 
Did you mean: 

how to change the color of StandardListItem text

Former Member
0 Kudos

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?

kedarT
Active Contributor
0 Kudos

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.

Former Member
0 Kudos

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/previe...
What if the data is hard-coded?

Accepted Solutions (0)

Answers (3)

Answers (3)

former_member30218
Discoverer
0 Kudos

Hi everyone!

Sorry for reviving this thread but I am currently dealing with the same issue. There seems not to be a way to change the class of a description using a formatter. Unfortunately overriding the css class used for descriptions doesn't work in my scenario, since this changes the color of all descriptions. My requirements are however to set the color of every list item depending on some conditions being met.

Is there any way to achieve this?

I have tried using the ObjectListItem control but this looks very differently from what I want to achieve (items must have icons with descriptions placed under the title, not under the icon and other non-minor details).

Any help is very appreciated!

sergiogj1998
Discoverer
0 Kudos

Did you finally solve it? I have the same problem and can't get through or find any answers.

former_member30218
Discoverer
0 Kudos

I was unfortunately not able to solve this. Our solution was to use CustomListItems with children controls ressembling the object list item control instead. At the end it looked something like this: (I left out the control properties, you might need to use something other than UserPhoto for the picture, check out Avatar if you need to).

<CustomListItem>

                <HBox height="100%" class="sapUiTinyMarginTopBottom">

                  <VBox width="30%" alignItems="Center">

                    <surj:UserPhoto profile="CIRCLE_40"/>

                  </VBox>

                    <VBox width="100%" height="50%" displayInline="true" alignItems="Start">

                      <Title/>

                      <Text/>

                      <ObjectStatus/>

                    </VBox>

                </HBox>

            </CustomListItem>

former_member221786
Active Participant
0 Kudos

Way to achieve this is by using the aggregation customData of the control.

<StandardListItem>
  <customData>
    <core:CustomData key="xxx" value="{= ${booleanValue} ? 'true' : 'false' }" writeToDom="true" />
  </customData>
</StandardListItem> 

and

.yourListItem[data-xxx=true] {
//  Some fancy css
}
0 Kudos

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;
}

elgoher
Explorer
0 Kudos

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