ESTÁNDARES DE DESARROLLO SAP CLOUD PLATFORM

Guía completa con respecto a nomenclatura y mejores prácticas

en aplicaciones SAP FIORI
 Estándares de Desarrollo SCP

Versión: 0.1 Fecha: Octubre 2018

HISTORIAL DE LAS REVISIONES

Responsable de Revisión
Fecha Versión Descripción Autor
y/o Aprobación
15/10/2018 1.0 Versión Original (EV) (ED)
(JG)

Autores:
(EV): Erick Vidal

Revisores
(ED): Evelyn De La Cruz
(JG) : Juan Jose Gomez

-----------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT
 Estándares de Desarrollo SCP

Versión: 0.1 Fecha: Octubre 2018

ÍNDICE

1. INTRODUCCIÓN:......................................................................................................................... 1
2. ALCANCES:.................................................................................................................................. 1
3. PROPÓSITOS:.............................................................................................................................. 1
4. AUDIENCIA:................................................................................................................................ 1
5. ARQUITECTURA E INTEGRACIÓN.................................................................................................1
6. PATRÓN MVC DE LAS APLICACIONES SAP FIORI............................................................................2
7. SERVIDOR DE APLICACIONES....................................................................................................... 3
7.1. SAP FIORI FRONT-END......................................................................................................................3
7.1.1. SAP Fiori Cloud....................................................................................................................3
8. HERRAMIENTAS DE DESARROLLO................................................................................................4
8.1. SAP WEB IDE FULL STACK.................................................................................................................4
8.2. SAP CLOUD PLATFORM SDK PARA ANDROID 1.0.................................................................................5
8.2.1. Componentes SDK...............................................................................................................5
8.3. ANDROID STUDIO 3.2.....................................................................................................................6
9. EXTENSIONES PARA SAP WEB IDE................................................................................................ 7
9.1. FACT SHEET EDITOR..........................................................................................................................7
9.1.1. Pre-requisitos:.....................................................................................................................8
9.1.2. Procedimiento:....................................................................................................................8
9.2. ODATA MODEL EDITOR......................................................................................................................8
9.2.1. Prerrequisitos......................................................................................................................8
9.2.2. Procedimiento.....................................................................................................................8
9.3. SAP BUILD..................................................................................................................................9
9.4. VIZPACKER.......................................................................................................................................9
9.4.1. Prerrequisitos......................................................................................................................9
9.4.2. Procedimiento.....................................................................................................................9
9.5. SAP WEB IDE HYBRID APP TOOLKIT ADD-ON.....................................................................................9
9.6. ENTERPRISE PORTAL........................................................................................................................10
9.7. IOT UI PLUGINS REPOSITORY............................................................................................................10
10. GESTIÓN DE ENTORNO, CONFIGURACIÓN Y CONSTRUCCIÓN.................................................11
10.1. SAPUI ABAP REPOSITORY...............................................................................................................11
11. GESTIÓN DE ENTORNO, CONFIGURACIÓN Y CONSTRUCCIÓN.................................................11
11.1. UI5 INSPECTOR..............................................................................................................................11
12. FRONT-END COMPONENTS:................................................................................................... 12
12.1. ODATA SERVICE DEFINITION & ITS REGISTRATION..................................................................................12

-----------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT
 Estándares de Desarrollo SCP

Versión: 0.1 Fecha: Octubre 2018

12.1.1. OData Service....................................................................................................................12

12.1.2. SAP Gateway Service Builder.............................................................................................15
12.1.3. Entity Types.......................................................................................................................16
12.1.4. Propiedad..........................................................................................................................16
12.1.5. Nombre del Servicio Interno..............................................................................................16
12.1.6. Nombre del Servicio Externo.............................................................................................17
13. SAP UI5 APPLICATION............................................................................................................ 17
13.1. NOMBRE APLICACIÓN......................................................................................................................17
13.2. NOMBRE DEL PROYECTO DE LA APLICACIÓN SAP UI5...........................................................................17
13.3. NOMBRE DEL NAMESPACE DE LA APLICACIÓN...................................................................................17
14. SAP FIORI LAUNCHPAD.......................................................................................................... 17
14.1. OBJETO SEMÁNTICO........................................................................................................................17
14.2. LAUNCHPAD APPLICATION.................................................................................................................18
14.3. BUSINESS CATALOG.........................................................................................................................18
14.4. BUSINESS GROUP............................................................................................................................18
15. OBJETOS DESARROLLO SAPUI5..............................................................................................18
15.1. JAVASCRIPT....................................................................................................................................18
15.1.1. Funciones:.........................................................................................................................19
15.1.2. Comentarios......................................................................................................................19
15.1.3. Clases................................................................................................................................19
15.1.4. Variables............................................................................................................................20
16. SAPUI5.................................................................................................................................. 20
16.1. API............................................................................................................................................20
16.1.1. Comportamiento...............................................................................................................20
16.1.2. Renderizador.....................................................................................................................21
16.1.3. Manejo de Mensajería......................................................................................................21
16.1.4. Temas/CSS – Directrices generales...................................................................................23
17. ANEXOS................................................................................................................................ 23
17.1. ANEXO 01: TABLA MÓDULOS SAP....................................................................................................23

-----------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT
 1. INTRODUCCIÓN:
