Creating Web View Step Templates

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

Creating and Deleting Templates
Defining Template Fields
Incorporating Fields into the Template

Creating and Deleting Templates

Web view step templates are associated with a specific survey. To create a Web View step template:

Edit the desired survey.
Existing templates will be listed beneath the steps in the “Web View Step Templates” section.
Select the “+” to create a new template, or the trash can icon to delete one.

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.

Defining Template Fields

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.

Tip
You may use the up and down arrows on the fields to organize them in the order that you want them to appear to the survey step editor.

Select the “+” button to create a new field. You can then specify the following properties:

Identifier - A unique internal identifier that is used to reference the field within the template.
Name - A human-friendly name displayed in the survey step editor.
Editor Type - Specifies what kind of text box will be used in the survey step editor. Choices are Plain Text (Single Line), Plain Text (Multiple Line), and HTML.
Default Value - An optional default value for the field.

Select the trash can icon to remove a field.

Incorporating Fields into the Template

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:

    Using Template Fields 
    
  

    <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.