Design Tools and Properties


There are three design tools in the Toolbox:


1.      Label

2.      Separator

3.      Normalized Table


The Properties for each Design Tool allow a user to add text, relate labels to fields, create conditional actions, etc.


Below are the Properties for each Design Tool and what each property does.


Label & Properties

Labels are used to identify fields and section headers. Each label can also be directly related to a field for reporting and data export purposes. If a field label is long and cumbersome, you can define a reporting label within the Field Properties which will take precedence over any related Label.



When a Design Tool is dragged and dropped into the form builder, the Tool becomes active.  To edit an existing Design Tool in a Form, simply click on the Design Tool to make it active.  An active tool is designated by the field having a moving dotted line.  When clicked, the Properties for the Design Tool display in the properties section of the Form Builder as shown in the figure below.


 

When a New Label is dragged into the Form Builder body/grid, the Text Editor pop up window will display allowing the Label Text to be entered.

 


Label Properties:


Text – Allows text to be added to identify a Section or a Form Field.

ToolTip - Add text will will display to end users of the CRF when they hover over the label.


The General, Data, Validation, and Layout sections are collapsible when you click the panel icon.



Selecting view/edit above opens the Rich Text Editor which allows the label text to be entered and formatted. 

 



Labels can be related to a specific data field, which will force it to follow any conditional action behavior that the associated field has, or to be displayed as the data field's label in the data extracts if the data field does not have its own reporting label.

In the example below, the weight field has two labels, but we want one of the labels to display in the data extracts next to the actual weight value. To do this, be sure the units label is related to the weight field, and the box to Include in Export is checked.








Validations

Validations allow a user to define the conditions that a field(s) value must meet (or not meet).


Conditional Actions


View/Edit – Clicking the View/Edit link brings up the Conditional Actions application and allows the user to create a simple Conditional Action Hide only on Labels.  Please refer to the Conditional Actions – Validation Help file for the complete instructions.

 



Layout

The Layout feature allows the size and position of a Label to be designated within the body/grid. In the figure below, the Layout of the New Label is 30 pixels from the left of the margin and the top of the object is 90 pixels below the top of the body/grid.

 

Left (pixels) – Used to designate the left edge of the Label box.  This allows flexibility for alignment of labels.

Top (pixels) –Used to designate the top edge of the Label box.

Width – Used to designate the width of the Label in either pixels or a percentage.

Pixels – Used to designate the width of the Label in pixels.

Percent – Used to designate the Width of the Label as a percentage of the Form Layout width.  For example:  If the Width of the Form in the Form properties is 800 pixels and a Label Width of 50 percent is designated, the Label Width will be 400 pixels wide.

Height – Used to designate the Height of the Label.

Pixels – Used to designate the Height of the Label in pixels.

Percent – Used to designate the Height of the Label as a percentage of the Form Layout height.  For example:  If the Height of the Form in the Form properties is 600 pixels and a Label Height of 50 percent is designated, the Label Height will be 300 pixels tall.

Separators & Properties

A Separator creates a section in a Form by placing a section header across the width of the entire form.  Dragging and dropping a Separator onto the Form Builder body/grid opens the Separator Properties in the Toolbox as shown in the figure below.

To move the Separator, simply click on the Separator and drag and drop it in the desired location. By default, the Separator Style of “Section” is added when dragging into the body/grid. Currently, “Section” is the only separator style supported.

 d

General section


Style – Currently, the Style dropdown contains only the default style, “Section” as shown in the figure below.



The default “Section” style places a section header expanding across the entire form. A Section Title can then be entered that will populate the section header as described below.


Section Title – Allows the user to enter text that will be used for the section header. Click in the Section Title field (the text will highlight in blue indicating the field is active), enter the desired text and press the Tab or Enter key and the text will appear in the Separator as shown in the figure below.


Validations


Validations allow a user to define the conditions that a field’s value must meet (or not meet).

Conditional Actions

0 - View/Edit – clicking the 0 - View/Edit link brings up the Conditional Actions application and allows the user to create a simple Conditional Action. The only type of Conditional Action that can be applied to a Separator is “Hide.” Therefore, the select type dropdown in the Conditional Actions builder contains only one selection (Hide), as shown below. Please refer to the Conditional Actions – Validation Help file for the complete instructions.


 

Layout 


Left (pixels) – Allows the user to designate the left edge of the Separator.

Top (pixels) – Allows the user to designate the top edge of the Separator.

Width – Allows the user to designate the width of the Separator in either pixels or a percentage. The default width is 100% of the Form width.

Pixels – Allows the user to designate the width of the Separator in pixels.

Percent – Allows the user to designate the width of the Separator as a percentage of the Form Layout’s width.  For example:  If the Width of the Form in the Form properties is 800 pixels and the Separator Width is 50 percent, the Label Width will be 400 pixels wide (half the width of the Form).

Normalized Table & Properties

