UI5 custom control: property binding type "object", update binding & rerender issues

[wridgeu]

Hi everyone,

This question might go into the direction of "best practices" for custom control development or may be a bit too technical so I appreciate anyone reading through this and giving it some thought!

I created a custom control which defines a property of type "object" so that it can take in any, well, object and render some aggregation (or anything else) based on this. Kind of comparable to the UI5 List or Tree control (just less sophisticated :D). So from the outside someone puts the control into the view (either within xml or creates it within JS, inside a controller), binds a model against it (more specific, a JSONModel) which can look like the following (example below) and let's say according to the items in there some aggregations should be rendered. The items itself aren't bound directly but instead the entire object is bound, because the "root information" (i.e. 'id' and 'value') are also used.

{
	"id": "someId",
	"value": "someBaseValue",
	"items": [{
			"value": "Test"
		},
		{
			"value": "Test2"
		}
	]
}

Now I've noticed that the custom control won't rerender (update it's content, which is based on this object/binding) in certain scenarios. The scenarios mostly being when you're using `setProperty`. As this updates certain properties values without creating a new reference or overwriting the old object etc. (which all in all is a good thing). Now I could make use of `updateBindings` or `refresh` (even with the "force"-flag set to true) which actually does force a rerender of the control or rather a diffing check if rerendering is even necessary. During the diffing check (if something has changed on my property) however, the values which are compared, are the same. So due to updating the values based on references, when checking if a value has changed, the "oldValue" equals the "newValue" and thus no rerender will be executed.

This can be observed when setting a breakpoint under the hood inside of "ManagedObject.js" itself or even further down within "Model.js".

Now I could work around that by using "setData" (optionally with the merge flag) which is also used by "setProperty" in certain scenarios. This completely changes the reference and thus successfully runs through the diffing check and updates my custom control (rerenders it).

Are there any best practices for handling a scenario like this? I feel like using "setData" or even manually recreating the entire objects/change the references would be very ugly (also performance whise). I could write a custom setter for the property and maybe do some "magic" there but not quite sure how that could look like (doing it properly that is).

The question can also be checked out here (https://github.com/wridgeu/UI5-control-example/issues/13). This is some example repository I've created a while back to test some things on custom controls. In there is also a new example, linked within the Issue so one can easily test all of this out. I'll consider using something like JSBin in the future.

If you made it until here: Any hints, infos, best practices or even telling me that all of this is stupid for reason X is highly appreciated!

Thank you in advance,

Marco

[ori-broda]

Hi Marco,

Your effort is truly admirable!

But what exactly are you trying to achieve by creating a new custom control?

Are you sure there isn't already a built, tested control out there somewhere that suits your needs?

If the answer is negative, I'll gladly offer my help to dig in and assist you in this endeavour!

Best,

Ori

[wridgeu]

Hey ori_broda,

thanks! 🙂

I'm quite certain that this is nothing that already exists as standard UI5 control yet. It is more of an abstract use-case which in reality maps to the visualization of some boxes, let's say it like that. ^^

Maybe a better way would be a specific model on the managing control itself and "just" always set (overwrite) it instead of updating certain values. That at least somehwat works. This way the managing control rerenders and one can implement logic for updating aggregations of any sort and so on.

Really not sure how else one could approach this while also making use of model binding/state. You could for example also put the OData/(any ajax) call into the custom control itself but for some reason I really don't like that at all. ^^

Really appreciate you reading all of this! 😄

Regards,

Marco