✒️SAP BTPFIORI / El diseño con el layout flexible column Por Jose Baz Suarez

Selector Alummnos / Empresas

SAP BTPFIORI El diseño con el layout flexible column

SAP BTPFIORI El diseño con el layout flexible column

El diseño con el Layout Flexible Column

1. Introducción

El Flexible Column Layout (FCL) es uno de los diseños más importantes dentro de SAPUI5 y SAP Fiori.
Fue introducido para mejorar la usabilidad y adaptabilidad de las aplicaciones que requieren mostrar diferentes niveles de información en una misma pantalla, permitiendo que el usuario visualice varias áreas o “columnas” simultáneamente.

El objetivo principal del FCL es ofrecer una navegación fluida entre objetos relacionados sin necesidad de abrir y cerrar vistas, optimizando así la experiencia de usuario especialmente en dispositivos de escritorio y tabletas.

2. Concepto y funcionamiento

El Flexible Column Layout organiza la interfaz en columnas flexibles que se ajustan automáticamente al tamaño de la pantalla.
Cada columna muestra una vista o parte de un flujo de navegación, permitiendo que el usuario vea un contexto maestro y detalles al mismo tiempo.

El número de columnas visibles depende del tamaño del dispositivo y del tipo de diseño elegido.
Por ejemplo, en una pantalla grande pueden mostrarse tres columnas, mientras que en un teléfono solo se muestra una.

El FCL se basa en el control sap.f.FlexibleColumnLayout, perteneciente a la librería sap.f.
Este control se utiliza dentro de las vistas XML de la aplicación y su configuración se define generalmente en el archivo manifest.json.

3. Estructura del Flexible Column Layout

El control sap.f.FlexibleColumnLayout admite hasta tres columnas simultáneas, cada una destinada a mostrar un nivel diferente de información:

  1. Columna maestra (beginColumn): muestra la lista principal o vista de nivel superior.

  2. Columna de detalle (midColumn): muestra la información asociada al elemento seleccionado en la primera columna.

  3. Columna de detalle ampliado (endColumn): muestra datos complementarios o información más específica del registro elegido.

El diseño es adaptativo, lo que significa que las columnas pueden expandirse o contraerse según la acción del usuario o el tamaño del dispositivo.

4. Modos de visualización

El Flexible Column Layout ofrece varios modos de visualización predefinidos que determinan cuántas columnas se muestran y qué proporción de ancho ocupa cada una.

Los modos más comunes son:

  • OneColumn: muestra solo una columna (útil para pantallas pequeñas o dispositivos móviles).

  • TwoColumnsBeginExpanded: muestra dos columnas con la primera más ancha.

  • TwoColumnsMidExpanded: muestra dos columnas con la segunda más ancha.

  • ThreeColumnsMidExpanded: muestra las tres columnas con la central ampliada.

  • ThreeColumnsEndExpanded: muestra las tres columnas con la tercera ampliada.

  • ThreeColumnsMidExpandedEndHidden: muestra dos columnas visibles y oculta la tercera.

El modo puede cambiar dinámicamente según la interacción del usuario, por ejemplo, al seleccionar un registro o abrir un detalle.

5. Implementación básica

Ejemplo de vista XML con un diseño FCL:

<f:FlexibleColumnLayout id="fcl" layout="TwoColumnsMidExpanded" backgroundDesign="Solid" xmlns:f="sap.f" xmlns="sap.m"> <beginColumnPages> <Page id="page1" title="Lista de clientes"/> </beginColumnPages> <midColumnPages> <Page id="page2" title="Detalle del cliente"/> </midColumnPages> </f:FlexibleColumnLayout>

En este ejemplo se definen dos columnas: la columna inicial muestra la lista principal y la columna del medio presenta el detalle del elemento seleccionado.

El atributo layout permite controlar qué columnas están visibles y cómo se distribuye el espacio entre ellas.

6. Integración con el enrutamiento (routing)

El Flexible Column Layout se integra naturalmente con el sistema de routing y targets definido en el manifest.json.
Cada columna puede asociarse a una vista o “target” independiente, lo que permite una navegación jerárquica sin recargar la aplicación.

