UI5
No Comments

How to Pass Custom Data from an XML View to Its Controller in SAP UI5?

American football player throws ball.

If you like to pass data from an XML view to its controller in SAP UI5, you can do so by the aggregation customData. For example, to pass custom data from a button to a press event of the button:

<!-- in your XML view -->

<mvc:View
  controllerName="controller.View1"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  xmlns:core="sap.ui.core">

  <!-- how pass custom data to the controller? -->
  <Button
    id="foo"
    text="{i18n>bar}"
    press="onButtonPress">
  </Button>

</mvc:View>

In the oEvent of the view’s controller method onButtonPress you could retrieve, for example, the id and text properties of the button. But what if you would like to pass other custom data from the XML view’s button control to the method onButtonPress? For example, a value from an OData model?

// in your controller

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";
  
  return Controller.extend("my.app.controller.View1", function() {
 
    ...
 
    onPressButton: function(oEvent) {
 
      // retrieve the button's id
      oEvent.getSource().getId();

      // retrieve the button's text
      oEvent.getSource().getText();

    },
 
    ...
  
  });
  
});

Every control in SAP UI5 has the aggregation customData. The aggregation customData is originally implemented in the class Element of the SAP UI5 framework – every SAP UI5 control inherits from the class Element and therefore, features the aggregation customData.

The aggregation customData and its controls CustomData can be set in an XML view:

<!-- in your XML view -->

<mvc:View
  controllerName="controller.View1"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  xmlns:core="sap.ui.core">

  <!-- how pass custom data? -->
  <Button
    id="foo"
    text="{i18n>bar}"
    press="onButtonPress">
      <customData>
      
        <!-- dynamic binded data from OData model -->
        <core:CustomData
          key="{yourModel>/Button/CustomDataKey1}"
          value="{yourModel>/Button/CustomDataValue1}"
       </customData>
       
       <!-- static binded data -->
       <core:CustomData
          key="key2"
          value="value2"
       </customData>

  </Button>

</mvc:View>

And you can retrieve the custom data in the controller’s onButtonPress method:

// in your controller

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";
  
  return Controller.extend("my.app.controller.View1", function() {
 
    ...
 
    onPressButton: function(oEvent) {
 
      // retrieve the button's id
      oEvent.getSource().getId();

      // retrieve the button's text
      oEvent.getSource().getText();

      // retrieve the custom data value1
      oEvent.getSource().data("key1");

      // retrieve the custom data value2
      oEvent.getSource().data("key2");

    },
 
    ...
  
  });
  
});

Most Recent Articles

Will SAP UI5 replace the SAP Web UI?

SAP Full Forms

More Similar Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu