Aracely Chávez
My blog
  • Home
  • FAQ
  • Blog
  • Contacto
fiori
April 7 2021

SAP Fiori App using CAP service BAS Cloud Environment

Aracely Chavez SAP BAS, CAP, FIORI, Node Js

Generar FIORI app usando un servicio creado 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.
  • Asignar autorización a una aplicación Node.js usando Cloud Application Programming Model.
  • Crear un destination para un servicio Node.js usando Cloud Applicaction Programming Model. 

Justificación:

Crear una aplicación FIORI Freestyle para el servicio de Books y una aplicación FIORI elements para creación de Órdenes. 

1.- Abrir una sesión del tipo FIORI en el Business Application Studio.

Crear un espacio ahora del tipo FIORI y acceder desde ahí al Business Application Studio.

dev_spaces

2.- Generar aplicación Freestyle.

Seleccionar la opción Crear con Template.

template_cap

1.- Abrir una sesión del tipo FIORI en el Business Application Studio.

Crear un espacio ahora del tipo FIORI y acceder desde ahí al Business Application Studio.

Seleccionar la opción SAP Fiori application. 

fiori_app

Seleccionar la opción SAPUI5 freestyle con el diseño SAP Fiori Worklist Application. Presionar Next.

floor_fs

Seleccionar en Data Source Connect to an OData service y en URL del destination creado en el post anterior y agregando el endpoint. Presionar Next. 

data_source

Seleccionar la entidad y los datos a mostrar en la primera pantalla de la aplicación. Presionar Next.

entity_sel

Capturar los atributos del proyecto. Presionar Finish.

proj_attributes

Ahora se instalarán las dependencias del proyecto (esperar a que aparezca el último mensaje).

dependencies
generated
later_use

3.- Crear Aplicación Fiori Elements.

Crear otra aplicación FIORI con el generador, seleccionando otro tipo y floorplan.

También se puede acceder desde View –> Find Command… 

command

Y luego View –> Fiori: Open Application Generator.

open_fiori

Seleccionar el tipo de aplicación SAP Fiori elements con el floorplan List Report Object.

floor_fe

Seleccionar en Data Source Connect to an OData service y en URL del destination creado en el post anterior y agregando el endpoint. Presionar Next. 

data_source

Seleccionar la entidad del servicio. 

data_source_ord

Capturar los atributos del proyecto. Presionar Finish.

proj_attr_ord

¿Por qué No escojo Add deployment configuration? y me ahorro el paso 6? Porque cuando hago esto no me incluye correctamente el destination en el archivo xs-app.json del módulo al menos a la fecha en que escribo este post. Tal vez en actualizaciones posteriores el template este corregido. 

Ahora se instalarán las dependencias del proyecto (esperar a que aparezca el último mensaje).

dependencies
generated
later_use

4.- Ajustes al manifest.json de los proyectos.

Abrir cada uno de los proyectos y ajustar el archivo webapp/manifest.json

Primero agregar crossNavigation en la sección extra de “sap.app”: { y antes de “sap.ui”: {

"crossNavigation": {
    "inbounds": {
        "intent1": {
            "signature": {
                "parameters": {},
                "additionalParameters": "allowed"
            },
            "semanticObject": "Object",
            "action": "display",
            "title": "{{appTitle}}",
            "info": "{{appTitle}}",
            "subTitle": "{{appSubTitle}}",
            "icon": "sap-icon://account"
        }
    }
}
crossnav

Revisar que exista dentro del webapp/manifest.json las siguientes líneas, si no aparecen, agregarlas. En service debe ir el correspondiente nombre del proyecto.

    "sap.cloud": {
        "public": true,
        "service": "productsorders"
    }

5.- Probar las aplicaciones antes del deployment.

Seleccionar la carpeta webapp y presionar la opción Preview Application.

preview_app

Aparecerá un recuadro, seleccionar start.

select_start

Se abrirá automáticamente el puerto http://localhost:8080 con la aplicación a probar.

Prueba de Books (Fiori Freestyle)

Nota: Le agregué un pequeño código de filtro para probar el freestyle.

test_fiori_freestyle

Prueba de Orders (Fiori Elements)

Este por ya tener desde el servicio las anotaciones correspondientes, ya aparecen las columnas, las acciones CRUD y el detalle en segunda página.

test_fiori_element

6.- Agregar configuración de deployment.

Abrir una nueva terminal dentro de cada proyecto y ejecutar el siguiente comando.

npx fiori add deploy-config

Contestar las preguntas del wizard (utilizar las flechas del teclado para seleccionar las opciones) de la siguiente manera:

Target: Cloud Foundry

Destination name: CAPBookshop – (en este caso)

Add application to managed application router: Yes

Managed app significa que la gestión de la aplicación es controlada por SAP, lo cual ya incluirá deployment, seguridad y direccionamiento. Además se puede utilizar el servicio Launchpad.

config_deploy

Revisar que exista dentro del xs-app.json de cada proyecto la referencia al destination. De lo contrario al ejecutar la aplicación marcará File Not Found.

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/catalog/(.*)$",
      "target": "/catalog/$1",
      "destination": "CAPBookshop",
      "authenticationType": "xsuaa",
      "csrfProtection": false
    },
    {
      "source": "^/resources/(.*)$",
      "target": "/resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^/test-resources/(.*)$",
      "target": "/test-resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

7.- Build & deployment

Seleccionar el archivo creado por el wizard mta.yaml y ejecutar la opción Build MTA Project.

fiori_build

En este punto es importante verificar estar firmados a cloud foundry.

Seleccionar el archivo creado en el directorio mta_archives y ejecutar Deploy MTA Archive. 

fiori_deploy

8.- Revisar las aplicaciones HTML5 desde el cockpit BTP.

Dentro de la subcuenta del trial seleccionar la opción HTML5 Applications. 

Aparecerá el listado de las aplicaciones HTML5 creadas en cloud foundry. 

html5

Desde ahí mismo se pueden ejecutar para probar que todo este correcto con las aplicaciones, otra forma es utilizar el servicio Launchpad tambien en trial de SAP BTP en cloud. 

FIN.

Photo by Dlanor S on Unsplash

Destination using CAP service on BAS Cloud Environment MTA Managed Fiori App using CAP service 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