Ejemplo de configuración en manifest.json:

"routing": { "config": { "routerClass": "sap.f.routing.Router", "viewType": "XML", "controlId": "fcl", "controlAggregation": "beginColumnPages", "bypassed": { "target": ["notFound"] } }, "routes": [ { "pattern": "", "name": "master", "target": ["master"] }, { "pattern": "detalle/{id}", "name": "detalle", "target": ["master", "detalle"] } ] }

Este enfoque permite gestionar fácilmente el flujo entre la lista principal y las vistas de detalle dentro del mismo diseño.

7. Ventajas del uso del Flexible Column Layout

  • Permite navegación simultánea entre vistas relacionadas.

  • Mejora la usabilidad en pantallas grandes, mostrando más información sin recargar la interfaz.

  • Proporciona una experiencia adaptativa en función del dispositivo.

  • Reduce el número de pasos que realiza el usuario para acceder al detalle de un objeto.

  • Mantiene la coherencia visual con las guías de diseño SAP Fiori 2.0 y 3.0.

8. Buenas prácticas de diseño

  • Utilizar FCL cuando la aplicación requiera navegación maestro-detalle o jerárquica.

  • No sobrecargar las columnas con demasiada información.

  • Definir un comportamiento claro para el usuario al contraer o expandir columnas.

  • Ajustar correctamente el modo de visualización al tipo de dispositivo mediante reglas adaptativas.

  • Mantener consistencia en los títulos, botones y acciones entre las distintas columnas.

9. Conclusión

El Flexible Column Layout es un diseño esencial en SAPUI5 para aplicaciones que manejan estructuras jerárquicas o relaciones maestro-detalle.
Su uso permite optimizar la navegación, aprovechar mejor el espacio disponible y mejorar la experiencia del usuario final.
Comprender su configuración y sus modos de visualización es clave para construir interfaces modernas, flexibles y compatibles con los principios de SAP Fiori.

Preguntas de repaso con respuestas

  1. ¿Cuál es la función principal del Flexible Column Layout en SAPUI5?
    Permitir que el usuario visualice diferentes niveles de información (lista, detalle y detalle ampliado) en una misma pantalla mediante columnas adaptables.

  2. ¿Cuántas columnas puede manejar el Flexible Column Layout?
    Hasta tres columnas simultáneas: beginColumn, midColumn y endColumn.

  3. ¿A qué librería pertenece el control Flexible Column Layout?
    Pertenece a la librería sap.f de SAPUI5.

  4. ¿Qué propiedad del control define el tipo de distribución de columnas visible en pantalla?
    La propiedad layout, que puede tomar valores como OneColumn, TwoColumnsBeginExpanded, ThreeColumnsMidExpanded, entre otros.

  5. ¿Qué beneficio aporta el Flexible Column Layout al diseño Fiori?
    Mejora la navegación entre vistas relacionadas sin recargar la aplicación y ofrece una experiencia de usuario adaptativa según el dispositivo.

  6. ¿Cuál es el control utilizado para implementar este diseño dentro de las vistas XML?
    El control utilizado es sap.f.FlexibleColumnLayout.

 

Escanear / Compartir

 

 

Sobre el autor

Publicación académica de Jose Rodrigo Baz Suarez, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.

SAP SemiSenior

Jose Rodrigo Baz Suarez

Profesión: Analista de Inventarios y Auditoria - Uruguay - Legajo: WX92M

✒️Autor de: 47 Publicaciones Académicas

🎓Egresado del módulo:

Disponibilidad Laboral: FullTime

Presentación:

Analista con experiencia en sap, contabilidad, inventarios y costos. manejo de cierres, balances, reportes y mejoras de procesos administrativos.

Certificación Académica de Jose Baz

✒️+Comunidad Académica CVOSOFT

Continúe aprendiendo sobre el tema "El diseño con el layout flexible column" de la mano de nuestros alumnos.

SAP Senior

