Menu
fiori

SAP Fiori App using CAP service BAS Cloud Environment

, , ,

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: 

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

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

Related Posts