Flexible Column Layout

El flexible column layout es adecuado cuando los usuarios recorren una jerarquía y deben mantener a la vista el nivel superior: una lista de solicitudes de pedido, una solicitud y, después, una de sus posiciones. Los usuarios eligen en la lista de la izquierda y leen el detalle a su lado.

Criterios de decisión:

• Los usuarios cambian a menudo entre elementos de la misma lista, en pantallas anchas: el flexible column layout ahorra navegación.
• Los usuarios pasan mucho tiempo en un único objeto complejo con tablas anchas: las páginas a pantalla completa dan espacio al objeto.
• La mayoría de los usuarios trabaja en teléfonos: ahí solo cabe una columna, así que el beneficio es pequeño.

Ejemplo: un comprador de Alder Manufacturing mantiene la lista de solicitudes abiertas en la primera columna, revisa la solicitud de Cedar Office Supply en la segunda y abre una posición en la tercera, todo ello sin perder la lista. El flexible column layout es la elección correcta cuando el contexto entre niveles importa más que el ancho de cada página por separado.

El diseño tiene tres columnas, llamadas Begin, Mid y End, que contienen la lista, el detalle y el subdetalle. Un valor de layout decide qué columnas son visibles y qué ancho tiene cada una. El flujo recomendado por SAP, que codifica la clase auxiliar semántica, es el siguiente:

1. La app arranca con una columna, normalmente la lista.
2. Elegir un elemento abre su detalle en la columna Mid, con los botones Full Screen y Close.
3. Elegir un elemento en el detalle abre el tercer nivel en la columna End.
4. Un cuarto nivel o más profundo sustituye a la columna End a pantalla completa.

Los usuarios pueden arrastrar los separadores de columna para redimensionar las columnas o cambiar de diseño, y el control recuerda sus anchos. El control también se adapta por sí solo al dispositivo: tres columnas en un escritorio, como máximo dos en una tableta, donde a la primera columna se accede arrastrando, y una en un teléfono. Por tanto, el flexible column layout es un contenedor adaptable para niveles de navegación, no un floorplan con contenido propio.

SAP Fiori tools ofrece un interruptor en el page map; la configuración subyacente difiere según la versión de OData:

El list report se sitúa en la primera columna y las object pages ocupan las siguientes. En OData V2, una página puede sustituir el valor por defecto por su propio diseño, por ejemplo moviendo la object page principal a la primera columna y sus posiciones al lado. La configuración pertenece a la app, así que se comporta igual en SAP S/4HANA y en SAP BTP. SAP Fiori elements guarda los anchos de columna por app y tipo de dispositivo. Se aplican dos límites: la analytical list page solo admite el diseño de dos columnas con la primera columna expandida, y la overview page no usa el flexible column layout. Habilitar el flexible column layout cambia la navegación, no las anotaciones.

1. Tablas anchas en columnas estrechas. Una tabla diseñada para el ancho completo se vuelve ilegible en la columna Mid; reduzca columnas o use diseños pop-in.
2. Prometer tres columnas en todas partes. Las tabletas muestran dos y los teléfonos una, así que los diseños deben funcionar en todos los anchos.
3. Ubicación inesperada de las acciones. En apps sin draft con creación, actualización y borrado, solo la última columna muestra Edit y Delete.
4. Objetos no relacionados uno junto a otro. El diseño expresa una jerarquía padre-hijo; dos apps sin relación no tienen cabida en él.

Cuando una app de SAP Fiori elements ignora la configuración y sigue abriéndose a pantalla completa, compruebe por este orden: la vista raíz y la clase de router (OData V4), la dependencia de la biblioteca sap.f, la controlAggregation de cada destino y cualquier diseño por defecto a nivel de página. La mayoría de los problemas del flexible column layout son problemas de configuración del enrutamiento, no errores de renderizado.