[Armin Winkler]

2 years, 5 months ago #37436

Up

1

Down

::

Hi Patrick,

 

would you be able to share your example application once again so we can make some adjustments in there and provide it back to you? I am afraid I have already permanently removed it from our Simplifier instance since I was of the opinion that your problem had been solved. Here’s an upload folder once again, so I can access the transport file and import it to our system. I will immediately remove the folder after you’ve uploaded the file to it:

 

https://files.simplifier.io/u/d/60f1bb8b3e994153a1f2/ password: uyGLxaZBH33HS497

 

In general, this is how a data binding should behave when you are templating an aggregation: You add your template item (i.e. a single TabContainerItem widget) to a given aggregation in the UI Designer and then configure your data source on the item’s properties in the panel on the right side of the screen. This data source may e.g. be a variable of a collection type. In a Javascript context a collection type transfers to an array which holds up to an infinite number of objects which again correspond to struct types in Simplifier. Each object may contain several properties / fields that can be used for property bindings inside the data source, i.e. you can then proceed and link a field from the inner struct of the collection to a property of your item or even a widget that is still nested inside your template item.

 

Now, during runtime of your application, your collection variable that is used as data source for the binding of your template item place within the TabContainer widget, may be manipulated anf for example receive another entry. Via the binding, this should immediately reflect on the UI, i.e. another instance of your template item should automatically created and therefore you’d see a new tab in the UI. Whenever you remove an entry again, the UI should again update and no longer show the respective tab. Such bindings are always two-way, meaning that you could either manipulate the UI part to synchronize changes with your data source (the collection variable) or alternatively, you are also able to manipulate the data source itself and then the UI should update accordingly. For a more detailed description on aggregation bindings, please find the OpenUI5’s reference on it here: https://openui5.hana.ondemand.com/topic/91f057786f4d1014b6dd926db0e91070 (also mind the related articles of the documentation). And this video, which is taken from our Simplifier Intermediate course, shows you how to configure a data source in the UI Designer and also explains the whole process in more detail: https://community.simplifier.io/202-2/

 

Hope this makes data sources and binding clearer for you. Kind regards,

Armin

[Patrick]

2 years, 5 months ago #37507

Up

0

Down

::

Hi Armin,

thanks for your detailed explanation! I’m not allowed to watch the video at the moment because I have to finish the previous lesson first. I’ll watch it later!

I updated and re-uploaded the test project for you. Hopefully this gives you a better understanding of my problem with data binding in TabContainer and the content of its items.

To reproduce case 1 (client side business object only), add 1-2 TabItems, delete one and then add one again. A duplicate ID error message follows.

For case 2 (script only) the item is missing the actual content which I can’t add using the addContent method even though the aggregation is set in the widget settings. If I could do it, it wouldn’t have a binding anyway, right?

Case 3 (script and client side business object) is my attempt to force the content via the binding without generating an ID error message.

Thank you for your time!

[Armin Winkler]

2 years, 5 months ago #37522

Up

1

Down

::

Hi Patrick,

 

I was able to make the tab container work without creating any duplicate id errors when adding new items after one or multiple items had been removed beforehand. Please change the following line of the tab container widget script as shown in the screenshot (you only need the line that is commented in):

 

Please also make sure not to invoke the removeItem method of the tab container in your script that is attached to itemClose event in the process designer or else duplicate id errors will arise again. As I have explained earlier, the population of the tab container’s items will be handled via the data source binding of your variable, i.e. removing the related entry from your collection variable is sufficient.

 

Please let me know if this works for you as well. We will also internally investigate further why the line that can be seen commented out in the above screenshot was needed in the first place and whether it’s safe to remove it permanently from our standard widget.

 

Kind regards,

Armin

[Armin Winkler]

2 years, 5 months ago #37575

Up

0

Down

::

Hi Patrick,

 

just to let you know: In the meantime we have updated our standard content accordingly. From now on, our standard widget TabContainer should not throw errors anymore in case you add items to it after having removed an item previously.

 

Thank you for your valuable feedback and kind regards,

Armin

[Patrick]

2 years, 4 months ago #37977

Up

1

Down

::

Hi Armin, I was on holiday for a few days…

After changing the line of tab container widget script everything worked now. I add new elements to the collection with the push method and remove elements with the splice method after an itemClose event.

Many thanks for your support!