View Builder

The View Builder is a drag-and-drop tool that uses standard MyDataHelps components, allowing you to build your own app tab view. Perhaps you want to create tabs that list project resources, present wearable data, or show complete and incomplete surveys (maybe even a combination of these)—the view builder lets you configure a view as your project requires.

Overview

Getting started

You can access the View Builder by visiting: https://viewbuilder.careevolutionapps.com/. A MyDataHelps Designer account is not required to access the View Builder, although you will be required to create a MyDataHelps Designer account if you want to deploy your MyDataHelps view. 

If it is your first time using the View Builder, we recommend clicking “+ New” to start with a template.

Components

Components are the building blocks of your view. All of the various components are on the left-hand side of the View Builder and can be dragged and dropped into your view. Placing a component to the left of another component will place it above; to the right, below. A horizontal line will display when you are able to place a component inside another, such as in a section component.

Below is an overview of the available components:

Basic Building Blocks

• Card: Group elements together in a box with rounded corners and outer margin.
• Section: Group elements together in a box with no left/right margin.
• Button: Performs an action when selected.
• Action: Performs an action when selected. Appropriate for a menu.
• Text: Supports markdown.
• Conditional: Show/hide content based on participant information.
• Date Range Coordinator: Allows paging through dates for date-based components.

Surveys

• Survey Task List: Dynamic list of complete/incomplete survey tasks.

Electronic Health Records

• Connect EHR: Prompts the user to connect to their electronic health records.
• Lab Results Preview: Preview list of lab results in EHR data. Links to full lab history.
• Medications Preview: Preview list of medications in EHR data. Links to full medication list.
• Allergies Preview: Preview list of allergies in EHR data. Links to full allergies list.
• Immunizations Preview: Preview list of immunizations in EHR data. Links to full immunization history.
• Reports Preview: Preview list of reports in EHR data. Links to full report history.
• Conditions Preview: Preview list of conditions in EHR data. Links to full condition list.
• Procedures Preview: Preview list of procedures in EHR data. Links to full procedure history.

Devices / Wearables

• Connect Fitbit: Prompts the user to connect their Fitbit.
• Connect Garmin: Prompts the user to connect their Garmin.
• Fitbit Devices: Displays the list of connected Fitbit devices.
• Garmin Devices: Displays the list of connected Garmin devices.
• Relative Activity Today: Displays today's activity today relative to participant 30 day average.
• Daily Data Chart: Week / month chart of daily data.

Account

• External Accounts Loading Indicator: Displays a loading indicator while data from external accounts (e.g. Fitbit or EHR) is retrieved.
• External Accounts Preview: List of external accounts the user has connected. Opens the full list when connected.

Layers

The Layers section is in the bottom right and can be used to navigate through your view. Clicking on a layer will bring you to that component’s or view’s settings.

Component & view settings

Once you’ve dragged and dropped your component into your view, you’ll likely want to configure its settings. You can either click on the component within the view to bring up the component’s settings in the top right or use the Layers section in the bottom right to select your component. Each component has its own unique settings.

In addition to component settings, your view also has settings. You can click on your view outside a component (e.g., at the very top) or use the Layers section to bring it up.

Piping

Allows you to make your view more dynamic, responding to the participant or other data. For example, you might want to display a participant field or use an expression in your view. If a component supports piping, you’ll find a “Supports Piping” detail text below the applicable fields. Following the “Supports Piping” link will open a pop-up with much greater detail about how to use piping, which supports mustache.js syntax.

Language

In addition to your project’s default language (English), the View Builder also supports Spanish. You can build both an English and Spanish version of your view by toggling the Language selector in the top right of the View Builder.

Saving, Editing, and Publishing

As you’re working on your view, you may wish to click “Save File” to download your view in a JSON format. You can then use “Open File” to open this view up and continue editing. Of course, by exporting a file, you can easily share and version your view. 

The View Builder uses web browser cookies to remember your views and versions. By using the same device and browser, you’ll continue to have easy access to prior views and versions by clicking on the “My History” button. When you open “My History,” you’ll see a list of your views and versions which you can immediately edit.

Unlike custom views created via the MyDataHelps SDK, views created with the View Builder do not require a CareEvolution security review. To deploy your view as an app tab for your project:

1. Within MyDataHelps Designer, navigate to the App Layout tab within your project and click “Add Tab.”
2. Give your tab a title and select an image.
3. For “View”, select “Custom View Url.” You’ll now have an empty “Custom View Url” field.
4. Toggling back to the View Builder, click “Publish” and copy the first URL, within the “Publishing” section.
5. Paste this URL into the “Custom View Url” field within MyDataHelps Designer. 
6. Click “Done.”
7. Click “Save Tabs” if you’re ready to deploy the app layout updates immediately to all participants.

If you need to make any edits to your view, you’ll need to follow the above steps again. Any change to your view will create a new URL that needs to be updated within your MyDataHelps Designer project.

Ensure your project configuration matches your view. For example, if you added a “Connect Garmin” component, you’ll need to have it enabled as a sensor for it to appear to your participants.

View Builder Examples

Below are a few examples of views that could be built using the view builder.

Nested resource Library

Many teams wish to provide a static list of resources to participants. While you could create an app tab dedicated to resources, typically participants are not reviewing the resources very often. Instead of creating a resource app tab, you could instead have it be a view nested within another view.

To build a nested view:

1. Add an “Action” component.
2. Within the component’s settings, set the “Action” to “Open Custom View.”
3. Create a separate view that contains all of your resources and publish it.
4. Copy the URL of the resource URL and paste it into the View Url of your initial view!

We highly recommend enabling “Show Back Button” on the resource view, so that participants can navigate back to your initial view. Select “View” within the Layers section to bring up the view’s settings.

Contact study team

Many study teams want to make it easy for participants to contact them if they have questions. You can make that as simple as clicking a button. You might even want to add this contact button with a Conditional component, only displaying it if a participant’s recent survey suggests a high-level of suicide ideation.

1. Add a “Button” component.
2. Within the component’s settings, set the “Action” to “Open Url.”
3. For the “Url”, you can use "mailto:studyteam@organization.org" or “tel:1234567890” to have the button create an email or start a phone call, replacing the email and phone number with your own.

Data dashboard and next survey task

Many participants are drawn to data dashboards because they offer a “what’s in it for me” incentive: health insights. Since many participants will navigate to this kind of tab or it will be the default app tab, adding a short call to action at the top can increase engagement. For example, you might add the “Survey Task List” component just above some health data to nudge the participant to complete a survey: