En este Post aprenderas como consumir un servicio API REST cada "x" segundos en un Custom Tile.
Un Custom Tile no tiene por defecto en su configuración o creación un medio para definir un servicio. Por esta razón es necesario crear una función dentro de si misma y ejecutarlo cada cierto tiempo.
Continuando con la primera parte del Post que publiqué hace un mes. En esa oportunidad enseñé a crear un Custom Tile y publicarlo en Portal. En esta ocasión enseñaré a consumir un servicio API REST para que el TIle sea dinamico.
Primero comenzamos cambiando algunos datos en el view:
Definimos un nuevo titulo al Tile "Argentina" y un subtitulo "Buenos Aires". Por el momento vamos a dejar estos valores "en duro".
Los otros valores que cambiamos fueron los de "HarveyBallMicroChart".
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:micro="sap.suite.ui.microchart"
controllerName="cl.paguilas.flp_tile_demo.controller.App" displayBlock="true">
<GenericTile header="Argentina" subheader="Buenos Aires">
<tileContent>
<TileContent>
<content>
<micro:HarveyBallMicroChart showTotal="false" total="12" size="Responsive" totalScale="Hr">
<micro:items>
<micro:HarveyBallMicroChartItem fractionLabel="{/desc}" fraction="{/hora}" color="Good" fractionScale="Hr"/>
</micro:items>
</micro:HarveyBallMicroChart>
</content>
</TileContent>
</tileContent>
</GenericTile>
</mvc:View>El segundo paso es crear 2 funciones. La primera se encarga de llamar el servicio cada "x" segundos.
TimerTile: function () {
var self = this;
var sRefresh = 5; //Segundos cada cuanto se actualizará
this.intervalHandle = setInterval(function () {
self.getInfoTile();
}, sRefresh * 1000);
},La segunda función es el consumo del servicio REST.
getInfoTile: function () {
var that = this;
$.ajax({
type: "GET",
url: "https://worldtimeapi.org/api/timezone/America/Argentina/Buenos_Aires",
success: function (data) {
var d = data.datetime.split("T")[1].split(".")[0];
var a = d.split(":");
var info = {};
if (Number(a[0]) > 12) {
info.hora = a[0] -= 12;
info.desc = d;
} else {
info.hora = a[0];
info.desc = d;
}
that._oTileModel.setData(info);
},
error: function (error) {
console.log("Tile: ", error);
}
});
},Es posible que el IDE te señale un error en la url pero es por el hardcoded url. No debería ser mayor problema. Pero si te molesta puedes desactivarlo en "Project settings", aunque lo correcto seria utilizar "Destination"
Continuando con el proyecto solo falta agregar estas funciones en "onInit" y publicar una actualización.
onInit: function () {
this._oTileModel = new sap.ui.model.json.JSONModel([]);
this.getView().setModel(this._oTileModel);
this.TimerTile();
},Una vez publicada la actualización veremos algo así;
Con esto ya tenemos nuestro Tile "Dinamico" que se actualiza cada 5 segundos. Pero que pasa si tenemos un cliente que es un tanto inquieto y quiere cambiar este tiempo cada mes. Si bien podríamos hacer esto desde una tabla y consumirlo desde un servicio, esta vez voy a señalar como dejarlo configurable desde Fiori Configuration Cockpit.
Primero cambiamos un poco el código:
TimerTile: function () {
var self = this;
var sRefresh = 5; //Segundos cada cuanto se actualizará
try {
//Código que busca propiedades del Tile
sRefresh = Number.isInteger(Number(self.getOwnerComponent().getComponentData().properties.refresh)) ? self.getOwnerComponent()
.getComponentData().properties.refresh : 5;
} catch (error) {
console.log("TimerTile: ", error);
}
this.intervalHandle = setInterval(function () {
self.getInfoTile();
}, sRefresh * 1000);
},En realidad el código anterior pregunta si la propiedad existes. Si es verdadero actualizará el valor sRefresh. Si no existe dejará por defecto 5.
Una vez actualizado el código, publicar la aplicación nuevamente e ir al Fiori Configuration Cockpit . Buscamos la aplicación y le damos editar para añadir un "Custom Properties" con el mismo nombre que pusimos en el código "refresh".
Con esto nuestro Tile se actualizará cada 1 segundo. Para verificar puedes mirar en la consola:
Las "Custom Properties" Pueden servir para crear varios Tiles desde solo un código por ejemplo:
Cambiamos el código en onInit:
onInit: function () {
this._oTileModel = new sap.ui.model.json.JSONModel([]);
this.getView().setModel(this._oTileModel);
this.TimerTile();
//Obtenemos las "Custom Propperties"
var h = this.getOwnerComponent().getComponentData().properties.header;
var sh = this.getOwnerComponent().getComponentData().properties.subheader;
var sHeader = h ? h : "No Ingresado",
sSubheader = sh ? sh : "No Ingresado";
//Aplicamos al GenericTile las propiedades
var oGTile = this.getView().getContent()[0];
oGTile.setHeader(sHeader);
oGTile.setSubheader(sSubheader);
}Y cambiamos el código que consume el servicio:
getInfoTile: function () {
var that = this;
//Obtenemos las "Custom Propperties"
var h = this.getOwnerComponent().getComponentData().properties.header;
var sh = this.getOwnerComponent().getComponentData().properties.subheader;
var info = {};
$.ajax({
type: "GET",
url: "https://worldtimeapi.org/api/timezone/America/" + h + "/" + sh.split(" ").join("_"), //El split y join es por que el servicio necesita un _
success: function (data) {
var d = data.datetime.split("T")[1].split(".")[0];
var a = d.split(":");
if (Number(a[0]) > 12) {
info.hora = a[0] -= 12;
info.desc = d;
} else {
info.hora = a[0];
info.desc = d;
}
that._oTileModel.setData(info);
},
error: function (error) {
console.log("Tile: ", error);
info.hora = 0;
info.desc = "ERR";
that._oTileModel.setData(info);
}
});
}Con estos cambios vamos a Fiori Configuration Cockpit y agregamos nuevas caracteristicas al Tile:
Podemos crear una copia del Tile creado y cambiar los campos header y subheader para mostrar otros datos.
Y ¡LISTO! Ya tenemos nuestros Custome Tiles con consumo de datos desde una API REST
El poder de los Custom Tile sera tan Dinámico como uno quiera. por ejemplo podríamos definir mediante una Custom Propertie el tipo de grafico que se mostrará, colores, tamaños, etc.
Cualquier duda sobre el contenido del Post publicado no dude en preguntar. Para preguntas generales sobre este o distintos productos SAP favor realizarlas en aquí
- SAP Managed Tags:
4 Comments