El equipo de Software Factory (ASF), con el objetivo de transferir las experiencias
sucedidas dentro de la implementación de aplicaciones web, ha creído necesario
documentar los estándares de desarrollo de dichos componentes.

2. ALCANCES:
En el presente documento se describen los estándares de los componentes que forman
parte de la arquitectura de integración para la implementación de aplicaciones web, las
cuales dan soporte a las actividades de los procesos de negocio de Ferreyros.

3. PROPÓSITOS:
El objetivo del presente documento es el de poder especificar los estándares,
lineamientos, restricciones y metodologías para la implementación de aplicaciones web,
dentro del contexto de la especificación SAP Fiori.

4. AUDIENCIA:
Los estándares del presente documento están dirigidos a:
 Arquitectos de software que requieran consultar los estándares para conocer cómo
desarrollar soluciones web contemplando la arquitectura de aplicación e integración
establecida.

 Desarrolladores de soluciones de tecnología de información que requieran

implementar nuevas aplicaciones web.

 Directores y Líderes de proyectos que requieran conocer los estándares de desarrollo

de aplicaciones web SAP Fiori.
5. ARQUITECTURA E INTEGRACIÓN
A continuación, hablaremos de la arquitectura de alto nivel de las aplicaciones SAP Fiori.

Arquitectura de Aplicaciones web para Internet

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 1
 Dónde:
 El Cliente/Navegador es donde se consumen las aplicaciones web, siendo SAP Fiori
Launchpad el punto de entrada para todos los dispositivos móviles, Desktop o Tablet.
 Abap Front-end Server, contiene la capa de interfaz de usuario y los componentes de
infraestructura así como SAP Gateway con habilitación oData
 Abap Back-end Server, contiene toda la lógica de negocios correspondientes al
sistema ERP.
6. PATRÓN MVC DE LAS APLICACIONES SAP FIORI
El patrón que se debe emplear en la construcción de nuevas aplicaciones web con SAP
Fiori debe estar basado en el patrón Modelo Vista Controlador (MVC) que es un patrón de
arquitectura de software que separa los datos de una aplicación, la interfaz de usuario, y la
lógica de negocio en tres componentes distintos. Esta separación permite que los
componentes individuales se extiendan, reemplacen o reutilicen más fácilmente. El patrón
de llamada y retorno MVC, se ve frecuentemente en aplicaciones web, donde el
navegador muestra la vista como un elemento gráfico y el controlador es en su mayoría
código JavaScript y procesa las acciones del usuario y las envía al modelo si es necesario.
 Modelo: Esta es la representación específica de la información con la cual el sistema
opera. En resumen, el modelo se limita a lo relativo de la vista y su controlador
facilitando las presentaciones visuales complejas. El sistema también puede operar
con más datos no relativos a la presentación, haciendo uso integrado de otras lógicas
de negocio y de datos afines con el sistema modelado.
 Vista: Este presenta el modelo en un formato adecuado para interactuar, usualmente
la interfaz de usuario.
 Controlador: Este responde a eventos, usualmente acciones del usuario, e invoca
peticiones al modelo y, probablemente, a la vista.

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 2
 Arquitectura Cliente Servidor de SAPUI5.

7. SERVIDOR DE APLICACIONES
Para el desarrollo de las nuevas aplicaciones web, se utilizará las siguientes herramientas:
Servidor de Aplicaciones:
Nomb Compone Versió
Descripción
re nte n
SAP Servidor de aplicaciones que se utilizara para realizar el despliegue 4.0
SAP FIORI
FIORI de las aplicaciones web FPS02

7.1. SAP Fiori Front-end

SAP Fiori proporciona una experiencia de usuario personalizada basada en roles.

(UX) para compromisos empresariales en líneas de negocios (LOB) y ofrece un uso óptimo en
múltiples dispositivos para las mejores interacciones de negocios.
7.1.1. SAP Fiori Cloud
SAP Fiori, edición cloud es una de las principales novedades de SAP Fiori. Ofrece a los clientes un
enfoque simple para revolucionar UX mediante el uso de aplicaciones y servicios de SAP Fiori en la
nube, que se ejecuta en la plataforma de la nube de SAP. Los clientes pueden conectarse
fácilmente en línea al entorno SAP y utilizar sus aplicaciones

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 3
 8. HERRAMIENTAS DE DESARROLLO
Entornos Integrados de Desarrollo (IDE) y Extensiones:
Vers
Nombre Descripción Componente
ión
SAP Web IDE Es el entorno de desarrollo para crear y extender SAP Web IDE 1.53
Full Stack aplicaciones Fiori Full Stack .86
SCP SDK for Android proporciona herramientas de desarrollo para SCP SDK for
1.0
Android crear aplicaciones móviles nativas de Android Android
Android Studio es el entorno de desarrollo integrado (IDE) oficial Android Studio
3.2
Studio 3.2 para el desarrollo de aplicaciones para Android 3.2

8.1. SAP Web IDE Full Stack

