Technical Articles
How to create JSON model property binding programmatically
This short post explains how to create a property binding in code to observe model changes and react to it
Suppose we have a simple scenario: we have two selects (countries and states) and states depends on selected value from countries.
So, our task is to filter out all the states that are irrelevant to a selected country.
The simplest approach would be to implement an onchange handler to deal with that.
Sure, this one would work, but our selects would be closely coupled because we put logic that is related to states into countries handler.
To make this scenario more complex lets suppose we have an input that can also store the country code thus we would need to react for its changes as well.
So probably, we would end up with something like this for our view and controller:
But what if we could somehow react to the ‘{/country}” property change, no matter what event actually caused that change?
This way we would not need to make input and countries even know that states depend on them, so it would become more loosely coupled code.
Well, doesn’t it sound like something property bindings are used for?
Sure it does.
So, the question is how to create one in code.
As I personally prefer using older sdk version, it took me some time to find the correct “concrete” class that implements proper binding for JSON model, but current documentation has this guy here: https://sapui5.hana.ondemand.com/#/api/sap.ui.model.json.JSONPropertyBinding
So, the solution for our case would be very easy:
Here’s the jsfiddle link with some mock data: https://jsfiddle.net/87rcys1u/
Happy coding.
Excellent! I have learnt new thing "JSONPropertyBinding". But what is the purpose of countryChange function now? In you fiddle, I have removed the countryCahnge function and it is working well!
Thank you for explaining,
Seyed Ismail.
Hey Seyed!
Thanks for your comment.
The countryChange was just left so that "direct" change of countries select would also work just for illustrative purposes.
Sure, there is no sense in it if JSONPropertyBinding is used.
As for the real use cases of such scenario (which I actually had) you can consider dynamic form generation based on some metadata (like smartforms, but based on json data rather than odata service).
So if, fo example, we need to render those countries and states (and also maybe some more interdependent selects/fields) we would either need to implement some stuff for related onChange handlers (like observer pattern) or use something like this (which is, I believe, the same from the design pattern perspective, but is provided by the framework for free).
Regards, Alex.