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

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.

If you have a text field in your application, and you place there some value by “getData” function, you can see this option with Data Binding to reduce your script.

What is the New Function?

In release 1.5 every property can be bound to a data cell. You can start similar as in the blog Design Studio 1.5: View on Data Binding (for List). But in this case, we will look at the other binding option. The scenario is on example of a simple text field:

The text will be bound to a cell – therefore I select now the “Data Cell Binding” option.

Once selected, I can chose the cell in the data cell selection dialog.

In my example I have only one data source (DS_1), but having more in the application, you can change the data source as well.

After the selection the text field will be immediately updated with this value.

Special Case – Formatting Function on Input Binding

So, connecting the data cell by binding I can see the value, but what to do in case you wan to place here a real text?

Just use the “formatting function”. Assure first, you have a global script object created in the application.

Now, you can create a new function.

and then you need to fill in the content of this function:

This function is requiring following content:

• you need to return here a string, as the property is of type string.
• you will get the formattedValue and the real “value”
• you can make whatever you need here, also access other components and global functions.

The executed output is:

More funny stuff!

Here a small example for other property to show you the power of this feature. You can bind also the “style” property of the same text. Here is example script:

or in text for copy & paste:

var style = “”;

if(value < 50) {

  style = “background-color: red;”;

} else {

  style = “background-color: green;”;

}

return style;

and the result:

As you see, there is a lot of freedom on this function.

Execution Point

Perhaps some words on “when this function will be executed?”. The execution point of time is same as DS.onResultSetChanged(). The difference is, you can better structure (or differently) structure the code.

Summary

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

Questions?

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