Change text color in a row depending on a value [SAPUI5]

Question

I want to change text color to red to the entire row where "Especialidad" has the value "Hospitalizado". How can I do it?

This is my code:

VistaPrinc.view.xml: Here is where the structure is made and I think (at least for now) I don't need to use a controller to apply some CSS.

    <mvc:View 
    controllerName="CensoTV.CensoTV.controller.VistaPrinc" 
     xmlns:mvc="sap.ui.core.mvc"
     xmlns:core="sap.ui.core"
     xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
     xmlns="sap.m">
    
    <Shell id="shell">
        <App id="app">
            <pages>
                <Page id="page" title="{i18n>listaPac}">
                    <content>
                        <Text text="{i18n>tituloTablaPl}"/>
                        <Text text="{i18n>tituloTablaPac}"/>
                        <Table
                              id="tablaPacientes"
                              headerText="{i18n>tituloTablaPl}"
                              class="sapUiResponsiveMargin"
                              width="auto"
                              items="{pacientes>/Pacientes}">
                            <columns>
                                <Column
                                    hAlign="Center">
                                    <Text text="{i18n>ColumnaCama}"/>
                                </Column>
                                <Column
                                    hAlign="Center">
                                    <Text text="{i18n>ColumnaNombre}"/>
                                </Column>
                                <Column
                                    hAlign="Center">
                                    <Text text="{i18n>ColumnaFecha}"/>
                                </Column>
                                <Column
                                    hAlign="Center">
                                    <Text text="{i18n>ColumnaHora}"/>
                                </Column>
                                <Column
                                    hAlign="Center">
                                    <Text text="{i18n>ColumnaAlergias}"/>
                                </Column>
                                <Column
                                    hAlign="Center">
                                    <Text text="{i18n>ColumnaObservacion}"/>
                                </Column>
                                <Column
                                    hAlign="Center">
                                <Text text="{i18n>ColumnaEspecialidad}"/>
                                </Column>
                                <Column
                                    hAlign="Center">
                                    <Text text="{i18n>ColumnaCambio}"/>
                                </Column>
                                <Column
                                    hAlign="Center">
                                    <Text text="{i18n>ColumnaHoraMedicacion}"/>
                                </Column>
                            </columns>
                            <items>
                             <ColumnListItem>
                                
                                <customData>
                                    <core:CustomData key="data" value="{pacientes>Especialidad}" writeToDom="true"/>
                                </customData>
                            
                                <cells>
                                    <ObjectIdentifier title="{pacientes>Cama}"/>
                                    <Text text="{pacientes>Nombre} {pacientes>Apellido1} {pacientes>Apellido2}"/>
                                    <Text text="{pacientes>Fecha_ingreso}"/>
                                    <Text text="{pacientes>Hora_ingreso}"/>
                                    <!--<Text text="{pacientes>Alergias}"/>-->
                                    <core:Icon 
                                        src="sap-icon://alert" 
                                        visible="{= ${pacientes>Alergias} === true }"
                                        alt="Tiene alergias"
                                        color="#FF0000"/>
                                    <Text text="{pacientes>Observacion}"/>
                                    <!--<Text text="{pacientes>Especialidad}"/>-->
                                    <!--<core:Span style="font-color:{= ${pacientes>Especialidad} === 'Hospitalizado' ? '#FF0000' : '#000000'}">"Hola" </core:Span>-->
                                        <!--style="font-color:{= ${pacientes>Especialidad} === 'Hospitalizado' ? '#FF0000' : '#000000'}"/>-->
                                    <Text text="{pacientes>Especialidad}"/>
                                       <!--icon="sap-icon://bed"-->
                                    <!--<Text text="{pacientes>Cambio_medicacion}"/>-->
                                    <core:Icon 
                                        src="sap-icon://history" 
                                        visible="{= ${pacientes>Cambio_medicacion} === true }" 
                                        alt="Cambio de medicación"
                                        color="#FF0000"/>
                                    <Text text="{pacientes>Ultimo_cambio_med}"/>
                                </cells>
                                
                             </ColumnListItem>
                          </items>
                        </Table>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

