SAP 

FIORI / SAPUI5

Mallorca, 14 octubre de 2015
Índice

1. INTRODUCCIÓN  2. SAP FIORI 3. SAP Ui5

A LA MOVILIDAD 

4. DESARROLLO 5. POTENCIAL 6. CONCLUSIONES

2
Introducción

La movilidad se ha convertido en una necesidad empresarial

¿Por qué?
Cualquier  Cualquier 
Lugar Instante
Cualquier 
Negocio
Cualquier  Cualquier
Dispositivo Usuario

3
Introducción

Accesibilidad Global

• En España la evolución en el número 
de líneas móviles desde el año 2000, 
ha aumentado un 126%.

• Desde 2006 se ha producido un 
descenso en el precio del móvil 
de casi el 50%.

4
Introducción

Soluciones Móviles SAP

SAP Store VS. SAPUi5

SAP BusinessObjects Mobile SAPFiori
SAP Sales Manager
Otras
SAP Work Manager

SAP Customer Briefing

Otras

5
Índice

1. INTRODUCCIÓN  2. SAP FIORI 3. SAP Ui5

A LA MOVILIDAD 

4. DESARROLLO 5. POTENCIAL 6. CONCLUSIONES

6
¿Que es SAP Fiori?

• SAP Fiori es una colección de aplicaciones que representan el 
nuevo paradigma de experiencia de usuario de SAP

• Diseño coherente e intuitivo
• Infraestructura técnica común
• Supresión límites tradicionales
• Elementos de interfaz de usuario interactivos y atractivos
• Compatibilidad con todo tipo de dispositivos sin 
implementaciones adicionales
• Diseño y desarrollo con orientación funcional total 

7
¿Cómo funciona SAP Fiori?
SAP Ui5

• Basado en funciones
• Adaptable
• Sencillo
• Coherente • FIORI APP
• Valor instantáneo
• Launchpad

FIORI
Librerías  Conjunto 
Vistas
SAP.UI de Datos
8
¿Por qué SAP Fiori?

• SAP Fiori nace para combatir los principales inconvenientes y 
obstáculos que presenta SAP ERP para la experiencia habitual del 
usuario 

Nivel de 
Nivel de 
personalización  personalización 
bajo total

Acceso 
complejo  Acceso 
a la  sencillo 
información a la 
información
Elevada 
rigidez Adaptación 
total

9
 Beneficios SAP Fiori

• La implantación de movilidad mediante SAP Fiori, permite:

• Mejorar la productividad del usuario mediante la simplificación y

automatización de las tareas del día a día a través de cualquier dispositivo.
• Impulsar la adopción del usuario con un diseño atractivo, adaptado a las
tareas y actividades clave.
• Aumentar el cumplimiento y la calidad de los datos, haciendo que sea más
fácil introducir la información en el sistema.
• Reducir los costes de capacitación y apoyo con pantallas sencillas, basadas
en roles que aceleran la interacción y reducen al mínimo los errores de
usuario.
• Ampliar y/o desarrollar fácilmente las aplicaciones, personalizando éstas
mediante las herramientas y las tecnologías de desarrollo SAP.

10
Tipos de aplicaciones SAP Fiori

Existen tres tipos de aplicaciones SAP Fiori UX:

11
Tipos de aplicaciones SAP Fiori

Existen tres tipos de aplicaciones SAP Fiori UX:

1‐Transactional Applications
Las aplicaciones transaccionales SAP Fiori UX son aplicaciones diseñadas para
empleados, responsables, etc. Cada una de estas aplicaciones transaccionales
requiere de la instalación de un Add‐On específico en el sistema.

Es el único tipo de aplicación SAP Fiori UX que no está necesariamente ligado a SAP 

HANA, sino que soporta cualquier otro tipo de Base de Datos en el sistema.

12
Tipos de aplicaciones SAP Fiori

2‐Fact Sheets
Este tipo de aplicaciones SAP Fiori UX permite al usuario navegar por la información 
en diferentes capas. Permite el acceso a información global a un nivel contextual, 
acceder al detalle y si es necesario, navegar a más bajo nivel de dato y acceder a 
toda la información relacionada con él. 

Requisitos mínimos:
‐ SAP HANA
‐ SAP Web Dispatcher

