View Builder
- Updated
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.
[tip]If it is your first time using the View Builder, we recommend clicking “+ New” to start with a View Builder template.[/tip]
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.
Refer to the View Builder: Components article for a complete list of components as well as examples of them.
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.
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.
Advanced Logic
Advanced logic 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, use an expression in your view, or show step goals on a graph.
Refer to the View Builder: Advanced Logic article for more information on how to make your views more dynamic.
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:
- Within MyDataHelps Designer, navigate to the App Layout tab within your project and click “Add Tab.”
- Give your tab a title and select an image.
- For “View”, select “Custom View Url.” You’ll now have an empty “Custom View Url” field.
- Toggling back to the View Builder, click “Publish” and copy the first URL, within the “Publishing” section.
- Paste this URL into the “Custom View Url” field within MyDataHelps Designer.
- Click “Done.”
- 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 can open up the app tab within MyDataHelps Designer and click "Edit" next to the view URL. This will open up your existing view. When you edit a view, a new URL is always generated, so you’ll need to follow the above steps again to plug in the URL for your updated view. You are free to share your view URL with others, since if they make any changes based on your view, it will be to a new view URL; your view will remain unchanged.
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
Refer to the View Builder: Examples article for some great use cases and view builder scenarios.
Was this article helpful?