Tips on SAP UI5 control bindings in XML View, formatOptions and more.

[maheshpalavalli]

SAP UI5 SDK helped me lot when I started learning the UI5 couple of years back and ofcourse may others. Initially the binding topic was a bit difficult for me to understand and I used to think the aggregation binding only works for table 😄 😄 (BTW I moved from ABAP to UI5) but slowly with the help of SDK I've learned a lot. Thanks to the team who documented it very well.

But few things really confused me a lot like format options, binding parameters etc., Though I was able to use them by checking the SDK documentation or samples but I didn't quite understand the syntax like where it comes from. It is because getting information is not very straightforward. But once you understand the concepts it will be a piece of cake. Let's check them out.

Note: If you looking for data binding basics or types of bindings or how to use binding in the xml view, please visit UI5.SAP.COM . This blog only provides few tips(XML Binding) for the beginners who know the basics of UI5 and atleast completed the Walkthrough section in SAP SDK Documentation part.

 

Let's take the basic Input control from the SDK



Clicking on the UI Guidelines Link will take you to the experience.sap.com website where they talk about the Fiori design guidelines, best practices, usage & implementation for that control.

"properties", "events", "methods", "aggregation" are pretty straightforward.. no need for explanation I guess.

Clicking on the control sample will directly take you to the sample ui5 apps page and from there you can see the different ways the control is implemented along with the source code(which comes in handy sometimes).

The thing is we don't need to copy paste the code from there all the time or infact anytime 😛 . We can get all information from the different sections of the control shown in the above screenshot.

But checking Methods, Properties & Events documentation for that control might not give you all information sometimes. Why?

You can observe from the screenshot that the control Input has a super class inputbase. This means some properties, methods, events etc.., will be inherited from the base control, which is inputbase.

For example the property "Value" will not be available in the properties section, you can see it only in the properties section of the inputbase class. Likewise if you see the InputBase class, it will again inherit from "sap.ui.core.Control" and the "visible" property comes from this class only.





If you are planning to use an UI5 control, always check if it extends any control and check those properties, methods, events & aggregations.

 

Now check the "Value" property, it is of type string and there is no other description to it. Even if you can also go the getValue method which will not have any more information about that. At mentioned that it accepts string, we can simply pass some data and it will show in the UI.

But how to pass the data using the binding there? or for any other property of that control?

We know from the documentation and examples the basic syntax, where we pass the model name and property name via the bindings

value='{modelName>/propertyName}'

and sometimes we see in the below format

value='{path:'modelName>/propertyName', type:'sap.ui.model.type.Currency'}'

But where it defines the path, type etc.., parameters that can be passed inside the binding?

It is defined at the ManagedObject. Now for our scenario we are doing the property binding(Obviously "value" is a property right 😄 ). So just type 'bindProperty' and we can see the method which is part of the ManagedObject, which is a super super super super class to input class. Basically this class takes care of all the binding part of any UI5 control.





https://ui5.sap.com/#/api/sap.ui.base.ManagedObject/methods/bindProperty



So the parameters: path, model, type, formatter, formatoptions etc.., will be there in that method. So if we do the property binding for any control property, we can use of all those bindingInfo parameters from the bindProperty method.

Similarly for aggregation binding we can refer to the parameters from bindAggregation method

https://ui5.sap.com/#/api/sap.ui.base.ManagedObject/methods/bindAggregation

(e.g., For the Table "items" aggregation, the parameters path, factory, filters etc.., will be there in the above method).

If you want to know check the parameters that you want to pass in the property binding and aggregation binding check the ManagedObject class respective methods

 

In the bind property method of the ManagedObject, you can see the parameter 'formatOptions'.



This formatOptions will be considered when type is used. I am assuming you will aware about the type, if not check the link below:

https://ui5.sap.com/#/topic/dfe04650afc046e0802abb1a1a90d2d9

https://ui5.sap.com/#/topic/91f06be06f4d1014b6dd926db0e91070

 

So to pass the type to the binding, we will pass one the type that is available in the above links. But how to use this formatOption,? it just mentioned as on object in above image and nothing else.. Let's go the integer type in the API reference first.



For constraints parameters in the binding we can pass the available constraints here and for the format options, it is again having a link to numberformat class.. let's see that as well.



Number formatting again supports multiple types: currency, integer, unit etc.., so if you go to those types, there also it will point to the same numberformat class. Let's see the integer instance:



example binding

<Text text="{path:'testModel>/someNumber', type:'sap.ui.model.type.Integer', 

formatOptions:{minIntegerDigits:3,minFractionDigits:2,maxFractionDigits:3}}">

</Text>

 

For formatting the texts in the UI5 via the binding, along with the type we need to pass the formatOptions which are available as direct subclasses for "sap.ui.model.Type"

 

Now let's go another parameter called "parameters" but this time we will see how it will work in aggregationBinding instead of propertyBinding(both has that parameter). (e.g., when we do table items binding)



you can see the description tells us pass the parameters from listBinding. If you navigate to the listbinding class, you will not find much information there, so we need to check the subclasses.



The clientListBinding will have JSONListBinding, which is used form json model aggregation binding. We will see the v2.ODataListBinding for our example.



We can use the odata model specific parameters like expand, select, mode etc.,

<Table id="table" width="auto"

items="{ path: '/Orders', sorter: { path: 'CustomerID', descending: false }, 

parameters:{ expand:'Order_Details', select:'CustomerID' } }">

... Some stuff ....

</Table>

This way you can pass the odata related stuff to the table items binding.

If you want to pass any odata related query parmeters to a control aggregation then use the managedObject bindAggregation parameters & the respective ListBinding (sub class) parameters.

 

So till now we have seen what parameters we need to pass when we do the binding for a property or for the aggregation in the XML view.  In the similar way, if we explicitly call the bindElement via JavaScript, it takes the parameters from sub classes of "sap.ui.model.ContextBinding".

Note: you can call bindObject of the managedObject class as bindElement will call bindObject internally.

 

 

Thanks & Best Regards,

Mahesh