✒️SAP BTPFIORI / Analizando la estructura del proyecto SAP Fiori Por Claudia Monsalve Lopez

Selector Alummnos / Empresas

Analizando la estructura del proyecto SAP Fiori

Analizando la estructura del proyecto SAP Fiori

Estructura del proyecto SAP Fiori

  • Namespace: Ubicacion de la carpeta raiz del proyecto
  • Archivo index.html: se usa para iniciar la app
  • Bootstrap: es un framework de diseño web de código abierto, desarrollado inicialmente por Twitter, que permite crear interfaces de usuario (UI) modernas, responsivas y consistentes de manera rápida, usando HTML, CSS y JavaScript predefinidos.

Partes

  • App HTML5/SAPUI5
  • Enrutador de app autenticacion, tokens y rutas
  • Construccion para el despliegue del proyecto, autenticacion y rutas

Diseño de columna flexible

Flexible Column Layout: es un patrón de diseño de SAP Fiori que permite mostrar una, dos o tres columnas de manera adaptable según el tamaño de la pantalla, mejorando la experiencia de usuario en dispositivos de escritorio, tablets y móviles.

Archivo / Carpeta Propósito

index.html Entrada principal de la app; carga SAPUI5 y lanza Component.js.
Component.js Define la inicialización, rutas y modelo raíz de la app.
manifest.json 📦 Archivo de configuración: rutas, modelos, servicios, FlexibleColumnLayout, etc.
view/*.view.xml Vistas de la aplicación: Master, Detail, SubDetail según las columnas.
controller/*.controller.js Lógica de negocio y eventos para cada vista.
i18n/i18n.properties Archivos de internacionalización (textos multilenguaje).
model/models.js Configura modelos (JSON, OData, Resource).
css/style.css Estilos personalizados (opcional).

Funcion scrollLoad: se puede mostrar mas elementos desplazando hacia arriba o hacia abajo

Patron MVC: es un patrón de arquitectura de software ampliamente utilizado para organizar el código en aplicaciones, especialmente en entornos donde existe una interfaz de usuario, como SAP, aplicaciones web, móviles, etc.

Archivos que se manejan

  • App.controller.js: Controlador principal en una aplicación SAPUI5 basada en el patrón MVC.
  • BaseControoler.js: es una clase base personalizada que extiende el controlador estándar de SAPUI5 (sap.ui.core.mvc.Controller) y se utiliza para centralizar funciones comunes que serán reutilizadas por todos los controladores de la app (como App.controller.js, Main.controller.js, etc.).
  • Master.view.xml: es una vista declarativa en formato XML que representa la parte maestra de una aplicación Master-Detail. En términos funcionales, es la interfaz donde el usuario ve una lista principal de elementos (como órdenes, productos, clientes, etc.) y, al seleccionar uno, se muestra el detalle correspondiente en una segunda vista (Detail.view.xml).
  • Detail.view.xml: es la vista de detalle en una aplicación SAPUI5 que implementa el patrón Master-Detail. Se muestra cuando un usuario selecciona un ítem en Master.view.xml, y su propósito es mostrar información detallada sobre ese ítem seleccionado (como cliente, producto, orden, etc.).
  • Master.controller.js: es el archivo JavaScript que actúa como controlador de la vista Master.view.xml en una aplicación SAPUI5. En el patrón MVC, este controlador es responsable de manejar toda la lógica de negocio, eventos y navegación asociados a la vista maestra, que generalmente contiene una lista de elementos (por ejemplo, productos, clientes, órdenes).
  • Formatter.js: es un archivo JavaScript de utilidad que contiene funciones de formateo de datos. Se utiliza en vistas (como XML views) para transformar o presentar datos de forma legible o personalizada sin alterar el modelo de datos.
  • Detail.controller.js: es el controlador JavaScript asociado a la vista Detail.view.xml dentro de una aplicación SAPUI5 basada en el patrón Master-Detail. Su propósito es manejar la lógica relacionada con la presentación de los detalles de un elemento seleccionado (como un cliente, orden, producto, etc.) y controlar eventos de usuario dentro de esa vista.
  • El archivo component.js: el archivo **Component.js** es el componente raíz de una aplicación SAPUI5. Es una clase que extiende sap.ui.core.UIComponent y actúa como punto de entrada principal de la app.
  • Manifest.json o descriptor: es el archivo de descriptor de aplicaciones SAPUI5/Fiori. Define la configuración completa de la aplicación, incluyendo:
    • Componentes
    • Modelos (OData, JSON, i18n)
    • Vistas y rutas (enrutamiento)
    • Recursos (iconos, temas)
    • Propiedades del componente (sap.ui5)
    • Información técnica y semántica (sap.app)
    • Es clave para estructurar la app siguiendo el estándar SAP Fiori Launchpad.

Destro del archivo Manifest.json se tienen varias secciones

Sección Función

sap.app Metadatos de la aplicación (id, título, versión, tipo, etc.).
sap.ui5 Modelos, enrutamiento, vistas, bibliotecas, componente raíz.
sap.ui Configuración de tecnología UI usada.
sap.platform.hcp Información específica para despliegue en SAP BTP.
sap.fiori Información para Launchpad (tile, semanticObject, etc.).

Carpetas

  • Model: Contiene todo lo relacionado con los datos y lógica de formateo.
  • view: Contiene las vistas de la interfaz, generalmente en formato XML.
  • controller: Contiene los archivos JavaScript con la lógica asociada a cada vista.
  • localizacion i18n: Contiene los archivos .properties que permiten que la aplicación soporte varios idiomas sin modificar código.

Esto se adiciona al final de la URL para verlo en formato json ?$top=1&$format=json

 

Escanear / Compartir

 

 

Sobre el autor

Publicación académica de Claudia Bibiana Monsalve Lopez, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.

SAP Master

Claudia Bibiana Monsalve Lopez

Profesión: Ingeniera Informatica - Colombia - Legajo: XF24Z

✒️Autor de: 109 Publicaciones Académicas

🎓Egresado de los módulos:

Certificación Académica de Claudia Monsalve

✒️+Comunidad Académica CVOSOFT

Continúe aprendiendo sobre el tema "Analizando la estructura del proyecto SAP Fiori" de la mano de nuestros alumnos.

SAP Junior

Analizando la estructura del proyecto SAP Fiori Al analizar la estructura de un proyecto SAP Fiori, lo primero que se debe definir es el espacio de nombres (namespace). El namespace identifica la ubicación de la carpeta raíz del proyecto y se utiliza como referencia para los controladores, vistas, modelos y demás archivos de la aplicación. Funciona como una descripción única del proyecto y evita conflictos entre componentes. La aplicación se inicia desde el archivo index.html, que es el punto de entrada. Este archivo se encarga de cargar SAPUI5 e instanciar el componente principal, definido en Component.js. El archivo Component.js es el núcleo de la aplicación, ya que inicializa...

Acceder a esta publicación

Creado y Compartido por: Candela Analia Nuñez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Analizando la estructura de un proyecto Index.html se usa para iniciar la aplicación y crear una instancia Bootstrap es el programa o script de arranque del SAPUI5 Espacio de Nombres Identificador unico para cada app FlexibleColumnLayout - sap.f.flexibleColumnLayout Hasta 3 columnas Responsive Archivos dentro de la app App.controller.js - Asociado a la vista de la app BaseController.js - Es el controlador genérico Marte.view.xml - Aplicación de detalles maestros Detail.view.xml - Vista detalle Master.controller.js - Vista maestra Formatter.js - Funciones de formato Detail.controller.js - Controlador vista detalle Component.js - Archivo que contiene la configuración (La...

Acceder a esta publicación

Creado y Compartido por: Roman Leandro Garrido Lagos / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP SemiSenior

Analizando la estructura del proyecto SAP Fiori 1. Creación de un proyecto SAP Fiori (ejemplo práctico) Se puede crear un proyecto tipo SAP Fiori Freestyle con plantilla Master-Detail. Integrado con un servicio OData (ej. GWSAMPLE_BASIC en ES5). Proyecto definido como Multitarget (MTA) y usando Managed Approuter. Configuración de entidades de datos en el binding (ej. SalesOrderSet). 2. Estructura de carpetas y archivos principales Carpeta webapp/: contiene el núcleo de la aplicación. index.html: punto de entrada de la aplicación, inicializa SAPUI5. manifest.json: archivo central de configuración (modelos, rutas,...

Acceder a esta publicación

Creado y Compartido por: Jose Rodrigo Baz Suarez / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Master

Estructura del proyecto SAP Fiori Namespace: Ubicacion de la carpeta raiz del proyecto Archivo index.html: se usa para iniciar la app Bootstrap: es un framework de diseño web de código abierto, desarrollado inicialmente por Twitter, que permite crear interfaces de usuario (UI) modernas, responsivas y consistentes de manera rápida, usando HTML, CSS y JavaScript predefinidos. Partes App HTML5/SAPUI5 Enrutador de app autenticacion, tokens y rutas Construccion para el despliegue del proyecto, autenticacion y rutas Diseño de columna flexible Flexible Column Layout: es un patrón de diseño de SAP Fiori que permite mostrar una, dos o tres columnas de manera adaptable según...

Acceder a esta publicación

Creado y Compartido por: Claudia Bibiana Monsalve Lopez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

1. ANALIZANDO LA ESTRUCTURA DEL UN PROYECTO el namespace es la UBICACION DE LA CARPETA RAIZ DEL PROYECTO. index.html para iniciar la aplicacion para crear una instancia del componente (Component.js) es un index html5 SOLO QUE CON LA DIFERENCIA DE LA CARGA DEL bootstrap (sript de arranque, informa al navegador sobre los recursos importantes a cargar para que se ejecute la app. UI5, TAMBIEN INICIALIZA EL RUNTIME). Boostrap configuration attributes src se le indica donde cargaremos los recursos de las librerias UI5). data-sap-ui-theme default theme for this app data-sap-ui-libs requested control libraries SI LAS APPS ESTAN CREADAS PARA...

Acceder a esta publicación

Creado y Compartido por: Roberto Hernan Santucho

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


El boostrap es el programa o script de arranque del SAP GUI 5 este script informa al navegador sobre los recursos importantes que deben cargarse para que se ejecute la aplicación GUI5 también inicializa el tiempo de ejecución del GUI 5 tan pronto como el navegador cargue y ejecute el script es aquí en el Boostrap donde podemos indicar en el parámetro SRC donde vamos a cargar los recursos de las librerías SAP GUI5 u OPEN GUI 5. SAP GUI 5 utiliza el concepto de modelo vista controlador, un patrón de arquitectura de software para implementar interfaces de usuario, el modelo vista controlador tiene un modelo encargado de manejar recuperar y actualizar los datos que se ven en la aplicación...

Acceder a esta publicación

Creado y Compartido por: Jose Medina / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


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...

Acceder a esta publicación

Creado y Compartido por: Jaime Eduardo Gomez Arango / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Manifest.json El archivo manifest.json es un archivo de configuración en formato JSON que define aspectos clave de la aplicación, como sus vistas, modelos de datos, rutas de navegación y configuraciones específicas de Fiori. Secciones principales: sap.app - Configuración de la Aplicación: Define los metadatos de la aplicación, como su identificador, tipo, título, descripción y versión. sap.ui - Configuración de la Interfaz de Usuario: Define la raíz de la vista principal, el tipo de vista (por ejemplo, XML), la ruta de recursos y otras configuraciones específicas de SAPUI5....

Acceder a esta publicación

Creado y Compartido por: Claudio Marcelo Hermann / Disponibilidad Laboral: FullTime

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Analizando la estructura de un proyecto El texto habla sobre la estructura de un proyecto y el concepto de bootstrapping en SAPUI5. Resumidamente, se mencionan los siguientes puntos: El espacio de nombres (namespace) indica la ubicación de la carpeta raíz del proyecto. El archivo index.html inicia la aplicación y carga el componente Component.js. El bootstrapping es el proceso de carga e inicialización de SAPUI5. La propiedad "resourceroots" en el bootstrap define el espacio de nombres de los recursos de la aplicación. Si se trata de una aplicación para el Launchpad de SAP Fiori FLP, se omite el archivo index.html y se carga directamente el componente. El espacio de nombres es un identificador...

Acceder a esta publicación

Creado y Compartido por: Nilson Parra Martinez / Disponibilidad Laboral: PartTime

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Junior

Namespace es el espacio de nombres que se refiere a la ubicacion de la carpeta raiz del proyecto. El archivo index.html se usa para iniciar la aplicacion y crear una instancia del componete (Component.js) Patron MVC es el modelo vista controlador. SAPUI5 tiene un gran soporte para el concepto MVC, Es un enfoque para organizar partes de una aplicacion en unidades independientes, separando las logica de negocio de la interfaz de usuario. Los controladores, con su logica de negocio, hacen de puente entre los modelos y vistas. Archivo descriptor Es recomendable mantener las configuraciones del modelo de datos en el archivo descriptor de la aplicacion. Esto asegura que todas las configuraciones del modelo de datos sean accesibles desde un archivo...

Acceder a esta publicación

Creado y Compartido por: Henry Nelson Loja Duchimaza / Disponibilidad Laboral: FullTime

 

 

👌Genial!, estos fueron los últimos artículos sobre más de 99.000 publicaciones académicas abiertas, libres y gratuitas compartidas con la comunidad, para acceder a ellas le dejamos el enlace a CVOPEN ACADEMY.

🔎Buscador de Publicaciones:

 

 

No sea Juan... Solo podrá llegar alto si realiza su formación con los mejores!