We hope you'll join us for our 4/23 webinar on using data tables to apply reference ranges and AE codes in OC4. For more information and to register, visit https://register.gotowebinar.com/register/2882170018956684555

long lists for repeating groups

Dear Community,

In a very recent post I wrote about long list and presented a solution in which we filled a non-OC single-select and copied its value to an OC text field. I also explained this would probably not work for repeating groups. It, indeed, does not. There are quite many reasons for this:
- Different structure
- The tags option are not added to every row as (I’m guessing) they’re not part of the template
- The long list needs to be able to write its results to a dynamic identifier instead of static one
- Etc.

To summarise: repeating groups are more complicated. In this post I will give you a solution which can handle repeating groups.

Instead of a non-OC single-select in the OC form, in this case we’ll be opening a new window which contains the single-select.

Let’s first look at the eCRF:
For this example I’ve created an eCRF with 1 group, called “MyGroup”
The eCRF contains 3 fields: text1, textOut, text2. All three are in the same group and have response type text.

Code required in the CRF:



jQuery(document).ready(function($) {

$(":input").live("click", function(){
myID = $(this).attr("id");
myParent = $(this).parent();
colNr = $(myParent).parent().children().index($(myParent)) + 1;

if(myID.indexOf(groupName.toUpperCase()!=0)){
if(aCol==colNr){
$(this).attr("readonly",true);
var handle = window.open("includes/ATC-Form.html");
}
}
});

var aCol=2;
var groupName = "MyGroup";
$("#srh").focus();
});


I’ll briefly explain.

var aCol=2;
var groupName = "MyGroup";
$("#srh").focus();
The two variables are used later on in the script. The first describes for which column we want the new window to open; the second gives the name of the group (as defined in the eCRF). We set the focus to the upper save button as this allows us to prevent a user from manually editing our field if it accidentally gets focus after loading.

