✒️SAP Fiori El diseño con el layout flexible column
SAP Fiori El diseño con el layout flexible column
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 that allow efficient navigation between multiple views on a single page.
Options for Flexible Column Layout designs:
- OneColumn: A single column layout that adapts to screen width.
- TwoColumnsBeginExpanded: Two columns with the first one expanded.
- TwoColumnsMidExpanded: Two columns with the second one expanded.
- ThreeColumnsMidExpanded: Three columns with the second one expanded.
3. Designing a View using Flexible Column Layout
To implement a view with Flexible Column Layout, specify which content goes into each column using beginColumnPages and midColumnPages.
<f:FlexibleColumnLayout id="flexibleColumnLayout"><f:beginColumnPages><!-- Content for the first column --></f:beginColumnPages><f:midColumnPages><!-- Content for the second column --></f:midColumnPages></f:FlexibleColumnLayout>
4. Logic to Display Detail View
Communication between views in SAPUI5 is often done through the EventBus, allowing subscription and publication of specific events to dynamically update the user interface.
Using EventBus to show details:
// In the main view (MasterProductos)onItemClick: function(event) {var productID = event.getParameter("productID");sap.ui.getCore().getEventBus().publish("DetailChannel", "ShowDetail", { productId: productID });}// In the detail view controller (ProductoDetails)sap.ui.getCore().getEventBus().subscribe("DetailChannel", "ShowDetail", this.showDetail, this);
5. Adding Tabs Control
The sap.m.IconTabBar control facilitates navigation and content organization through tabs containing relevant information.
Example usage of sap.m.IconTabBar:
<IconTabBar><items><IconTabFilter text="General Information"><!-- Content of the tab --></IconTabFilter><IconTabFilter text="Measurements"><!-- Content of the tab --></IconTabFilter></items></IconTabBar>
6. Dynamic Control Display
In SAPUI5, controls can be dynamically shown or hidden based on user interaction or application conditions.
<Button text="Show/hide tab"visible="{path: '/showMeasureTab', formatter: 'sap.ui.model.format.BooleanToVisibility'}"press="toggleMeasureTabVisibility" />
7. Field Formatting
Data formatting in SAPUI5 ensures that information is presented consistently and comprehensibly to the user, using specific formatters for each data type.
Example of date formatting:
// Definition of a date formattersap.ui.define([], function() {return {formatDate: function(date) {var oDateFormat = sap.ui.core.format.DateFormat.getDateInstance({pattern: "dd/MM/yyyy"});return oDateFormat.format(date);}};});
Sobre el autor
Publicación académica de Jaime Eduardo Gomez Arango, en su ámbito de estudios para la Carrera Consultor en SAP Fiori.
SAP Expert
Jaime Eduardo Gomez Arango
Profesión: Ingeniero de Sistemas y Computación - España - Legajo: SW34C
✒️Autor de: 149 Publicaciones Académicas
🎓Cursando Actualmente: Consultor en SAP Fiori
🎓Egresado de los módulos:
Disponibilidad Laboral: FullTime
Presentación:
Ingeniero de sistemas y computación con 8 años de experiencia el desarrollo frontend & backend (react/node) y en cloud (aws), actualmente desarrollando habilidades en sap btp, ui5, abap y fiori.
Certificación Académica de Jaime Gomez
