DriveWorks Hierarchical Control

In this Tech Tip video we look at the basics of DriveWorks Hierarchical Control properties of form controls. In this simple example, we look at how to use these properties on your forms to help make your forms more dynamic and responsive to the type of device your customers are viewing DriveWorks on.

In this video, we use three simple boxes that could represent controls or frame on a DriveWorks project and then proceed to use the control properties to assist in form layout.

The hierarchical control properties we will be using here are:

Height	ControlName .Height
Left	ControlName .Left
Top	ControlName .Top
Width	ControlName .Width

 

These are the main properties we will be using but there are many more available. You can get a complete list of them here: http://docs.driveworkspro.com/Topic/HowToControlProperties

Typically, the first thing you want to do when laying out your forms is align the controls to one another. We can use the ControlName.Top property to align all the controls to the top of the first one. This can be very useful when creating a large group of controls that you might want to move around or have shift dynamically based on screen width. Linking all the controls together allows them to move as one.

Next, we start to connect the text boxes together horizontally. To do this we will link the header label to width of our web page using DWFormContainerWidth variable.

Now you can see the header goes all the way across the screen and is linked to the actual width of the page.

Next, we can start linking the three boxes together so they are all right up against each other. Starting with Box2:

Formula: Box1.Left+Box1.width

Now we do the same for Box3:

Formula (same as before only we switch to using box2): Box2.Left+Box2.width

Now that all three boxes are linked together we can start to build rules for their individual widths. These rules can be whatever we want them to be, but in this example, they will be linked back to width.

The rules for the three boxes are as follows:

Box1 width = 250 (Static Value)

Box2 width = (DWFormContainerWidth-Box1.width)/2

Box3 width = (DWFormContainerWidth-Box1.width)/2

And the result looks like this:

And if we drag the windows smaller the red box stays static at 250 with the blue and green split the difference with the remaining form width.

Don’t forget to download the example files here. This is an introduction DriveWorks Tech Tip, which we will be building on in future DriveWorks Tech Tips videos and blog posts. Stay tuned!