Si alguna vez ha intentado diseñar cosas en una cuadrícula utilizando SAP Build Apps, es posible que haya notado que no es tan fácil como podría pensar que sería. ¡En este blog, te enseñaré cómo hacer cuadrículas receptivas que se vean exactamente como esperas que se vean!

Grabación de pantalla de la funcionalidad de cuadrícula en la aplicación

Descargo de responsabilidad: Esta funcionalidad de cuadrícula funciona tanto para web como para dispositivos móviles, PERO si la web tiene habilitado el menú de navegación, el diseño no funcionará correctamente de forma predeterminada para una sola tarjeta, y la fórmula deberá ajustarse en consecuencia.

—

Paso 1: Estructura básica

La base de mi estructura de cuadrícula consta de dos componentes de contenedor uno dentro del otro. El contenedor externo está en esta aplicación llamada Preguntas y el contenedor interno es Tarjeta. El propósito del contenedor externo de Preguntas es ser un contenedor horizontal con envoltura habilitada. Debido a esto, cuando repetimos el contenedor interno de tarjetas con datos, las tarjetas seguirán horizontalmente y luego se ajustarán a nuevas filas cuando haya más de las que quepan en la pantalla de una sola vez.

Captura de pantalla de la configuración del contenedor de Preguntas

La función del contenedor interno de la tarjeta es mostrar los elementos de la cuadrícula y cuidar que todos los elementos de la cuadrícula tengan el mismo tamaño y, por lo demás, se vean iguales. Repite el contenedor de la Tarjeta con tus datos.

Ahora, antes de que se realice cualquier personalización del ancho o la altura, sus datos repetidos se verán así:

Captura de pantalla de la aplicación: las tarjetas tienen diferentes alturas y anchos y el último elemento de la lista es más ancho que cualquier otro

Esto aún no es lo que queremos, ¡así que vamos al siguiente paso!

—

Paso 2: espacios y rellenos

Sorprendentemente, los espacios entre las tarjetas y los rellenos de la página son una parte crucial para que la cuadrícula se vea bien.

Primero, configure los espacios de los contenedores de tarjetas para que sean como desee. En una cuadrícula típica, el espacio debe ser el mismo a la derecha que en la parte superior (o en la parte inferior si elige usar la parte inferior en lugar de la parte superior). Tome nota de la brecha que estableció para ser a la derecha + izquierda del componente, ya que necesitará esta cantidad de píxeles en el paso 3. Para mí, esta cantidad es 16 px + 0 px, por lo tanto, 16 px. Es posible que las fórmulas del siguiente paso no funcionen si también configura el espacio a la izquierda, por lo tanto, solo configure una de ellas si es posible.

Captura de pantalla de la configuración de la brecha de la tarjeta

A continuación, querrá configurar los rellenos de página, y esto afectará todos los componentes de la página.

¿Por qué necesita configurar rellenos de página? Buena pregunta, pero respuesta frustrante: porque hay un espacio inevitable a la derecha de cada fila envuelta que no puede eliminar, y la manera de hacer que el usuario no lo note es hacer este truco con el relleno de página.

Quite todo lo que pueda del relleno de página a la derecha estableciste como el espacio correcto en la parte anterior. 16px en mi caso. Tome nota también de la relleno total de la página a izquierda y derecha. 32px + 16px = 48px en mi caso.

Captura de pantalla de la configuración del relleno de página

Ahora deberá agregar esto a todos los demás componentes de la página. Hago esto tirando todo lo demás en la página en uno o dos contenedores y dando a esos contenedores la misma cantidad de relleno correcto que eliminé del relleno de la página, y el problema desaparece.

Captura de pantalla de la configuración de un contenedor para el resto de la página, que muestra los 16 px agregados para el relleno derecho

—

Paso 3: Defina la altura y el ancho avanzados para la tarjeta

Ahora que se ha preparado todo lo demás, para obtener el efecto de cuadrícula deseado en la tarjeta, usaremos la sección «Avanzado» en las propiedades de «Diseño».

Captura de pantalla de las configuraciones de ancho y alto del contenedor de tarjetas

Estos son los únicos valores que necesita configurar, y si no le importa cuán pequeña puede llegar a ser la tarjeta, puede omitir el ancho mínimo. Establezca la altura a la altura que desea que tenga cada elemento.

La magia en sí ocurre en la fórmula que he establecido para el ancho. Quería que la cuadrícula tuviera una cantidad diferente de tarjetas según el ancho de la ventana gráfica disponible, así que estoy usando systemVars.dimensions.viewport.width en mis cálculos. Recomiendo usar siempre mirador en lugar de pantalla o ventana, ya que esto le dará el valor más utilizable tanto para dispositivos móviles como para la web. La ventana gráfica es el tamaño del navegador o, en el móvil, el tamaño de la pantalla disponible para la aplicación.

Después de determinar qué tan ancha es la pantalla y elegir cuántas tarjetas quiero que se muestren (4, 3, 2 o 1), necesito hacer algunas deducciones para tener en cuenta los rellenos de página y los espacios entre las tarjetas: deducir la página rellenos de todo el ancho de la ventana gráfica, y una vez que haya dividido ese ancho disponible para las tarjetas en tantas tarjetas como desee que se muestren para ese ancho de pantalla específico, también eliminará 16 px para los espacios entre los componentes.

IF(systemVars.dimensions.viewport.width>1500, (systemVars.dimensions.viewport.width-48)/4-16, 
IF(systemVars.dimensions.viewport.width>1000, (systemVars.dimensions.viewport.width-48)/3-16, 
IF(systemVars.dimensions.viewport.width>700, (systemVars.dimensions.viewport.width-48)/2-16, 
systemVars.dimensions.viewport.width-48-16)))

(¡Tenga en cuenta que la fórmula para el ancho más pequeño de la ventana gráfica deberá ajustarse si tiene habilitado el menú de navegación!)

—

Opcional: Consejos para evitar que el contenido se desborde

Todos los contenedores anteriores están configurados de forma predeterminada para ocultar el contenido desbordado, y así es como debería ser. Sin embargo, si tiene un texto o varios textos que pueden tener diferentes longitudes, es posible que desee asegurarse de que se corte antes de que empuje el otro contenido fuera del contenedor, lo que los deja fuera de la vista.

Para evitar que los textos ocupen demasiado espacio, puede usar la fórmula TRUNCATE después de una cierta cantidad de caracteres, pero nunca se sabe cuántas filas puede haber o no. En su lugar, recomiendo usar el Número de líneas propiedad del texto. Aquí he configurado uno de los textos de contenido para que tenga un máximo de 3 líneas.

Captura de pantalla de la configuración de un texto de contenido

También configuré el texto superior en un costumbre alto y ancho para que crezca hasta llenar el espacio disponible y el resto del contenido siempre esté alineado en la parte inferior del contenedor de la tarjeta.

Captura de pantalla de la configuración de ancho y alto del texto

Captura de pantalla de una sola tarjeta en la aplicación con la alineación adecuada

—

¡Hecho!

Ahí lo tiene, una cuadrícula receptiva sin alineaciones extrañas para el último elemento y con diferentes cantidades de elementos para diferentes anchos de pantalla. Déjame saber en los comentarios si tienes alguna pregunta o comentario 🙂

Para obtener más publicaciones de blog sobre temas relevantes, consulte el Grupo de constructores de SAP!