SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS

SAP Cloud – OData

Solución
SAP Cloud – OData
Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS

1
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

Contenido
1. OData .................................................................................................................................... 3
1.1. Destino OData............................................................................................................... 3
1.2. Test Servicio OData en BAS .......................................................................................... 5
1.3. Configuración Proyecto con OData .............................................................................. 7
1.5. Filtros .......................................................................................................................... 19

2
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

1. OData

1.1. Destino OData

Iniciamos sesión desde la URL https://account.hanatrial.ondemand.com

Accedemos a nuestra subcuenta.

3
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

Accedemos al apartado “Connectivity” y seleccionamos “Destinations” para

crear un nuevo destino.

Realizamos la configuración para el destino Northwind, ingresando la

información necesaria en el formulario.

4
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

1.2. Test Servicio OData en BAS

En un navegador, accedemos a uno de los servicios que expone el mismo

odata.org llamado Northwind que se encuentra disponible en la URL
https://services.odata.org/V2/Northwind/Northwind.svc/Invoices y así
poder visualizar las entidades que tenemos disponible.
En nuestro Business Application Studio ingresamos a nuestra terminal para
realizar la prueba del servicio Northwind que acabamos de crear.

5
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

Ingresamos el comando “curl” y la URL del servicio y así recibir la respuesta.

Para descargar la respuesta que recibimos del servicio debemos ingresar

el comando “curl
https:/Northwind.dest/V2/Northwind/Northwind.svc/Invoices >>
Invoices.xml”.

6
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

1.3. Configuración Proyecto con OData

Ingresamos al fichero ui5.yaml para la modificación de la ruta.

specVersion: '1.0'
metadata:
name: 'invoices'
type: application
ui5Theme: sap_fiori_3
server:
customMiddleware:
- name: fiori-tools-proxy
afterMiddleware: compression
configuration:
ignoreCertError: false # If set to true, certificate error
s will be ignored. E.g. self-
signed certificates will be accepted
backend:
- path: /V2
url: http://northwind.dest
ui5:

7
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

path:
- /resources
- /test-resources
url: https://ui5.sap.com
version: # The UI5 version, for instance, 1.78.1. Empty
means latest version
- name: fiori-tools-appreload
afterMiddleware: compression
configuration:
port: 35729
path: webapp

8
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

También debemos ingresar al fichero ui5-local.ymal para cambiar la ruta del

“path” para el backend.

9
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

specVersion: '2.0'
metadata:
name: 'invoices'
type: application
framework:
name: SAPUI5
version: '1.90.0'
libraries:
- name: sap.f
- name: sap.m
- name: sap.suite.ui.generic.template
- name: sap.ui.comp
- name: sap.ui.core
- name: sap.ui.generic.app
- name: sap.ui.table
- name: sap.ushell
- name: themelib_sap_fiori_3
server:
customMiddleware:
- name: fiori-tools-proxy
afterMiddleware: compression
configuration:
ignoreCertError: false # If set to true, certificate error
s will be ignored. E.g. self-
signed certificates will be accepted
backend:
- path: /V2
url: http://northwind.dest
- name: fiori-tools-appreload
afterMiddleware: compression
configuration:
port: 35729
path: webapp

10
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

Luego debemos acceder al archivo manifest.json para agregar el

dataSources ya que es el que apunta al servicio OData que expone la
información a las identidades.

11
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

Ahora debemos agregar el modelo para apuntar al dataSource que

configuramos anteriormente.

