Aracely Chávez
My blog
  • Home
  • FAQ
  • Blog
  • Contacto
bas
May 1 2021

SAP Easy-UI5 App using Northwind OData Service

Aracely Chavez SAP Destinations, FIORI, Northwind, SAPUI5, VSC

Crear un FIORI app con el generador EASY-UI5 usando un servicio proporcionado por Northwind en el ambiente de desarrollo local VSCode. 

Prerequisitos: 

  • Una cuenta trial SAP Cloud BTP.
  • Instalar herramientas de desarrollo local (Windows).
  • Crear un destination hacia el servicio Northwind.

1.- Crear la aplicación FIORI con el generador EASY-UI5.

Abrir una sesión command de Windows e instalar el generador.

npm install -g yo generator-easy-ui5

Crear un directorio de proyecto e invocar el generador Yeoman.

yo easy-ui5 project

Responder los parámetros del generador.

easy1

Abrir el proyecto en Visual Studio Code.

code tutorial.products

Reemplazar el contenido del archivo i18n en uimodule/webapp/i18n/i18n_en.properties.

title=Coming soon!
appTitle=Product List
appDescription=App Description

Revisar el proyecto hasta el momento. 

npm start
easy2
easy3

2.- Agregar una vista a la aplicación.

Añadir una vista que despliegue una lista de productos. Abrir una terminal y ejecutar:

yo easy-ui5 project newview
easy4

Eliminar valor del pattern en el archivo uimodule/webapp/manifest.json 

easy5

Eliminar el contenido del tag <App> en el archivo webapp/view/Mainview.view.xml 

easy6

Reemplazar el contenido del tag <App> en el archivo webapp/view/Products.view.xml.

easy7

3.- Agregar la fuente de datos.

Para completar la lista con elementos, vincule una fuente de datos a la aplicación. Para ello, existe otro subgenerador:

yo easy-ui5 project newmodel
easy8

Modificar en el archivo uimodule/webapp/xsapp.json el destination. 

{
  "welcomeFile": "/flpSandbox.html",
  "routes": [
    {
      "source": "^/V2/(.*)$",
      "authenticationType": "none",
      "destination": "Northwind",
      "csrfProtection": false
    },
    {
      "source": "^(.*)",
      "target": "$1",
      "authenticationType": "xsuaa",
      "service": "html5-apps-repo-rt"
    }
  ]
}

Modificar en el archivo uimodule/ui5.yaml el array de destination. 

destinations:
  - name: "Northwind"
    url: "https://services.odata.org/"

Cancelar la ejecución anterior con ctrl+ c y volver a ejecutar la aplicación para ver los cambios.

npm start
easy9

4.- Agregar una vista de detalle de la aplicación.

Añadir una vista que despliegue el detalle del producto. Abrir una terminal y ejecutar:

yo easy-ui5 project newview
easy10

Ajustar el valor del pattern en el archivo uimodule/webapp/manifest.json 

{
  "name": "ProductDetail",
  "pattern": "Product/{productId}",
  "target": [
    "TargetProductDetail"
  ]
}

Cambiar el tipo de lista y el evento listener en el archivo uimodule/webapp/view/Products.view.xml 

easy11

Añadir lógica de navegación en el archivo uimodule/webapp/controller/Products.controller.js

sap.ui.define([
  "tutorial/products/controller/BaseController"
], function (Controller) {
  "use strict";

  return Controller.extend("tutorial.products.controller.Products", {

    handleListItemPress: function (oEvent) {
      var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
      var selectedProductId = oEvent.getSource().getBindingContext().getProperty("ProductID");
      oRouter.navTo("ProductDetail", {
        productId: selectedProductId
      });
    }
  });
});

Añadir lógica al detalle en el archivo uimodule/webapp/controller/ProductDetail.controller.js

sap.ui.define([
  "tutorial/products/controller/BaseController"
], function(Controller) {
  "use strict";

  return Controller.extend("tutorial.products.controller.ProductDetail", {

    onInit: function () {
      const oRouter = sap.ui.core.UIComponent.getRouterFor(this);
      oRouter.getRoute("ProductDetail").attachMatched(this._onRouteMatched, this);
    },

    _onRouteMatched: function (oEvent) {
      const iProductId = oEvent.getParameter("arguments").productId;
      const oView = this.getView();
      oView.bindElement({
        path: "/Products(" + iProductId + ")",
        events: {
          dataRequested: function () {
            oView.setBusy(true);
          },
          dataReceived: function () {
            oView.setBusy(false);
          }
        }
      });
    },

  });
});

Añadir declaraciones requeridas al archivo uimodule/webapp/view/ProductDetail.view.xml

easy12

Cancelar la ejecución anterior con ctrl+ c y volver a ejecutar la aplicación para ver los cambios.

npm start
easy13

4.- Enriquecer la página de lista de productos.

Añadir smart controls en el archivo uimodule/webapp/view/Products.view.xml

easy14

Añadir smart controls en el archivo uimodule/webapp/view/ProductDetail.view.xml

easy15

