Creación tabla dinámica a partir de XMLModel

Primeramente en nuestro hcp crearemos un proyecto a través de New/quick start with layout.

Luego abrimos la Vista1 que viene por defecto y borramos toda la tabla que viene por defecto para crear nuestra tabla dinámica. borra desde <table> hasta </table>.

Nos vamos al tab Page y le ponemos un identificador.

Ejecutamos y esto es lo que sale, el vbox y poco más.

Abro el manifest y añado en las dependencias estas dos librerías ya que voy a utilizar una tabla y cosillas del commons, esto se añade sobre "sap.ui5" apartado "dependencies".

Como voy a usar un XMLModel me voy al openui5 sdk y busco XMLModel para ver el módulo donde se encuentra y poder referenciarlo en mi código fuente.

Ahora abrimos el controller y añadimos la referencia a XMLModel y nos creamos el onInit con el código para pintar la tabla donde primeramente definimos el modelo luego pintamos la tabla y hacemos el binding del modelo a la tabla.

________________________________________________________________

sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/xml/XMLModel"
], function(Controller, XMLModel) {
"use strict";

return Controller.extend("TablaDinamica.controller.View1", {

onInit: function() {

var oModel = new XMLModel();

// Me creo el modelo XML
oModel.setXML("<?xml version=\"1.0\" encoding=\"UTF-8\"?>" +
"<productos>" +
"<producto>" +
"<id>A</id>" +
"<name>Zapatos</name>" +
"<currency>USD</currency>" +
"<price>105</price>"+
"<URL>www.zapatos.com</URL>" +
"</producto>" +
"<producto>" +
"<id>B</id>" +
"<name>Camisa</name>" +
"<currency>USD</currency>" +
"<price>10</price>"+
"<URL>www.camisa.com</URL>" +
"</producto>" +
"</productos>"
);

//definimos nueva tabla
var oTable = new sap.ui.table.Table({
title: "Tabla dinámica desde un XML model"
});

//añado las columnas a la tabla una a una
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Producto"
}),
template: new sap.ui.commons.TextView().bindProperty("text", "name/text()")
}));

// añadimos columna a la tabla.
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Página"
}),
template: new sap.ui.commons.TextView().bindProperty("text", "URL/text()")
}));

// añadimos columna a la tabla.
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Precio"
}),
template: new sap.ui.commons.TextView().bindProperty("text", "price/text()")
}));

//Enlazamos el modelo con la tabla diciendo que enlace las filas de producto
oTable.setModel(oModel);
oTable.bindRows({
path: "/producto/"
});

// Pillamos el objeto página y le asignamos como contenido la tabla.
var oPage = this.byId("mipagina");
oPage.addContent(oTable);
}

});

});


______________________________________________________________________________

Ejecutamos nuevamente y esta es la tabla que nos saldría.