Pacientes.json: This is my custom JSON Model file to show the data i want in the fields.

    {
    "Pacientes": [
        {
            "Cama": "A3-2304",
            "Nombre": "María",
            "Apellido1": "Hernández",
            "Apellido2": "López",
            "Fecha_ingreso": "2020-03-22",
            "Hora_ingreso": "00:20:32",
            "Alergias": true,
            "Observacion": "Hola, soy tu médico",
            "Especialidad": "Quirúrgico",
            "Cambio_medicacion": false,
            "Ultimo_cambio_med": ""
        },
        {
            "Cama": "A4-2302",
            "Nombre": "Juan",
            "Apellido1": "Hernández",
            "Apellido2": "López",
            "Fecha_ingreso": "2021-04-26",
            "Hora_ingreso": "23:22:11",
            "Alergias": false,
            "Observacion": "Hola, soy tu médico",
            "Especialidad": "Hospitalizado",
            "Cambio_medicacion": true,
            "Ultimo_cambio_med": "13:13:13"
        },
        {
            "Cama": "A4-8956",
            "Nombre": "Luis",
            "Apellido1": "Hernández",
            "Apellido2": "López",
            "Fecha_ingreso": "2013-20-07",
            "Hora_ingreso": "11:36:22",
            "Alergias": true,
            "Observacion": "Hola, soy tu médico",
            "Especialidad": "Hospitalizado",
            "Cambio_medicacion": true,
            "Ultimo_cambio_med": "20:20:16"
        },
        {
            "Cama": "A4-5321",
            "Nombre": "Mariano",
            "Apellido1": "Hernández",
            "Apellido2": "López",
            "Fecha_ingreso": "2020-03-22",
            "Hora_ingreso": "00:20:32",
            "Alergias": true,
            "Observacion": "Hola, soy tu médico",
            "Especialidad": "Quirúrgico",
            "Cambio_medicacion": false,
            "Ultimo_cambio_med": ""
        },
        {
            "Cama": "A4-5092",
            "Nombre": "Laura",
            "Apellido1": "Hernández",
            "Apellido2": "López",
            "Fecha_ingreso": "2011-08-15",
            "Hora_ingreso": "13:41:24",
            "Alergias": true,
            "Observacion": "Hola, soy tu médico",
            "Especialidad": "Hematológico",
            "Cambio_medicacion": false,
            "Ultimo_cambio_med": ""
        },
        {
            "Cama": "A7-2933",
            "Nombre": "Jesús",
            "Fecha_ingreso": "2020-03-22",
            "Hora_ingreso": "00:20:32",
            "Alergias": false,
            "Observacion": "Hola, soy tu médico",
            "Especialidad": "Quirúrgico",
            "Cambio_medicacion": false,
            "Ultimo_cambio_med": ""
        },
        {
            "Cama": "A7-2391",
            "Nombre": "Paula",
            "Apellido1": "Hernández",
            "Apellido2": "López",
            "Fecha_ingreso": "2020-03-22",
            "Hora_ingreso": "00:20:32",
            "Alergias": true,
            "Observacion": "Hola, soy tu médico",
            "Especialidad": "Hematológico",
            "Cambio_medicacion": false,
            "Ultimo_cambio_med": ""
        },
        {
            "Cama": "39100A",
            "Nombre": "Salvador",
            "Apellido1": "Hernández",
            "Apellido2": "López",
            "Fecha_ingreso": "2020-03-22",
            "Hora_ingreso": "00:20:32",
            "Alergias": true,
            "Observacion": "Hola, soy tu médico",
            "Especialidad": "Hospitalizado",
            "Cambio_medicacion": false,
            "Ultimo_cambio_med": ""
        },
        {
            "Cama": "A2-8720",
            "Nombre": "Bernardo",
            "Apellido1": "Hernández",
            "Apellido2": "López",
            "Fecha_ingreso": "2020-03-22",
            "Hora_ingreso": "00:20:32",
            "Alergias": true,
            "Observacion": "Hola, soy tu médico",
            "Especialidad": "Oncológico",
            "Cambio_medicacion": false,
            "Ultimo_cambio_med": ""
        },
        {
            "Cama": "A6-9072",
            "Nombre": "Kimberly",
            "Apellido1": "Hernández",
            "Apellido2": "López",
            "Fecha_ingreso": "2020-03-22",
            "Hora_ingreso": "00:20:32",
            "Alergias": true,
            "Observacion": "Hola, soy tu médico",
            "Especialidad": "Hematológico",
            "Cambio_medicacion": false,
            "Ultimo_cambio_med": ""
        }
    ]
}

Style.css: This is where i apply the styles and get the background set, but it doesn't let me apply the text color. SAPUI5 ignores that lines.

/* Enter your custom styles here */

tr[data-data="Hematológico"]{
  background-color:   #FFFFFF !important;
  color: #000000 !important;
}

tr[data-data="Hospitalizado"]{
    background-color:   #FFFFFF !important;
    color: red !important;
}

tr[data-data="Oncológico"]{
  background-color:   #51d1f6 !important;
  color: #000000 !important;
}

tr[data-data="Quirúrgico"]{
  background-color:   #82e0aa !important;
  color: #000000 !important;
}

.bold {
    font-weight: bold;
}

/* Esto es para ponerle las lineas de las celdas, si queremos lo dejamos; sino, lo comentamos o quitamos */
.sapMListTblCell {
    border-left: 1px solid #ccc;
}

/* Especifica el tamaño del texto del titulo de la tabla  */
.sapMListHdrText {
    font-size: 30px;
}

VistaPrinc.controller.js

Actually not using it, it just has the onInit function empty.

Does this answer your question? [How to change the color of row in table (SAPUI5)?](https://stackoverflow.com/questions/22704644/how-to-change-the-color-of-row-in-table-sapui5) — Boghyon Hoffmann, Sep 20 '21 at 22:45

Marc · Accepted Answer · 2021-09-20T19:09:46.663

First let me show you the "fiori" way: ColumnListItem has the property highlight. I found no sample but it kind of looks like this:

If you want to go the custom CSS route (not recommended) then try this:

<tr> has children. Lots of them.

See this screenshot from the sample page:

You changed the top element. The element that contains the text (and defines its own color) is the <span> way below.

So you need to apply the CSS to the children. Easiest is probably just applying it to all of them

tr[data-data="Hospitalizado"] * {
    color: red !important;
}

Why does the background-color work? Because the child elements all have transparent background or inherit it from the parent.

Change text color in a row depending on a value [SAPUI5]

1 Answers1