13
Tipos de aplicaciones SAP Fiori

3‐Analytical Applications

También llamadas Smart Business Applications.
Éstas tienen el objetivo de analizar y evaluar los KPI estratégicos u operativos en 
tiempo real y desencadenar las tomas de decisiones correcta.

Las aplicaciones analíticas SAP Fiori UX requieren:

‐ SAP HANA con una Arquitectura 2‐Tier usando Modelos Virtuales (VDM)
‐ Aplicaciones incluidas como paquetes en cada componente de SAP (ERP, CRM…)

14
Aplicaciones SAP Fiori

https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#

15
Análisis Aplicación‐ SAP Fiori

Margen Neto
Esta aplicación muestra el indicador clave de rendimiento (KPI) Margen Neto. 
Además permite ir al detalle para profundizar y conocer:
‐ La tasa neta de margen de beneficios en un período seleccionado del año fiscal 
en curso.
‐ Comparar dicha tasa con la tasa prevista, así como también respecto el mismo 
periodo del año anterior.

16
Análisis Aplicación‐ SAP Fiori

Información para la implementación ‐ Instalación

Net Margin ‐ SAP Fiori APP

17
Análisis Aplicación‐ SAP Fiori

Información para la implementación ‐
Información para la implementación Instalación

18
Análisis Aplicación‐ SAP Fiori

Información para la implementación ‐ Configuración

19
Análisis Aplicación‐ SAP Fiori

Información para la implementación ‐ Configuración

20
Launchpad‐ SAP Fiori

SAP Fiori Launchpad es un escritorio que aloja aplicaciones SAP Fiori y proporciona a 

las aplicaciones servicios como la navegación, personalización, soporte y 
configuración de la aplicación.
El Launchpad es el punto de acceso a las aplicaciones de SAP Fiori aplicaciones desde 
los dispositivos móviles y/o PC’s.

21
SAP Fiori ‐ Adaptaciones

Codificar

Diseñar Publicar

Crear/
Modificar

22
Índice

1. INTRODUCCIÓN  2. SAP FIORI 3. SAP Ui5

A LA MOVILIDAD 

4. DESARROLLO 5. POTENCIAL 6. CONCLUSIONES

23
SAP UI5 ‐ ¿Qué es?

Características Básicas
SAPUI5 es un conjunto de librerías
Javascript para el desarrollo y
diseño de aplicaciones de negocio
SAP basadas en HTML5. Diseñado para patrón MVC

Responsive

Bindeo bidireccional

Tematizable

Más de 200 controles UI (extensibles)

24
SAP UI5 vs OpenUI5

• OpenUI5 es la versión gratuita disponible bajo la

licencia de código abierto Apache 2.0

• Todo el núcleo de OpenUI5 y SAPUI5 (que contiene

toda la funcionalidad central) es idéntico.

• La diferencia está en algunas bibliotecas de control

más exótica que todavía no se han publicado bajo la
licencia de código abierto.

• Una de las principales diferencias, es que el soporte

que SAP ofrece a SAPUI5, que garantiza la corrección
de errores, mientras que en OpenUI5, no existe esta
garantía.
25
SAP UI5 – Principios

Es un framework de programación que facilita

el desarrollo de aplicaciones web de lado
cliente que cumplen los principios de la SAP
User Experience Strategy (UX).

26
SAP UI5 – Principios

1 ‐ Aplicaciones SAPUI5 orientadas a roles

Las aplicaciones SAPUI5 deben estar pensadas para los

usuarios que van a utilizarlas. Sólo deben mostrar los datos que
un determinado rol de negocio quiere ver y ninguno más.

Se trata de dividir las transacciones que conocemos hasta

ahora, en pequeñas aplicaciones orientadas a las tareas
concretas del rol que las va a utilizar.

27
SAP UI5 – Principios

2 ‐ Aplicaciones SAPUI5 responsive

Las aplicaciones SAPUI5 deben ofrecer una interfaz de

usuario atractiva, a la vez que sencilla e intuitiva que ofrezca
una experiencia de usuario buena y equivalente sea cual sea la
plataforma o dispositivo desde la que se acceda,
independientemente de versión, sistema operativo, navegador,
resolución etc.

28
SAP UI5 – Principios

3 ‐ Aplicaciones SAPUI5 simples

