Need a configurable Excel-like table grid for data collection on a phone?
One of the unique controls in XForms is a totally configurable table grid element. This is something that is a rare find in most forms software tools. I personally haven’t seen any form software that has something like this and that works on small devices like mobile phones.
In fact, most software systems for field data collection would require you to use up an entire row for each cell. So if for example, you wanted to build out a table with 3 columns and 3 rows, you’d have to have 9 separate rows on your electronic field form plus 3 rows with just labels, for a total of 12 rows (compared to 4 rows with a table grid control).
To illustrate this, take a look at this side by side comparison.
The mockup above, on the left, is how most form software will display the data fields on a mobile phone.
Basically one row per cell.
This is not bad for small table structures.
But if your table structure is big, it will grow fast.
Imagine if in the above example, you need to have 20 table rows instead of just 3. You’d need 80 rows to do that. And your field guy would then have to scroll down quite a bit to view all of the rows. Here’s what that would look like:
Can you add more rows in an ad-hoc fashion?
Yea, you bet. Adding more rows is also controllable. So you could allow someone to add additional rows to a table or disable the ability to add rows altogether. Take a look at the screenshot below that illustrates this button to add more rows to an existing table.
Can you pre-populate values into cells?
Yes. You can set up a column to take a default value for ALL the rows. Or you can set up a specific cell on a specific row to take on a default value. Take a look at the previous screenshot (above).
In the example above, the Status column was set up to take the value of N/A. This column is a listbox, so when you tap on a row, you can then change this value from N/A to any of the other values in that listbox. Note also that the leftmost column is set up to to take a specific value for each row, and this value is locked so that the user cannot edit it. The screenshots below illustrate this in sequence.
The leftmost screenshot is the listbox screen, where the user taps on a value in the listbox. The middle screenshot shows what the row in the table looks like, where the user can enter values for each column in that row. The rightmost (last) screenshot shows what the row in the table looks like after the user enters some data into the row.
Can you delete rows?
Yes. you can set up your table to allow deleting existing rows, Or to not delete rows. You can also set up your table to allow a user to add a new row but be able to only delete those newly added rows, and not any of the pre-loaded rows.
Can you insert other types of data into the table?
Yes. You can insert checkboxes, date and time fields, and even signatures into table columns. Perfect for replacing paper forms that require a bunch of different people to sign the same sheet. Here are some examples.
Want to learn more about XForms?
Click the button below to contact us or to schedule a demo.