Need a configurable Excel-like table grid for field data collection on a phone?
One of the unique controls in XForms is a totally configurable table grid control that you can embed inside a form and that behaves in some ways like Excel. This is something that is a rare find in most forms software tools. I personally haven’t seen any form filling 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.
Are these tables hard to build?
No. They are really easy to build using our Form Template Designer. Here’s a screenshot of the table designer showing the controls you can use to edit a table.
When you click on the “Add Column” button, you will see a lightbox window pop up like the one below.
Once the popup window appears, you can select the type of column you want to add to the table. In this example we are going to add a signature block to the table, so we will select a Signature field and mark it as a required field, as illustrated in the screen below.
Here’s what the table preview looks like with the new Signature column. Notice that the background color is light yellow, denoting that it is a required field.
Now we are going to add one more row to this table by clicking on the “Add Row” button. When you do that, a popup window appears, like the screen below.
If we add some default values, they will also appear in the preview screen. And then if you hover your mouse over a row, you will see some small icons to the right of the row you are hovering over. These buttons allow you to move the row up or down, edit the values in the row, clone the row, or delete the row. Here’s what that looks like.
All of this is a cinch to understand, and is also very responsive on-screen while you interact with it. Take a look at the animated gif below that shows me editing this table in realtime.
Want to learn more about XForms?
I don’t know of any generic forms software tool that can create fully controllable tables like this, this quickly, and that work not only on tablets but also on smartphones with tiny screens.
If you’d like to kick the tires and test this stuff for yourself, click the button below to contact us or to schedule a demo.
Trackbacks/Pingbacks