SAP Web IDE Full Stack es un entorno para crear y extender las aplicaciones de SAP Fiori.
SAP Web IDE es una herramienta basada en navegador que permite a los desarrolladores crear
nuevas aplicaciones FIORI. Está diseñado para acortar el ciclo de vida del desarrollo de
aplicaciones de extremo a extremo, desde la creación de prototipos hasta el desarrollo de la
vista previa instantánea para implementar aplicaciones SAP Fiori.
SAP Web IDE acelera la creación de aplicaciones modernas para dispositivos móviles y de
escritorio. Es una herramienta flexible con editores de código robustos para desarrolladores
que desean desarrollar aplicaciones de manera rápida y eficiente. Además, esta herramienta
también faculta a los no programadores a crear aplicaciones utilizando asistentes y plantillas.

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 4
 8.2. SAP Cloud Platform SDK para Android 1.0
SAP Cloud Platform SDK para Android proporciona herramientas de desarrollo para crear
aplicaciones móviles nativas de Android que utilizan los servicios móviles de SAP Cloud
Platform. El SDK se basa en el lenguaje de programación Java y se basa en el SDK de Android de
Google.
El SAP Cloud Platform SDK para Android proporciona:
 Seguridad integrada de extremo a extremo.
 Acceso a los datos y procesos de negocio de SAP S4 HANA, así como a fuentes de datos de
terceros.
 Acceso a las capacidades y servicios de SAP Cloud Platform.
 Soporte para aplicaciones offline.
 Soporte de informes de uso y registro de nivel empresarial.
8.2.1. Componentes SDK
El SAP Cloud Platform SDK para Android contiene tres componentes de software clave; uno para
Fiori, OData y Foundation. Estos componentes están desacoplados entre sí, lo que permite a los
desarrolladores utilizar solo los componentes necesarios para el desarrollo de sus aplicaciones.

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 5
 8.3. Android Studio 3.2
Android Studio es el entorno de desarrollo integrado (IDE) oficial para el desarrollo de
aplicaciones para Android y se basa en IntelliJ IDEA.
Además del potente editor de códigos y las herramientas para desarrolladores de IntelliJ,
Android Studio ofrece aún más funciones que aumentan tu productividad durante la
compilación de apps para Android, como las siguientes:
 Un sistema de compilación basado en Gradle flexible.
 Un emulador rápido con varias funciones.
 Un entorno unificado en el que puedes realizar desarrollos para todos los dispositivos
Android.
 Instant Run para aplicar cambios mientras tu app se ejecuta sin la necesidad de compilar
un nuevo APK.
 Integración de plantillas de código y GitHub para ayudarte a compilar funciones comunes
de las apps e importar ejemplos de código
 Gran cantidad de herramientas y frameworks de prueba.

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 6
  Herramientas Lint para detectar problemas de rendimiento, usabilidad, compatibilidad de
versión, etc.
 Compatibilidad con C++ y NDK.
 Soporte incorporado para Google Cloud Platform, lo que facilita la integración de Google
Cloud Messaging y App Engine.

9. EXTENSIONES PARA SAP WEB IDE

Extensiones de SAP Web IDE
Compone Vers
Nombre Descripción
nte ión
Fact Sheet Permite crear Fact Sheets desde cero y editar con un 1.4.
FSE
Editor enfoque drag-and-drop 14
OData Model
Herramienta para identificar o cambiar modelos OData OME 1.7
Editor
SAP Build Herramienta para generar prototipos SAP Build 1.4
Herramienta para desarrollar sus propias extensiones de
Vizpacker Vizpacker 1.2
visualización para SAP Lumira
Hybrid App Herramienta para crear aplicaciones móviles híbridas usando
HAT 1.28
Toolkit el Apache Córdova y SAP Mobile Platform
Enterprise Herramienta para deployar cualquier aplicación SAPUI5 de
EP 1.16
Portal SAP Web IDE en SAP Enterprise Portal
IoT UI plugins 1.2.
Herramienta para crear aplicaciones IoT en SAP Web IDE IoTUI
Repository 5

9.1. Fact Sheet Editor

Puede crear Fact Sheet desde cero usando un nuevo Fact Sheet Application Project

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 7
 9.1.1. Pre-requisitos:
A. Antes de crear el proyecto New Fact Sheet Application, se debe configurar lo siguiente:

 Indicar el servidor Gateway (Sistema destino deseado).

 Destino al BSP del sistema deseado. Agregue la propiedad adicional, WebIDEUsage
bsp_execute_abap con ruta / sap / bc / bsp.
B. Activar el File Sheet Editor.

9.1.2. Procedimiento:
 Elija File -> New -> Project from Template.
 En la pantalla Template Selection elija SAP Fiori Application de la lista desplegable, elija New
fact Sheet application, y dar clic en siguiente.
 En la pantalla de información básica, ingrese el nombre del proyecto y dar clic en siguiente.
 En la pantalla Data Connection elija Service Catalog, seleccione el sistema que contiene el
oData Services. Selecciona un servicio oData para crear la nueva Fact Sheet, dar OK y
siguiente.
 En la pantalla Template customization ingrese un valor en el siguiente campo y elija
siguiente.
 Elija terminar.

9.2. OData Model Editor

OData Model Editor es un complemento o característica que se utiliza para desarrollar modelos
OData en el marco de SAP Web IDE.

OData Model Editor aprovecha la experiencia de desarrollo integrado basada en navegador

