Menu
I am having trouble sending data from the XML view to controller. It is easily achievable in JS views.
for example:-
In JS view:-
var btn = new sap.m.Button({
text:"click",
tap:function(){
callFunction(oEvent, "mycustomString");
}
});
How do I achieve the same using XML Views.
<Button text="click" tap="callFunction"/>
The above would only pass the event and not the "mycustomString". How to I do this?
746
This is an old question, but as of version 1.56 there is now native support for passing parameters to handler functions directly in XML Views.
New Event Handler Parameter Syntax
When event handlers are assigned to control events in XML views, you can now also specify parameters which can be passed to the event handler. The parameters can be static values as well as bindings and even expressions. This feature helps to reduce controller code and avoid unnecessary controller methods, and separates the controller logic from the retrieval of the required input values.
So you can now simply do this:
<Button text="click" tap=".callFunction($event, 'mycustomString')" />
Note that as soon as you pass at least one parameter, the event itself will no longer be passed automatically, so you need to manually do so by passing $event, as I've done above. However, there is also additional syntax to pass event parameters, the source control, and data bindings directly, so you will likely not need the event at all.
The documentation for this feature is available online in the Demo Kit.
Short demo:
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("myController", {
callFunction: function(sButtonText, sVal) {
alert("Clicked " + sButtonText + " with value " + sVal);
}
});
});
sap.ui.xmlview({
viewContent: $('#myView').html()
}).placeAt('content');<html>
<head>
<meta charset="utf-8">
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs='sap.m'></script>
<script id="myView" type="sapui5/xmlview">
<mvc:View controllerName="myController" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<Button text="Button 1" press=".callFunction(${$source>/text}, 'ABCDEF')" />
<Button text="Button 2" press=".callFunction(${$source>/text}, 'UVWXYZ')" />
</mvc:View>
</script>
</head>
<body class='sapUiBody'><div id='content'></div></body>
</html>You can do this by adding a custom data-parameter app:myData in your view:
View
<mvc:View
...
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
...
>
<Button text="click" tap="callFunction" app:mydata="mycustomString"/>
...
Controller
callFunction: function(oControlEvent) {
console.log("data: " + oControlEvent.getSource().data("mydata"));
}
logs data: mycustomString
See https://scn.sap.com/thread/3538029
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
