on 12-21-2016 4:32 PM
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?
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!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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>
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;
}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
71 | |
26 | |
10 | |
9 | |
7 | |
6 | |
4 | |
4 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.