Using Web View Steps
Web View steps allow you to present a custom step inside a MyDataHelps survey.
Examples of Web View Steps
Web View steps can be used to present customized selections, instructional text, embedded videos, feedback forms, and any other step that isn’t covered by the built-in MyDataHelps step types. This gallery shows just a few examples of actual Web View steps.
For examples of Web View steps, see the case study.
Creating a Web View Step
When you add a step to your survey, select “Web View Step” for the step type. Web View Steps support three types of content:
- Partial HTML
- Full HTML
- Specify URL
Tip
In legacy surveys of type “Standard Survey”, Full HTML mode is simply called “HTML”, and Partial HTML mode is unavailable. In the newer “Standard Survey V2”, Partial HTML is the default.
Partial HTML Content
In partial HTML mode, you only specify the body of the HTML document. Default styles and the MyDataHelps SDK are included automatically. This mode is well-suited for simpler steps, since the resulting block of code is easier to read and manage.
Full HTML Content
In full HTML mode, you can specify the entire HTML document, including CSS and JavaScript. The editor at right will contain some starter HTML, including CSS styles. Use this as a launching point, or replace it with your own web content.
Specify URL Content
The URL mode lets you specify a custom view to use as a Web View step. Just reference its URL instead of providing code in the code block.
Note
This view must be externally hosted and reviewed by CareEvolution before it will appear in the survey. Also, you will probably want this view to mimic the look and feel of a survey step, including a “Next” button to
save results and advance.
Using Sample Web View Steps
In addition to the starter HTML, several sample surveys are available to aid in the design of Web View steps, such as a sample survey to illustrate accessing previous step results.
To browse these examples:
- Go to the Survey Store.
- Open the “Sample Surveys” folder.
- Select one of the Web View step templates to preview it.
- Click the “Import” button to import a copy of the survey into your project. You may use the survey as-is, modify and extend it for your own use, or copy/paste the code from the step editor into your own Web View step in a different survey.
Using Participant Fields
As with other survey steps, you can utilize dynamic participant fields (identifiers, demographics, and custom fields) in your Web View steps. These may appear in either the HTML or JavaScript. For example:
<p>Welcome back, <%DemographicField.FirstName%>!</p>
or
if ("<%DemographicField.Gender%>" == 'M') {}
You can also save the result of the Web View step into a dynamic participant field using either the “Populate Custom Field” or “Populate Demographic Field” step options:
See Using Participant Fields for more details, including a complete list of available fields.
If a dynamic field contains HTML, it will be encoded and displayed as raw text.
Note
Dynamic field codes like
<%DemographicField.FirstName%> do not function within custom views. Your view will need to use the
MyDataHelps SDK to access participant data, then incorporate it into the view output.
Using JavaScript
You can use JavaScript in your Web View steps to create a dynamic experience. The following topics cover common tasks for Web View steps scripting:
You can also use the MyDataHelps JavaScript SDK to leverage your project’s data–past survey answers or compliance, detailed participant information, and device data–to tailor the behavior of your Web View steps.
Contact MyDataHelps support if you need to host JavaScript assets within MyDataHelps.
Adding Links
You can create hyperlinks to other content within a Web View step, but always use target="_blank" to open the links in a separate browser window. Without this tag, links within the MyDataHelps app may not work as expected. For example:
<a href="https://example.com" target="_blank">Example Information</a>
Sharing Styles
If you have styles shared across multiple Web View steps, you can create a shared CSS file and reference it from within your HTML header:
<link rel="stylesheet" href="https://example.com/yourstyles.css">
Contact MyDataHelps support if you need to host CSS assets within MyDataHelps.