In this blog post I will explore a handful of XLSForm techniques to help you better control the organization and layout of questions within a form. You will learn about groups, grids and pages, but also other tricks to refine the size, placement and look and feel of questions within your form.
Groups organize questions into sections, helping users more easily navigate complex forms.Our Survey123 for ArcGIS: Using Groups to split your survey into sections - YouTube video is about the quickest way there is to learn the basics of XLSForm groups. I strongly suggest you watch it, it's only 2 minutes long.
As described in the video, you can create sections in your form by enclosing a set of questions within a begin group/end group block. You need to specify a value in the name column of the begin group row, and this name must be unique. If it helps you navigate the spreadsheet, you can also add a name to the end group row, but it is not compulsory.
|begin group||hh_group||Basic Household Information|
You can add as many groups as you like to a form, and you can nest them too: you can add groups within groups!
On occasion, you may want to display groups collapsed and let the end-user expand them if needed. This can be achieved by setting the appearance column to compact.
It is not possible to dynamically expand or collapse a group with an XLSForm expression.
Use the compact appearance to make your group appear collapsed by default.
Since groups are fundamentally used to help users navigate long surveys, it is important to take pride in the headers. The group headers, if formatted appropriately, can really make a big difference for people.
The font of group labels by default is a bit bigger and bolder than the labels of questions. This helps the group header stand out. Using HMTL formatting within the label column of the begin group row, you can bring your own style to the group header. For example, you can center the label in the screen, change its color, and size.
In the example to the right, the group headers have been given different background colors to help users navigate more quickly between them. Note that the first two groups, in red and blue, are collapsed but users can choose to expand them.
The Style your survey—Survey123 for ArcGIS | Documentation help topic shows the most common HTML tags that you can use to format your labels. When setting colors, you can use either their HTML code name or their hexadecimal representation. At W3Schools you can use the handy color picker for HTML colors. All the properties described in the documentation are supported in the Survey123 mobile and web apps except for the background color, which is only supported in the field app.
The next XLSForm sample shows the syntax for defining the background color of the group header.
Body bgcolor is only supported in the field app. Webforms will ignore this property.
|begin group||hh_group||<body bgcolor="#C00000"><font color="white">Household Information</font></body>|
When working with labels for your groups (and questions, actually), remember that on top of the formatting syntax described above, you can also dynamically change the label content. For example, say you have a health household interview survey where we you need to capture all symptoms detected in each of the household members. You can present the symptoms group with a label that matches the name of the household member for which you are capturing the data. This could help eliminate confusion. Below is the actual example. Look how the group header in black changes depending on the household member name entered.
Check out https://community.esri.com/groups/survey123/blog/2018/11/01/understanding-dynamic-labels-in-survey12... to learn more about this technique.
One final note on groups relates to their visibility within the survey, which is controlled through the relevant XLSForm column. If an expression written in the relevant columns evaluates to true, the group is shown, otherwise it is hidden to the user.
A common bad practice with form design consists on repeating the same relevant statement to a large collection of consecutive questions. This slows down your survey, because the same expression needs to be evaluated again and again for each of the questions. If a sequential set of questions shares the same relevant statement, it is good practice to group them and apply the relevant expression to the begin group row only. If the group is relevant, all questions within the group will show. If the group is not relevant, all questions inside the group will be hidden. There is no need to duplicate the relevant expression again and again.
Pages are particularly useful when working with large forms, helping you logically organize your questions and giving end users a sense of progress across the entire survey.
Even for smaller surveys, pages can be useful. In the example below we have a Special-Use application permit form. I added a welcome image and text on the first page to create a cover for the form. Note that the first page does not expect any input from the user. It is just a welcome page, or cover page to the survey. Next, I organized the actual questions within my form into pages, giving each page a descriptive title at the top. As users move from page to page, a progress bar at the bottom shows how close they are to the end of the survey.
In the Survey123 field app, users can easily move through pages in the form one by one. Alternatively, a page menu lets users jump to any of the pages in the form with a simple selection. In the example shown below, the page menu helps the user jump from page 3 to 32 with just a couple of taps.
If you want to add pages into your form, firstly you need to set the style of your XLSForm to pages. This is done through the settings XLSForm worksheet as shown below.
|Zika Household Survey||pages|
Once the style is set, add one group for every page you want and set the appearance of the group to field-list. For example
|begin group||hh_group||Household Information||field-list|
When working with the pages style, it is good practice to have all questions within a page. That is: make sure all your questions in the form are within an existing group with an appearance set to field-list. If you leave questions outside of a page, you will get erratic behavior across the web and field apps where a single question may appear on every page.
You can combine groups and pages. That is, you can include groups within a page. Groups do not become pages unless you set their appearance to field-list.
All the header HTML formatting tricks described for groups above, also apply to pages. The same goes for the behavior with the relevant expressions. You can hide pages by using relevant statements, however keep in mind that the behavior across the web and field app is different. In the web app, non-relevant pages will be truly hidden, you will not even see them in the page navigator controls. This will cause the total count of pages in the page navigation control to vary as pages become visible or hidden. In the case of the field app, as of version 3.7, the pages will still show in the page navigation control, but will be shown blank. This is a known issue (BUG) in the field app.
Hidden (non-relevant) pages in the field app will be shown blank. This is a known issue as of version 3.7.
Typically, questions within a form are arranged to take the full width of the screen. It is possible however to arrange multiple questions side by side using custom grids (theme-grid in XLSForm jargon). This is particularly useful when you are designing a form for use on a tablet.
With this type of grid layout, you can maximize the number of questions shown within the width of screen, reducing the need for users to scroll up and down. Grids can also help you mimic more closely the look and feel of legacy paper forms. Copying the layout of paper forms is not necessarily a good idea, but in some cases achieving some level of resemblance can make nostalgic users happier.
In the example shown to the right, you can see how questions can be arranged side by side. Crafting such a survey, defining exactly the placement of questions takes some thought and trial and error, but the experience it provides to the end user is significantly better than with a regular layout. This type of design is generally put together with a specific form factor in mind. That is, you design your survey for a particular minimum screen size. If a grid design like the one shown is loaded in a smart phone, the form is not going to look right. I have seen some people creating two flavors of the same survey: one for tablets and one for smart phones. It clearly adds an overhead during design, but if your survey questions are not going to change much it is a good thing to consider.
The theme-grid style is not supported in the web form. It is only supported in Survey123 Connect and field app.
To arrange questions in a grid layout, you first need to set the style of your survey to theme-grid. This is done in the settings sheet of your XLSForm.
Once the theme-grid is set, all groups within your survey will contain questions using a four-column grid layout. You can change the number of columns in a grid by simply adding the w (as in width) property to the appearance column of your group. For example, w2 means two columns, w8 means eight columns.
|begin group||hh_group||Household Information||w2|
Unless specified otherwise, questions within a group will always take one column of the grid. In the example above, the GPS Location and Address will be placed side by side in one row, and the City and ZIP Code will complete a second row.
Using the w property for the individual questions within the group, you can choose how many columns you want each question to take. In the example below, I gave two columns (one full row, since the grid has two columns) to the GPS Location question, and another full row (two columns) to the address. I then arranged the City and ZIP Code questions side by side giving them a w1 appearance.
|begin group||hh_group||Household Information||field-list w2|
You will also note in the screenshot above that the Household ID question is taking the full width of the screen. That is expected. When using the theme-grid, questions outside of a group always get rendered as usual, taking the full width of the screen.
|My Survey||theme-grid pages|
When using the body:esri:style column, keep in mind that some properties are not compatible with theme-grid. For example, borderColor is not supported (do you need border colors? If so Vote for this GeoNet idea), and repeats inside of grid style groups do not support backgroundColor either.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.