WS Form data grids make entering a list of information quick and easy. Data grids work in much the same way as a spreadsheet and provide a powerful way of managing more complex types of data in WS Form.
In their simplest form, they are a list of items. An example of a simple data grid would be a list of countries or states. A more advanced data grid might be a table containing country abbreviations, full names, and ISO codes.
The Data Grid Editor
Tip: Click the expand icon (top right) to make the data grid editor the full width of the page.
The data grid editor is made up of the following components:
Data grids can have one or many groups. Groups are much like a sheet in a spreadsheet. Groups are used, for example, to group pulldown options into logical sets.
If your data grid only needs one logical list of data, e.g. a list of states or countries, you can stick to just one group. Note that some types of data grids are restricted to one group.
To add a group, click the add icon.
To delete a group, click the delete icon, while hovering over the group tab.
To rename a group, click on the settings icon, then enter a new label for the group.
You can also reorder groups by clicking and dragging them.
All groups have the same columns.
Data grid columns in a data grid enable you to introduce new dimensions to your data. For example if you needed to store a state abbreviation in your form submission but display the full state name in your form to the website visitor, you would use two columns: State Abbreviation and State Full Name. You would then select the State Abbreviation as the value and the State Full Name as the label.
To add a column, click the add icon at the top right of the data grid table.
To delete a column, click the delete icon while hovering over the column name.
To rename a column, double click on the column heading, then enter a new label for the column.
Each data grid record is represented as a row in the data grid table.
To add a row, click the add icon at the bottom right of the data grid table.
To delete a row, click the delete icon in the rightmost column of the row you wish to delete.
To edit the data in a data grid, simply click on a cell in a particular column and row and edit the value, much like you would in a spreadsheet. Pressing ‘Return’ or clicking away from the cell will save it.
You can add HTML to cells too.
When you hover over a cell, the ‘Insert Image’ icon will appear. Click on the icon to open the WordPress ‘Select image’ modal. Select an image and then click ‘Use this image’. WS Form will then insert the HTML for that image in your cell.
Each row will have various settings you can enable or disable. These settings are shown on the rightmost side of the data grid row.
Hover over the squares to see the available options. Different types of field will offer one of the four settings.
This is the default selected row for the field type. For example this might be the default option that is shown in a select pulldown. If no rows are selected, the top row will be selected by default. Some field types allow you to select multiple selected rows by default.
This will disable a row. For a select pulldown, this will typically show the row in light gray. For checkboxes and radio buttons, the input will be grayed out. Website visitors will be unable to select that row if the disabled setting is enabled.
This setting lets you hide a row completely from the form. This is useful if you want to temporarily hide a row and then show it at a later date.
As well as deleting and changing settings at a row level, you can also bulk change or delete rows using the bulk action tool.
Select the rows you want to affect by checking the boxes in the leftmost column of the data grid. This will activate the bulk actions pulldown from which you can choose:
- Set default
- Set not default
- Set required (Checkboxes and radios only)
- Set not required (Checkboxes and radios only)
- Set disabled
- Set not disabled
- Set hidden
- Set not hidden
Click ‘Apply’ to apply the bulk action.
Rows Per Page
You can select how many rows are shown per page using this option. Select a number from the pulldown, then click the ‘Apply’ button’.
The settings icon opens up further settings for the current group you are on.
Use this to edit the label of the group you are currently editing.
Wrap in Optgroup (Select Fields)
For select fields you an wrap the options created from your data grid in an optgroup. And optgroup enables you to add groups of options in a pulldown. An example of using this might be to split countries into continents. If this is enabled, you have the option of disabling an entire optgroup much like you could an individual row.
Auto Group By
This powerful feature enables you to automatically create data grid groups by selecting a particular column of your data grid.
Below we use the example of counties and continents to demonstrate this:
Assume you had two columns. The first column is called ‘Continents’. The second column is ‘Countries’. The first column would contain repetitions of the continents for each row containing a country in that continent.
By selecting ‘Continents’ under the ‘Auto Group By’ pulldown, WS Form will split up the rows into separate groups. Each group will contain the countries for each continent. You can then enable the ‘Wrap in Optgroup’ feature to create an easy-to-use select pulldown that is logically grouped into continents.
Depending on the field type you are editing, you will typically find a series of pulldowns below the data grid editor that enable you to select which column to use for a particular element of that field.
For example select pulldowns have a label and value. The label is what is shown to the website visitor. The value is what is ultimately stored in the form submission. You can set the label and value to the same column if you wish, or choose two different columns for the value and label.
You can export any of the groups by clicking the Export icon. This will download the current group in CSV format. The CSV file also contains columns for the row settings (see above).
You can import any CSV file into a data grid. This is useful for importing data such as a country or state list.
To import a CSV file, either click the Import icon or drag a CSV file into the data grid area. When you drag the file into the data grid area a blue box will appear with a dashed outline. Release the file into that area and the CSV import will being.
Note that when you import a file, all data in that data grid will be replaced with the CSV you import.
For sample CSV files that can be imported into a data grid, click here.