Technical Articles
Tips on SAP UI5 control bindings in XML View, formatOptions and more.
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 :p . 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
Wonderful post Mahesh! Thanks for posting this, sometimes it really becomes difficult to find out from the SDK where exactly to look to understand all the possible properties, methods etc. for the UI controls. But your post gives some really good insights which I'm sure can be used by anyone looking to explore the controls in more depth and detail.
ThanksΒ saurabh vakilΒ for the feedback ? . There are many question in the community which revolves around this topic directly or indirectly and so I thought to write this blog which can help someone who is facing issue in this area.
Thanks, Mahesh.
I have a question.
When bindProperty is called ? We do not call this method directly, we only fill value of Input field.
Hi Alexande
bindProperty will be executed internally by SAP as you are passing the data in xml binding. You can also call the bindProperty explicitly as well in the controller as well.
BR,
Mahesh
Thanks, Mahesh, very useful blog.
Great blog, very helpful.
Thanks π
Great post!
Thanks π
Nice blog, very useful π
Thanks Venky π
Super! Thanks Mahesh Kumar Palavalli !!
Great and very useful Blog !
Need more of this π π
Cheers,
Carlos
Thanks Carlos Roggan,
Happy to see you comment π and again thanks for the feedback π
HI Mahesh,
I have a question on similar ground. How do I pass input values to an entity in the xml items binding?
for eg:|
It should represent the GET call url like : C_Something(parameter1: something , paramter2: something)/to_ExtendedSubEntity.
I know this is possible via controller code, but how do I implement the same in view of XML?
Thanks
Its not possible like that, but you can do it in a hybrid way..Β use bind element for the parameter entituset to the view in controller.
Then use navigation property in the items without β/β, this will trigger navigation and items will.be fetched.
Hi Mahesh, as a new UI5 developer, that was just so good to read. Thank you!
Happy to hear your feedback Nader π
Hi Mahesh, it's really great.
Your post just give a straightforward information which I tried to figureout via debugging javascript...
Many thanks for sharing.
Thanks Biao Hu for sharing the feedback π
Hello Mahesh,
Very Helpful post. This made my doubts clear.
As a new learner, this post helped me to understand the concept.
Thanks for sharing.
Β
Thanks Sanvi Kadam for sharing this feedback, this means a lot π