How do I pass a value from an XML view to a controller?
I am doing data binding with mvc in openUI5. I have an XML view that contains a table filled with a JSON model, with a button next to the text box on each row. I want to enter a new position in a textbox, click the button next to it, and update the position column cell to demonstrate the binding.
ID Name Age Position Update Position
101 Brian Cox 23 Developer [text area for new position] [update button]
XML representation:
<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 a 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 posUpdate function of the controller, I want to get the value of the textbox and change the value of the position in the model to that value. How can I do this for a specific JSON object? I feel like I need to modify the JSON file in some way to account for this.
I'm new to UI5 and would also welcome any helpful comments on my code structure and methods in general.
Thanks in advance.
source to share
1.To get TextArea
from each Row table, you need to first get the Row table which is the parent Button
.
2. To get the anchor path of the current line, you can call getBindingContext()
buttons to get the path.
3. The default binding mode is TwoWay, you only need to call setProperty and the data will be updated automatically.
Read the comment for the next function and I've added a working code snippet as well. please run it to see the results. For any further questions, please leave a comment.
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.com/resources/sap-ui-core.js' data-sap-ui-libs="sap.m,sap.ui.commons,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>
source to share
To demonstrate binding, all you need to do is:
replace:
<TextArea />
from
<TextArea value="{Position}"/>
And completely remove the Update button.
Direct processing of DOM or SAP objects to get a value defies the goals of two-way binding frameworks !!!
Allen, 7 lines of code to make the binding ??? Tell me you are kidding.
source to share