Controles de diseño Con CSS se pueden cambiar lo estilos Los diseños sap.m están en el espacio de nombre sap.ui.layout Layout Flexible Column - tener una página y dividirla en 3 columnas Escenario maestro - detalles Escenario detalles - detalles SAP Fiori 3.0 - base para la construcción de apps Beneficios Es responsiva Adecuado para desktop como para dispositivos mobiles Layout que se pueden diseñar OneColumn TwoColumnsBeginExpanded TwoColumnsMidExpanded MidColumnFi¿ullScreen ThreeColumnsMidExpanded ThreeColumnsEndExpanded ThreeColumnsMidExpandedEndHidden ThreeColumnsBeginExpandedEndHidden EndColumnFullScreen Crear una vista con un control...

Acceder a esta publicación

Creado y Compartido por: Roman Leandro Garrido Lagos / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP SemiSenior

El diseño con el Layout Flexible Column 1. Introducción El Flexible Column Layout (FCL) es uno de los diseños más importantes dentro de SAPUI5 y SAP Fiori. Fue introducido para mejorar la usabilidad y adaptabilidad de las aplicaciones que requieren mostrar diferentes niveles de información en una misma pantalla, permitiendo que el usuario visualice varias áreas o “columnas” simultáneamente. El objetivo principal del FCL es ofrecer una navegación fluida entre objetos relacionados sin necesidad de abrir y cerrar vistas, optimizando así la experiencia de usuario especialmente en dispositivos de escritorio y tabletas. 2. Concepto y funcionamiento El Flexible Column Layout...

Acceder a esta publicación

Creado y Compartido por: Jose Rodrigo Baz Suarez / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Master

El diseño con el layout flexible column: es un control que muestra varios floorplans (son plantillas de diseño estándar que definen la estructura visual y funcional de una aplicación Fiori.) en una sola pagina. sap.ui.layout: Aqui estan los diseños de sap.m sap.ui.commons (esta obsoleto) sap.m.FlexBox crea el conteneder para el diseño. No es compatibe con Internet explorer 9 Para definir los estilos usamos el archivo CSS Para mostrar la vista de detalles hay que definir dentro de la lista el tipo de navegacion y el metodo a ejecutar. EventBus: es un mecanismo que permite la comunicación entre diferentes partes de una aplicación, especialmente entre controles, vistas...

Acceder a esta publicación

Creado y Compartido por: Claudia Bibiana Monsalve Lopez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

1. LOS CONTROLES DE DISENO Permiten organizar los controles de la UI en la vista HAY 2 NOMBRES PRINCIPALES QUE CONTIENEN CONTROLES DE DISENO sap.ui.layout sap.ui.commons > OBSOLETO sap.m.FlexBox crea un contenedor para un diseno de caja flexible. beneficio: es responsibe, en tablet muestra mas de una columna mientras que en smartphone muestra solo una podemos disenar cualquier de estos layout OneColumn TwoColumnsBeginExpanded TwoColumnsMidExpanded MidColumnFullScreen ThreeColumnsMidExpanded ThreeColumnsEndExpanded ThreeColumnsMidExpandedEndHidden ThreeColumnsBeginExpandedEndHidden EndColumnFullScreen ...

Acceder a esta publicación

Creado y Compartido por: Roberto Hernan Santucho

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


El diseño flexible column layout fue diseñado para representar un escenario maestro detalle, dos columnas o un escenario maestro detalle detalle, en una Tablet solo de muestran dos columnas a la vez, las opciones son para mostrar la primera y la segunda columna o sola la tercera columna. En un teléfono inteligente solo se muestra solo una columna a la vez Podrian haber muchas razones por el cual deseamos la comunicación entre controladores, para lo cual en SAP GUI 5 podemos usar el EventBus, el EventBus tiene dos funciones para establecer una comunicación entre los controladores una función para suscribir el evento y otra para publicarlo.

Acceder a esta publicación

Creado y Compartido por: Jose Medina / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


