Skip to Content
Technical Articles
Author's profile photo Mahesh Palavalli

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

Assigned Tags

      21 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo saurabh vakil
      saurabh vakil

      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.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      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.

      Author's profile photo Alexander K
      Alexander K

      Thanks, Mahesh.

      I have a question.

      When bindProperty is called ? We do not call this method directly, we only fill value of Input field.

       

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      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

      Author's profile photo Alexander K
      Alexander K

      Thanks, Mahesh, very useful blog.

       

      Author's profile photo Wenbin Yin
      Wenbin Yin

      Great blog, very helpful.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks πŸ™‚

      Author's profile photo Marcel Braaz
      Marcel Braaz

      Great post!

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks πŸ™‚

      Author's profile photo Venkatesh Manam
      Venkatesh Manam

      Nice blog, very useful πŸ™‚

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks Venky πŸ˜›

      Author's profile photo Carlos Roggan
      Carlos Roggan

      Super! Thanks Mahesh Kumar Palavalli !!

      Great and very useful Blog !

      Need more of this πŸ˜‰ πŸ˜‰

      Cheers,

      Carlos

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks Carlos Roggan,

      Happy to see you comment πŸ™‚ and again thanks for the feedback πŸ™‚

      Author's profile photo Chitrak Shaw
      Chitrak Shaw

      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:|

      	<TableSelectDialog id='abcd' 
      		items="{path : '/C_Something(parameter1 : 'Something;s Parameter', parameter2 : 'Something's Parameter')/to_SubExtendedEnrtity'}">

       

      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

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      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.

      Author's profile photo Nader Ah
      Nader Ah

      Hi Mahesh, as a new UI5 developer, that was just so good to read. Thank you!

       

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Happy to hear your feedback Nader πŸ™‚

      Author's profile photo Biao Hu
      Biao Hu

      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.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks Biao Hu for sharing the feedback πŸ™‚

      Author's profile photo Sanvi Kadam
      Sanvi Kadam

      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.

      Β 

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks Sanvi Kadam for sharing this feedback, this means a lot πŸ™‚