Las aplicaciones SAPUI5 además de estar orientadas a roles,

deben ofrecer la funcionalidad de una manera sencilla
y simple.

En el desarrollo de aplicaciones SAPUI5 se sigue la regla 1‐1‐3:

1 usuario, 1 caso de uso, 3 pantallas como máximo. 

Si la aplicación que estamos desarrollando no puede resumirse

en 3 o menos pantallas, deberemos rediseñarla o dividirla en
varias aplicaciones SAPUI5.

29
SAP UI5 – Principios

4 ‐ Aplicaciones SAPUI5 coherentes

Las aplicaciones SAPUI5 deben hablar el mismo idioma. Esto se

refiere a que deben utilizar elementos y estilos comunes de
manera que un usuario que sepa utilizar una
aplicación SAPUI5, sepa utilizar cualquiera otra.

Para ello, existen themes y recursos web a disposición de

los desarrolladores SAPUI5

30
SAP UI5 – Principios

5 ‐ Aplicaciones SAPUI5 disponibles al instante

Este principio está más relacionado con las aplicaciones SAP 
Fiori UX enmarcadas en el enfoque estrategia User
Experience de SAP. 

Se refiere a la disponibilidad de una de estas aplicaciones Fiori, 
que también son aplicaciones SAPUI5 ya desarrolladas y 
puestas a disposición por SAP que pueden instalarse y usarse 
en poco tiempo.

31
SAP UI5 ‐ Arquitectura

Como ya se ha comentado anteriormente, las aplicaciones

SAPUI5 son aplicaciones de lado cliente que ofrecen una
interfaz SAP a través de la que consumir o nutrir de datos a
SAP.

Desarrollar una aplicación SAPUI5 significa por tanto, diseñar

una interfaz y definir de dónde se va a obtener los datos que va
a tratar esta interfaz. Para ello, se utiliza el
paradigma MODELO‐VISTA‐CONTROLADOR.

32
SAP UI5 ‐ Arquitectura

Modelo: Serán las fuentes de datos de los que se nutrirá la

aplicación, podrán ser SAP o no SAP y podrán estar basados en
diferentes formatos como JSON, XML u oData

Vistas: Ficheros en los que se diseñará la estructura y formato

de la aplicación SAPUI5 en cuestión: layouts, controles, tablas,
etc. Pueden desarrollarse en los siguientes formatos:
Javascript, XML, HTML o JSON.

Controlador: Ficheros Javascript en los que se definirá la lógica

de negocio de la interfaz, se atenderá a eventos, se realizarán
validaciones y se crearán modelos con los que establecer la
relación entre la aplicación y el backend de donde procedan los
datos a tratar.

33
SAP UI5 ‐ Arquitectura

Modelo Vista Controlador

Modelo Controlador

Vista
JSON, XML, 
JavaScript
oDATA
JavaScript, XML
JSON o HTML
SAP UI5 ‐ Desarrollo

A la hora de desarrollar un proyecto SAPUI5 debemos pensar

qué tipo de aplicación SAPUI5 queremos desarrollar, qué
elementos queremos mostrar en ella y de qué forma.

Por ello, es necesario conocer qué componentes podemos

utilizar y qué librerías SAPUI5 tenemos a nuestra disposición
para implementar la funcionalidad que requiramos.

35
SAP UI5 – Desarrollo ‐ Librerías

sap.ui.commons

Si la aplicación va a ser preferentemente accedida

desde escritorio, crearemos una interfaz con controles
para páginas web comunes ( siempre asegurando que si
se visualiza desde un móvil o una tablet la experiencia
de usuario también vaya a ser buena),

En librería SAPUI5 sap.ui.commons encontraremos

todas las clases y métodos de diversos controles típicos
de aplicación web:

‐ botones (sap.ui.commons.Button),
‐ campos de entrada de texto (.InputField),
‐ listas (sap.ui.commons.ComboBox) .
36
SAP UI5 – Desarrollo ‐ Librerías

sap.m

Si la aplicación va a ser accedida principalmente

desde dispositivos móviles: (teléfonos, tablets, ..)
podemos optar por desarrollar una interfaz
móvil que no sólo se adapte a la pantalla del
dispositivo en cuestión si no que también ofrezca
controles que se beneficien de su carácter móvil:
gestos, interacción táctil etc.