$(":input").live("click", function(){
For all input fields in our eCRF a click event is fired. The “live” bit ensures that when the a new row is added to the eCRF these fieds are also recognised.

myID = $(this).attr("id");
First, we save the ID of the item that we clicked on. We’ll need this when we have our final value as we need to write it back to this field.

myParent = $(this).parent();
colNr = $(myParent).parent().children().index($(myParent)) + 1;
Next, as the click event fired for all events, we want to make sure our pop-up only open when the click was on a particular column in the table. Therefore, we retrieve the column number (+1 because index is 0-based).

if(myID.indexOf(groupName.toUpperCase()!=0)){
if(aCol==colNr){
$(this).attr("readonly",true);
var handle = window.open("includes/ATC-Form.html");
}
}
As there may be multiple repeating tables in the eCRF, we check whether the click was in the proper table. If it is, myID should contain the groupName. For example, if your groupName = “MyGroup”, the id of the item in this group will be something like IG_TRACE_MYGROUP_1input42427; if the id is something else, we’re not in the right table for the new window to open.
Next, we check whether the column number is the right one; if it is, we first set the field to read-only to prevent accidental manual editing. Next, we open a new window, which, in my case, is ATC-Form.html. This form is stored in the includes directory at the OC server to prevent problems with cross-site scripting.

Let’s look at this ATC-Form.html



Select ATC-code






jQuery(document).ready(function($) {
$.ajax({
type: "GET",
url: "ATC_Codes.xml",
dataType: "xml",
success: parseXml
});

function parseXml(xml){
//find every ATCCode and its description
$(xml).find("ATCCode").each(function(){
field.append($("").val($(this).attr("Code")).text($(this).find("Description").text()));
});
}

$("#submit").click(function(){
myElement = window.opener.document.getElementById(window.opener.myID)
if(myElement.value!=$("#atc-list").val()){
myElement.value=$("#atc-list").val();
myElement.onchange();
}
close();
});

var field = $("#atc-list");
});



Select an ATC-code

Select




As you can see, most of it is similar to the code I posted in the previous post. The XML-file is still the same and it still has to be placed on the server. Some things are new/different, however:

Select an ATC-code

Select


Here, we create some text, a button with id “submit” and the drop-down list.

$("#submit").click(function(){
myElement = window.opener.document.getElementById(window.opener.myID)
if(myElement.value!=$("#atc-list").val()){
myElement.value=$("#atc-list").val();
myElement.onchange();
}
close();
});
When the user has picked the ATC-code and clicks our submit button, several things happen:
First, we need the field where we want to store the result. By using window.opener.myID (which we defined in the eCRF) we retriever the ID of the field. We then fetch the field itself by calling window.opener.document.getElementById.
Next, we check whether the new value is different than what is already in the result field. If it is, we set the value of our element to the new value and, to ensure OpenClinica is aware of the change, we call the onchange() function.
Finally, we close the window.

I’ve tested it and, at least in my very simple test-case, it seems to do the job.

As usual, comments/suggestions/easier solutions are welcome.

Cheers,
Sander de Ridder

Comments

  • sderiddersderidder Posts: 57
    Dear Community,

    In a very recent post I wrote about long list and presented a solution in which we filled a non-OC single-select and copied its value to an OC text field. I also explained this would probably not work for repeating groups. It, indeed, does not. There are quite many reasons for this:
    - Different structure
    - The tags option are not added to every row as (I’m guessing) they’re not part of the template
    - The long list needs to be able to write its results to a dynamic identifier instead of static one
    - Etc.

    To summarise: repeating groups are more complicated. In this post I will give you a solution which can handle repeating groups.

    Instead of a non-OC single-select in the OC form, in this case we’ll be opening a new window which contains the single-select.

    Let’s first look at the eCRF:
    For this example I’ve created an eCRF with 1 group, called “MyGroup”
    The eCRF contains 3 fields: text1, textOut, text2. All three are in the same group and have response type text.

    Code required in the CRF:



    jQuery(document).ready(function($) {

    $(":input").live("click", function(){
    myID = $(this).attr("id");
    myParent = $(this).parent();
    colNr = $(myParent).parent().children().index($(myParent)) + 1;

    if(myID.indexOf(groupName.toUpperCase()!=0)){
    if(aCol==colNr){
    $(this).attr("readonly",true);
    var handle = window.open("includes/ATC-Form.html");
    }
    }
    });

    var aCol=2;
    var groupName = "MyGroup";
    $("#srh").focus();
    });


    I’ll briefly explain.

    var aCol=2;
    var groupName = "MyGroup";
    $("#srh").focus();
    The two variables are used later on in the script. The first describes for which column we want the new window to open; the second gives the name of the group (as defined in the eCRF). We set the focus to the upper save button as this allows us to prevent a user from manually editing our field if it accidentally gets focus after loading.

    $(":input").live("click", function(){
    For all input fields in our eCRF a click event is fired. The “live” bit ensures that when the a new row is added to the eCRF these fieds are also recognised.

    myID = $(this).attr("id");
    First, we save the ID of the item that we clicked on. We’ll need this when we have our final value as we need to write it back to this field.

    myParent = $(this).parent();
    colNr = $(myParent).parent().children().index($(myParent)) + 1;
    Next, as the click event fired for all events, we want to make sure our pop-up only open when the click was on a particular column in the table. Therefore, we retrieve the column number (+1 because index is 0-based).

    if(myID.indexOf(groupName.toUpperCase()!=0)){
    if(aCol==colNr){
    $(this).attr("readonly",true);
    var handle = window.open("includes/ATC-Form.html");
    }
    }
    As there may be multiple repeating tables in the eCRF, we check whether the click was in the proper table. If it is, myID should contain the groupName. For example, if your groupName = “MyGroup”, the id of the item in this group will be something like IG_TRACE_MYGROUP_1input42427; if the id is something else, we’re not in the right table for the new window to open.
    Next, we check whether the column number is the right one; if it is, we first set the field to read-only to prevent accidental manual editing. Next, we open a new window, which, in my case, is ATC-Form.html. This form is stored in the includes directory at the OC server to prevent problems with cross-site scripting.

    Let’s look at this ATC-Form.html



    Select ATC-code






    jQuery(document).ready(function($) {
    $.ajax({
    type: "GET",
    url: "ATC_Codes.xml",
    dataType: "xml",
    success: parseXml
    });

    function parseXml(xml){
    //find every ATCCode and its description
    $(xml).find("ATCCode").each(function(){
    field.append($("").val($(this).attr("Code")).text($(this).find("Description").text()));
    });
    }

    $("#submit").click(function(){
    myElement = window.opener.document.getElementById(window.opener.myID)
    if(myElement.value!=$("#atc-list").val()){
    myElement.value=$("#atc-list").val();
    myElement.onchange();
    }
    close();
    });

    var field = $("#atc-list");
    });



    Select an ATC-code

    Select




    As you can see, most of it is similar to the code I posted in the previous post. The XML-file is still the same and it still has to be placed on the server. Some things are new/different, however:

    Select an ATC-code

    Select


    Here, we create some text, a button with id “submit” and the drop-down list.

    $("#submit").click(function(){
    myElement = window.opener.document.getElementById(window.opener.myID)
    if(myElement.value!=$("#atc-list").val()){
    myElement.value=$("#atc-list").val();
    myElement.onchange();
    }
    close();
    });
    When the user has picked the ATC-code and clicks our submit button, several things happen:
    First, we need the field where we want to store the result. By using window.opener.myID (which we defined in the eCRF) we retriever the ID of the field. We then fetch the field itself by calling window.opener.document.getElementById.
    Next, we check whether the new value is different than what is already in the result field. If it is, we set the value of our element to the new value and, to ensure OpenClinica is aware of the change, we call the onchange() function.
    Finally, we close the window.

    I’ve tested it and, at least in my very simple test-case, it seems to do the job.

    As usual, comments/suggestions/easier solutions are welcome.

    Cheers,
    Sander de Ridder
  • sderiddersderidder Posts: 57
    Dear Community,

    Whilst testing my scripts for long lists in IE, I discovered it gives a security warning. Quite annoying. To prevent this from happening, please do not add the line to the eCRF. You don’t need it anyway, as OC has some JQuery version included, which suffices for the code we created.
    In the pop-up form (in my case the ATC-Form.html), please change that same line to This way we’re including the JQuery on the OC server. The warnings should be gone.

    Same for my previous long lists post (the non-group one); just remove the

    Cheers,
    Sander de Ridder
  • sderiddersderidder Posts: 57
    Dear Community,

    Whilst testing my scripts for long lists in IE, I discovered it gives a security warning. Quite annoying. To prevent this from happening, please do not add the line to the eCRF. You don’t need it anyway, as OC has some JQuery version included, which suffices for the code we created.
    In the pop-up form (in my case the ATC-Form.html), please change that same line to This way we’re including the JQuery on the OC server. The warnings should be gone.

    Same for my previous long lists post (the non-group one); just remove the

    Cheers,
    Sander de Ridder
This discussion has been closed.