Vellum

Vellum is an XForms form designer built by Dimagi for CommCare HQ.

Setup

For an example of the JS and CSS files you need to include, see this link.

In css/jquery.fancybox-1.3.4.css, change line 39 to the URL that points to fancybox.png.

Usage

formdesigner.launch({
    rootElement: "#formdesigner",
    staticPrefix: "",
    langs: ""
});

formdesigner.launch causes the formdesigner to initialize itself fully in the element specified by rootElement.

Form Options:

• rootElement: "jQuery selector to FD Container",
• staticPrefix : "url prefix for static resources like css and pngs",
• saveUrl : "URL that the FD should post saved forms to",
• [form] : "string of the xml form that you wish to load"
• [formName] : "Default Form Name"

Testing

The short story:

$ cd js
$ npm install -d
$ open tests/runner.html  # Or however you get htis HTML file loaded in a browser

Ideally, though not working today, this can be run on the command-line via:

$ npm install -g mocha-phantomjs
$ mocha-phantomjs tests/runner.html

Contributing

To modify Vellum's CSS, you need to have LESS installed. You each file in style is compiled individually and share a common library style/lib/main.less with useful mixins and variables borrowed from Twitter Bootstrap.

Event Tracking

If you have Google Analytics installed, Vellum will track events.