Search code examples
csssapui5

Alternate Color for Highlighting Table Rows

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: SAPUI5 alternate color in sap.m.Table

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?!

Solution

  • 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 { ...