To Acorel.nl

Two very useful XML namespaces in SAPUI5 XML views

Arjan Nieuwenhuizen, 11 February 2015

If you are familiar with developing SAPUI5 / Fiori applications, you are probably also familiar with XML Views and the namespaces that are involved. Most of the namespaces refer to the different libraries that SAPUI5 has. When you want to want to use components form a specific library, you have to refer to that library using a namespace. In this weeks blog I will describe two other namespaces that can be useful while developing SAPUI5 applications. Both namespaces can be found in the SAPUI5 documentation, but are easily missed as well.

1. Binding custom data to components

In my current project I was facet with the following problem. I had a collection of tiles in which each tile contained two buttons to trigger different actions. Here is an example of the situation:

When binding to the press event of the tile, we can easily get the object behind it via standard methods (via binding context). From the press events of the buttons inside the tile, you cannot access the object behind it directly. To solve this I use the custom data namespace to pass custom data to the button. Using this method, I can get this custom data in the press event handler in the controller:

The steps to take are as follows:

1. Include the CustomData namespace in your XML view:

<mvc:View xmlns:core=“sap.ui.core” xmlns=“sap.m” xmlns:mvc=“sap.ui.core.mvc” xmlns:l=“sap.ui.layout” xmlns:app=“http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1”>

2. Create a custom attribute on the component that is bound to a property in your data collection (e.g. Id):

<Button icon=“sap-icon://discussion-2” text=“Example” press=“onPress” app:employeeid=“{Id}”/>

3. Get the custom data in your controller:

onPress: function(oEvent){

var employeeId = evt.getSource().data(“employeeid”); // or evt.getSource().data().employeeid;

// do something with the eployee id

2. Using plain HTML inside XML views

SAPUI5 has multiple options for rendering HTML inside your application. The core.HTML component is one way to to this. Using the content attribute of this control you can render plain HTML. Another way to do it is bij using the html namespace: xmlns:html=“http://www.w3.org/1999/xhtml” in your XML view. You can then use any html element as long as you use the html prefix. An example: