This is a Servoy tutorial introducing the relatively new designTimeProperties in Servoy Developer. When I first saw the designTimeProperties in the Servoy Developer properties panel, I was immediately curious as to their purpose. At first I imagined they might enable me to override element properties at run-time, like changing the style sheet assigned to an element, but then realized that if that were the case, they would have been called run-time properties.  Being inquisitive by nature, I asked around, and finally found someone who told me how they worked. As they talked, I listened, and eventually that light-bulb in my head went off (energy-efficient 4w); I clearly saw some excellent uses for it. The purpose of this tutorial is to share their power with you, so that you can gain familiarity with how they work, see them in action, and hopefully start using them in your projects.

In an earlier Servoy tutorial, Using an Object to Control Elements on a Form, I demonstrated three ways to control groups of elements in the UI using object-oriented programming, allowing you to easily toggle the element groups on and off.  In this tutorial, we are going to do another example of controlling groups of elements in the UI, but this time using the new designTimeProperties.

Okay, let’s get started. Here is the designTimeProperties feature in the Servoy Developer properties panel. You’ve probably look at this a hundred times a day, but I bet you never gave the unobtrusive designTimeProperties more than a moments glance. The designTimeProperties enables you to enter a list of name/value pairs for any Servoy object, like forms, button, labels, etc. That’s all it does, but in its simplicity, it’s very powerful.

You can click in the “click to add” area, and begin to add properties. You can call the properties anything you like.

Let’s start our demo by adding a label to our form, and then with it selected, begin adding some designTimeProperties to it called “grpA”, “grpB”, and “grpC’ (shown below). Next, let’s add a field next to the label and do the same thing, adding three properties with the same name.

Make sure everything looks nice on the layout, and then begin duplicating the label and the field, positioning them into a grid as shown below. All the designTimeProperties you defined in the originals will be copied to all the duplicates. The name you assign to the labels and fields are not at all important in this example, as we will be referencing the designTimeProperties, but they do need to have a name.

Now, what you are going to do is enter some values into the designTimeProperties of each label and field pair. Holding down the Alt key (Windows), select a label and a field pair that will be toggled on/off together, and then enter a value (1) into one of the properties you defined, assigning them to a single group. For purposes of this demonstration, it is not to important which properties you set for a label and field pair, but imagine you are grouping them into logical order that will be controlled by options users toggle to show or hide the pair. I suggest using just one group for now, because if you assign a pair to multiple groups, then you will see some cross-over effects, which depending on the circumstances, may be what you are trying to achieve. Work your way down the form until all the element pairs have been assigned to a group.

Finally, place three buttons on the layout as I show below. Whew! The hard work is done.

Okay, now we will write some code that will control three different configurations of label and field pairs. Ready? Begin furiously typing!

function ElementGroup(event,group){
	var aElementNames = elements.allnames,
	    i = aElementNames.length;

	while (i--) {
		if (elements[aElementNames[i]].getDesignTimeProperty(group) === 1){
			elements[aElementNames[i]].visible = !elements[aElementNames[i]].visible;
		}
	}
}

Whoa! Complicated code or what? Well, I did have to use the while loop to process the elements (rather than a for loop), because as we learned in the Servoy Tutorial “Optimizing Code Performance“, it is the fastest loop Javascript has to offer, and there are typically a lot of elements on most of our forms. If you don’t have time to do it right, when will you have time to do it over?

The while loop counts down to zero as it cycles through all the named elements on the form, and each element in the the elementNames array has it’s designTimeProperties checked to see if it belongs to the group name passed in to the method. Bracket notation is used for referencing the elements by name, and if they are found belonging to the group requested, toggled to the opposite state they were in.

Now that we have a method, we can hook the method up to our three button’s onAction event, making sure we define the appropriate “group” property for the corresponding button. In the example shown above, we are setting up the call for Btn A, and passing parameter “grpA” to our method. When the method is called it will cycle through all named elements on the entire form and process those that have designTimeProperty “grpA” = 1. Do the same for the other two buttons, smile, and launch the application.

Press the first button, and the elements on the form that have the designTimeProperty “grpA”  = 1 will be hidden. Press it again and they will reappear.

If you now press the button for “grpB”, then that group will be toggled on/off.

So is that slick or what? I remember way back when, when things like this were hard to do. With designTimeProperties, you now have another important tool in your arsenal that will enable you to take control of your UI. I encourage you to explore them, and share with other users in the Servoy Forums, the unique ways you put them to good use.

That concludes this short Servoy tutorial on the new designTimeProperties in Servoy Developer. I hope you enjoyed it!