que proporciona SAP Web IDE para definir y modificar modelos de OData. OData Model Editor
está construido con asistencia de código, autocompletado, validación, visor gráfico, etc. OData
Model Editor también admite la exportación de archivos.
9.2.1. Prerrequisitos.
Si está utilizando la versión clásica de SAP Web IDE, habilite el complemento.
9.2.2. Procedimiento.
 Inicie sesión en la aplicación SAP Web IDE.
 Seleccione una carpeta existente o cree una nueva carpeta.
 En el menú contextual de la carpeta, elija New -> oData Model File.
 Seleccione una de las siguientes opciones para crear el modelo:
o Create OData model.
o Discover service from service catalog.
o Paste the Service URL.

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 8
 Alternativamente, también puede importar un archivo EDMX o XML y modificarlo en el Editor del
Modelo OData. Para importar un modelo, elija Import -> From File System desde el IDE web de SAP

9.3. SAP BUILD

SAP Build es un conjunto de herramientas basadas en servicios que permiten aprender,

generar prototipos, sumar el feedback de los usuarios e inspirarse en el trabajo ya recorrido
por otros desarrolladores. En definitiva, humaniza el proceso de desarrollo de aplicaciones.
En el aspecto de aprendizaje, se apoya en Design-Led Development, una técnica de desarrollo
que consiste en enfocarse en los usuarios para los cuales se creará la aplicación.
Se obtiene información de los usuarios finales sobre lo que estos dicen, piensan, sienten y
hacen. El proceso es complejo, pero con el tiempo y la experiencia se vuelve intuitivo.
Esta herramienta, se encuentra disponible en www.build.me y viene solucionar la brecha entre
los pedidos de los usuarios finales y lo que los desarrolladores efectivamente entregan.

9.4. Vizpacker

9.4.1. Prerrequisitos
En Lumira Discovery 2.0, necesita migrar las API de la librería sap.ui.commons al framework sap.m
para acceder a las extensiones SDK de visualización.
9.4.2. Procedimiento
 Abrir SAP Web IDE
 Seleccione Tools -> Preferences.
 Seleccione Plugins.
 Desde la lista Plugin Repository, elija SAP Plugins.
 Encuentra el comlemento VizPacker y habilítelo.
 Elija Save.
 Refresca el navegador.

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 9
 9.5. SAP Web IDE Hybrid App Toolkit Add-on

SAP Web IDE Hybrid App Toolkit Add-on es un complemento opcional para SAP Web IDE que
permite a los desarrolladores crear, probar y crear aplicaciones móviles híbridas. Comprende
tres componentes que los desarrolladores pueden usar para crear e implementar
aplicaciones híbridas basadas en Apache Cordova.
9.6. Enterprise Portal

Puede implementar aplicaciones SAPUI5 desde SAP Web IDE a SAP Enterprise Portal, ya sea
que estén desarrolladas en SAP Web IDE o en otro IDE.

Crear una aplicación SAPUI5 con el IDE web de SAP y desplegarla en el portal es rápido, sencillo
y seguro. Puede usar las plantillas y los asistentes ofrecidos por SAP Web IDE para generar,
probar y previsualizar, prototipos completos, sin mucho trabajo de codificación. Luego, puede
implementar rápida y fácilmente su aplicación SAPUI5 en el portal para ejecutarla en el
launchpad de SAP Fiori y en otros marcos.

9.7. IoT UI plugins Repository

Una aplicación de Internet de las cosas (IoT) genérica para todos los casos de uso o para un
dominio específico es difícil de definir porque los requisitos pueden variar según los casos de
uso. Sin embargo, hay un conjunto de componentes de interfaz de usuario y funcionalidad que
se requiere en la mayoría de las aplicaciones de IoT. Por ejemplo, los mapas son útiles para
visualizar el estado general. Los gráficos son útiles para analizar los datos y determinar dónde
se debe tomar acción. Para ver sus activos, controlar su estado y asignar tickets de servicio a
los técnicos, puede crear una nueva aplicación de IoT.

Puede crear aplicaciones IoT avanzadas o básicas desde cero en SAP Web IDE, un entorno de
desarrollo que está completamente basado en la nube.

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 10
 10. GESTIÓN DE ENTORNO, CONFIGURACIÓN Y CONSTRUCCIÓN
Gestión de Entorno, Configuración y Construcción:
Vers
Nombre Descripción Componente
ión
SAPUI ABAP Herramienta que sirve para realizar el deployment al SAP UI ABAP 1.53
Repository servidor de SAP Fiori Repository .86

10.1. SAPUI ABAP Repository

The SAPUI5 ABAP repository se utiliza para almacenar aplicaciones, componentes y bibliotecas
de SAPUI5.

SAP lo utiliza para entregar varios tipos de aplicaciones SAPUI5, por ejemplo, aplicaciones SAP
Fiori o High Performance Analytics (HPA).

Los clientes también pueden usar el repositorio ABAP de SAPUI5 para almacenar sus propias
aplicaciones y proyectos de extensión SAPUI5.

El SAPUI5 ABAP repository forma parte de la infraestructura de back-end ABAP de SAPUI5 y es

el término general para el repositorio SAPUI5 único de cada aplicación.

Técnicamente, esta infraestructura se basa en el repositorio de Business Server Page (BSP) y

cada repositorio SAPUI5 está representado por una aplicación BSP individual.

11. GESTIÓN DE ENTORNO, CONFIGURACIÓN Y CONSTRUCCIÓN

