Creating Views
MyDataHelps Views are powerful tools allowing you to embed your own web page/app into the participant experience. This can range from static web pages to dynamic applications which can launch surveys or display unique participant results.
Contents
Introduction to Views
MyDataHelps views are web-based, and leverage embedded browsers on iOS and Android (or iFrames on web). Views can be used as one of the tabs inside MyDataHelps. You can also navigate to different views from inside your application, allowing the creation of highly sophisticated projects.
For examples of what you can do with MyDataHelps Views, see the project example library or case studies.
Getting Started
Before using MyDataHelps in a custom application, you will still need to have a MyDataHelps Designer account and project. See the Getting Started guide if you do not already have one.
Using the View Builder
The easiest way to get started with custom views is using the MyDataHelps View Builder. This interactive editor lets you quickly build views using drag-and-drop components from the MyDataHelpsUI React component library. The panel at right shows customization options for each component.
Once your view is ready, click “Publish” and your view will be hosted on CareEvolution’s servers under your own unique URL. You can then use your view in your project.
Creating and Hosting Your Own View
You can also create a view as a self-hosted single-page web application.
- Create your web application using modern tools (Angular, React, Vue, etc.) and the MyDataHelps JavaScript SDK.
- MyDataHelpsStarterKit is a React web application template that you can clone/fork to accelerate your custom view development.
- The MyDataHelpsUI React component library can be used to import standard views and components into your web application, so that you don’t have to build them yourself.
- Host your application on an external web server. See hosting for details.
- Submit your application for a security review.
- Use your view in your project.
Using the MyDataHelpsUI Component Library
The MyDataHelpsUI React component library contains many ready-made components that can be incorporated into custom views. Many MyDataHelpsUI components natively reference the MyDataHelps SDK to retrieve and display participant data, such as activity graphs, external provider accounts, notifications, and more. Buttons, cards, progress bars, and other standard interface components help you follow best practices and implement your own custom designs more quickly.
See these components and more in action in the MyDataHelpsUI Storybook Reference.
To use the component library, install the MyDataHelps SDK and UI component library NPM packages into your existing React web project.
If you’re starting a new project, the MyDataHelpsStarterKit provides some scaffolding that will get you up and running quickly with a React project using the SDK and UI component library.
If you’re not using React, you can still use the MyDataHelps SDK. You can even use the React code for reference in implementing your own components in any modern Javascript framework.
Using Your View
Once you have a custom view, you can use it as a project tab in the MyDataHelps app, or navigate to it from another view.
Configuring Views as Project Tabs
You can use your view as one of the tabs that will display to your participants in MyDataHelps. For example, if you have a view that shows participant rewards, you can create a “Rewards” tab.
Your view will not be available until CareEvolution has completed the security review. You will be notified when the view has been approved and registered for use by your project.
- Go to the “App Layout” tab on your project settings screen.
- Select an existing tab or click “Add Tab” to create a new one.
- Select “Custom View URL” for the view type, and enter your app’s URL in the box below.
You can use the MyDataHelps JavaScript SDK to navigate to a view from another view, building more sophisticated applications. See navigation for details.
You can also select a pre-built view from the View Library. Instead of a custom view URL, select “From View Library” and then pick a view from the dropdown. A live demo of many pre-built views can be found in the MyDataHelps UI Storybook, under “Views”.
Navigating to Views
Navigation methods in the Javascript SDK let you move from one view to another, modally or non-modally. See Navigating Between Views for details.
Testing Views
In order to access project/participant data using the MyDataHelps SDK, the view must be running from within MyDataHelps with a logged in participant.
To test your view, we suggest creating a separate test or “dry run” project with fake participants. You can then log in as one of the test participants to see the view as a participant would. See Testing Projects and Surveys for more information about creating test accounts and hosting for help setting up a test version of your project.