En sap.m encontraremos también numerosos

controles con los que presentar la información de
una manera mucho más parecida a lo que estamos
acostumbrados con cualquier app móvil: 3
37
SAP UI5 – Desarrollo ‐ Librerías

sap.ui.core
sap.ui.table
sap.ui.ux3
sap.me
…

38
SAP UI5 – Desarrollo ‐ Librerías

https://sapui5.hana.ondemand.com/sdk/test-resources/testsuite/testframe.html

39
Índice

1. INTRODUCCIÓN  2. SAP FIORI 3. SAP Ui5

A LA MOVILIDAD 

4. DESARROLLO 5. POTENCIAL 6. CONCLUSIONES

40
SAP UI5 – Desarrollo ‐ Entorno

41
SAP UI5 – Desarrollo ‐ Entorno

Eclipse es una plataforma de desarrollo, diseñada para ser

extendida de forma indefinida a través de plug‐ins. Fue
concebida desde sus orígenes para convertirse en una plataforma
de integración de herramientas de desarrollo. No tiene en mente
un lenguaje específico, sino que es un IDE (Integrated
Development Environment ) genérico.

Proporciona herramientas para la gestión de espacios de trabajo,

escribir, desplegar, ejecutar y depurar aplicaciones.

42
SAP UI5 – Desarrollo ‐ Entorno

https://tools.hana.ondemand.com/#sapui5

43
SAP UI5 – Desarrollo ‐ Entorno

44
SAP UI5 – Desarrollo ‐ Entorno

Sap Gateway es una tecnología que proporciona una manera

sencilla de conectar dispositivos.

OData tratar de dar solución a la exposición de orígenes de datos,

relacionales o no, a través de un Servicio Web ejecutando
operaciones con un lenguaje “estándar” basandose en:

•La creación de una forma uniforme de representación de datos

estructurados a través de Atom oJSON (JavaScript Object Notation)
•La utilización de convenciones URL uniformes tanto para la
navegación, filtrado, orden y paginación de datos (entre otros)
•La creación de operaciones uniformes dirigidas por dirección
mediante las acciones GET, POST,PUT y DELETE.

45
SAP Fiori ‐ Adaptaciones

Codificar

Diseñar Publicar

Crear/
Modificar

46
SAP UI5 – Desarrollo ‐ Aplicaciones

Transacción /UI5/UI5_REPOSITORY_LOAD

47
SAP UI5 – Desarrollo ‐ Gateway

Transacción SEGW

48
SAP UI5 – Desarrollo ‐ LaunchPad

Transacción LPD_CUST

49
SAP UI5 – Desarrollo ‐ Aplicaciones

50
SAP UI5 – Desarrollo ‐ Perfiles

¿Es necesario contar con nuevos perfiles en nuestra organización?

Perfil Funcional
Perfil ABAP/Basis
Análisis
Perfil Web
Requerimientos Desarrollo ABAP
Definiciones Odata Desarrollo HTML5
Desarrollo 
JavaScript
Desarrollo Eclipse

51
SAP UI5

52
Índice

1. INTRODUCCIÓN  2. SAP FIORI 3. SAP Ui5

A LA MOVILIDAD 

4. DESARROLLO 5. POTENCIAL 6. CONCLUSIONES

53
Potencial

El potencial es ilimitado, pero que pasaría si…

• Queremos tener funcionalidades Offline.
• Queremos crear APPs Nativas.
• Queremos gestionar el despliegue de 
actualizaciones.
• Queremos funcionalidades PUSH
• …

54
SAP UI5 – SMP 3.0

55
12/09/2013 © 2013, Bussap Consulting, S.L. All rights reserved 56
Índice

1. INTRODUCCIÓN  2. SAP FIORI 3. SAP Ui5

A LA MOVILIDAD 

4. DESARROLLO 5. POTENCIAL 6. CONCLUSIONES

57
Conclusiones

• Desarrollo personalizado de las aplicaciones

• Mejora de la productividad.
• Diseño atractivo, adaptado a las tareas y actividades clave.
• Interacción sencilla del usuario con el sistema.
• Baja gestión del cambio
• Entorno de desarrollo de fácil uso

Todo un mundo posibilidades a nuestro alcance

58
Gracias por su atención

59