SAPUI5 Metadata Binding

Ever find yourself hard coding maxLengths and minLengths to your SAPUI5 controls? What if we can bind those properties and make them dynamic?

In this post we’ll talk about “Metadata Binding” which can help you bind those properties dynamically to OData’s Metadata.

Interpolations

The “Mustache” (single curly brace) syntax in its basic form is used to bind elements.

Its good that we can bind the value property of our input to our model, but most of the time for non-data related properties we need to either hard code them or do it via i18n.

This is where the problem arises. What if the are back-end apply changes to these fields. Then, we need to manually update the front-end application as well. We lose the flexibility of data binding in this aspect.

Imagine, if we can bind this non-data related properties to our model definition. Let’s take a look inside Northwind metadata.

Northwind Metadata
Northwind Metadata
If we look closely, there’s actually some information about Products’ data or metadata. We can use this information in our application. Let’s focus on ProductName property.
The property as describe, actually contains MaxLength. The back-end system controls this field to have 40 characters max.

How about we use this information to enhance our form bindings.

Viola! The service definition or metadata now controls our maxLength.

The format of metadata binding is as follow:

The input is now bound to maxLength. However, if we run our application an error will occur.

Max Length Error
Max Length Error

MaxLength property expects an interger value.

So how can we fix this?

Expressions

Expressions can be use for data binding on XML views. Data binding expressions are interpolated within the scope of the current model. These expressions can only have single expression.

By replacing our maxLength data binding, we can parse the string return by the metadata to an integer by using parseInt.

You can also check my The Art of Format – SAPUI5 Formatters – Part 1 for more samples on expression bindings.

Conclusion

Using metadata binding can reduce local dependencies and enable our application to grow with the back-end definitions. There are other metadata information if our controls to maximize maintainability within touching our existing source code.

Let me know if you have other ideas on metadata binding. Don’t forget to like, share and subscribe for more genuineprogrammer content. Ciao!


Leave a Reply

One thought on “SAPUI5 Metadata Binding

  1. sirglio frei Reply

    I believe this internet site contains some very good info for everyone :D. “Do not go where the path may lead, go instead where there is no path and leave a trail.” by Ralph Waldo Emerson.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.