![Page 1: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/1.jpg)
Hello James, welcome to your cloudclinica account!
cloudclinicaBETA LOG OUTMY ACCOUNT MY STUDIESHOME
My CRFs
CRF Name Creation Date Status
Enrollment 01/09/2014 Actions
Demography 01/10/2014 Actions
Adverse Event 01/10/2014 Actions
ConMed 01/06/2014 Actions
Last Rule 01/17/2014 Actions
DONE
DRAFT
DRAFT
DRAFT
DRAFT
Edit Clone Delete Order
Display
![Page 2: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/2.jpg)
Save CRFBack to CRFs
User is prompted to select type of field when clicking on “Add Item”. See next slide for details.
Automatic questionNumbering
Autosave every 2 min
Last auto-saved: 4.33pm
Add item
+Add Tab
Field
Mouse turns into “dragging pointer” when user hovers a question.
Add Tab button Icons to edit or delete question
![Page 3: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/3.jpg)
Save CRFBack to CRFs
Add item
+Add Tab
Same option to edit or delete a tab
Last auto-saved: 4.33pm
TabTab NameSubtitle
1- Hovering over or clicking the Add item’ displays this pop up2- Clicking on any item displays the appropriate panel in the mockups below
![Page 4: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/4.jpg)
Add item Name (TEXT)*Type (ENUM: Text, Textarea, Single-select , Multi-select, Radio, Checkbox, File)*Data type (ENUM: ST, REAL, INT, DATE, PDATE)Description (TEXT)Left Text (TEXT)Right Text (TEXT)Question number (INT) – Auto generated when the field is relocated on the pageResponse text (TEXT) * -- only required if item type is: single-select, multi-select, radio, checkboxResponse values (INT) * -- only required if item type is: single-select, multi-select, radio, checkboxResponse layout (ENUM: Horizontal, Vertical, – only id item type is Radio, Checkbox
Size, Maximum – only if item type is Text, Textarea)Default value (INT) – only if item type is: Single-select, Multi-select, Radio button, CheckboxDecimal format (w(d)) – w is integer width if item type is Real or Integer and d is decimal width if item type is RealValidation expression regexp() – only required for time fields Validation message (TEXT) – only required for time fieldsRequired (ENUM: Yes, No)
Add Tab Name (TEXT) *Subtitle (TEXT)Instructions(TEXT)
Add Table Name (TEXT) *Header (TEXT)Min rows (INT)Max rows (INT)
Add Column (Same as Add Item)
Data Structures
![Page 5: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/5.jpg)
Text fieldNumberSelect Item(s)Radio buttonsCheckboxesDateTimeTableFile
ITEMS
Add Item Mockup
1- Hovering over the Add item’ displays this pop up2- Clicking on any item displays the appropriate panel in the mockups below
![Page 6: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/6.jpg)
Add/Edit Text Field Mockup
1 Name *:2 Description:5 Min text size:6 Max text size:7 Default Value:8 Resizable*?
YesNo
9 Required*?YesNo
Name 1Type Text if 8 = No Texttarea if 8= yesData type STDescription 2Left Text 3Right Text 4Response text –Response values –Response layout Size = 5
Maximum = 6Default value 7Decimal format –Validation exp. –Validation message –Required 9
Click here to insert right text Click here to insert left text 3 4
1- Edit icon displays this configuration panel2- Delete icon removes the item
Field shrinks/grows according to max (5, 6)1- Area shrinks/grows according to right-left text + field size2- Area is draggable anywhere on the page
*
Show according to 9
![Page 7: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/7.jpg)
1 Name *:2 Description: Add item *: 5 Text 6 Value
7 Default Value:8 Multi-Select?
YesNo
9 Required*?YesNo
Add/Edit Select Item Mockup
1- New row auto added when one completes2- Row position can be dragged and dropped
Name 1Type Single-Selectif 8 = No Multi-Select if 8= yesData type INTDescription 2Left Text 3Right Text 4Response text 5 [, 5 ]Response values 6 [, 6 ]Response layout –Default value 7Decimal format –Validation exp. –Validation message –Required 9
3 4
Field shrinks/grows according to max text in 5
Click here to insert right text Click here to insert left text *
Show according to 9
1- Area shrinks/grows according to right-left text + field size2- Area is draggable anywhere on the page
![Page 8: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/8.jpg)
1 Name *:2 Description: Add item *: 5 Text 6 Value
7 Default Value:8 Layout?
HorizontalVertical
9 Required*?YesNo
Add/Edit Checkboxes Mockup
3 4
1- Add/remove/position checkboxes according to 52- Layout radio buttons according to 8
Name 1Type CheckboxData type INTDescription 2Left Text 3Right Text 4Response text 5 [, 5 ]Response values 6 [, 6 ]Response layout Horizontal 8
Vertical 8Default value 7Decimal format –Validation exp. –Validation message –Required 9
Checkbox Text1 Checkbox Text2Checkbox Text3
Default value according to 7
1- New row auto added when one completes2- Row position can be dragged and dropped
Click here to insert right text Click here to insert left text
*
Show according to 9
1- Area shrinks/grows according to right-left text + field size2- Area is draggable anywhere on the page
![Page 9: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/9.jpg)
1 Name *:2 Description: Add item *: 5 Text 6 Value
7 Layout?HorizontalVertical
8 Required*?YesNo
Add/Edit Radio Buttons Mockup
3 4
1- Add/remove/position radio buttons according to 52- Layout radio buttons according to 8
Name 1Type RadioData type INTDescription 2Left Text 3Right Text 4Response text 5 [, 5 ]Response values 6 [, 6 ]Response layout Horizontal 7
Vertical 7Default value –Decimal format –Validation exp. –Validation message –Required 8
Radio button Text1 Radio button Text2Radio buttonText3
1- New row auto added when one completes2- Row position can be dragged and dropped
Click here to insert right text Click here to insert left text
*
Show according to 8
1- Area shrinks/grows according to right-left text + field size2- Area is draggable anywhere on the page
![Page 10: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/10.jpg)
Add/Edit Date Mockup
1 Name *:2 Description:5 Partial Date?
YesNo
6 Required*?YesNo
Name 1Type TextData type DATE if 5 = No
PDATEif 5 = YesDescription 2Left Text 3Right Text 4Response text –Response values – Response layout – Default value –Decimal format –Validation exp. –Validation message –Required 6
3 4Click here to insert right text Click here to insert left text *
Show according to 6
1- Area shrinks/grows according to right-left text + field size2- Area is draggable anywhere on the page
![Page 11: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/11.jpg)
Add/Edit Time Mockup
1 Name *:2 Description:5 Required*?
YesNo
Name 1Type TextData type REALDescription 2Left Text 3Right Text 4Response text –Response values – Response layout Size = 5Default value –Decimal format –Validation exp. regexp:/^[0-1]\d\.[0-5]\d|2[0-3]\.[0-5]\d$/Validation message Correct time format is 24:00 Required 5
3 4Click here to insert right text Click here to insert left text *
Show according to 5
1- Area shrinks/grows according to right-left text + field size2- Area is draggable anywhere on the page
![Page 12: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/12.jpg)
Add Number Field Mockup
1 Name *:2 Description:5 Number type:
IntegerDecimal
6 Min integer width:7 Max integer width:8 Decimal width: 9 Required*?
YesNo
Display only if number is decimal
99999.993 4
Click here to insert right text Click here to insert left text *
Show according to 9
Name 1Type TextData type REAL if 5 = Decimal
INT if 5 = IntegerDescription 2Left Text 3Right Text 4Response text –Response values – Response layout Size = 6 + 8 +1 – for decimal point
Maximum = 7 + 8 + 1 – for decimal pointDefault value –Decimal format 7(8)Validation exp. –Validation message –Required 9
1- Area shrinks/grows according to right-left text + field size2- Area is draggable anywhere on the page
Show integer width according to max (6 , 7) Show decimals width according to 8
![Page 13: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/13.jpg)
Add/Edit File Mockup
1 Name *:2 Description:5 Required*?
YesNo
3 4Click here to insert right text Click here to insert left text *
Show according to 5
1- Area shrinks/grows according to right-left text + field size2- Area is draggable anywhere on the page
Click to upload file
Name 1Type FileData type REALDescription 2Left Text 3Right Text 4Response text –Response values – Response layout – Default value –Decimal format – Validation exp. –Validation message –Required 5
![Page 14: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/14.jpg)
Add/Edit Table Mockup
1 Name *:2 Header:3 Minimum rows:4 Maximum rows:
Area is draggable anywhere on the page
Header according to 2
Show Column header +min rows according to 3
Name 1Header 2Min rows 3Max rows 4
Insert table with 1 column, taking the whole width of the page
Clicking this edit icon displays the Column configuration panel, next slide
Header
Clicking this edit icon displays the Add/Edit Table panel, above
![Page 15: Hello James, welcome to your cloudclinica account!](https://reader035.vdocuments.net/reader035/viewer/2022062501/568161a6550346895dd16455/html5/thumbnails/15.jpg)
Add/Edit Column Mockup
1 Header*:2 Type?
TextSelect ItemRadio buttonsCheckboxesDateTimeNumberFile
Use same mockup for the same item
Clicking the edit icon displays the Column configuration panel Show column header according to 1
Column Header
Column is draggable to different position on the table
Table Header
Column is resizable by dragging on the edge