I'm new to the UI5 developping tool and I'm trying to bind a colorisation rules function with the regions that compose a map.
The colorization function named oColor()
is located in the formatter.js (that I call through the controller).
The map is successfully drown in the view.js (NB : not .XML) using the sap.ui.vbm.AnalyticMap()
function and a country.json file of the concerned era.
The OData is set in the init
section of the component.js with the following function:
var oModelInputless = new sap.ui.model.odata.v2.ODataModel({
serviceUrl: "http://server:port/path/Inputless.xsodata",
json: true,
defaultBindingMode: sap.ui.model.BindingMode.TwoWay
});
sap.ui.getCore().setModel(oModelInputless, "/Inputless");
It contains an entity named Data. The useful properties are named : id, dept and ratio.
I would like to colorize the regions of my Map according to the ratio (which should be recieved as a parametter by the function oColor()
but I have no idea how to do it.
This is my view.js:
sap.ui.jsview("package.view.main", {
/* Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf controller.main
*/
getControllerName: function() {
return "Laposte.controller.main";
},
/* Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf controller.main
*/
createContent: function(oController) {
// set the geojson location to some data
jQuery.sap.require("sap.ui.vbm.AnalyticMap");
// Map GeoJSON
sap.ui.vbm.AnalyticMap.GeoJSONURL = "./map/country.json";
var oRegion = new sap.ui.vbm.Region({
code: "{id}",
color: {
parts: [
{path: "ratio"}
],
formatter: oController.formatter.oColor
},
tooltip: "ratio"
});
var oVBI1 = new sap.ui.vbm.AnalyticMap('vbi', {
width: "100%",
height: 1000,
plugin: false,
centerPosition: "2.2137;46.2276",
zoomlevel: 6,
regions : {
path : "/Inputless/Data",
template: oRegion
}
});
var oPage = new sap.m.Page({
title: "{i18n>title}",
content: [oVBI1]
});
var app = new sap.m.App("myApp", {
initialPage: "oPage"
});
app.addPage(oPage);
return app;
}
});
I was told to use the bindAggregation
method and parameters : {select DEPT,QSperc}
in the parameter regions of my map oVBI1
but I don't know how to do this
I will answer my own question as I got rid of the problem I've submitted to you:
I had to load everything in the Component.js first but not in the view.js, this way:
Component.js:
var oModelInputless = new sap.ui.model.odata.v2.ODataModel("http://server:port/path/Inputless.xsodata",{
json: true,
useBatch: false,
defaultBindingMode: "None"
});
sap.ui.getCore().setModel(oModelInputless, "Inputless");
//set the device model
this.setModel(models.createDeviceModel(), "device");
//instanciation the map in the Component.js but not in the view
sap.ui.getCore().byId("vbi").setModel(oModelInputless, "Inputless");
sap.ui.getCore().byId("vbi").bindAggregation("regions", {
path: "Inputless>/Data",
template: sap.ui.getCore().byId("region"),
parameters: {
select: "dpt,ratio"
}
});
view.js:
/* Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf controller.main
*/
getControllerName: function() {
return "package.controller.main";
},
/* Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf controller.main
*/
createContent: function(oController) {
// set the geojson location to some data
jQuery.sap.require("sap.ui.vbm.AnalyticMap");
// Map GeoJSON
sap.ui.vbm.AnalyticMap.GeoJSONURL = "./map/country.json";
//region template
var oRegion = new sap.ui.vbm.Region("region", {
code: "{Inputless>DEPT}",
color: { // fixé en rajoutant data-sap-ui-bindingSyntax="complex" au index.html
parts: ["Inputless>QSperc"],
formatter: oController.formatter.qsColor
},
tooltip: "{Inputless>QSperc}"
});
var oVBI1 = new sap.ui.vbm.AnalyticMap('vbi', {
width: "100%",
height: 1000,
plugin: false,
centerPosition: "2.2137;46.2276",
zoomlevel: 6,
vos: [oSpots]
});
var oPage = new sap.m.Page({
title: "{i18n>title}",
content: [oVBI1]
});
var app = new sap.m.App("myApp", {
initialPage: "oPage"
});
app.addPage(oPage);
return app;
}
});
Hope it helps somebody.