Design Studio 1.5: Data Binding - using "Formatter Functions" for advanced logic

[Karol-K]

Starting with the basics for data binding (Design Studio 1.5: View on Data Binding (for Text)) we will today look at the more advanced options, where the word "data" can be ignored.

The Goal

you actually do not want to get the data cell content and bind to a property, but perhaps you want to make more logic and use the binding only to execute some script and fill in the property independent of the data?

Background

The data binding function is more advanced than you could imagine.

It is allowing to bind a property to a data source, but also it works w/o any data source. you can simply bind the property to a scripting function. This is really cool for better script maintenance as you do not need to push the values of properties any more, you can simply pull them on specified events.

Before you start

Binding is executed in the pre-rendering phase of the application - therefore there are some restrictions in terms of which scripts you can execute.

Basically, all functions which are influencing (changing) the Data Source (like filtering) cannot be executed. You will see following exception in case you try:

The other functions, especially all "get()" functions on Data Source can be executed, like "getFilterExt()".

You can execute setters of other components in this phase, the changes will be not saved in the model, but as binding will be executed always on change of the data source, the script will actualize the components.

The Procedure

The below example will be on the SCN Component "Accordion 2.0" which is already available in the repository. The goal is, instead of the Filter Panel, I would like to use the Accordion for filtering. The question is how to put the dimensions / members into the Accordion with less code..

This is what I want to have:

How to start?

We start with the default data binding procedure.

• select the property "CSS Class", activate the data binding, for it. We are not interested in any changes in this property, we just want to use it for the binding trigger.
• When you activate "Cell Binding", just exit the Binding dialog w/o any selection - as we do not need any selection here.

    

• now, you can decide - do you want to fill in the content only once or on every data source change event
  • once - do not select any data source, the method called "Formatter Function" will be executed once.
  • on DS change - select the data source you want to (here DS_1)
• and, create an global script (you need first to create the technical object GLOBAL_SCRIPTS). Give some name to the function.

    

(example for single execution) 

• the main content is in the "Formatting Function".

Fromatting Script Content

This function must fulfill 2 requirements:

• return some static value for the "reused" property, eg "" (empty string)
• fill in the component with the information we want.

What do we actually want? I need to read the dimensions of the Data Source and the corresponding members.

var DS = DS_1;

var dimensions = DS.getDimensions();

dimensions.forEach(function(dimension, index) {

  var key = dimension.name;

  var text = dimension.text;

  var url = "";

  ACCORDION_BOUND_EMPTY.addSection(key, text, url);

  var members = DS.getMembers(dimension, 999);

  members.forEach(function(member, index) {

        var intKey = member.internalKey;

        // hack for unassigned as its key is empty!

        if (intKey == "") {

            intKey = "UNASSIGNED";

        }

        var parentKey = dimension.name;

        var memberKey = dimension.name + "-" + intKey;

        var memberText = member.text;

        var memberUrl = "";

  ACCORDION_BOUND_EMPTY.addElement(parentKey, memberKey, memberText, memberUrl);

    });

});

APPLICATION.createErrorMessage("binding for accordion");

// return some constant value for the CSS property

return "";

With this script my Accordion will get the content with PULL on the binding.

Boundaries

In some cases, you get the exception also when just requesting the members. There is internal event which is triggered also on getMembers call. For time beeing, you can overcome this by placing a script with the same call in the "onResultSetChange()" event. But of course in this case, the performance is not too good, as the call is executed 2 times...

It means, for the case you get the exception, it is better to stay on the data source event.

the call in the event helping in my case:

// execute here to avoid events in the bindign script

var dimensions = DS_1.getDimensions();

dimensions.forEach(function(dimension, index) {

  DS_1.getMembers(dimension, 999);

});

Summary

Using the binding, you do not necessary have to use the data, especially in cases you have some script which should be executed, you can position the script in the binding formatter function instead of the data source on resultset change event.

Outlook

This can be interesting for better binding also of arrays in SDK components, I will try to describe it soon.

The App as Example

See the app in the repository - applications/SCN_CUSTOM_BOUND_SIMPLE. You need to change the system and query.