Alternate Color for Highlighting Table Rows - css

Question

I am trying to add the highlighting row functionality to a table, the values of which I am getting from backend OData service.
I am referring this:
For the views, I am using an xmlview
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
controllerName="generated.app.controller.14768629992738663_S0"
xmlns:m="sap.m"
xmlns:html="http://www.w3.org/1999/xhtml"
>
<m:Page id="sap_Responsive_Page_0"
showHeader="true"
title="Manage Tenants"
showFooter="true"
showNavButton="true"
>
<m:SearchField id="sap_Responsive_Page_0-content-sap_m_SearchField-1476864205399"
placeholder="Search"
showSearchButton="true"
visible="true"
width="268.140625px"
liveChange="onFilter"
/>
<m:Toolbar id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475"
width="auto"
design="Transparent"
height="46px"
visible="true"
enabled="true"
>
<m:Text id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_Text-1"
text="Items"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
<m:ToolbarSpacer id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_ToolbarSpacer-2" width=""/>
<m:Button id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_Button-1476863865529"
iconDensityAware="false"
text=""
type="Default"
icon="sap-icon://add"
iconFirst="true"
width="auto"
enabled="true"
visible="true"
press="_onButtonPress2"
/>
<m:Button id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_Button-4"
iconDensityAware="false"
text=""
type="Transparent"
icon="sap-icon://drop-down-list"
iconFirst="true"
width="auto"
enabled="true"
visible="true"
press="onGroup"
/>
</m:Toolbar>
<m:Table id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613"
width="100%"
noDataText="No data"
selectionMode="MultiToggle"
growing="false"
growingThreshold="20"
growingScrollToLoad="false"
items="{/BYD}"
itemPress="_onTableItemPress"
ariaLabelledBy="title"
>
<m:columns>
<m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1"
width="auto"
hAlign="Left"
vAlign="Top"
minScreenWidth="Tablet"
demandPopin="true"
popinDisplay="Inline"
mergeDuplicates="false"
>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1-header-sap_m_Text-1"
text="Tenant"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
</m:Column>
<m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-2"
width="auto"
hAlign="Left"
vAlign="Top"
minScreenWidth="Tablet"
demandPopin="true"
popinDisplay="Block"
mergeDuplicates="false"
>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-2-header-sap_m_Text-1"
text="Division"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
</m:Column>
<m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-3"
width="auto"
hAlign="Left"
vAlign="Top"
minScreenWidth="Tablet"
demandPopin="true"
popinDisplay="Block"
mergeDuplicates="false"
>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-3-header-sap_m_Text-1"
text="Type"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
</m:Column>
<m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1476863521840"
width="auto"
hAlign="Left"
vAlign="Top"
minScreenWidth="Tablet"
demandPopin="true"
popinDisplay="Inline"
mergeDuplicates="false"
>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1476863521840-header-sap_m_Text-1"
text="Status"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
</m:Column>
</m:columns>
<m:ColumnListItem id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1"
type="Navigation"
press="onPress"
>
<m:ObjectIdentifier id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-sap_m_ObjectIdentifier-1"
title="{TENANTNAME}"
text="{ID}"
titleActive="false"
visible="true"
/>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-sap_m_Text-2"
text="{DIVISION}"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-build_simple_TableCell-1476863445271-content-sap_m_Text-1476863453798"
text="{TYPES}"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
<m:ObjectStatus id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-build_simple_TableCell-1476863521843-content-sap_m_ObjectStatus-1476863547560"
title=""
text="{STATUS}"
state="{STATUSFLAG}"
/>
</m:ColumnListItem>
</m:Table>
<m:footer>
<m:Bar id="sap_Responsive_Page_0-footer-sap_m_Bar-1" design="Auto"/>
</m:footer>
</m:Page>
</mvc:View>
As mentioned in the above link, I created a CSS file, where in I am mentioning the ID of the table to add the highlighting functionality to it.
#sap_Responsive_Page_0-content-build_simple_Table-1476863214613 tbody tr:nth-child(even) {
background: rgb(24, 245, 25);
}
I have added the CSS in resources in manifest.json
"sap.ui5": {
"resources": {
"css": [{
"uri": "css/style.css"
}]
}
}
But this has not worked as it is expected to work.
Is there something more or different I need to do here?!

Answer 1

You should NOT rely on ids for your css in SAPUI5 : ids are generated at runtime and you have no garanty that it will stay consistent over time (+ the ID you specify in the XML is NOT the actual ID of the DOM element).
Change your CSS selector to use the built-in CSS classes (which SAPUI5 supports over time) or add your own classes.
.xml
<Table class="myHighlightClass" ....
.css
.myHighlightClass { ...