✒️Analizando la estructura del proyecto SAP Fiori
Analizando la estructura del proyecto SAP Fiori
1 | Analyzing the Structure of a Project
The Concept of Bootstrapping
Before we can do anything with SAPUI5, we need to load and initialize it. This process is called bootstrapping.
Index.html File
If the applications are created for the SAP Fiori Launchpad (FLP), the index.html file is omitted, and the Launchpad directly loads the component. SAPUI5 applications that start from the index.html are called standalone or independent.
Project Structure Overview
For each application, we need to define a namespace, which acts as a unique identifier for the application.
- Node Modules Folder: This folder will contain the libraries we install, with each containing the necessary files for the project.
- AppFiori Folder: This is the root folder of our application, named after the project, containing configuration files and other non-coding files.
Example: SAP Fiori Master-Detail Application
To better understand project structure, let's analyze a multitarget SAP Fiori master-detail application using SAPUI5 freestyle with a managed approuter for viewing sales orders.
- FlexibleColumnLayout Control: This control initially shows only the Master view with a list of objects. When an item is selected, the Detail view is shown on the right, displaying the item's details.
- Master View: Displays the number of items and includes a search field. The list updates automatically and supports sorting, filtering, and grouping.
- Detail Page: Contains a header with more details about the selected item, a customizable toolbar, and a table of line items associated with the selected object. Both the master list and line item table are set to grow dynamically for performance reasons.
2 | The Flexible Column Layout
FlexibleColumnLayout Design
The FlexibleColumnLayout is a layout control that displays multiple views on a single page, allowing faster and smoother navigation compared to traditional page-by-page navigation. It supports up to three columns, allowing users to expand, switch between layouts, and view columns in full screen. It is responsive, making it suitable for both desktop and mobile devices.
- Column Names: Columns are referred to as beginColumnPages, midColumnPages, and endColumnPages, supporting scenarios where users can navigate through master-detail (e.g., SalesOrder for master and detail for SalesOrderItem).
Benefits of MVC Pattern in SAPUI5
SAPUI5 strongly supports the MVC (Model-View-Controller) pattern, which organizes application parts into independent units, separating business logic from the user interface. Controllers bridge the models and views, enhancing code readability, reusability, and development speed.
3 | Files in the Application
Controller Files
- App.controller.js: Defines the application's behavior, containing JavaScript code for debugging.
- BaseController.js: A generic controller from which other controllers, like App.controller.js, inherit basic functions.
View and Controller Association
- Master.view.xml: Describes the routing within the application, with a master list on the left and a detail page on the right.
- Detail.view.xml: Similar to the Master view, showing details of the preselected master list item.
- Master.controller.js: Associated with the master view, loaded immediately after the master view.
- Detail.controller.js: Associated with the detail view, referencing formatter.js for formatting functions.
Component.js File
Contains the application configuration, including metadata referencing the manifest.json file and an init function initializing the router and models. Models set directly in component.js are available in views.
Manifest.json (Descriptor)
A JSON configuration object containing global settings for the application, such as the app's name, version, UI5 libraries, data models, and routing information. It is recommended to keep data model configurations in the descriptor for centralized access.
- SAP.APP Section: Contains the namespace, type, resource path, title, description, and version of the application.
- SAP.UI Section: Defines the technology (SAPUI5), icons, and compatible devices (desktop, tablet, phone).
- SAP.UI5 Section: Specifies the root view, dependencies, and models to be instantiated by SAPUI5.
MVC Folder Structure
- view Folder: Contains all views and fragments.
- controller Folder: Contains controllers with logic for each view.
- model Folder: Contains files for creating models and related logic.
4 | Adding a Data Source to an Existing Project
To consume an OData service in the project, add a data source either during project creation or afterward.
- Connecting to GWSAMPLE_BASIC Service: Access the SalesOrderSet entity from the SAP ES5 server. The service is exposed to the internet, and data can be viewed in JSON format by appending "?$top=1&$format=json" to the URL.
Steps to Add Data Source
- In the BAS workspace, navigate to the app, then go to View -> Find Command.
- Type "Consume SAP Service" in the command line to add the data source.
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
