Sometimes you will have several different steps within a survey utilizing the same custom web view design. Perhaps you have a unique style for your instruction steps, or several different mood questions that have the participant choose from a range of emoji. Web view templates allow you to have multiple steps with similar looks and functionality, but individualized message prompts.
Contents
Web view step templates are associated with a specific survey. To create a Web View step template:
When you create or edit a Web View step template, it brings up the template editor, where you can give the template a name and define its appearance and functionality. Select “Done” to save.
You can use HTML, CSS, JavaScript and dynamic fields in your template, just as you would for an ordinary Web View step. See Using Web View Steps for details. Some basic CSS styles and components are provided for you as a starting point. Template fields are explained in the next section.
Once a template is created, it will appear in the step types list when creating a new step. Survey designers can then use the template as a basis for any number of steps within the survey.
Template fields let you specify what fields the survey designer can customize when using a template.
For example, this template defines fields for “Title”, “Text”, and “Next Button Title”.
When a survey designer utilizes the template, they can enter values for those fields in the survey step editor to customize the step’s appearance.
Select the “+” button to create a new field. You can then specify the following properties:
Select the trash can icon to remove a field.
Once you have defined your fields, you can decide where they will appear in your template. Similar to dynamic fields, template fields are referenced as <%TemplateField.Identifier%>
. For example, <%TemplateField.Title%>
.
The following example shows how the default “Title”, “Text”, and “Next Button Title” are incorporated into the sample HTML:
<body style="display:none">
<div class="step-container">
<h1>
<%TemplateField.Title%>
</h1>
<p><%TemplateField.Text%></p>
<button class="next" onclick="window.webkit.messageHandlers.ResearchKit.postMessage('complete');"><%TemplateField.NextButtonTitle%></button>
</div>
</body>
<body style="display:none">
<div class="step-container">
<h1>
<%TemplateField.Title%>
</h1>
<p><%TemplateField.Text%></p>
<button class="next" onclick="window.webkit.messageHandlers.ResearchKit.postMessage('complete');"><%TemplateField.NextButtonTitle%></button>
</div>
</body>
You can use the arrow icon next to a field to copy the proper reference into the editor.