LM Solé
Reputation: 19
My view does not update when model change sapui5
Good Morning,
I have this problem which I have been trying to solve for a couple of days and I couldn't find the answer, nor my colleagues.
My problem is that I bind two boolean values in a JSON to two different visible properties. The initial value of the JSON is correctly binded but when modify my json the change does not reflect in my view.
Please note that all the Constants Strings are correct.
My JSON initialization:
onInit : function(){
var inputModel = new sap.ui.model.json.JSONModel({
inputEditable: true,
formVisible: true
});
this.getView().setModel(inputModel, Constants.MODEL.USER_FINDER_HELP);
},
Property formVisible binding:
new sap.ui.layout.form.SimpleForm({
editable: true,
layout: sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout,
labelSpanXL: 1,
labelSpanL: 2,
labelSpanM: 2,
labelSpanS: 3,
visible:"{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
content: [
new sap.m.VBox({
visible : true,
items:[
new sap.m.HBox({
items: [
new sap.m.RadioButton({
groupName : "Group1",
text : "{"+Constants.MODEL.I18N+">completeName}",
select : [oController.controlCampos, oController],
selected : true,
}),
new sap.m.Input("inputNombre",{
enabled : "{"+Constants.MODEL.USER_FINDER_HELP+">/inputEditable}",
//type : sap.m.InputType.Text,
placeholder : "Introduzca nombre completo"
})
]
}),
new sap.m.HBox({
items : [
new sap.m.RadioButton({
groupName : "Group1",
text : "{"+Constants.MODEL.I18N+">user}",
}),
new sap.m.Input("inputUsuario",{
enabled :
{
path: Constants.MODEL.USER_FINDER_HELP+">/inputEditable",
formatter : formatter.generic.negate
},
//type : sap.m.InputType.Text,
placeholder : "Usuario" //TODO i18n
})
]
})
]
})
]
}).addStyleClass("scopeSelectorForm"),
new sap.m.Bar({
contentRight: [
new sap.m.Button({
text: "{"+Constants.MODEL.I18N+">filter}",
icon : "sap-icon://action",
visible: "{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
iconFirst: false,
press: [oController.filterAndExpand, oController]
}),
new sap.m.Button({
text: "{"+Constants.MODEL.I18N+">clean}",
icon: "sap-icon://action",
iconFirst: false,
visible: "{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
press: [oController.cleanForm, oController]
}),
new sap.m.Button({
text: "{"+Constants.MODEL.I18N+">hide}",
icon: "sap-icon://action",
iconFirst: false,
visible: "{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
press: [oController.hideOrShowForm, oController]
}),
new sap.m.Button({
text: "{"+Constants.MODEL.I18N+">show}",
icon: "sap-icon://action",
iconFirst: false,
visible: {
path:Constants.MODEL.USER_FINDER_HELP+">/formVisible",
formatter: formatter.generic.negate
},
press: [oController.hideOrShowForm, oController]
})
]
}).addStyleClass("greyBar"),
Method where I change my property:
hideOrShowForm : function(evt){
var inputModel = this.getView().getModel(Constants.MODEL.USER_FINDER_HELP);
inputModel.setProperty("/formVisible", !(inputModel.getProperty("/formVisible")));
inputModel.updateBindings();
this.getView().invalidate();
}
So to sum it all, my view gets the initial value(Tried with false aswell) but does not get updated when I change it in my code.
Thanks!
EDIT
I am sharing the rest of the code of my view just in case something is wrong.
sap.ui.jsview("view.UserFinderHelp",{
getControllerName : function() {
return "controller.UserFinderHelp";
},
createContent : function(oController){
return new sap.m.Dialog({
draggable:true,
id: Constants.ID.USER_FINDER_HELP,
contentWidth: "50%",
contentHeight: "80%",
showHeader: true,
verticalScrolling:false,
horizontalScrolling:false,
escapeHandler: oController.onClose,
customHeader: new sap.m.Bar({
contentLeft: [
new sap.m.Text({
text: "{"+Constants.MODEL.I18N+">usersFinder}"
})
],
contentRight: [
new sap.m.Button({
icon: "sap-icon://decline",
customData:[
new sap.ui.core.CustomData({
key: "viewId",
value: this.getId()
})
],
press: [oController.onClose, oController]
})
],
}).addStyleClass("sapMBarTitle"),
content:[
new sap.m.Bar({
contentLeft:[
new sap.m.Text({
text: "{"+Constants.MODEL.I18N+">finderParameters}"
})
]
}).addStyleClass("sapMBarSubTitle"),
new sap.ui.layout.form.SimpleForm({
editable: true,
layout: sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout,
labelSpanXL: 1,
labelSpanL: 2,
labelSpanM: 2,
labelSpanS: 3,
visible:"{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
content: [
new sap.m.VBox({
visible : true,
items:[
new sap.m.HBox({
items: [
new sap.m.RadioButton({
groupName : "Group1",
text : "{"+Constants.MODEL.I18N+">completeName}",
select : [oController.controlCampos, oController],
selected : true,
}),
new sap.m.Input("inputNombre",{
enabled : "{"+Constants.MODEL.USER_FINDER_HELP+">/inputEditable}",
//type : sap.m.InputType.Text,
placeholder : "Introduzca nombre completo"
})
]
}),
new sap.m.HBox({
items : [
new sap.m.RadioButton({
groupName : "Group1",
text : "{"+Constants.MODEL.I18N+">user}",
}),
new sap.m.Input("inputUsuario",{
enabled :
{
path: Constants.MODEL.USER_FINDER_HELP+">/inputEditable",
formatter : formatter.generic.negate
},
//type : sap.m.InputType.Text,
placeholder : "Usuario" //TODO i18n
})
]
})
]
})
]
}).addStyleClass("scopeSelectorForm"),
new sap.m.Bar({
contentRight: [
new sap.m.Button({
text: "{"+Constants.MODEL.I18N+">search}",
icon : "sap-icon://action",
visible: "{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
iconFirst: false,
press: [oController.filterAndExpand, oController]
}),
new sap.m.Button({
text: "{"+Constants.MODEL.I18N+">clean}",
icon: "sap-icon://action",
iconFirst: false,
visible: "{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
press: [oController.cleanForm, oController]
}),
new sap.m.Button({
text: "{"+Constants.MODEL.I18N+">hide}",
icon: "sap-icon://action",
iconFirst: false,
visible: "{"+Constants.MODEL.USER_FINDER_HELP+">/formVisible}",
press: [oController.hideOrShowForm, oController]
}),
new sap.m.Button({
text: "{"+Constants.MODEL.I18N+">show}",
icon: "sap-icon://action",
iconFirst: false,
visible: {
path:Constants.MODEL.USER_FINDER_HELP+">/formVisible",
formatter: formatter.generic.negate
},
press: [oController.hideOrShowForm, oController]
})
]
}).addStyleClass("greyBar"),
new sap.ui.table.Table({
//rows : "{"+Constants.MODEL.USER_FINDER_HELP_RESULTS+">/userScopeList}",
items : {
path: Constants.MODEL.USER_FINDER_HELP_RESULTS+">/userScopeList",
template : new sap.m.ColumnListItem({
cells:[
new sap.m.Text({
text: "{"+Constants.MODEL.USER_FINDER_HELP_RESULTS+">login}"
}),
new sap.m.Text({
text: "{"+Constants.MODEL.USER_FINDER_HELP_RESULTS+">name}"
})
]
})
},
columns : [
new sap.ui.table.Column({
label : new sap.m.Label({
text : "{"+Constants.MODEL.I18N+">user}"
})
}),
new sap.ui.table.Column({
label : new sap.m.Label({
text : "{"+Constants.MODEL.I18N+">completeName}"
})
})
]
})
],
buttons : [
new sap.m.Button({
text: "{"+Constants.MODEL.I18N+">Continue}"
}),
new sap.m.Button({
text: "{"+Constants.MODEL.I18N+">cancel}",
press: [oController.onClose, oController]
})
]
}).addEventDelegate({
onBeforeRendering: function(evt){
sap.ui.getCore().byId(Constants.ID.APP).addDependent(evt.srcControl);
},
}).addStyleClass("UserFinderDialog")
}
});
Upvotes: 0
Views: 9110
Answers (2)
LM Solé
Reputation: 19
I finally found out why this happened. Because my view is a Dialog which was invoked with a ComponentLoader. I did not think that I was actually binding it to the view which invokes mine.
Instead I just binded it like this:
this.getView().getContent()[0].setModel(inputModel, Constants.MODEL.USER_FINDER_HELP);
Thanks to those who helped me!
Upvotes: 1
Medera
Reputation: 418
If two way binding is active this should be no problem.
See example: example
sap.ui.controller("myController", {
onInit: function() {
var jsonData = {
text: "secondButton",
formVisible: true
};
var jsonModel = new sap.ui.model.json.JSONModel(jsonData);
this.getView().setModel(jsonModel, "myModel");
},
hideOrShowForm: function(evt) {
var inputModel = this.getView().getModel("myModel");
inputModel.setProperty("/formVisible", !(inputModel.getProperty("/formVisible")));
}
});
sap.ui.view({
viewContent: jQuery('#myXml').html(),
type: sap.ui.core.mvc.ViewType.XML
}).placeAt("content");<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m, sap.ui.layout,sap.suite.ui.commons, sap.ui.commons, sap.ui.table" data-sap-ui-xx-bindingSyntax="complex">
</script>
<script id="myXml" type="text/xmldata">
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="myController" displayBlock="true">
<App>
<Page>
<Panel>
<Button text="Press" type="None" iconFirst="true" width="auto" enabled="true" iconDensityAware="false" press="hideOrShowForm" />
<Button text="{myModel>/text}" type="None" iconFirst="true" width="auto" enabled="true" visible="{myModel>/formVisible}" iconDensityAware="false" />
</Panel>
</Page>
</App>
</mvc:View>
</script>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>regards
Upvotes: 1
Related Questions
- SAP UI5 : binding JSON model data to detail view
- Updating model does not always result in updated view
- UI5 bind new data to model from controller
- SAPUI5: Binding Context of view doesn't get unbinded
- Why does my data from my model is not getting binded to the view?
- Bind JSON to view (SAPUI5) with model name
- how to nest a model binding in view with SAPUI5
- Change event is not triggering for JSONModel
- SAPUI5_JSON Data binding issue
- binding is not working in javascript model