tokens and view-source and changing items
We now have already quite some tools in our box: we can write what has been entered and make expressions with it, but we have not written anything yet. Let's do that as our next step and we'll do that with tokens. Tokens were introduced in version 3.3 and here you can find information about them. We will use the token for StudySubject. This will also give us an example of how we can mimick the situation of a "real" dataentry, because so far we only used the preview mode of a CRF.
Let's start with this CRF. Download it an open it in Excel. It already has the jQuery part in it in the right_item_text of the first item:
<div id="StartDiv"></div>
<script src="includes/jmesa/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($) {
var theID="${studySubject}";
console.log("the StudySubjectID is: " + theID);
})
</script>
First let's check out the CRF in real-life: create in your Study an event EvC and assign the CRF to it. Now add a Subject and schedule EvC for this Subject. Don't forget to turn on the console. Now start entering data and watch the console, where you will see the StudySubjectID.
We want to have this page in notepad++ so we can experiment with it and write a script to copy the StudySubjectID into the first item of the CRF. But watch closely when we try the same trick we did before: right-click and save the page as D:\tomcat\webapps\oc341\StaticCRF_C.html and then open this newly created file in you browser. It is not even close! And you see the reason: "This CRF is currently unavailable for data entry. grvisser is currently entering data."
If we want to use this page in notepad++ we can do the following. Go to the subject-matrix and open the CRF again. Copy the url from the address-bar of your browser, something like http://localhost:8081/oc341/InitialDataEntry?eventCRFId=9. Now save or exit the CRF. Now type in your browser view-source: and then paste the original url. You now should be looking at the source. Select all by pressing ctrl-a and go to notepad++ and paste it all and save it as D:\tomcat\webapps\oc341\StaticCRF_C.html. If you now look at the file in your browser, you should see the DataEntry-screen.
Now switch to notepad++ and search for "theID", around line 1540. You see that what we wrote as ${studySubject} has ended up as TDS001.
let's start writing!
Now we have everything in place we can start writing our script so that we can copy the StudySubjectID in the first CRF-item (for example when we want to check the format of the ID). To do that we fist make a reference to the CRF-item, similar to what we saw before: parent, parent and then an input. And once we have that reference we set the value of the input with the function/methods .val()
$.noConflict();
jQuery(document).ready(function($) {
var theID="${studySubject}";
var theCRFItem=$("#StartDiv").parent().parent().find("input");
theCRFItem.val(theID);
console.log("the StudySubjectID is: " + theID);
})
Update the file StaticCRF_C.html in notepad++, save it and refresh your browser: isn't that spectacular?
stop! reality check!
Now before we go any further, let's copy the two exra lines and put them in our actual Excel and upload the CRF as a new version. And then add a new Subject and enter data. The StudySubjectID will be there and you can leave that as it is. Choose a date and notice the difference between the two items. Now save the CRF and then re-open it and change the StudySubjectID and save the CRF. So .... we must change our script: only change it when the value is not correct, make the item "changed" and make the item readonly.
$.noConflict();
jQuery(document).ready(function($) {
var theID="${studySubject}";
var theCRFItem=$("#StartDiv").parent().parent().find("input");
if (theID != theCRFItem.val()){
theCRFItem.val(theID);
theCRFItem.change();
theCRFItem.prop("readonly", "true");
}
})Now when you're happy, copy the code into the CRF and upload it is a new version and check if everything's working according to plan.
this page was last reviewed July 2015