As I work on creating a custom Control and binding data to it, I encounter an issue where upon clicking a button, the data in the Model is changed but not reflected in the DOM. Being new to SAP-UI5, I am struggling to identify the root cause of this problem. Any guidance or support would be greatly appreciated.
Here is the code snippet I am currently using:
var data = { person : [{firstName:"Bruce", lastName:"Wayne"}] };
//Setting up the Model
var model = new sap.ui.model.json.JSONModel(data);
sap.ui.getCore().setModel(model);
//Defining Renderer
jQuery.sap.declare("PersonRenderer");
PersonRenderer={render : function (renderManager, control){
renderManager.write("<ul style = 'margin:20px 50px;'");
renderManager.writeControlData(control);
renderManager.write(">");
var items = control.getModel().getData().person;
for(var i=0, l=items.length; i<l; i++){
renderManager.write("<li style='padding-top : 20px; font-size : 16px; border : 1px solid #cecece; color : #006699; font-weight : bold'> ");
renderManager.write(items[i].firstName);
renderManager.write(" ");
renderManager.write(items[i].lastName);
renderManager.write("</li>");
}
renderManager.write("</ul");
} }
//Creating custom Element for binding.
//**Is it possible to skip this and utilize existing controls like *TextField***???//
sap.ui.core.Element.extend("PersonItems",{
metadata : {
properties : {
"first" : {type : "string"},
"last" : {type : "string"}
}
} });
//Defining custom control
sap.ui.core.Control.extend("Person",{
metadata : {
properties : {
aggregations : {
"items" : {type : "PersonItems", multiple : true, singularName : "Name_Singular"}
},
defaultAggregation : "items"
},
renderer : PersonRenderer
} });
//creating custom control
var customPerson = new Person({
items : {
path : "/person",
template : new PersonItems({ first : "{firstName}", last : "{lastName}"})
}
});
//Creating a button
var button = new sap.ui.commons.Button('btn',{
text : "Click",
press : function(){
//Update model property
var model = sap.ui.getCore().getModel();
model.setProperty("/person/0/lastName",'Dog');
}
})
customPerson.placeAt('master');
button.placeAt('master');
Despite the Press function of the button successfully modifying the model, the view remains unchanged. How can the view be updated upon clicking the button and updating the model?
Furthermore, when using the renderer function, an automatic creation of PersonRenderer.js occurs. Direct placement of the render function does not yield the desired result. Could this be due to aggregation binding? While SAPUI5 examples display working functionality, my implementation seems to encounter issues.