Aracely Chávez
My blog
  • Home
  • FAQ
  • Blog
  • Contacto
UI
March 20 2021

UI for Node.Js app using Fiori Annotations BAS Cloud Environment

Aracely Chavez SAP BAS, CAP, Cloud Foundry, Node Js, UI

Agregar interfaz de usuario a una aplicación con el modelo de programación CAP (Cloud Application Programming) en el ambiente de desarrollo BAS (Business Application Studio) en la nube. 

Prerequisitos: 

  • Una cuenta trial SAP Cloud BTP.
  • Subscripción al Business Application Studio (y estar firmados a Cloud Foundry). 
  • DB de espacio de desarrollo este en estatus RUNNING.
  • Crear una aplicación Node.js usando Cloud Application Programming Model.

1.- Agregar soporte de lenguaje a la aplicación.

Crear el directorio y archivo _i18n/i18n.properties dentro del directorio del servicio. Esto sirve para definir los textos de los campos de la aplicación e internacionalizarlos, para especificar el lenguaje se crea indicando el código de idioma. Por ejemplo: i18n_es.properties para español.  

i18n

2.- Agregar archivo de annotations al servicio.

Agregar un archivo annotations.cds al directorio del servicio /srv, en el deberá de contener la interfaz del usuario de los servicios. Se puede utilizar varios archivos para separar por entidades del servicio o en uno solo, solo tiene que tener la extensión .cds y la referencia al servicio using. 

annotations

3.- Utilizar un generador Fiori para crear la aplicación.

Ahora ejecutamos el comando generador Fiori para crear la aplicación siguiente un asistente. 

Seleccionamos View –> Find Command

command

Buscamos Fiori y seleccionamos Open Application Generator.

open_fiori

Se abre el asistente, seleccionamos SAP Fiori elements y el Floorplan List Report Object Page, next.

floorplan

Seleccionamos Use a Local CAP Node Js Project, seleccionamos la carpeta y el servicio, next.

data_source

Seleccionamos la entidad Books, la cual es de lectura y no tiene navegación, luego next. 

entity_sel

La última pantalla del asistente es atributos, seleccionar un nombre del módulo, título y descripción. Seleccionar No en deployment configuration y No en FLP Configuration.

attributes

Bajamos con el Scroll y seleccionamos Yes en configuraciones avanzadas y Yes en Skip generator of associated annotations.cds file. Esto es porque nuestro archivo de annotaciones ya lo habiamos incluído en el directorio del servicio. Luego seleccionamos Finish.

Nota: Si seleccionamos No lo que hará es crear un archivo vacío annotations.cds en el directorio app.

skip

En la carpeta App se creará el directorio Books.  Ahora ejecutamos la aplicación. 

npm start
run_app

Seleccionamos el puerto localhost. 

localhost

Veremos la pantalla con el servicio como siempre, pero ahora incluyendo la aplicación creada. 

npm_start_app

Seleccionamos la aplicación /books/webapp/index.html

app_books

Aparecerá la pantalla del reporte, le damos al botón Go/Ir para traer los datos.  

app_books_rep

Y seleccionamos un registro para ver el detalle. Podemos regresar al reporte con la flecha. 

app_books_det

Ahora repito el punto 3 para otro servicio, en este caso yo tengo uno de ordenes, selecciono orders como entidad y en atributos capturamos orders como nombre del módulo.

data_source2
attributes2

Ahora vuelvo a instalar dependencias y pruebo. Nótese que ha cambiado el package.json del root también, se ha incluido las aplicaciones creadas. 

package_root

Seleccionamos el puerto localhost. 

npm_start_app2

Seleccionamos la aplicación orders /orders/webapp/index.html

app_orders

Como este servicio no es read only y tiene el soporte de draft aparece el botón para acciones CRUD. Por lo que podemos crear un registro. (Esto es in-memory aún). 

app_orders_rep

Capturo los datos de esta sencilla pantalla creada por las anotaciones. Y presiono Ctrl+S, Crear.   

app_orders_det

Al guardar los datos nos aparecerá que el registro se ha creado. 

objeto_creado

Y al consultar en la lista nos aparecerá el registro en el reporte. 

app_orders_rep2

Consideraciones finales

El deployment o implementación lo dejaré para otro post, ya que primero hay que agregarle al servicio autentificación y autorización, para posteriormente crear una aplicación Fiori.

Esta es solo una forma de desarrollar y probar localmente una interfaz de usuario en CAPM. 

Lección aprendida: Es necesario conocer bien el vocabulario UI para crear la interfaz de usuario que se entiende se ha diseñado de antemano, así como Javascipt para desarrollar tanto las validaciones, como las operaciones necesarias en la aplicación en el archivo del servicio extensión .js. 

Esta liga es de ayuda para conocer el vocabulario UI:

https://github.com/SAP/odata-vocabularies/

Fin.

Photo by Markus Spiske on Unsplash

Node.Js app using CAP Template BAS Cloud Environment Authentication and Authorization CAP App BAS Cloud Environment

Related Posts

SAP

Vue and React Apps using SAP ES5 Gateway on BAS

clear_code

SAP

SAP Fiori Standalone App using Northwind OData Service

SAP

Sybase License SAP NetWeaver AS ABAP

About me

Hola, me llamo Ara,  soy Ingeniera en Sistemas y SAP Sr. Consultant. Escribo acerca de tecnologías SAP en español. Networking: contáctame.

Newsletter

Categories

  • Programming
  • SAP
  • Web Design

Recent Posts

  • dean-pugh-lap-winEjercicio en PSEINT
    October 22, 2022
  • Vue and React Apps using SAP ES5 Gateway on BAS
    July 17, 2021
  • clear_codeSAP Fiori Standalone App using Northwind OData Service
    May 15, 2021

Tags

ABAP BAS Bitnami CAP Cloud Foundry Connectivity Database Explorer Destinations DEVELOPER Dominio ES5 Gateway FIORI GIT repository Google.Domains HANA Hosting HTML5 Launchpad MINISAP NetWeaver Node Js Northwind Open Guided Development Plugins PSeInt Recursos Gratis SAP SAP Cloud SAPUI5 Security Subscriptions Temas Trial Account UI URL VSC Wordpress wp-admin
  • Home
  • FAQ
  • Blog
  • Contacto
  • Términos
  • Privacidad
  • Contacto