SAPUI5: What Is Custom Data and How to Use Custom Data?

🏷️

This is how to use custom data in SAPUI5.

With custom data, you can add additional data to almost any SAPUI5 control.

So if you want to know how to use custom data in an XML view and controller, then you are in the right place.

Let’s get started!

Add More Values to an SAPUI5 Control With Custom Data

You can add custom data to almost any SAPUI5 control.

Imagine custom data as an extra text property of a control.

Only custom data can hold not just strings, but any kind of object.

However, you’ll mostly use it for strings or numbers from your model.

For example, a button has the property text.

<!-- in your XML view -->
...

<Button
  text="{text}"
  press="onPress"/>

...

But what if you want to add another value to the button so you can get it in the press event method in the controller? Like you want the button to hold an extra value from the model that you can process in the controller.

The button control doesn’t have another property where you can add your extra value.

That’s why almost every control has the aggregation customData. You can add as many CustomData controls to the aggregation as you want.

Each CustomData has a key and a value property.

The key is to get the value of a CustomData control.

Into the value property of the CustomData control goes whatever you want to add to the parent control of the customData aggregation.

You’ll see how that works below.

You can add custom data to a control in an XML view and a controller:

Add Custom Data to a Control in an XML View

First, add the customData aggregation and a CustomData control to the button control:

<!-- in your XML view -->
...

<Button
  text="{text}"
  press="onPress">
  <customData>
   
    <CustomData 
      key="extraValue" 
      value="{extraValue}"/>
  
  </customData>
</Button>

...

You could also add custoom data to the button in an XML view like this:

<!-- in your XML view -->
<mvc:View 
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">

  <Button
    text="{text}"
    press="onPress"
    customData:extraValue="{extraValue}"/>

</mvc:View>

Then retrieve the CustomData control’s value in the onPress method in the view’s controller:

// in your controller
...
 
onPress: function(oEvent) {
 

  var oButton = oEvent.getSource();

  var sExtraValue = oButton.data("extraValue");

}
 
...

Add Custom Data to a Control in a Controller

To set custom data to a control in a controller is as easy as getting custom data from a control:

// in your controller
...

oButton.data("extraValue", "your extra value"); // first argument is the key, second is the value
 
...

🔥 The Complete SAP ERP Modules Overview Infographic in PDF Format (Free)

Plus, don't miss future infographics and free SAP tips and insights that are available only to newsletter subscribers. 

📚 More Articles

Leave a Comment

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.
You need to agree with the terms to proceed

Menu

🚀 Upgrade Your Work Experience With Altwork (Welcome to the Future)

altwork_picture_2

The Altwork Station redefines how people interact with their computers by allowing the computer screen and keyboard to physically conform to support the user’s body while working long hours on a computer.

Submission received, thank you!

Close Window