Reemplazar Header de la vista en el archivo uimodule/webapp/controller/ProductDetail.controller.js

sap.ui.define([
  "tutorial/products/controller/BaseController",
  "sap/m/MessageToast"
], function (Controller, MessageToast) {
  "use strict";

Y el siguiente código después de método _onRouteMatched

addToCart: function () {
  MessageToast.show("Added to cart");
},

markAsFav: function (evt) {
  const oButton = evt.getSource();
  if (oButton.getIcon() === "sap-icon://unfavorite") {
    oButton.setIcon("sap-icon://favorite");
    MessageToast.show("Added to favorites");
    return;
  }

  oButton.setIcon("sap-icon://unfavorite");
  MessageToast.show("Removed from favorites");
},

Añadir secciones al detalle. Insertar el código después del tag  </uxap:headerContent> en la vista.

easy16
easy17

Actualizar la definición de datos, para mostrar proveedores y categorías, en el método del controlador de la página de detalle de producto: uimodule/webapp/controller/ProductDetail.controller.js.

_onRouteMatched: function (oEvent) {
  const iProductId = oEvent.getParameter("arguments").productId;
  const oView = this.getView();
  oView.bindElement({
    path: "/Products(" + iProductId + ")",
    parameters: {
      expand: "Supplier,Category"
    },
    events: {
      dataRequested: function () {
        oView.setBusy(true);
      },
      dataReceived: function () {
        oView.setBusy(false);
      }
    }
  });
},

Añadir el siguiente código después del método markAsFav para mostrar la foto del producto. 

trimSuperfluousBytes: function (sVal)
  if (typeof sVal === "string") {
    const sTrimmed = sVal.substr(104);
    return "data:image/bmp;base64," + sTrimmed;
  }
  return sVal;
},

5.- Añadir información de Jerarquía.

Añadir el siguiente método al archivo uimodule/webapp/controller/BaseController.js después del método onNavBack para utilizar la utilidad de jerarquía del Shellbar. 

addHistoryEntry: (function() {
  let aHistoryEntries = [];

  return function(oEntry, bReset) {
    if (bReset) {
      aHistoryEntries = [];
    }

    var bInHistory = aHistoryEntries.some(function(oHistoryEntry) {
      return oHistoryEntry.intent === oEntry.intent;
    });

    if (!bInHistory) {
      aHistoryEntries.unshift(oEntry);
      this.getOwnerComponent().getService("ShellUIService").then(function(oService) {
        oService.setHierarchy(aHistoryEntries);
      });
    }
  };
})(),

En el archivo uimodule/webapp/manifest.json añadir una nueva configuración a la propiedad sap.ui5 después de sección models.  

{
  "sap.app": {},
  "sap.ui": {},
  "sap.ui5": {
    "models": {},
    "services": {
      "ShellUIService": {
        "factoryName": "sap.ushell.ui5service.ShellUIService",
        "lazy": false,
        "settings": {
          "setTitle": "auto"
        }
      }
    },
  }
}

En el archivo uimodule/webapp/controller/Products.controller.js añadir una nuevo item en el controlador en la vista de la lista después de la función handleListItemPress.

onInit : function () {
  this.addHistoryEntry({
    title: "All Products",
    icon: "sap-icon://product",
    intent: "#display-uimodule"
  }, true);
},

En el archivo uimodule/webapp/controller/ProductDetail.controller.js añadir una nuevo item en el controlador en la vista de detalle, cambiar el dataReceived dentro del método _onRouteMatched.

_onRouteMatched: function (oEvent) {
  const iProductId = oEvent.getParameter("arguments").productId;
  const oView = this.getView();
  oView.bindElement({
    path: "/Products(" + iProductId + ")",
    parameters: {
      expand: "Supplier,Category"
    },
    events: {
      dataRequested: function () {
        oView.setBusy(true);
      },
      dataReceived: function () {
        oView.setBusy(false);
        this.addHistoryEntry({
          title: "Product - " + oView.getBindingContext().getProperty("ProductName"),
          icon: "sap-icon://product",
          intent: "#display-uimodule&/Product/" + iProductId
        });
      }.bind(this)
    }
  });
},

6.- Probar la aplicación.

Cancelar la ejecución anterior con ctrl+ c y volver a ejecutar la aplicación para ver los cambios.

npm start

Lista de productos.

easy20

Detalle de productos.

easy21

7.- Build and Deploy.

En la terminal ejecutar el siguiente comando para crear el archivo MTA.

npm run build:mta

Con este otro comando hacemos el deploy del proyecto. 

cf deploy mta_archives/products_0.0.1.mtar

Finalmente consultamos el Link de la aplicación con el comando: 

cf html5-list -di products_destination -u --runtime launchpad

Lesson learned:

Creo que es un generador para un programador avanzado que requiere empezar rápidamente el desarrollo. A diferencia de otros tutoriales la entrega final es muy completa, casi para usuario final. 

Tutorial original y repositorio Git ejemplo.

 

FIN.

SAP Fiori App using SAP Gateway Demo System Sybase License SAP NetWeaver AS ABAP

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