✒️SAP BTPFIORI / Los controles de una aplicación SAPUI5 Por Jaime Gomez Arango
Los controles de una aplicación SAPUI5
1 | The Most Used Controls of SAPUI5
The Controls Explorer
You can explore the examples of UI controls at sapui5.hana.ondemand.com/#/api/.
A SAPUI5 control consists of:
- Definition: Specifies properties, events, methods, and sometimes associations and aggregations.
- Rendering: Responsible for displaying the HTML code of the control.
- Behavior: The JavaScript code that determines how the control interacts with the user when events are triggered.
- Styling: Defines the visual appearance of the control.
Web Components in SAPUI5
SAPUI5 web components have minimal space, making it easy to add them to our application. They follow the SAP Fiori design language and enterprise standards. They are compatible with any technology of your choice.
Two commonly used SAPUI5 libraries are:
- sap.ui.commons: Contains typical web application controls like buttons, text fields, and lists, suitable for desktop applications.
- sap.m: Provides controls optimized for various devices, supporting touch gestures and interactions, suitable for applications across different devices.
The method to create a SAPUI5 control depends on the view type (XML, JavaScript, JSON, HTML5) or whether it's created in the view controller, in which case it's always created using JavaScript.
Features of SAPUI5 Controls
- Properties: Every SAPUI5 control has properties defining its appearance on the interface. Consult the documentation to know about properties of different controls.
- Events: Define how the control behaves. Events are defined similarly to properties but with event handling logic.
- Aggregations: Complex properties that can hold collections of values or other SAPUI5 controls.
When developing a new SAPUI5 application, consider which controls are needed and how to structure them.
Benefits of Using SAPUI5 Controls
In addition to technical capabilities, SAPUI5 controls evolve with Fiori design, offering the latest behaviors, patterns, and Fiori themes. Themes can be customized using the UI Theme Designer.
Responsive Design in SAPUI5
Many SAPUI5 components can be responsive by default. Use the Device API (sap.ui.Device) to handle adaptability programmatically based on device characteristics like OS, browser, screen size, and touch capability.
Density Settings
SAPUI5 supports different content densities for controls to adapt to different devices:
- Cozy Density: Larger design for touch devices requiring more space for selection.
- Compact Density: Smaller design suitable for mouse-driven devices.
Controls in SAPUI5 Architecture
SAPUI5 controls are integral parts of its architecture. There are two main types:
- Mobile (sap.m): Optimized for mobile devices but suitable for tablets and desktops.
- Desktop (sap.ui.commons): Primarily for desktop computers.
2 | Input Controls in SAPUI5
Input controls capture and store user data. Common types include:
- Input Field: For entering short text or numeric values, supporting auto-suggestion and value help.
- Combo Box: Allows selecting from a predefined list with filtering capabilities.
- Date Picker: Enables selecting localized dates with touch, mouse, or keyboard input.
- Radio Button: Provides mutually exclusive options for selection.
- Check Box: Allows binary selection (true/false).
3 | Display Controls in SAPUI5
Display controls indicate progress or display visual elements like images and text:
- Label: Used as titles for individual controls or control groups.
- Image: Integrates images into applications, useful for visual representation or branding.
These controls help create interactive and visually appealing Fiori applications suitable for various devices and enterprise needs.
4 | Forms, Containers, and Layout
In SAP Fiori, forms serve as containers for various user interface elements like labels, input fields, checkboxes, and sliders, arranging them in a specific layout. There are two main controls used to build forms in SAPUI5:
- Form: sap.ui.layout.form.Form (API)
- Simple Form: sap.ui.layout.form.SimpleForm (API)
A form helps design lists of properties and input fields within containers. Each form container consists of form elements, each comprising a label and an input field. The simple form control provides an easier way to achieve similar results as the form control but with simpler implementation.
Icon Tab Bar Controls
The Icon Tab Bar consists of tabs linking to different content areas or views. It can be used for navigation within an object or as a filter. Users switch between tabs by clicking on the respective tab.
HBox and VBox Controls
Two common UI controls in SAPUI5 development are HBox (Horizontal Box) and VBox (Vertical Box). These controls help align UI elements on web pages without custom CSS, ensuring responsiveness.
5 | Tables and Lists
Smart Table Control
The Smart Table is a versatile UI5 element resembling Excel sheets, displaying structured data from a model. It supports features like sorting, grouping, and exporting data.
List Control
Lists in SAP Fiori are used for displaying basic data, often in master-detail scenarios or pop-up dialogs. They are simpler than tables and suitable for sorting, grouping, or filtering straightforward data sets.
6 | Action Controls
Button Control
Buttons in Fiori allow users to perform actions such as saving or submitting forms. There are different types: standard, toggle, segmented, and menu buttons.
Link Control
A link (or hyperlink) is an interactive text element that directs users to other resources or actions.
Escanear / Compartir
Sobre el autor
Publicación académica de Jaime Eduardo Gomez Arango, en su ámbito de estudios para la Carrera Consultor SAP BTP 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
🎓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