{
"_version": "1.32.0",
"sap.app": {
"id": "logaligroup.invoices",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"resources": "resources.json",
"ach": "ach",
"dataSources": {
"mainService": {
"uri": "/V2/Northwind/Northwind.svc/",
"type": "OData",

12
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

"settings": {
"odataVersion": "2.0",
"localUri": "localService/metadata.xml"
}
}
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "sap-icon://task",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"flexEnabled": false,
"rootView": {
"viewName": "logaligroup.invoices.view.MainView",
"type": "XML",
"async": true,
"id": "MainView"
},
"dependencies": {
"minUI5Version": "1.66.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {}
}

13
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "logaligroup.invoices.i18n.i18n"
}
},
"": {
"dataSource": "mainService",
"preload": true
}
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "logaligroup.invoices.view",
"controlAggregation": "pages",
"controlId": "app",
"clearControlAggregation": false
},
"routes": [
{
"name": "RouteMainView",
"pattern": "RouteMainView",

14
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

"target": [
"TargetMainView"
]
}
],
"targets": {
"TargetMainView": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewId": "MainView",
"viewName": "MainView"
}
}
}
}
}

15
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

1.4. Lista
Ingresamos al archivo de la vista principal de la aplicación
“MainView.view.xml” para agregar un panel y el listado para visualizar la
información que llega de la petición del servicio que se está utilizando.

<Panel>
<List id="invoicesList"
headerText="{i18n>invoicesHead
erList}"
class="sapUiResponsiveMargin"
width="auto"
items="{/Invoices}">
<items>
<ObjectListItem title="{
ShipName} - {Country}"
number="
{ parts : [ {path: 'ExtendedPrice'},

{path: 'selectionScreen>/Currency'}],

type: 'sap.ui.model.type.Currency',

formatOptions: {

16
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

showMeasure : false
}}"

numberUnit="{selectionScreen>/Currency}"

numberState="{= ${ExtendedPrice} > 100 ? 'Success' : 'Warning'}"

>
</ObjectListItem>
</items>
</List>
</Panel>

Luego debemos agregar el texto en el fichero i18n.properties

17
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

Para la ejecución de la aplicación seleccionamos Run Configurations y luego

Run Module.

Podemos observar que ya llega la información que solicitamos para la

aplicación.

18
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

1.5. Filtros

Continuamos con la misma aplicación ya que se agregará la lógica de tipo

javascript del botón “Filter”.
Accedemos al controlador de la vista donde vamos a implementar la lógica
en el archivo “MainView.controller.js”.
Primero agregamos las dependencias que vamos a utilizar.

19
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

Luego debemos obtener los datos que tenemos en la pantalla de selección

que realizamos en la función onInit.

sap.ui.define([

"sap/ui/core/mvc/Controller",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator"
],
/**
* @param {typeof sap.ui.core.mvc.Controller} Controller
* @param {typeof sap.ui.model.Filter} Filter
* @param {typeof sap.ui.model.FilterOperator} FilterOperato
r
*/
function (Controller, Filter, FilterOperator) {
"use strict";

return Controller.extend("logaligroup.invoices.controlle
r.MainView", {

onInit: function () {

20
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

const oJSONModel = new sap.ui.model.json.JSONMod

el();
const oView = this.getView();
oJSONModel.loadData("./model/SelectionScreenMenu
.json");
oView.setModel(oJSONModel, "selectionScreen");
},

onFilter: function (oEvent) {

const oData = this.getView().getModel("selection
Screen").getData();
let filters = [];

if (oData.ShipName !== "") {

filters.push(new Filter("ShipName", FilterOpe
rator.Contains, oData.ShipName));
}

if (oData.CountryKey !== "") {

filters.push(new Filter("Country", FilterOper
ator.EQ, oData.CountryKey));
}

const oList = this.getView().byId("invoicesList"

);
const oBinding = oList.getBinding("items");
oBinding.filter(filters);
},

onClearFilter: function () {
const oModelSelScreen = this.getView().getModel(
"selectionScreen");
oModelSelScreen.setProperty("/ShipName", "");
oModelSelScreen.setProperty("/CountryKey", "");

const oList = this.getView().byId("invoicesList"

);
const oBinding = oList.getBinding("items");

21
 SAP Cloud – Desarrollo de aplicaciones Fiori con SAPUI5 en SAP BAS
SAP Cloud – OData

oBinding.filter([]);
}
});
});

Vista final de la aplicación.

22