SAP Overview Page – Cards en 5 minutos
Tabla resumen de contenido
Introducción
Aunque gracias a Fiori Launchpad podemos agrupar y ayudar al usuario a que tenga acceso a toda la información de manera rápida, ha llegado el momento de que esta primera información sea mas completa y configurable y que su creación sea rápida.
Pero antes, como siempre, ¿Qué es esto de SAP Overview Page?
Un poco de teoria
SAP Overview Page nos permite crear una página con tarjetas agrupadas en un contexto, es decir, que pueden tener unos datos relacionados (por ejemplo a traves de filtros). Estas se añaden a una página que contendrá todas las tarjetas que configuremos en nuestra Overview Page.
Para no entrar mucho en la parte teórica, aquí tenéis la documentación oficial donde lo explica
https://experience.sap.com/fiori-design-web/overview-page/
Dejemos la teoría y vamos a entrar en materia, para ello, realizaremos las siguientes acciones:
- Crear una Overview Page
- Crear un fichero de annotations
- Configurar y añadir distintas cards
Como siempre, este ejercicio lo realizaremos con el servicio oData Northwind. Si no lo tienes configurado en webIDE te invito a que sigas este sencillo manual, https://developers.sap.com/tutorials/hcp-create-destination.html
Tranquilos si algun punto no os funciona bien, os dejo el link a mi github github donde está el proyecto que crearemos en esta entrada, si queréis trastear sin mas descargar el proyecto, importáis y ejecutáis.
Este manual se crea basado en Neo, pero en Cloud Foundry tendremos exactamente el mismo comportamiento, la única diferencia es que nos añadirá el app router y el host (si no sabes de que hablo, te recomiendo esta entrada eCastella – deconstruccion de una aplicacion ui5 en cloud-foundry )
Ahora si, manos a la obra
Creando la Overview Page
- Vamos a SAP WebIDE y creamos una página del tipo Overview Page. Para ello vamos a File > New > Project From template. En el primer paso del wizard seleccionaremos la categoria «SAP Fiori Elements» y «Overview Page» como template.
Los siguientes pasos son parecidos a los que realizaríamos con cualquier aplicación de Fiori elements:
- Añadimos los datos del proyecto
- Creamos la conexión de datos (este paso lo veremos después en el manifest) pero por ahora le añadiremos la conexión hacia Northwind des «Service URL» y añadiendo como subpath «/V2/Northwind/Northwind.svc/»
- En «Annotation Selection» añadiríamos el fichero de anotaciones que como no tenemos disponible lo crearemos mas adelante de manera manual por lo que en este punto lo saltamos «Next»
- En el último paso «Template Customization» añadimos el nombre que queramos a nuestra fuente de datos. Podremos tener mas de una, aunque el template nos ayuda solo con la primera. Así que informamos el Datasource, marcamos el tipo de Container y pulsamos finalizar.
Ya tenemos nuestro proyecto creado, si lo ejecutamos podremos ver nuestra aplicación con la Overview Page.
Este es el resultado, donde obviamente esta sin nada porque no hemos puesto ninguna tarjeta:
¿Qué tenemos?
Gracias al wizard ya tenemos todos los ficheros preparado para tener nuestra overview page. La estructura que tendremos será esta:
- ext: esta carpeta esta preparada para añadir tarjetas personalizadas, acciones y filtros
- i18n: fichero de traducciones, estos son iguales que en cualquier proyecto SAPUI5
- localService: Copia de metadatos de la conexión creada, esto nos servirá para ejecutar el servidor de pruebas.
- test: Ficheros para poder ejecutar la aplicación fuera de un launchpad
- Component.js: Este fichero únicamente instanciará el manifest, ya que el resto de configuraciones se seleccionaran de allí.
- Manifest.json: El fichero de definición de nuestra aplicación tendra los siguentes puntos importantes:
- Definición del origen de datos «dataSources», en este punto añadiremos el fichero de annotations mas adelante.
- Las tarjetas se añadiran en «sap.ovp» donde podemos ver el campo «cards» que esta vacio.
Creando nuestra primera tarjeta estática (Lista de links)
Para empezar a jugar añadiremos una tarjeta estática con links. Estos links nos transportaran a otras aplicaciones del Lauchpad de ejemplo.
Estos son los datos de las aplicaciones, esta configuración la podéis sacar de la ultima parte de la URL en cualquier launchpad:
| Action | semanticObject |
| bookmark | action |
| toperssrv2test | action |
| Start | SmartMainApp |
- Añadir la tarjeta es tan fácil como añadir su código de configuración dentro del fichero manifest.json en el campo «cards», dentro de {}:
"card00_Links": {
"template": "sap.ovp.cards.linklist",
"settings": {
"title": "{{card00_Links}}",
"subTitle": "{{card00_Links_sub}}",
"listFlavor": "standard",
"defaultSpan": {
"rows": 3,
"cols": 1
},
"staticContent": [{
"title": "Create Purchase Order",
"imageUri": "sap-icon://accelerated",
"imageAltText": "{{card00_Links}}",
"semanticObject": "Action",
"action": "toappperssample",
"disableInCard": true
}, {
"title": "Create Supplier",
"imageUri": "sap-icon://accelerated",
"imageAltText": "{{card00_Links}}",
"semanticObject": "Action",
"action": "toappnavsample"
}, {
"title": "Create Contact",
"imageUri": "sap-icon://accelerated",
"imageAltText": "{{card00_Links}}",
"semanticObject": "Action",
"action": "toappnavsample"
}]
}
}Entrando en detalle vemos los siguientes campos:
- template: Tipo de tarjeta a utilizar, cada una tiene su configuración, en este caso seleccionamos un listado de links.
- settings: aquí añadimos las caracteristicas generales de la tarjeta como pueden ser el titulo, subtitulo, tipo de lista y visualización por defecto
- staticContent: aquí se añaden las distintas filas de la tarjeta, un objeto para cada una de las lineas:
- title: Nombre del link
- imageUri: Icono a mostrar o imagen
- semanticObject y action: Al seleccionar navegación a traves de lauchpad añadimos los datos del objecto semantico.
Este es el resultado:
Añadiendo una tarjeta con contenido dinamico
Para la siguiente tarjeta, del tipo lista necesitaremos un fichero de annotations y hacer referencia la modelo de datos creado en el wizard anterior.
Lo primero que haremos es crear una nueva carpeta de «annotations» y seleccionado la carpeta creata boton derecho, «New>Annotation File» fichero de annotations:
En el wizard indicamos el nombre del fichero y el servicio OData:
Aquí se añadirá de manera automática a nuestro manifest.json el fichero de annotations
Abrimos el fichero Local_annotation.xml con el editor gráfico para configurar la lista:
- Pulsamos «Select Targets» y seleccionamos «Employe»
- En la fila Local Annotations pulsamos el boton «+» de la parte derecha y añadimos un «UI Vocabulary» > «Line item». Una vez tengamos la nueva linea, pulsaremos en «Edit Qualifer» y añadiremos un descriptivo, por ejemplo «TopEmployees».
Ahora es el momento de añadir los campos que queremos visualizar en cada linea. Para ello, pulsaremos el boton «+» de la definición de linea que acabamos de crear y añadiremos 6 elementos tipo UI.DataField, los que mas nos gusten
Para determinar el campo a mostrar pulsaremos la opción «*Value» y en la columna «Value» seleccionamos el campo que queremos visualizar.
No os olvidéis guardar al terminar (ctrl+s) ya tenemos nuestro fichero de annotations. Solo nos queda añadir la tarjeta.
Vamos al fichero manifest.json y allí en el array «cards» añadiremos una nueva tarjeta:
"card01": {
"model": "Northwind",
"template": "sap.ovp.cards.list",
"settings": {
"title": "{{card01_title}}",
"entitySet": "Employees",
"addODataSelect": false,
"listType": "extended",
"listFlavor": "standard",
"sortBy": "HireDate",
"sortOrder": "ascending",
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem#TopEmployees"
}
}Entrando en detalle vemos los siguientes campos:
- model: Modelo de datos a utilizar, este modelo es el creado en el manifest
- template: Tipo de tarjeta a utilizar, cada una tiene su configuración, en este caso seleccionamos un listado
- settings: Configuración propia de la tajeta
- title: Titulo de la tarjeta
- entitySet: Entidad de donde se seleccionaran los datos dentro del modelo (corresponde con la entidad del oData)
- sortBy: campo de ordenación
- sortOrder: tipo de orden (ascendente / descendente)
- annotationPath: path del fichero de annotations que hemos creado <com.sap.vocabularies.UI.v1.LineItem#><Nuestro modelo>
En este punto, y antes de ver el resultado, para poder visualizar el resultado sin tener problemas con las operaciones batch haremos una pequeña trampa, añadiendo «useBatch»: false en el modelo «Northwind»:
Como resultado veremos una nueva tarjeta:
Podemos jugar con mas tipos de tarjetas, os añado el link a la documentación oficial.
https://sapui5.hana.ondemand.com/#/topic/c64ef8c6c65d4effbfd512e9c9aa5044
Hasta aquí esta mini guia, el tema es mucho mas denso, pero esta entrada os pude ayudar a crear el proyecto inicial que es la parte que tiene peor la documentación. Existen también automatismos en webIDE para crear las tarjetas, pero en el momento en que he creado esta entrada no funcionan muy bien.
A modo recordatorio, este es mi github donde esta el proyecto que acabamos de crear.
Si este tema os ha interesado, suscribiros al blog Suscribete
