csstextcolorsrowsapui5
Change text color in a row depending on a value [SAPUI5]
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.
Solution
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.
- CSS Flexbox Gap - gap value affecting width calculation
- How to use "repeat()" css function combined with Angular ngStyle directive?
- CSS Modules and CSS keyframe animations
- Difference between Localhost and opening html file
- Use of display:none but still keep the space used
- Referencing another element in CSS / doing math in CSS
- Issue with animation, skips half of it's way
- Vertically align text within input field of fixed-height without display: table or padding?
- hover over image effect: shadow
- How can I fix nested gird layout?
- How to put some space between elements when bootstrap grid collapse?
- How can I make Bootstrap 4 columns all the same height?
- Javascript live typing animation that handles HTML tags
- applying the same selectors on sibling have a slightly different behaviour
- How to overwrite css style
- How to create checkbox inside dropdown?
- Add image or text onto all JSP pages through Struts or CSS
- Render spans inside pre tag (in the HTML, not displayed as text to the user)
- What to use in place of ::ng-deep
- Select specific element before other element
- How to change font for the CodeMirror editor
- Make circle image according to screen size with CSS
- Div taking all horizontal space
- -webkit-backdrop-filter not working on Safari
- Nested Flexbox for navbar
- How to create a Numbering marker in CSS?
- Put text under drag-n-drop area
- Remove the space between 2 elements under each other using flex
- Bootstrap 5 tooltip placement top issue when page has a scroll
- How to dim an image keeping transparency untouched with CSS or JS?