We are currently working on the forum. For the short-term, all forum content will be in read-only format. We apologize for the interruption and look forward to collaborating with you shortly. All the best in your research!

Layouts of CRFs

I already know how to create, design and build the eCRFs but I am looking for a course regarding enhancements of eCRFs in Open Clinica.
How to change the layouts of fields to look better. How to define certain spacing between fields etc.
Does anyone know where one can learn all the 'java' rules for eCRF enhancments?


  • kristiakkristiak Posts: 1,340 ✭✭✭
    Take a look at Trial Data Solutions. Here you will find many tips ans tricks


  • Michelle_DMichelle_D Posts: 107
    via Email
    I have looked there but I am looking for more specific examples and could do with understanding more about the definitions of, for example, using the 'spam-class' and 'tr' and other stuff that defines the spaces between two fields and things like that.

    Michelle Danieli
    Data Manager & Accounts
    A.Stein-Regulatory Affairs Consulting Ltd.

    E-mail: [email protected]
    Tel: +972-9-7670002
    Fax: +972-9-7668534
    A. Stein -Regulatory Affairs Consulting Ltd.
    20 HaTa'as St. (P.O.B. 124)
    Beit Hapa'amon Bldg (Suite 102)
    Kfar Saba 4442520
  • lindsay.stevenslindsay.stevens Posts: 404 ✭✭✭
    via Email
    I'll try to explain. I'm going to assume you have some understanding of XML.

    The CRF page is HTML, which is a kind of XML which defines a set of valid
    element names. Press F12 in your browser to view the elements. In most
    browsers, right click something and choose "Inspect element" to show where
    it is, and what attributes it has. Many of them will have a "class"

    In browsers, the appearance of elements on the page depends on the default
    behaviour defined for an element, e.g. a table is a set of tr [table row],
    which is a set of td [table cell], and looks like a grid. It is possible to
    modify this appearance by adding style rules to the element, using a
    language called Cascading Style Sheets. This CSS can be added to an
    elements by putting it in the element's "style" attribute. But it is much
    easier to write each CSS rule once and give each rule a name, then refer to
    the relevant rule(s) in the element's "class" attribute.

    The third major component is JavaScript (completely different language to
    Java). In the browser, it is possible to modify the page after it has been
    downloaded, using JavaScript. Ordinary JavaScript is good but OpenClinica
    uses a very common library with some nice shortcuts, called jQuery. This
    can be used to change what elements are on the page, where they are, what
    values they have, what attributes they have ... anything really. The
    hardest part is accurately selecting the element(s) to modify. It is
    easiest when there is a unique id or class attribute already set. The
    hardest and fragile way is to select based on expected position, relative
    to other elements on the page.

    So, in the CRF it is possible to add CSS rules in a "style" element, and
    jQuery in a "script" element, in the CRF "Instructions". To help identify
    item-related elements in jQuery, add "span" (not spam) elements to the left
    or right item text, with a class attribute. Then when the page is viewed in
    the browser, the jQuery script will run and can apply the changes you
    wanted. Similarly, your CSS can override the default rules that OpenClinica
    has, e.g. to make all left item texts wider.

    If you have lots of rules and code (more than fits in "Instructions", 4000
    characters), it is possible to instead put your CSS file and JS file in the
    tomcat webserver, under "webapps/OpenClinica/includes", and just load your
    files using a URL in the "src" attribute in the script and style elements.

    Gerben Rienk's "how to" pages [1] have many examples of doing styling and
    customised behaviour, calculations, etc. If you want to learn the
    underlying stuff, read through the tutorials for HTML, CSS and jQuery at
    w3schools [2]. If you really get in to it, the Mozilla Developer Network is
    pretty good [3]. There is a seemingly endless amount of guides and
    tutorials online for this stuff.

    [1] http://www.trialdatasolutions.com/tds/howto/index.jsp
    [2] http://www.w3schools.com/
    [3] https://developer.mozilla.org/en-US/
  • Michelle_DMichelle_D Posts: 107
    via Email
    Hi Lindsay,
    Thanks so much for your detailed explanation. It has helped me understand a few more things.
    I will check out the additional links you suggested.

    Michelle Danieli
    Data Manager & Accounts
    A.Stein-Regulatory Affairs Consulting Ltd.

    E-mail: [email protected]
    Tel: +972-9-7670002
    Fax: +972-9-7668534
    A. Stein -Regulatory Affairs Consulting Ltd.
    20 HaTa'as St. (P.O.B. 124)
    Beit Hapa'amon Bldg (Suite 102)
    Kfar Saba 4442520
Sign In or Register to comment.