Slides

eatablesurveyorInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 5 μήνες)

67 εμφανίσεις

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

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

Navigability
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
Backbone.js
Handlebars.js
Bootstrap CSS
Thorax.js

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.
http://twitter.github.com/bootstrap/index.html
HTML markup templates that can be
used to render your data.
var data = {

title: ‘This is my title’,

body: ‘Hello World!’
};
http://handlebarsjs.com/
Thorax
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:

Which
Participant


What
Visit

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

Custom UI elements, interactions, and logic

Missing Value Indicators

Email notifications

Per dataset control over:

client side validation (single field and dependencies between
fields)

Skip logic (by cohort, visit, etc.)

Skip individual fields

Skip whole datasets/sections

Mobile platform (iPad) compatible.