• Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
S4PCADEMY_Logo
  • Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
Twitter Linkedin Instagram

S4PCADEMY_Logo
  • Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
Twitter Linkedin Instagram
Technical Articles

Estilo CSS dinámico para tablas UI5: una solución simple para las limitaciones de getRows()

By s4pcademy 


Si alguna vez ha intentado aplicar dinámicamente CSS personalizado a un control de tabla UI5, es posible que haya encontrado algunos desafíos. En este artículo, exploraremos un enfoque simple que puede ser útil para algunas tablas UI5 vinculadas a un modelo JSON y que utilizan un conjunto de datos relativamente pequeño.

Suponga que desea utilizar un control de tabla de cuadrícula (sap.ui.table.Table) y recuperar las filas de su tabla. En ese caso, normalmente usaría el método getRows(). Sin embargo, este método tiene una limitación: solo devuelve las filas que se representan actualmente en la tabla, lo que también se conoce como recuento de filas visibles. Este es un comportamiento bien conocido documentado en este Artículo de la base de conocimientos de SAP.

¿Qué pasa con getContextByIndex()?

El artículo anterior sugiere usar el método getContextByIndex() como alternativa si es necesario. Sin embargo, este método devuelve el contexto y no puede agregar una clase de estilo CSS al contexto de la tabla en sí, lo que lo hace menos útil para el estilo CSS dinámico.

Error%20cuando%20intenta%20a%20aplicar%20CSS%20a%20el%20tabla%20Contexto

Error al intentar aplicar CSS al contexto de la tabla

Por otro lado, aplicar CSS a una fila específica usando el método getRows() no requiere esfuerzo. Por ejemplo, puede agregar un color de fondo a una fila de tabla específica:

this.getView().byId("sTableId").getRows()[i].addStyleClass("backgroundColor");
.backgroundColor {
  background: #4cba6b; width: 100%; height: 100%;
}

Sin embargo, surge un problema cuando la fila de color se mueve a medida que se desplaza hacia abajo en la tabla. Esto se debe a que getRows() solo ha devuelto el recuento de filas visibles, donde aplicamos la clase de estilo. Entonces, ¿cómo podemos manipular dinámicamente el número de filas visibles que se muestran en la tabla en lugar del recuento estándar de 10?

El control Grid Table proporciona la propiedad visibleRowCount, que se puede vincular a la longitud de las filas a través del enlace de expresión. Cuando vincula la propiedad visibleRowCount a un modelo JSON con la propiedad de filas dentro, que contiene todos los datos de las filas, el método getRows() devuelve todas las filas de la tabla, lo que le permite aplicar CSS a todas las filas de la tabla.

Este es un ejemplo de cómo vincular la propiedad visibleRowCount a un modelo JSON:

<table:Table
id="sTableId"
rowsUpdated="onRowsUpdated"
visibleRowCount="{= ${tablemodel>/rows}.length }">

En este ejemplo, vinculamos la propiedad visibleRowCount a un modelo JSON llamado ‘tablemodel’ con la propiedad de filas dentro, que contiene todos los datos de las filas. El enlace de expresión se utiliza para calcular la longitud de la propiedad de filas.

De manera similar, puede aplicar su CSS a una agregación de celdas específica en lugar de a toda la fila.

oTable.getRows()[i].mAggregations.cells[j].addStyleClass("backgroundColor");

En conclusión, usar la propiedad visibleRowCount y el enlace de expresión para manipular dinámicamente el número de filas visibles que se muestran en la tabla le permite aplicar CSS dinámicamente a todas las filas de la tabla. También puede aplicar CSS a agregaciones de celdas específicas, lo que le permite personalizar la tabla para satisfacer sus necesidades.

¡Feliz CSSing!



Source link


CSSdinámicoestilogetRowslaslimitacionesparasimplesolucióntablasUI5una

Artículos relacionados


