Creating a table is a little bit different from most other fields, and involves some additional steps. This article goes over the details of how to add and configure a new table in your form template. First, we review the basic operations of table configuration, and then we go over a specific example.
All processes described below take place in the Template Editor, and basic familiarity with the Template Editor is assumed.
Managing columns
The Properties panel for the table field has a special Columns section that other field types do not have. This section lists the existing columns in your table and lets you add, reorder and delete columns.
To add a column, click the Add Column link at the top of the section. The column will be added at the bottom of the list with a generic name.
To reorder columns, use the up and down arrows.
To delete a column, click the X next to it.
To view/edit a column’s properties, click the column name.
Editing column properties
View or edit a column’s properties in one of two ways:
Click the column name in the Columns section of the table’s Properties panel, or
Click the grey column header in the actual table, as shown below.
The selected column’s properties will appear in the Properties panel. Click the Table Properties breadcrumb at the top to go back to the table’s properties.
Column properties are just like regular field properties, only they get applied across each row of your column. Once you select the column type, the properties associated with that type will show up.
There are several properties that are column-specific, like the Hidden property which lets you hide the column. Depending on your field type, there may be some properties that need to be set for each row.
In the image above, we see that with the Default Value property — it is set separately for each row, because we want the “Unit Price” column to auto-fill with the price of the part selected in the “Part” column.
Resizing rows and columns
You can resize a table’s row or column directly in the editor by mousing over the row/column lines in the grey headers until you see the resize cursor.
Or you can resize rows and columns by entering exact height and width pixels in the Properties panel. To view your row/column properties in the panel, simply click the desired row or column’s grey header.
End-to-end table creation example
In this section, we step through how you might go about creating a table. In the example below, we have our sample work order form. The background has a “Parts Used” table with 6 columns.
First, drag-and-drop a new Table field from the Template Fields panel into the Builder area.
Next, give your table a name and add the desired number of Max Rows and columns in the Properties panel. In this example, we have 4 Max Rows and 6 columns.
Next, move your GoFormz table on top of the table outline in the background, and resize your rows and columns as needed. In this example, we resized the rows and columns to match the “Parts Used” table image in the background.
Finally, click a column header and edit its properties in the Properties panel. Repeat this for each column in your table. In this example, we are editing column 5, now called “Unit Price”.