Calidad de Código
Nombr Compone Vers
Descripción
e nte ión
UI Plugin de Google Chrome que sirve para evaluar el desarrollo y
UI 0.9.
Inspect depurar aplicaciones SAPUI5. Se utilizará el browser Google Chrome
Inspector 5
or para los desarrollos

11.1. UI5 Inspector

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 11
 Con el UI5 Inspector, puede depurar y dar soporte fácilmente sus aplicaciones basadas en
SAPUI5.

Con la extensión UI5 Inspector para Chrome DevTools, puede inspeccionar, analizar y dar
soporte a las aplicaciones basadas en SAPUI5.

Características clave:

 Inspeccione los controles UI5 y revise sus propiedades, enlaces y modelo de datos
 Modifique las propiedades de control en linea y vea cómo esto afecta la representación y
el comportamiento
 Encuentre información de relevante para su aplicación SAPUI5
12. FRONT-END COMPONENTS:
12.1. Odata Service definition & its registration
12.1.1. OData Service
El OData versión 2.0 es el que utilizaremos para consumir los datos del servidor S4HANA, ya que
nos permitirá la creación de los servicios basados en HTTP. OData está destinado a ser utilizado
para exponer y acceder a información de una variedad de fuentes que incluyen, entre otras, bases
de datos relacionales, sistemas de archivos, sistemas de administración de contenido y sitios web
tradicionales.
Según la casuística de los requerimientos, se presentan 2 escenarios posibles en la implementación
de los servicios OData:
 Solo consulta y visualización de la información, para este escenario se recomienda usar objetos
de vistas CDS, la nomenclatura para la construcción de la vista CDS se adjunta en la siguiente
documentación (Estándares de Programación ABAP4 ECC + HANA).

Estándares de
Programación ABAP4 ECC + HANA.pdf

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 12
 PASOS PARA LA CONSTRUCCIÓN DEL SERVICIO ODATA CONSUMIENDO UNA VISTA CDS.
a. Ingresamos a la Transacción SEGW (SAP Gateway Service Builder) e ingresamos el
nombre del proyecto.

b. Creamos el tipo de entidad (Entity Type).

c. Importamos la estructura de la vista CDS ZSDV_SALESORD

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 13
 d. Seleccionar los campos a importar de la estructura.

e. Asignamos la llave de la entidad.

f. Mapeamos la fuente de datos

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 14
 g. Asignamos el Business Entity.

h. Finalmente generamos el mapeo.

Segundo escenario es cuando se maneja operaciones de creación, actualización y eliminación. Para

esto, implementaremos un servicio OData o redefiniremos según sea el caso.
Es necesario considerar para respuestas, la estructura EW_RETURN del tipo BAPIRET2 y la tabla
ET_RETURN del tipo BAPIRET2_T.
12.1.2. SAP Gateway Service Builder.

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 15
 Todo proyecto SAP Gateway creado desde la transacción SEGW, se debe tener en cuenta lo
siguiente:
ESTANDAR DESCRIPCIÓN
Z: Espacio de trabajo del cliente.
OD: Abreviatura de Servicio de ODATA.
Z + OD + [Módulo SAP] Módulo SAP: Ver Tabla Anexo 01
+ [NOMBRE_SERVICIO] [NOMBRE_SERVICIO]: Descripción del servicio.
Ejemplo:
ZODSDSALESORDER, ZODMMMATERIAL.
Proyecto de puerta de Considerar el mismo nombre de su aplicación UI5 (BSP).
enlace

12.1.3. Entity Types.

El nombre de las entidades creadas para el modelo ODATA, se debe utilizar el nombre del
componente del elemento de datos, respetando las siguientes reglas:
ESTANDAR DESCRIPCIÓN
S y D - Usar CamelCase (Letras en mayúsculas)
No permite los “_”.
Usar Sustantivo en singular.
No tener nombres técnicos de SAP (Ej.: MARA, BKPF).
[NombreEntidad]
No tener nombres de operaciones (Ej. GetMaterial, SetDocument).
Ejemplo: SalesDocument, AcDocNo, Material.

12.1.4. Propiedad.
El nombre de las propiedades para las entidades es de libre elección, respetando las siguientes
reglas:
ESTANDAR DESCRIPCIÓN
FORMATO: (NombrePropiedad)
Colocar el nombre, sin espacios, con iniciales de cada palabra en
mayuscula.
Usar CamelCase (en la primera Letra de la palabra en mayuscula).
No permite los “_”.
[Nombre_Propiedad]
Usar Sustantivo en singular.
Ej.:
- Name
- CompanyName
- CostCenter

12.1.5. Nombre del Servicio Interno.

El nombre del servicio ODATA, creado desde la transacción /IWFND/MAINT_SERVICE, debe
respetar lo siguiente:
ESTÁNDAR
Z + OD [Módulo SAP] +
[NOMBRE_SERVICIO_INTERNO]
+_SRV
DESCRIPCIÓN
Z: Espacio de trabajo del cliente.
OD: Abreviatura de Servicio de ODATA.
Módulo SAP: Ver Tabla Anexo 01
[NOMBRE_SERVICIO_INTERNO]: Descripción del servicio
interno.
_SRV: Clase del modelo (Valor fijo)
Ejemplo:
ZODSDSALESORDER_SRV, ZODMMMATERIAL_SRV.

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 16
 12.1.6. Nombre del Servicio Externo
