A Simple example to convert data from a model.
{
"article" : {
"caption" : "hello world"
}
}
/**
* Simple Formatter Controller.
*/
sap.ui.define(['pks/ui5strap/viewer/Controller', 'sap/ui/model/json/JSONModel'], function(Controller, JSONModel){
"use strict";
var controllerImpl = {
/**
* Called when the view has been initialized.
*/
onInit : function(){
//We make the data available as model in the view.
var oData = {
"article" : {
"caption" : "hello world"
}
};
var oModel = new JSONModel(oData);
this.getView().setModel(oModel, "DATA");
},
/**
* Formatter function to transform "hello world" to "Hello, world!"
*/
formatCaption : function(sCaption){
var aParts = sCaption.split(/\s/);
return jQuery.sap.charToUpperCase(aParts[0]) + ", " + aParts[1] + "!";
}
};
//Return constructor
return Controller.extend("mycompany.helloworld.controller.SimpleFormatter", controllerImpl);
});
<!-- Formatter Example View -->
<sapUiCoreMvc:View controllerName="mycompany.helloworld.controller.SimpleFormatter" xmlns="pks.ui5strap.bs3" xmlns:sapUiCoreMvc="sap.ui.core.mvc"
xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
<!-- START Page Content -->
<Container type="Website">
<!-- We bind the caption to the Heading's text property. The controller's function formatCaption is used to convert the value. -->
<Heading text="{path:'DATA>/article/caption', formatter:'.formatCaption'}" level="1" />
</Container>
<!-- END Page Content -->
</sapUiCoreMvc:View>
Formatter example with multiple parts.
{
"person" : {
"firstName" : "John",
"lastName" : "Doe"
}
}
/**
* Multiple Parts Controller.
*/
sap.ui.define(['pks/ui5strap/viewer/Controller', 'sap/ui/model/json/JSONModel'], function(Controller, JSONModel){
"use strict";
var controllerImpl = {
/**
* Called when the view has been initialized.
*/
onInit : function(){
//We make the data available as model in the view.
var oData = {
"person" : {
"firstName" : "John",
"lastName" : "Doe"
}
};
var oModel = new JSONModel(oData);
this.getView().setModel(oModel, "DATA");
},
/**
* Formatter function to join the person's first and last name.
*/
formatName : function(sFirstName, sLastName){
return sFirstName + " " + sLastName;
}
};
//Return constructor
return Controller.extend("mycompany.helloworld.controller.MultiplePartsFormatter", controllerImpl);
});
<!-- Formatter Example View -->
<sapUiCoreMvc:View controllerName="mycompany.helloworld.controller.MultiplePartsFormatter" xmlns="pks.ui5strap.bs3" xmlns:sapUiCoreMvc="sap.ui.core.mvc"
xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
<!-- START Page Content -->
<Container type="Website">
<!-- We bind the caption to the Heading's text property. The controller's function formatCaption is used to convert the value. -->
<Heading text="{parts:[{path:'DATA>/person/firstName'}, {path:'DATA>/person/lastName'}], formatter:'.formatName'}" level="1" />
</Container>
<!-- END Page Content -->
</sapUiCoreMvc:View>
© 2013 - 2021 PKSoftware.de