Data Grids

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:

Groups

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.

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.

Rows

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.

Data

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.

Row Settings

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.

Selected
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.

Required
Checkboxes and radios only. This will set the row to required. This means that the website visitor must check or select that row in order for the field to be valid. This is useful, for example, when you want to have a privacy policy or terms of use checkbox.

Disabled
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.

Hidden
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.

Bulk Actions

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
  • Delete

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’.

Settings

The settings icon opens up further settings for the current group you are on.

Label

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.

Field Selector

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.

Export

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).

Import

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.