El nombre del servicio externo creado desde la transacción /IWFND/MAINT_SERVICE debe
respetar lo siguiente:
ESTÁNDAR
Z + OD + [Módulo SAP]+
[NOMBRE_SERVICIO_EXTERNO]
+_SRV
DESCRIPCIÓN
Z: Espacio de trabajo del cliente.
OD: Abreviatura de Servicio de ODATA.
Módulo SAP: Ver Tabla Anexo 01
[NOMBRE_SERVICIO_EXTERNO]: Descripción del
servicio externo.
_SRV: Clase del modelo (Valor fijo)
Ejemplo:
ZSDODSALESORDER_SRV, ZMMODMATERIAL_SRV.

13. SAP UI5 APPLICATION.

13.1. Nombre Aplicación.
El nombre de la aplicación WEB, que se crear por el SCP
https://account.us2.hana.ondemand.com, es de libre elección, pero indicando siempre una
descripción de la acción que se está realizando.
ESTÁNDAR DESCRIPCIÓN
Descripción de aplicación.
[NOMBRE_APLICACIÓN
Se debe tener en cuenta el nombre de la aplicación en mayúscula.
]
Ejemplo: SALESORDER, MATERIAL, etc.

13.2. Nombre del Proyecto de la aplicación SAP UI5.

El nombre del proyecto de la aplicación WEB creado por el SCP
https://account.us2.hana.ondemand.com , debe tener la siguiente nomenclatura:
ESTÁNDAR DESCRIPCIÓN
Z: Espacio de trabajo del cliente.
WA: Abreviatura de Web aplicattion
Módulo SAP: Ver Tabla Anexo 01
Z + WA + [Módulo SAP] + [Nombre del Nombre del proyecto de la aplicación: Descripción
Proyecto de la aplicación] del proyecto de la aplicación usando
lowerCamelCase.
Ej.: zmmwa_Travel, zsdwa_AprobSolicitud, etc.

13.3. Nombre del NAMESPACE de la aplicación.

El nombre del espacio de trabajo de la aplicación WEB creado por el SCP
https://account.us2.hana.ondemand.com , debe tener la siguiente nomenclatura:
ESTÁNDAR DESCRIPCIÓN
Z: Espacio de trabajo del cliente.
NS_: Abreviatura de NameSpace
Z + NS_ + NOMBRE_NAMESPACE: Descripción del namespace usando
[NOMBRE_NAMESPACE] lowerCamelCase.
Ej.: zns_AppTravel, zns_AprobSolicitud, etc.

14. SAP FIORI LAUNCHPAD

14.1. Objeto Semántico.

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 17
 El nombre del objeto semántico creado por la transacción /UI2/SEMOBJ_SAP, debe tener la
siguiente nomenclatura:
ESTÁNDAR DESCRIPCIÓN
Z: Espacio de trabajo del cliente.
SO_: Abreviatura del Objeto Semántico
Z + SO_ + Nombre Objeto Semántico: Descripción del objeto
[NOMBRE_OBJETO_SEMANTICO] semántico usando lowrCamelCase.
Ej.: zso_Travel, zso_SalesList, etc.

14.2. Launchpad Application.

El nombre del Launchpad Application LPD_CUST creado por la transacción LPD_CUST, debe
tener la siguiente nomenclatura:
ESTÁNDAR DESCRIPCIÓN
Z: Espacio de trabajo del cliente.
LA: Prefijo de Launchpad application
Z + LA + [Módulo SAP]_ + Módulo SAP: Ver Tabla Anexo 01
[NNNNNN] N - Correlativo numérico.
Ej.: zlamm_0001, zlafi_0002, etc.

14.3. Business Catalog.

El nombre del Business Catalog creado por la transacción /UI2/FLPD_CUST (Fiori Lpd.
Designer), debe tener la siguiente nomenclatura:
ESTÁNDAR DESCRIPCIÓN
Z: Espacio de trabajo del cliente.
BC_: Prefijo de Business Catalog
Z + BC_ + [NOMBRE_BUSINESS_CATALOG] Descripción del Business Catalog.
Ej.: zbc_Sal_Rep, zbc_Maint_Order, etc.

14.4. Business Group.

El nombre del Business Group (Permite agrupar varios Business Catalog) creado por la
transacción /UI2/FLPD_CUST (Fiori Lpd. Designer), debe tener la siguiente nomenclatura:
ESTÁNDAR DESCRIPCIÓN
Z: Espacio de trabajo del cliente.
Z + BG_ + [BUSINESS BG_: Prefijo de Business Group
GROUP] Descripción de Business.
Ej.: zbg_Material, zbg_SalesOrder, etc.

15. OBJETOS DESARROLLO SAPUI5

15.1. JavaScript
Descripción general de las pautas para la codificación de JavaScript para SAPUI5 con respecto
al formato del código, convenciones de nomenclatura, creación de clases y documentación.
Objetos Reglas generales
JavaScript
- No, utilizar variables globales de JavaScript, organice todos los objetos globales en una
estructura de espacio de nombres "sap. *", o extienda el jQuery.sap objeto.
- No usar variables no declaradas.
- No acceder a los miembros internos (privados) de otros objetos.
- No utilizarconsole.log ().
- Utilizar jQuery.sap.byId ("<someId>") en lugar de jQuery ("# <someId>").
- Agregue un punto y coma después de cada instrucción, incluso si es opcional.
- Usar espacios después if / else / for / while / do / switch / try / catch / finally, alrededor

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 18
 de llaves, alrededor de operadores y después de comas.
