Skip to Content

Design Studio 1.5: View on Data Binding (for List)


A view on the data binding scenario. Good to know to save much code - use of property binders will allow you generic update of a component based on the data source changes. This is a blog of the series "Design Studio 1.5, View on..." - here the function "Data Binding". For more topics see Design Studio 1.5: What's New in? A (technical) View

The starting point.

Design Studio is providing a lot of scripting capabilities - and those are in the meantime very powerful. On the other hand, there are some "basic" components, which could be data bound, but those are not. With scripting and corresponding events (e.g. the onResultSetChanged event" you can always actualize those components. Also, every component does have an event which can again influence any data source behind.

What is the New Function?

In many cases, those scripts can be saved by implicit system behavior.. This is where "data binding" is coming into play.


The easiest example is a list with members. When you place a list into canvas, you can add two scripts:

Script for DS.onResultSetChanged()

Here, you want to populate the list with members of an dimension always when the data source is changing.

LISTBOX_1.setItems(DS_1.getMemberList("0BC_PERS1", MemberPresentation.INTERNAL_KEY, MemberDisplay.TEXT_KEY, 100, "All"));

Script for LIST.onSelect()

You want also change the data source when any entry in the list is selected.

DS_1.setFilter("0BC_PERS1", LISTBOX_1.getSelectedValue());

With both scripts, you can populate the listbox and filter the data source. The listbox will be populdated by the members, and those list is dependent on the member read mode defined in the query.

Now, let's reduce the code...

With the data binding, the code can be even reduced. We use second listbox and will bind it to the data source. For this see small icon in the properties.

It gets activated as soon you select a property:

and in addition to this, also you can press the icon to see the binding options.

The options are depending on the property type - here we see the members binding as the property is "a list". There are input and output bindings, those are also dependent on the property type.

Definition of the Input-Binding

You can select the binding, now the property is a bit more advanced.

Those new settings are allowing you to specify the detailed binding for this property. First, you should select a data source. In my case this will be DS_1. Now, you can select the dimension which you want to use. A dialog will pop-up to with available dimensions.

Next step is to place also the text "All" in the "All Members Text" property, of course also the maximum and member display can be changed here.

By this, when you execute you should see... a list of members of selected dimension (in this case the product)

So, the list is pre-filled, but nothing happen when I select one... And here you have a choice again, either go the "standard" way and code the onSelect event or use the output binding. The event may make sense when you use the multiple selection option and want to make some special evaluation of those selections or other custom code. But in case you just want to modify the data source with the selection, we can look at the output binding.

How to use Output-Binding

The output binding can be accessed in the same way, also via the small icon. When you select it, also here more options will appear.

In this case, we can select the "Filter Binding". For those, again the data source should be selected and the target dimension. In most cases, it makes sense to select the same data source and the same dimension, but also here you have some flexibility to make a different selection.

The effect is, as soon something is selected the data source is changes and also the first list is changing...


By this example you can learn how to use data binding to avoid some scripting. You can also experiment with other properties to see more binding options.


If something is missing or unclear, feel free to comment.