How to setup a table view form with column headers and resizable columns in Servoy.
Just another quick Servoy post to show how to create a “Table view (locked)” form with column headers, and make those columns user resizable.
First off, create your form with the form wizard in the normal way, but make sure the Place with labels option is ticked – as we will be using those labels as the column headers later.
Your form should look something like this:
- Now click on the grey background in the form designer area, and then set the view option on the properties tab to Table view (locked)
How to make the columns user resizable:
There isn’t a dedicated option on the properties tab to make the columns user resizable… To allow the columns to be user resizable you need to set the anchors for each field element you want to make resizable to left and right.
- Highlight all the field elements you wish to make user resizable.
- Then, on the properties tab set the anchors to both left and right.
How to add column headers:
To set a column header you need to add a label element for each field element on the form and set its labelFor property to the name of its corresponding field element.
Fortunately we automatically added labels for each of our form’s field elements by ticking the Place with labels option above when we created the form with the Servoy form wizard.
But, beware, the form wizard does not automatically set a field element’s name property. If you look at the name property on the field element’s properties tab you will see they are all blank.
If you look at the screenshot below, you will see that the form designer has labelled each field element with a name from somewhere, but as the name property is blank in the properties tab the name shown here is actually the dataProvider name, and not the name property of the field element!
- As you can see the field element is labelled on the form designer.
- But this value is the field element’s dataProvider, and the name property (that labelFor on the associated label element will link to) is blank.
So first we must give each field element on the form a name – I usually just set the field element’s name property, to the same value as it’s dataProvider property value.
- Here I set the name of field element customer_id to customer_id. Which happens to be the same as it’s data provider name, but Servoy doesn’t mind that, and I think it’s useful to keep as much as possible the same as the source database field name. Note: name will be blank until you set it to something!
- You need to repeat this for all field elements on the form.
Now we must set the labelFor property for each of the label elements on the form, to their corresponding field element’s name.
- Here I set the labelFor property on the “Customer Id” label element to its corresponding field element name (“customer_id”).
- You need to repeat this for all label elements on the form.
And the result:
All columns have a header name, and all columns are user resizable! 🙂
If the labels appear as columns, or a column has no header name, then there is a mismatch between the value in a label element’s labelFor property, and the value in its corresponding field element’s name property.
Be aware that although the Servoy form wizard does not set a value for a field element’s name property by default. The form designer will still show a value inside that element on the form designer!