• 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

Diseño de cuadrícula confiable en SAP Build Apps

By s4pcademy 


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!

Pantalla%20grabando%20de%20la%20funcionalidad%20de%20la%20cuadrícula%20en%20la%20aplicación

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%20de%20la%20configuración%20de%20el%20Pregunta%20contenedor

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%20de%20la%20aplicación

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%20de%20la%20configuración

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%20de%20la%20configuración

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%20de%20la%20configuración

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%20de%20la%20configuración

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%20de%20a%20contenido%20texto%20configuración

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%20de%20la%20texto%20ancho%20y%20alto%20configuración

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

Captura de pantalla%20de%20a%20single%20Card%20en%20la%20aplicación

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!



Source link


AppsBuildconfiablecuadrículaDiseñoSAP

Artículos relacionados


digital supply chain  ·  Logistics  ·  Product Information
Logística de la cadena de suministro digital de SAP® en SAP S/4HANA Cloud 2302: descripción general
SQL Execution Engine  ·  Technical Articles
Ejecución de consultas más rápida utilizando menos memoria en SAP HANA Cloud
Personal Insights
Acelere su migración a SAP BusinessObjects BI 4.3 con 360Suite

Deja tu comentario Cancelar la respuesta

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

*

*

Emulador de PLC de código abierto: ¿por qué no se puede proporcionar una aplicación lista para ejecutar?
Previo
Proyecto instalación piper en viaje Kyma
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