OpenClinica User Manual/StylingWithJQuery

Sometimes it happens that a page generated by OpenClinica does not look like you want it to. We can style headers and descriptive text around input elements using the recipes in StylingACRF. If we want to style the input elements themselves we have to do a little more work. By adding class names to the items we define in Excel and mixing in a little javascript from the jQuery library, we can style input elements like text boxes, text areas and select fields. OpenClinica 3.1 loads the jQuery library with every CRF page. In earlier versions of OpenClinica jQuery is not loaded, so we have to do that "manually". If you want to read more about jQuery, follow this link http://docs.jquery.com/Main_Page

Compatibility
OpenClinica is not tested with all browser versions, styling with jQuery will not work with most untested browsers. Please consult the following table to see which browsers can be used.

Items in non-repeating groups
We'll start with a script for "normal" items, i.e. items in non-repeating groups:

In practice
In practice you don't need all the included comments, just the lines: will do. The lines starting with styleItem are the lines that we add ourselves to define the styling we want for an element. The rest of the script must not be modified.

We will put this script in the LEFT_ITEM_TEXT of the first item. And after that you can still put all the text you would like to have there. Have a look at the four lines that start with styleItem. Here is where we define the four classes we want to use in our form. class1 and class2 are just names, but input is the type of element that we can apply these styles to. Then comes a list of things of which the style is made and you can add endlessly to this. In the example just width and background-color are used. Then class3 is one to be used for a text-area. Finally class4 can be used with a select, single or multi.

Applying the style
The function is in place, so we want to apply it to an input and we do this by putting in the LEFT_ITEM_TEXT or the RIGHT_ITEM_TEXT a span with class class1 And this is the result: As you can see the first class is used on again on row 7 and this is possible, because it is also an input. And the other way round: you can not use the same style for both an input and a text-area, if you want them both to have a width of 40px, you must define two classes.

How does it work?
The way the script works is as follows. The span in our LEFT_ITEM or RIGHT_ITEM_TEXT is part of a table. And in this table is also the input we would like to apply a style to. First we refer to the parent of the span, which is the [td]. The parent of this element is the [tr]. Now we can go through all the elements of this [tr] by type, with the find(pElementType) and of course we're looking for the inputs and that's only one.

Items in a repeating group
In the case of items in a repeating group the situation is a bit different. Have a look at the documented function.

In practice
We strip the (useful) comments and put the rest of the script in the first LEFT_ITEM_TEXT, because the contents of RIGHT_ITEM_TEXT are not used in repeating groups.

Again we define styles, colclass1 to 3 , two for inputs and one for a select. There is however an extra parameter, to indicate the column number.

Applying styles to columns
Take a look at the screenshot of the XL-sheet: just as straightforward as the single-item one.

And this is the result:



Keep in mind that you need to style every column individually. If you want to style X columns identically, you will need X calls to the function styleGroupColumnN with the same CSS parameter. Of course you can use a variable. This improves the maintainability of your code: if you have to make a change to the styling you only have to do it once. Here is an example that uses a variable for the styling parameter: One last thing: do not forget to change the column numbers in the calls to styleGroupColumnN after you have inserted a new column.

How it works
This is a bit harder to explain, but it's something like: go four levels up (parent x 4) and then you're at the level of the table of your repeating group. Of this object, take the tbody. Of this, take all tr's. Of these, take the all n-th td's. Of these, take all the elements of type input or select and apply the style. Are you still there? Whatever the workings: it works!

Items organized horizontally
In order to style items that use COLUMN_NUMBER to place them horizontally on the page, use the code below in the same way as before in your LEFT_ITEM_TEXT. The only difference is that we can now style both the label as well as the input itself with the parameters: pCSSMapLabel and pCSSMapInput respectively. This allows us, for example, to set a different width for the label and the item it belongs to.