MyFaveSAPCIFeature  ·  Technical Articles
Mi característica favorita de SAP Cloud Integration: las API
#industry cloud  ·  #intelligent enterprise  ·  #partnership  ·  #SAP Build  ·  #SAPindustries  ·  Business Trends  ·  SAP Business Technology Platform
De la visión al valor: SAP promete abundantes recursos para respaldar los esfuerzos de nube de la industria de los socios
#eprocurement  ·  b2b commerce  ·  B2B procurement  ·  Product Information  ·  punchout  ·  Punchout Level 2
B2B Commerce PunchOut para un proceso de compra simplificado y sin inconvenientes

Deja tu comentario Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

Planificación estratégica de clase mundial como base para toda planificación organizacional
Previo
Guía hacia la monetización de datos | Blogs de SAP
Siguiente

Madrid

Calle Eloy Gonzalo, 27
Madrid, Madrid.
Código Postal 28010

México

Paseo de la Reforma 26
Colonia Juárez,  Cuauhtémoc
Ciudad de México 06600

Costa Rica

Real Cariari
Autopista General Cañas, 
San José, SJ 40104

Perú

Av. Jorge Basadre 349
San Isidro
Lima, LIM 15073

Twitter Linkedin Instagram
Copyright 2022 | All Right Reserved.
Cookies Para que este sitio funcione adecuadamente, a veces instalamos en los dispositivos de los usuarios pequeños ficheros de datos, conocidos como cookies. La mayoría de los grandes sitios web también lo hacen.
Aceptar
Cambiar ajustes
Configuración de Cookie Box
Configuración de Cookie Box

Ajustes de privacidad

Decida qué cookies quiere permitir. Puede cambiar estos ajustes en cualquier momento. Sin embargo, esto puede hacer que algunas funciones dejen de estar disponibles. Para obtener información sobre eliminar las cookies, por favor consulte la función de ayuda de su navegador. Aprenda más sobre las cookies que usamos.

Con el deslizador, puede habilitar o deshabilitar los diferentes tipos de cookies:

  • Bloquear todas
  • Essentials
  • Funcionalidad
  • Análisis
  • Publicidad

Este sitio web hará:

Este sitio web no:

  • Esencial: recuerde su configuración de permiso de cookie
  • Esencial: Permitir cookies de sesión
  • Esencial: Reúna la información que ingresa en un formulario de contacto, boletín informativo y otros formularios en todas las páginas
  • Esencial: haga un seguimiento de lo que ingresa en un carrito de compras
  • Esencial: autentica que has iniciado sesión en tu cuenta de usuario
  • Esencial: recuerda la versión de idioma que seleccionaste
  • Functionality: Remember social media settings
  • Functionality: Remember selected region and country
  • Analytics: Keep track of your visited pages and interaction taken
  • Analytics: Keep track about your location and region based on your IP number
  • Analytics: Keep track of the time spent on each page
  • Analytics: Increase the data quality of the statistics functions
  • Advertising: Tailor information and advertising to your interests based on e.g. the content you have visited before. (Currently we do not use targeting or targeting cookies.
  • Advertising: Gather personally identifiable information such as name and location
  • Recuerde sus detalles de inicio de sesión
  • Esencial: recuerde su configuración de permiso de cookie
  • Esencial: Permitir cookies de sesión
  • Esencial: Reúna la información que ingresa en un formulario de contacto, boletín informativo y otros formularios en todas las páginas
  • Esencial: haga un seguimiento de lo que ingresa en un carrito de compras
  • Esencial: autentica que has iniciado sesión en tu cuenta de usuario
  • Esencial: recuerda la versión de idioma que seleccionaste
  • Functionality: Remember social media settings
  • Functionality: Remember selected region and country
  • Analytics: Keep track of your visited pages and interaction taken
  • Analytics: Keep track about your location and region based on your IP number
  • Analytics: Keep track of the time spent on each page
  • Analytics: Increase the data quality of the statistics functions
  • Advertising: Tailor information and advertising to your interests based on e.g. the content you have visited before. (Currently we do not use targeting or targeting cookies.
  • Advertising: Gather personally identifiable information such as name and location
Guardar y cerrar