Tutorial | 06/05/21 | #WeTalkTech
Survey123 is a powerful data collection asset that is used in many workflows. It’s ease of use when building surveys in the web designer is attractive to new users; however, more powerful features can be harnessed when designing surveys within Survey123 Connect.
This article will highlight some advanced techniques for utilising dynamic colouring of questions and a useful summary page that can be used to display responses to multiple questions in a tidy and concise table.
Figure 1 shows the demo survey we will be working with. It is a survey that is used to inspect different rooms in a house. Each room can either pass or fail the inspection, if a room fails; a select multiple list will appear allowing the user to select reasons for the failure.
The summary table will show whether each room has been inspected and its status which can be pass or fail. It will also show a list of reasons why a room has failed. This would be especially useful if the user had a large survey and wanted a concise way of summarising their data rather than needing to scroll back through the form to review it.
Figure 2 shows the demo form when data has been entered. Notice the background colour of the question titles change dynamically dependant on whether a user selects either pass or fail. The summary table has also been populated.
How to create dynamic colouring
To create dynamic colouring, we need to have 2 rows:
The process of applying the colouring is as follows:
| Type | Name | Label | Calculation |
| a=Select_one passfail | reception | <body bgcolor=${receptionbg}><font color="black"><b>Reception</b></font></body> | |
| calculate | receptionbg | if(selected(${reception}, '1'), "#ff7373", if(selected(${reception}, '0'), '#5ac18e', '#E7E7E7')) |
Table 1 - Dynamic Colour Rows
List name | Name | Label |
passfail | 0 | Pass |
passfail | 1 | Fail |
Table 2 - pass/fail choices
Table 1 shows the two rows that control the dynamic colour. The calculation will check what has been selected in the select_one question. If the choice is ‘1’ or ‘Fail’, it will return the hex code #FF7373 (red). If the choice is ‘0’ or ‘Pass’, it will return the hex code #5AC18E (green). If nothing has been selected it will return #E7E7E7 (grey).
if(selected(${reception}, '1'), "#ff7373",
if(selected(${reception}, '0'), '#5ac18e',
'#E7E7E7'))
This calculate question can then be passed into the label of the question you wish to apply the colour to. This is done by using the “bgcolor” tag.
<body bgcolor=${receptionbg}><font color="black"><b>Reception</b></font></body>
Whenever the choice selection changes for the select_one question, it will update the receptionbg calculation which in turn will change the background colour of the select_one question.
How to create a summary page
The summary page is built by utilising the theme-grid page style and a number of note and calculation question types.
The calculate questions are responsible for returning a value for the cell and the note is responsible for dictating where that value is presented. Figure 3 shows the summary table with numbers overlaid on top. These numbers represent a row/note in the spreadsheet and the “W” value represents how wide the row/note is.
The example in figure 3 shows that the are 13 note questions or rows being displayed. It is worth noting there is actually a total of 15 notes/rows as two are currently not showing, these are the failure lists for Reception and Bathroom which only appear if the inspection has failed.
The summary group has a width of 3 set. This means for each note we can either set a value of w1, w2 or w3. If we set a value of w1, it will take up a third of the row, if we set a value of w3, it will take up a full row. This is how the table is built.
Type | Name | Label | Calculation |
begin group | summarygroup | <center>Summary</center> | |
note | InspectionType | <b><center>Inspection Type</center><b> | |
note | Inspected | <b><center>Inspected</center><b> | |
note | InspectionNote | <b><center>Status</center><b> | |
note | receptionSummary1 | <b>Reception</b> | |
note | receptionSummary2 | ${receptionCalculation3} |
|
note | receptionSummary3 | ${receptionCalculation1} |
|
note | receptionSummary4 | <b>Reception Failures:</b> | ${receptionCalculation2} |
calculate | receptionCalculation1 |
| if(selected(${reception}, '1'), 'Fail', if(selected(${reception}, '0'), 'Pass', '')) |
calculate | receptionCalculation2 |
| See receptionSummary4 - receptioncalculation2 heading for details of this calculation |
calculate | receptionCalculation3 |
| if(selected(${reception} ,'1'), 'Yes', if(selected(${reception},'0'), 'Yes', 'No')) |
Table 3 - Summary Page Spreadsheet Configuration
Table 3 shows the spreadsheet configuration for the summary table. To reduce the size of the table, only the headers and reception group is being displayed.
The begin group and first 3 notes are responsible for building the header rows of the summary table. The following 4 notes and 3 calculations are used to build the information stored within the Reception group.
Summary Group Header Cells
The configuration of the first 3 notes/rows is quite simple. It requires no calculations or relevant statements, we are simply adding some text to the header of the table. It is important to set the width of the note rows in the header to “W1”. This setting in conjunction with a “W3” applied to the group start will ensure we have each note on the same row. The appearance information is not shown in table 3, however, it can be seen in the demo spreadsheet attached to this article.
Note: If an appearance width setting is not set for a question/row within a group, it will by default take the value of 1. If you open the demo spreadsheet you will see no “w1” values. This is because they default to 1, so there is no need to apply this.
Summary Group Reception Cells
The note rows that draw the cells for the reception responses consists of 4 rows. The first 3 show the name of the room being inspected (which remains static), the status as to whether the room has been inspected (which is dynamic) and the status of inspection (which is also dynamic). These first 3 notes all have a width of 1. The final note cell shows the list of failures (if the inspection failed) and has a width of 3, as we want it to fill the full row.
What makes these rows dynamic is the calculations that plug into them. You will notice receptionSummary2, receptionSummary3 and receptionSummary4 all have a calculate question in the label or in the calculation cell of the row. Below demonstrates what calculations plug into what notes and what behavior it drives.
receptionSummary2 - receptionCalculation3
This calculation is responsible for showing whether the room has been inspected or not.
if(selected(${reception} ,'1'), 'Yes',
if(selected(${reception},'0'), 'Yes',
'No'))
This calculation is looking at what has been selected in the reception pass/fail question. If ‘1’ or ‘Fail’ has been selected, return the string ‘Yes’. If ‘0’ or ‘No’ has been selected, return the string ‘Yes’ else return the string ‘No’.
This calculation will show the string ‘Yes’ if any value is selected, if not then we can assume the room hasn’t been inspected, so return the string ‘No’.
receptionSummary3 - receptionCalculation1
This calculation is responsible for showing if the inspection has passed of failed.
if(selected(${reception}, '1'), 'Fail',
if(selected(${reception}, '0'), 'Pass',
''))
This calculation is looking at what value has been selected in the reception pass/fail question, just like the previous calculation; however, it is now returning a string of ‘Fail’ if ‘1’ is selected, a string of ‘Pass’ if ‘0’ is selected, else it will return nothing.
receptionSummary4 - receptioncalculation2
This calculation is responsible for showing a list of failures if the inspection failed.
if(jr:choice-name(selected-at(${receptionfails},0), '${receptionfails}') != "", concat((jr:choice-name(selected-at(${receptionfails},0), '${receptionfails}')), "\n"), "") +
if(jr:choice-name(selected-at(${receptionfails},1), '${receptionfails}') != "", concat((jr:choice-name(selected-at(${receptionfails},1), '${receptionfails}')) , "\n"), "") +
if(jr:choice-name(selected-at(${receptionfails},2), '${receptionfails}') != "", concat((jr:choice-name(selected-at(${receptionfails},2), '${receptionfails}')), "\n"), "")
This calculation is a little longer and more complex, and the above snippet only shows 3/6 parts of it. Once you understand the fundamentals of what we are trying to do, it becomes much easier to understand. In a nutshell, we want to take all the failure options the user selected and return them separated by a new line.
If we take one section of calculation and break it down, we can split it into three distinct parts.
What we have is an IF statement with part 1 being the condition, part 2 being the returned value if true and part 3 being the returned value if false. Below is an explanation to what the condition is and what is being returned.
Part 1: If the choice at index 0 in the select multiple list doesn’t equals blank or in other words, if something is selected at index 0 then return part 2. If not, then return part 3
Part 2: Return a concatenation of the value at index 0 of the select multiple list and a “\n” (new line).
Part 3: Return blank/nothing (“”).
The jr:choice-name function allows us to see the value of the item selected at the specified index, if we didn’t use this it would return the name of the selected item rather than the label.
The above calculation is repeated multiple times for each index in the list. In our list we have 6 choices, so we repeat this conditional statement up to the 5th index. Each one of these IF statements are added together, which will leave us with the label of the choice, plus a new line between each one.
Finally, we have added a relevant statement on receptionSummary4 and receptioncalculation2 rows so it only appears if the user has selected fail on the inspection, this will stop an empty cell from drawing if the inspection has passed.
In Summary
With the continuing rollout of new features within Survey123, there is always something new to utilise and improve your workflow. By taking advantage of the HTML styling, table-list form style and some notes and calculations, you can build an easy to read summary table of the data stored within a form. This can be especially useful if the user wants to review their options prior to submitting.
The excel spreadsheet used to build this demo form can be found here.
Author
Ross is a GIS consultant at Esri Ireland and has over 9 years of experience in the GIS field, with most of his time spent working with the ArcGIS Desktop & Pro suites and utilising them to streamline custom processes. In his spare time, he enjoys keeping fit, walking the dog and listening to podcasts.