A Normalized Table is a sub-form. It allows a user to insert a table where multiple fields can be placed so a user can complete multiple rows of the same information. Each field within the table has a column header and properties.* Table form field properties are added the same way as placing them within the Form Builder body/grid. Select the field in the dialog box, go to the Properties section of the Form Builder and fill in the appropriate properties.

Normalized Tables can also be designed as a fixed table which is described below. 

*When a Normalized Table is dragged and dropped into the body/grid of the Form Builder, the Form Fields dialog box opens to allow users to add Form Fields as shown below. Users can Drag and Drop Form Fields into the Normalized Tables Dialog box.


 

In the figure below, a Radio Group form field has been dragged and dropped into the Fields dialog box. Displayed in the left column are the Form Fields properties that can be assigned to the field.


To add the column header, type in the Label column highlighted in yellow.


Field properties display in the left column as form fields are added to the builder. User’s select field properties by typing, clicking on links or clicking on the properties.

 

Data Section

Fields

View/Edit  Clicking the link opens the Fields Dialog box. The Fields Dialog box allows the user to add Form Fields, Properties, and Type in Column Headers for a Normalized Table.


 

 

To Create a Normalized Table in the Form:


1.      Drag and drop a Normalized Table Design Tool into the Form Builder body/grid. 


 

2.      The Fields dialog box opens when the Normalized Table is dropped in the Form Builder body/grid as shown in the figure below.


 

3.     Drag and drop a Form Field into the Field Type column to add a field.  In this example, a Text field is added to capture the user’s first name.


4.      In the Field Name type in FIRST_NAME.

5.      Tab to (or click in) the Maximum Length field and type in 25.  This will allow 25 characters for the field.  You can enter the desired number of characters in Maximum Length field.

6.      In the same row as the Text field, click in the Label column of the Fields dialog box and type in “First Name” as shown in the figure below.

 

7.      Drag and drop another Text field into dialog box. In the field Name, type in LAST_NAME. Type 25 in the Maximum Length field. This will allow 25 characters for the field. Click in the Label field and type in Last Name (same steps as above).

 


8.      Now, drag and drop a Drop Down field to the row below the second text field. In the Field Name type in RELATION and then go to the Label column in the Drop Down row and type in Relation.

 

 

9.      With the Drop Down field still highlighted in yellow (active field), click the View/Edit control in the Data section of the Drop Down Properties.

 

 

10.   This will open the Field Choices dialog box and allow the addition of dropdown choices for the field as shown in the figure below. Click in the Text column (highlighted in yellow) and type in “Father” and press the ENTER (or TAB) key. Repeat the process for: Mother, Son, Daughter and Other. The Field Choices Dialog box will look like the figure below. Click the OK button at the bottom of the dialog box.

 

11.   After clicking the OK button the Fields dialog box for the Normalized Table is displayed as shown in the figure below. Click OK at the bottom of the dialog box.

 

The Normalized Table will appear in the Form Builder body/grid as shown in the figure below.

 

 

The figure below is an example of how the Normalized Table appears to a user completing the fields in the Normalized Table on the CRF.

 

 

To complete the table, users fill in each field of a table row.  To add another Emergency Contact, users click the Add Row button and complete the fields. 


Maximum Rows – The Maximum Rows field allows the user to define the maximum number of rows that can be completed in the Normalized Table. To change the number of maximum rows in the table, click in the field next to Maximum Rows and enter the desired number of rows to be allowed.


Report Name – The Report Name field allows the user to enter a name for the table. The name entered will be displayed in various reports.


Fixed Rows – The Fixed Rows checkbox allows the user to define a fixed number of rows for the table. The Add Row button and the delete control will not appear in the form for the user completing the form. The Fixed Rows attribute is explained further in the following section. 


Defining Fixed Length Tables

You may want to have a normalized table that has a fixed and required number of rows. The fixed rows attribute allows you to define a normalized table that has a fixed number of rows. It does this based on the first column in the table. You can easily accomplish this with Clinical Studio.


When defining a Fixed Row table, the first column must be either a select (dropdown) or radio button field. That is because these are the only field types that can have field choices. The field choices will determine the number of rows in the table. The figure below shows the structure of the normalized table in the Form Builder:



When rendered, the table looks like the figure below.

 


Notice there is NO Add Row button for this table. There is also no Delete Row icon in the table. That is because the table is fixed in length. Each row is represented by a single value. That value is defined in the field choices of the first column of the table.


Each field choice is rendered into a row. Therefore, the number of field choices you have in the first column of the table determines the number of rows in the table. Remember each row is actually attached to the Field Choice Value. Therefore, changing the text of the field will change that for all defined tables. Likewise, deleting a field choice will delete all related rows in the rendered table.


Layout – Allows the user to determine the position of the Normalized Table in the Grid.


Left (pixels) –Allows the user to designate the left edge of the Normalized Table.


Top (pixels) – Allows the user to designate the top edge of the Normalized Table.

The table can also be dragged and dropped into the desired location on the Form Builder grid and the number in the pixel column will change according to the location where the table is dropped.