1. Design Controls in SAPUI5 SAPUI5 offers a variety of design controls to effectively organize and structure user interface elements. These controls are primarily found in namespaces sap.ui.layout and sap.ui.commons, with sap.ui.layout recommended due to the obsolescence of sap.ui.commons. <mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout"> <FlexBox justifyContent="SpaceAround"> <Text text="Element 1" /> <Text text="Element 2" /> <Text text="Element 3" /> </FlexBox> </mvc:View> 2. Flexible Column Layout Flexible Column Layout is essential for designing responsive and adaptive interfaces...

Acceder a esta publicación

Creado y Compartido por: Jaime Eduardo Gomez Arango / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Los controles de diseño SAPUI5 ofrece numerosos controles de diseño para organizar la interfaz de usuario (UI). Los controles de diseño se encuentran en los espacios de nombres "sap.ui.layout" y "sap.ui.commons". Se recomienda utilizar el espacio de nombres "sap.ui.layout", ya que "sap.ui.commons" está obsoleto. El control "sap.m.FlexBox" se utiliza como contenedor para un diseño de caja flexible, pero no es compatible con Internet Explorer 9. Para definir estilos en la UI, se puede utilizar archivos CSS (Cascading Style Sheet). CSS permite cambiar los estilos y definir la apariencia de los controles. Antes de agregar un diseño a la vista XML, es necesario...

Acceder a esta publicación

Creado y Compartido por: Nilson Parra Martinez / Disponibilidad Laboral: PartTime

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Junior

Actualmente, hay dos API que devuelven su propia instancia de EventBus: De forma global: sap.ui.getCore().getEventBus(); Por el componente: this.getOwnerComponent().getEventBus(); Para cada tipo, podemos definir los siguientes parámetros en el constructor: Las opciones de formato: las opciones de formato definen cómo se formatea y se muestra un valor en la interfaz de usuario. Las restricciones (opcional): las restricciones definen cómo un valor de entrada ingresado en la interfaz de usuario debe verse, el valor se validará con las restricciones.

Acceder a esta publicación

Creado y Compartido por: Henry Nelson Loja Duchimaza / Disponibilidad Laboral: FullTime

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

floorplan plano del suelo sap.ui.layout sap.ui.commons sap.m.FlexBox CSS cascading style sheet oneColumn TwoColumnsBeginExpanded TwoColumnsMidExpanded MidColumnFullScreen TherrColumnsMidExpanded TherrColumnsEndExpanded ThreeColumnsMidExpandedEndHiden ThreeColumnBeginExpandedEndHiden EndColumnFullScreen EventBus su uso intensivo deriva en un código difícil de leer. Es difícil mantener una visión de todos los editores y suscriptores de eventos. publish() Subscribe() cancelar la suscripción del eventbus cuando se usa en fiori launchpad onExit iconTabFilter getModel SetProperty función formatValue función parseValue función validateValue

Acceder a esta publicación

Creado y Compartido por: Enrique Gomez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP SemiSenior

Los Controles SAPUI5 Entre los controles disponibles via SAPUI5 existen dos espacios de nombres principales que contienen controles diseño sap.ui.layout y sap.ui.commons. Hay que usar sap.ui.layout. sap.ui.commnos está obseleto. Se usan archivo CSS que son las siglas de Cascading Style Sheet para definir estilos. los estilos y cambian la visualizacion de los controles en la UI. Antes de que podamos agregar un diseño a la vista XML, la vista debe tener un referencia a cualquier espacio de nombre XML que pretendamos utilizar. Los diseños de sap.m están en el espacio de nombres, sap.ui.layout. El control sap.m.FlexBox permite generar u contenedor de diseño de caja flexible. Este control se encuentra...

Acceder a esta publicación

Creado y Compartido por: Cristian Cash

 

 

👌Genial!, estos fueron los últimos artículos sobre más de 99.000 publicaciones académicas abiertas, libres y gratuitas compartidas con la comunidad, para acceder a ellas le dejamos el enlace a CVOPEN ACADEMY.

🔎Buscador de Publicaciones:

 

 

No sea Juan... Solo podrá llegar alto si realiza su formación con los mejores!