✒️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 formatter

sap.ui.define([], function() {

return {

formatDate: function(date) {

var oDateFormat = sap.ui.core.format.DateFormat.getDateInstance({pattern: "dd/MM/yyyy"});

return oDateFormat.format(date);

}

};

});