Getting Started
Get started by learning how to use the MyDataHelps.js SDK in your project.
Accessing MyDataHelps.js
Web View Steps
MyDataHelps.js is already included in any Web View Steps you create within your MyDataHelps surveys.
NPM
You can download the latest MyDataHelps.js files and host them alongside your application.
The MyDataHelps.js SDK can be found on NPM. NPM is a popular tool and resource for sharing code libraries. Download NPM with Node.js, and use it with your preferred command line interface.
Add MyDataHelps.js to your project by installing it with NPM:
> npm i @careevolution/mydatahelps-js --save> npm i @careevolution/mydatahelps-js --save
CDN
MyDataHelps.js is available as a standalone file, which can be included in a <script> tag almost anywhere.
A Content Delivery Network serves static content with high uptime and low latency.
Use one of the following <script> tags to retrieve MyDataHelps.js.
<script src="https://cdn.careevolution.com/mydatahelps-js/3.1.0/MyDataHelps.js" integrity="sha384-Zb7sG7n8/IPAapHx0+bvMpgG6PnZ4OxDNQzIkM3Xxmk8CcgleEWUHgL0IiJcoXc1" crossorigin="anonymous"></script><script src="https://cdn.careevolution.com/mydatahelps-js/3.1.0/MyDataHelps.js" integrity="sha384-Zb7sG7n8/IPAapHx0+bvMpgG6PnZ4OxDNQzIkM3Xxmk8CcgleEWUHgL0IiJcoXc1" crossorigin="anonymous"></script>
<script src="https://cdn.careevolution.com/mydatahelps-js/3.1.0/MyDataHelps.min.js" integrity="sha384-AIVmOwTat7qRYP04A2OpQhFdujLwBVRAp0SCEsy99irSL0pFjtBOZeSdnXomVwoA" crossorigin="anonymous"></script><script src="https://cdn.careevolution.com/mydatahelps-js/3.1.0/MyDataHelps.min.js" integrity="sha384-AIVmOwTat7qRYP04A2OpQhFdujLwBVRAp0SCEsy99irSL0pFjtBOZeSdnXomVwoA" crossorigin="anonymous"></script>
Quickstart
The easiest way to get started with the MyDataHelps SDK is using a Web View Step within a survey. The following example demonstrates how to get participant data and complete a step using the SDK.
- Create a survey.
- Add a Web View Step.
- Replace the sample
bodyblock with the code below. - Save and publish the survey to your project.
- Deliver the survey to one of your test participants. Ensure your test participant has a first name set. See Testing Projects and Surveys for help.
- When you open the survey using your test participant, you will find that it greets you with the test participant’s name.
- Clicking “Next” will complete this step with a result of “complete”. This also advances to the next step, or completes the survey if there are no more steps.
<body style="display:none">
<div class="step-container">
<h1>Welcome, <span id="participantName">Participant</span>!</h1>
<button class="next" onclick="MyDataHelps.completeStep('complete');">Next</button>
</div>
</body>
<script>
function onLoad() {
MyDataHelps.getParticipantInfo()
.then( function(result) {
var name = result.demographics.firstName;
document.getElementById('participantName').innerHTML = name;
} );
};
window.onload = onLoad;
onLoad();
</script><body style="display:none">
<div class="step-container">
<h1>Welcome, <span id="participantName">Participant</span>!</h1>
<button class="next" onclick="MyDataHelps.completeStep('complete');">Next</button>
</div>
</body>
<script>
function onLoad() {
MyDataHelps.getParticipantInfo()
.then( function(result) {
var name = result.demographics.firstName;
document.getElementById('participantName').innerHTML = name;
} );
};
window.onload = onLoad;
onLoad();
</script>
A few things to note about using the SDK in Web View Steps:
- Most SDK methods will not work in “Try It Out” mode in the MyDataHelps designer because there is no participant associated with that session.
- The second
onLoad();call may seem redundant, but it is necessary on some platforms due to the way Web View Steps are loaded. Views and Embeddables do not require that extra call. - In this example, the string value “complete” will be saved as this step’s result. You can pass other values to
MyDataHelps.completeStep()to save your own custom step data.
Many developers like to use jQuery for convenient access to page elements and other utilities. jQuery is not required to use the SDK, but it can be a helpful adjunct. The same example with jQuery is shown below.
Make sure to include the latest version of the jQuery library in your page’s
head block.
<body style="display:none">
<div class="step-container">
<h1>Welcome, <span id="participantName">Participant</span>!</h1>
<button class="next" onclick="MyDataHelps.completeStep('complete');">Next</button>
</div>
</body>
<script>
function onLoad() {
MyDataHelps.getParticipantInfo()
.then( function(result) {
var name = result.demographics.firstName;
$('#participantName').html(name);
} );
};
$( document ).ready(onLoad);
onLoad();
</script><body style="display:none">
<div class="step-container">
<h1>Welcome, <span id="participantName">Participant</span>!</h1>
<button class="next" onclick="MyDataHelps.completeStep('complete');">Next</button>
</div>
</body>
<script>
function onLoad() {
MyDataHelps.getParticipantInfo()
.then( function(result) {
var name = result.demographics.firstName;
$('#participantName').html(name);
} );
};
$( document ).ready(onLoad);
onLoad();
</script>
