I'm practicing data binding with mvc in openUI5. I have an XML view containing a table populated from a JSON model, with a button next to a text field on each row. I want to enter a new Position into the text field, press the button next to it and have the Position column cell update, to demonstrate binding.
ID Name Age Position Update Position
101 Brian Cox 23 Developer [text area for new position] [update button]
XML View:
<mvc:View
controllerName="view.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns="sap.m">
<Table items="{/employee}">
<columns>
<Column>
<Text text="ID" />
</Column>
<Column>
<Text text="Name" />
</Column>
<Column>
<Text text="Age" />
</Column>
<Column>
<Text text="Position" />
</Column>
<Column>
<Text text="Update Position" />
</Column>
<Column>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{id}" />
<Text text="{Name}" />
<Text text="{Age}" />
<Text text="{Position}"/>
<TextArea />
<Button text="Update" press="posUpdate"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
In my controller, I have a function attached to the button to update the JSONModel of employees.
sap.ui.controller("view.App", {
onInit: function(){
oModel = new sap.ui.model.json.JSONModel("employee.json");
oModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
this.getView().setModel(oModel);
sap.ui.getCore().setModel(oModel);
},
posUpdate: function(){
//trying to fetch the value of the textarea in the view
var data = sap.ui.getCore().byId("newPos").getValue();
sap.ui.getCore().getModel('oModel').getProperty("Position");
oModel.setData({Position: data}, true);
}
});
JSON:
{
"employee": [
{
"id": 101,
"Name": "Brian Cox",
"Age": "23",
"Position": "Developer"
},
{
"id": 102,
"Name": "Richard Feynman",
"Age": "66",
"Position": "HR Clerk"
},
{
"id": 103,
"Name": "Tycho Brahe",
"Age": "65",
"Position": "Developer"
},
{
"id": 104,
"Name": "Albert Einstein",
"Age": "32",
"Position": "Consultant"
}
]
}
Index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>UI5 MVC with XmlView</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='../resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m, sap.ui.table'></script>
<script>
sap.ui.localResources("view");
var view = new sap.ui.xmlview("App", "view.App").placeAt("content");
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
In the controller posUpdate function, I want to retrieve the value of the text field, and change the Position value in the model to this value. How can I do this for a specific JSON object? I feel I need to change the JSON file somehow to acmodate this.
I am new to UI5 and would also wele any helpful ments on my code structure and practices in general.
Thank you in advance.
I'm practicing data binding with mvc in openUI5. I have an XML view containing a table populated from a JSON model, with a button next to a text field on each row. I want to enter a new Position into the text field, press the button next to it and have the Position column cell update, to demonstrate binding.
ID Name Age Position Update Position
101 Brian Cox 23 Developer [text area for new position] [update button]
XML View:
<mvc:View
controllerName="view.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns="sap.m">
<Table items="{/employee}">
<columns>
<Column>
<Text text="ID" />
</Column>
<Column>
<Text text="Name" />
</Column>
<Column>
<Text text="Age" />
</Column>
<Column>
<Text text="Position" />
</Column>
<Column>
<Text text="Update Position" />
</Column>
<Column>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{id}" />
<Text text="{Name}" />
<Text text="{Age}" />
<Text text="{Position}"/>
<TextArea />
<Button text="Update" press="posUpdate"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
In my controller, I have a function attached to the button to update the JSONModel of employees.
sap.ui.controller("view.App", {
onInit: function(){
oModel = new sap.ui.model.json.JSONModel("employee.json");
oModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
this.getView().setModel(oModel);
sap.ui.getCore().setModel(oModel);
},
posUpdate: function(){
//trying to fetch the value of the textarea in the view
var data = sap.ui.getCore().byId("newPos").getValue();
sap.ui.getCore().getModel('oModel').getProperty("Position");
oModel.setData({Position: data}, true);
}
});
JSON:
{
"employee": [
{
"id": 101,
"Name": "Brian Cox",
"Age": "23",
"Position": "Developer"
},
{
"id": 102,
"Name": "Richard Feynman",
"Age": "66",
"Position": "HR Clerk"
},
{
"id": 103,
"Name": "Tycho Brahe",
"Age": "65",
"Position": "Developer"
},
{
"id": 104,
"Name": "Albert Einstein",
"Age": "32",
"Position": "Consultant"
}
]
}
Index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>UI5 MVC with XmlView</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='../resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m, sap.ui.table'></script>
<script>
sap.ui.localResources("view");
var view = new sap.ui.xmlview("App", "view.App").placeAt("content");
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
In the controller posUpdate function, I want to retrieve the value of the text field, and change the Position value in the model to this value. How can I do this for a specific JSON object? I feel I need to change the JSON file somehow to acmodate this.
I am new to UI5 and would also wele any helpful ments on my code structure and practices in general.
Thank you in advance.
Share Improve this question edited Nov 26, 2014 at 11:52 MKHC asked Nov 26, 2014 at 11:46 MKHCMKHC 4594 silver badges24 bronze badges2 Answers
Reset to default 3To demonstrate binding all you need to do is:
replace:
<TextArea />
with
<TextArea value="{Position}"/>
And remove the Update button pletely.
Direct DOM or SAP object manipulation to get the value defies the whole purpose of two way binding frameworks!!!
Allen, 7 lines of code to do the binding??? Please tell me you're joking.
1.To get the TextArea from each table Row, you need to first get the table Row which is the parent of the Button.
2.To get the binding path of the current Row, you can call getBindingContext() of Button to get the path.
3.As the default binding mode is TwoWay, you only need to call setProperty and the data will be refresh automatically.
Please read the ment of the following function and i also inserted a working code snippet. Please run it to see the results.In case any further questions, please leave a ment.
posUpdate: function(oEvent) {
//get the event source which is the button
var oButton = oEvent.getSource();
//get the parent of the button which is row
var oRow = oButton.getParent();
//get the textarea which is the fourth of the cells of row
var oTextArea = oRow.getCells()[4];
//get the value of the new position
var sNewPosition = oTextArea.getValue();
//get the model
var oModel = oButton.getModel();
//get the binding path of current row
var oPath = oButton.getBindingContext().sPath;
//set the Postion to the new Position
oModel.setProperty(oPath + "/Position", sNewPosition);
}
<script id='sap-ui-bootstrap' type='text/javascript' src='https://sapui5.hana.ondemand./resources/sap-ui-core.js' data-sap-ui-libs="sap.m,sap.ui.mons,sap.ui.table,sap.viz" data-sap-ui-theme="sap_bluecrystal"></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View
controllerName="view.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns="sap.m">
<Table items="{/employee}">
<columns>
<Column>
<Text text="ID" />
</Column>
<Column>
<Text text="Name" />
</Column>
<Column>
<Text text="Age" />
</Column>
<Column>
<Text text="Position" />
</Column>
<Column>
<Text text="Update Position" />
</Column>
<Column>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{id}" />
<Text text="{Name}" />
<Text text="{Age}" />
<Text text="{Position}"/>
<TextArea />
<Button text="Update" press="posUpdate"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
</script>
<script>
sap.ui.controller("view.App", {
onInit: function(){
var data = {
"employee": [
{
"id": 101,
"Name": "Brian Cox",
"Age": "23",
"Position": "Developer"
},
{
"id": 102,
"Name": "Richard Feynman",
"Age": "66",
"Position": "HR Clerk"
},
{
"id": 103,
"Name": "Tycho Brahe",
"Age": "65",
"Position": "Developer"
},
{
"id": 104,
"Name": "Albert Einstein",
"Age": "32",
"Position": "Consultant"
}
]
};
var oModel = new sap.ui.model.json.JSONModel(data);
oModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
this.getView().setModel(oModel);
sap.ui.getCore().setModel(oModel);
},
posUpdate: function(oEvent){
//get the event source which is the button
var oButton = oEvent.getSource();
//get the parent of the button which is row
var oRow = oButton.getParent();
//get the textarea which is the fourth of the cells of row
var oTextArea = oRow.getCells()[4];
//get the value of the new position
var sNewPosition = oTextArea.getValue();
//get the model
var oModel = oButton.getModel();
//get the binding path of current row
var oPath = oButton.getBindingContext().sPath;
//set the Postion to the new Position
oModel.setProperty(oPath+"/Position",sNewPosition);
}
});
var myView = sap.ui.xmlview("myView", {
viewContent: jQuery('#view1').html()
}); //
myView.placeAt('content');
</script>
<body class='sapUiBody'>
<div id='content'></div>
</body>