eatablesurveyorInternet and Web Development

Dec 14, 2013 (4 years and 7 months ago)


Building Rich Electronic Case
Report Forms in Labkey
Anthony Corbett
University of Rochester
Dept. of Biostatistics and Comp. Biology

Turn hardcopy CRFs into Labkey study datasets.

Live data entry during screening, enrollment and
study visits.

Must be mobile (ipad) friendly.
Case Report Forms
Labkey Study Datasets
Labkey Dataset Insert View

Controls don’t match
closely to hardcopy

No client side validation

Can’t customize view

Labkey Javascript Query API
ExtJS 4

Sharp learning curve to being productive.

Very heavy library.

Meant for enterprise level desktop applications.

Not completely mobile friendly.
ExtJS 4
Javascript Libraries
Labkey Javascript API
Query API Adaptor
Bootstrap CSS

Sleek, intuitive, and powerful front-end framework for faster
and easier web development”

A 12 column grid layout, dozens of components, typography,
and form controls, HTML tables, buttons, and icons.
CSS and Javascript (Jquery plugins) code.
HTML markup templates that can be
used to render your data.
var data = {

title: ‘This is my title’,

body: ‘Hello World!’
An opinionated Backbone + Handlebars framework
for building scalable web applications.

Easy data binding based on events

Rendering context control

Rendering collections

Form handling

View layout and lifecycle
Backbone Query API Adaptor
Anatomy of an eCRF

eCRF as a composition of sections; each
section represents a row or rows from a
specific dataset.

Entering a eCRF –> establishing context
eCRF Example
eCRF Example
Navigation View
Section View
eCRF Section - What is involved

A handlebars template (HTML markup)

Markup is based on Bootstrap

Backbone View; extends Application.FormView

Backbone Model; extends Application.Model

Unique URL to navigate to a section

Backbone Router handles URL and dispatches/invokes the
section’s route function to render this section.
Opening an eCRF

In order to “open” an eCRF we need a context:



What about a new Participant?
New Participant
Search for Participant
Determining the Visit

Custom UI elements, interactions, and logic

Missing Value Indicators

Email notifications

Per dataset control over:

client side validation (single field and dependencies between

Skip logic (by cohort, visit, etc.)

Skip individual fields

Skip whole datasets/sections

Mobile platform (iPad) compatible.