- Utilizar "===" y "! ==" en lugar de "==" y "! =".

Por ejemplo:
function outer(c, d) {
var e = c * d;
if (e === 0) {
e++;
}
for (var i = 0; i < e; i++) {
// do nothing
}
function inner(a, b) {
return (e * a) + b;
}
return inner(0, 1);
}
15.1.1. Funciones:
 Debe describir alguna funcionalidad de lo que se está realizando.
ESTÁNDAR DESCRIPCIÓN
[Nombre_Funciones] Usar CamelCase (Primera Letra de una palabra en mayúsculas)
() Ej.: GetDateToday(), SetFechaDocumento(), etc.

15.1.2. Comentarios.
Siempre se recomienda comentar el código a desarrollar, pues este permite un mejor
entendimiento de lo que se está haciendo.
ESTÁNDAR DESCRIPCIÓN
/ Tener un comentario breve del Código que se está realizando.
*[Comentario]*/ Ej.: /* Este método permite generar un algoritmo Fibonacci */.

15.1.3. Clases.
Para la creación de clases, se aplican las siguientes reglas y pautas:
ESTÁNDAR DESCRIPCIÓN
MyClase
[Nombre_Clase] Se debe considerar para el nombre de la clase tener la Primera letra en
mayúscula.
Ejemplo: Rectángulo
log(lower)
El atributo se declara en minúscula.
Ej.: var log; .
Inicializar los valores de los atributos de la clase, en el constructor. Por
[Nombre_Atributos]
ejemplo:
this._mId = Utils.createGUID();
Defina el nombre de los atributos privados de la clase con un guion abajo.
Por ejemplo: this._mId.
(lowerCamelCase)
Ej.: calcularImporte, setEstado.
Considerar definir los métodos de la clase como miembros del prototipo
de la función constructora:
[Nombre_Método] Ej.: MyClass.prototype.doSomething = function () {...
Defina miembros estáticos (campos y funciones) como miembros del
propio objeto de función constructora: MyClass.doSomething = function
() {...

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 19
 15.1.4. Variables.
Recomendamos utilizar la notación húngara donde los prefijos de nombre indican el tipo de
variables, seguido del nombre de la variable. Pero no se debe usar la notación húngara para los
parámetros del método API. Por ejemplo:
Tipo de Dato Ejemplo
sNombreEmplead
string
o
object oPedido
jQuery object $DomRef
int iContador
map / assoc. array mParametro
array aLstPedido
date dFecDocum
float fTotalVenta
boolean bEstado
RegExp rPatternMail
function fnValidaEstado
variant types vVariante

16. SAPUI5
16.1. API
Los desarrolladores de contenido que desarrollan controles SAPUI5 deben seguir las pautas
que se describen a continuación para API:
ESTÁNDAR DESCRIPCIÓN
Para la descripción del nombre control comienza con una letra
mayúscula y usan CamelCase para palabras concatenadas.
Ej.:
CONTROL NOMBRE
Button BtnGuardar
Label LblEtiqueta
[Nombre_Control] Input InNombre
Image ImgFoto
DatePicker DpFecha
RadioButton RbtOpcion
Table TblReporte
List LstReporte

xxxxXxxxXxxx
Propiedad/evento/agr Comienzan con una letra minúscula y también usan
egación/asociación/m lowerCamelCase.
étodo/parámetro Ej.: lanzarEventEnvioMail, idEmpleado, etc.

Consideraciones:
 Proporcionar valor default para las propiedades. Consideremos el caso de uso más
frecuente. Deje que los elementos de bloque "auto" rellenen el ancho disponible en
lugar de establecer explícitamente "100%" como ancho predeterminado.
16.1.1. Comportamiento
Los desarrolladores de contenido que desarrollan controles SAPUI5 deben seguir las pautas que se
describen a continuación para Comportamiento:
 No utilice hardcoded IDs. Al crear subcontroles internos, su ID debe tener el prefijo
this.getId() + "-".
Por ejemplo: Si usamos un control Button dentro de un Panel, entonces el nombre de ese control
debería ser

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 20
 Pnl1_Btn_enviar (así nos aseguramos que este botón tendrá un Id único).
 No utilizar oEvent.preventDefault() ó oEvent.stopPropagation() sin una buena razón y
documentación clara por qué es realmente necesaria su utilización.
 Utilice los métodos de manejo de eventos SAPUI5 (estos métodos suelen ser más confiables
y están directamente relacionados con la funcionalidad del controlador) cuando estén
disponibles, en lugar de jQuery.bind()/.on(). Cuando usas jQuery.bind() o jQuery.on() siempre
desenlazarlos nuevamente, por ejemplo, en onBeforeRendering() y en exit() y volver a
enlazar después de renderizar.
MyControl.prototype.onAfterRendering = function() {
this.$().bind("click", jQuery.proxy(this.handleClick,
this));
}
MyControl.prototype.onBeforeRendering = function() {
this.$().ubind("click", this.handleClick);
}
MyControl.prototype.exit = function() {
this.$().ubind("click", this.handleClick);
}
MyControl.prototype.handleClick = function(oEvent) {
// do something...
}
 Use CSS3 para animaciones, no recurra a ninguna animación para navegadores legados; sólo
existen algunas excepciones donde la animación es importante.
 Tenga en cuenta que un control se puede usar varias veces en una página.
 Si una acción tarda más tiempo, visualice esto, por ejemplo, utilizando un
sap.ui.core.BusyIndicator.
16.1.2. Renderizador
Los desarrolladores de contenido que desarrollan controles SAPUI5 deben seguir las pautas que se
describen a continuación para el renderizado:
 Produzca HTML5 limpio y semántico, lo más compacto posible.
 Utilizar RenderManager.writeEscaped(…) o jQuery.sap.encodeHTML(…) (Permite escribir
mensajes en el buffer).
 Los controles de contenedor deberían hacer que los elementos secundarios estén uno al lado
del otro sin un HTML adicional o diseño aplicado.
 Utilice una carpeta de iconos para las imágenes.
 Proporcione un área táctil suficientemente grande para la interacción en dispositivos táctiles
(generalmente 3rem/48px).
 Cuando los elementos HTML internos del control debajo del elemento raíz necesitan una ID,
constrúyalos de la siguiente manera: <control ID> + "-" + <someSuffix>.
 El HTML debe cumplir con las reglas básicas de XHTML; cierre todas las etiquetas, incluya los
valores de los atributos entre comillas y no use atributos vacíos sin valor. Por ejemplo
<br></br>.

16.1.3. Manejo de Mensajería.
Este apartado nos da las pautas de cómo mostrar mensajes al usuario, como errores, advertencias,
mensajes de éxito, confirmación e información. Puede elegir entre varios controles para mostrar
diferentes tipos de mensajes. Todos los errores deben ser fácilmente visibles (resaltados) y
claramente identificables en la interfaz de usuario.
 Interrumpa al usuario lo menos posible (solo en casos inevitables), y aproveche todas las
opciones técnicas para orientar al usuario.

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 21
  Comience siempre con el control menos complejo (por ejemplo, use la ayuda de selección en
lugar de la de valor), y use controles más complejos solo si el caso de uso realmente lo
requiere.
 Si es apropiado, use los marcadores de posición para ofrecer sugerencias de entrada (por
ejemplo, para indicar el formato de entrada esperado).
 Si no hay mensajes para mostrar, no muestre un botón de mensajería en la barra de
herramientas.
 Si es posible, primero resalte los campos relevantes y cambie su estado de valor según el tipo
de mensaje, como error, advertencia o éxito.
 También puede haber mensajes que tengan que interrumpir al usuario. En la actualidad, solo
conocemos problemas técnicos, como errores de red y problemas de conexión.
A. Tipos de Mensajes.
Las siguientes categorías de mensajes están disponibles:
- Error
- Advertencia
- Éxito
- Información
- Confirmación.
B. Controles.
Los siguientes controles se pueden usar para mostrar mensajes de error, advertencia y éxito en línea.
La aplicación puede establecer un estado de error, advertencia o éxito para el control.
- sap.m.ComboBox
- sap.m. dateCicker
- sap.m.DateTimeInput
- sap.m.DateRangeSelection
- sap.m.MultiComboBox
- sap.m.MultiInput
- sap.m.Input
- sap.m.TextArea
C. Visualización de errores.
Los errores deben ser fáciles de detectar para salvar a los usuarios de la búsqueda. La forma de
visualización de los errores son los siguientes:
- Mensaje emergente.

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 22
 - Buzón de mensaje

- Mensaje toast

- Franja de mensajes

16.1.4. Temas/CSS – Directrices generales

Los desarrolladores de contenido que desarrollan controles SAPUI5 deben seguir las pautas que se
describen a continuación para los temas CSS:
 Escriba puntos y coma incluso cuando sea opcional.

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 23
  En general, use "rem" para las dimensiones; use "px" solo para dimensiones que no
dependen del tamaño de fuente. Excepción: los controles que aún soportan IE8 no pueden
usar rem.
 El elemento raíz de un control debe venir sin márgenes externos.
 No aplique estilos a los elementos HTML directamente; todos los selectores deben incluir
una clase de CSS específica de SAPUI5 para evitar afectar el HTML no propio.
 Evita el selector (como * {color: black;}) en CSS (afecta el performance de la aplicación).
 Utilice solo CSS en línea para el estilo específico de la instancia de control, por ejemplo, el
ancho del botón.
 No utilizar !important ya que dificulta las adaptaciones personalizadas; use más selectores
específicos en su lugar. Hay raras excepciones justificadas, pero necesitan ser documentadas.

17. ANEXOS
17.1. Anexo 01: Tabla Módulos SAP
APLICACIÓ
DESCRIPCIÓN
N
BC Uso genérico
BW Business Warehouse
CO Controlling
CS Servicio al Cliente
FI Finanzas
HR Recursos Humanos
MM Materiales
PM Mantenimiento
PP Producción
PS Gestión de Proyectos
QM Calidad
SD Ventas y Distribución
WM Gestión de Almacenes
VS Ventas Secundarias (Solo BW)
IM Gestión de Inversiones
RF Radio Frecuencia
TR Tesorería
IS Seguridad de Información

------------------------------------------------------------------------------------------------------------------------------
Ferreyros CAT Página 24