Expressions in PropertyGrid

02 Nov 2016

Binding expressions allow you to perform calculations when binding your view model. In this blog post, I will describe use of this feature via a simple demo project - an HR app that displays employee information. Employee data is stored using the following structure.

{
	“first”: “John”,
	“last”: “Atkins”,
	“jobTitle”: “VP of Marketing”,
	“location”: “Boston, MA”,
	“photo”: “url here”
}

For purposes of this sample project, the employee’s full name will be displayed within the app’s detail view. As you’ll soon see, binding expressions allow you to accomplish this objective when binding to existing data.

View designer image

This view contains a larger label that displays the employee’s full name. The label’s value begins with an equal sign, which means that the value itself is a JavaScript expression. In this example, we join the values of the first and last properties of the employee object. Xenarius will automatically re-calculate the value if the first or last properties change. Let’s see how this view looks in action.

Working application made in app builder

Here is a screenshot of the application running within the Xenarius Simulator. Xenarius evaluates the full name expression and displays the employee’s full name.

You may use any valid JavaScript-expression after the =(equal) sign. Expressions are available when specifying view, widget and data provider settings. Certain business logic operations like Log, Show Alert or Show Web Page also allow you to use expressions instead of simple values. To use expression in non-text editors, click the black square button to the right of the editor and select Set up binding. This will allow you to specify an expression.

Expression binding example in business logic designer

For example, if you have multiple data providers sharing the same base url, you can extract the base, store it into your global model and then use expressions to prepend it to URLs in data provider settings.

Expression binding example in data provider configuration

You may use expressions to output complex values into developer console.

Unlike bindings, expressions are one-way. If you bind a text editor using expression =’Current value is ‘ + $model.textProperty, the editor will display the textProperty value, but the property value will not change if the user enters a new value. By using this features, we’ve simplified our app in a number of ways. We managed to eliminate a number of calculated properties and replaced them with expressions.

We’d love to get your feedback on this feature. Feel free to leave a comment below.