With ODK Web Forms, you can define forms with powerful logic using the spreadsheet-based XLSForm standard. Use our Vue-based frontend or build your own user experience around the engine!
Important
ODK Web Forms is currently pre-release. We don't yet guarantee that its interfaces are stable and it is missing many features that are available in XLSForm form definitions.
Web_Forms_quick_demo.mp4
Note
Comprehensive usage and development instructions are coming soon! For now, you can see each package's README. Please be sure to run yarn commands from the project root.
- web-forms: form-filling frontend built with Vue
- xforms-engine: implementation of the ODK XForms specification
- xpath: XPath evaluator with ODK XForms extensions
- scenario: engine client used to express tests on forms
- ui-solid: form-filling frontend built with Solid, likely not as up-to-date as the Vue client
ODK Web Forms is developed by the ODK team.
The ODK Web Forms frontend is designed to provide a similar user experience to the ODK Collect mobile data collection app. Our short-term goal is to use it to replace Enketo in the ODK Central form server for web-based form filling and editing existing submissions.
Longer-term, we hope to use the engine to replace JavaRosa to power ODK Collect, so that we can maintain a single correct and extensible form engine.
Here are some of our high-level priorities to get to a production-ready state:
- Adapt tests from JavaRosa and Enketo and get them passing to ensure alignment with the ODK XForms spec
- Implement all types and appearances defined in XLSForm
- Define a thoughtful interface for host applications that balances ease of use and flexibility
Here is the feature matrix and the progress we have made so far:
${\mathtt{Question \space \space types \space \space (basic \space \space functionality)\color{transparent}==== \color{green}███\color{LightGray}█████████████████ \space \color{initial} 15\%}}$
| Feature |
Progress |
|---|---|
| text | ✅ |
| integer | |
| decimal | |
| note | 🚧 |
| select_one | ✅ |
| select_multiple | ✅ |
| repeat | ✅ |
| group | ✅ |
| geopoint | |
| geotrace | |
| geoshape | |
| start-geopoint | |
| range | |
| image | |
| barcode | |
| audio | |
| background-audio | |
| video | |
| file | |
| date | |
| time | |
| datetime | |
| rank | |
| csv-external | |
| acknowledge | |
| start | |
| end | |
| today | |
| deviceid | |
| username | |
| phonenumber | |
| audit |
${\mathtt{Appearances\color{transparent}============================= \color{green}████\color{LightGray}████████████████ \space \color{initial} 21\%}}$
| Feature |
Progress |
|---|---|
| numbers | |
| multiline | |
| url | |
| ex: | |
| thousands-sep | |
| bearing | |
| vertical | |
| no-ticks | |
| picker | |
| rating | |
| new | |
| new-front | |
| draw | |
| annotate | |
| signature | |
| no-calendar | |
| month-year | |
| year | |
| ethiopian | |
| coptic | |
| islamic | |
| bikram-sambat | |
| myanmar | |
| persian | |
| placement-map | |
| maps | |
| hide-input | |
| minimal | ✅ |
| search / autocomplete | ✅ |
| quick | |
| columns-pack | |
| columns | ✅ |
| columns-n | ✅ |
| no-buttons | ✅ |
| image-map | |
| likert | |
| map | |
| field-list | ✅ |
| label | ✅ |
| list-nolabel | ✅ |
| list | ✅ |
| table-list |
${\mathtt{Parameters\color{transparent}============================== \color{green}████\color{LightGray}████████████████ \space \color{initial} 22\%}}$
| Feature |
Progress |
|---|---|
| randomize | ✅ |
| seed | ✅ |
| value | |
| label | |
| geopoint capture-accuracy, warning-accur acy, allow-mock-accuracy |
|
| range start, end, step | |
| image max-pixels | |
| audio quality | |
| Audit: location-priority, location-min-i nterval, location-max-age, track-changes , track-changes-reasons, identify-user |
${\mathtt{Form \space \space Logic\color{transparent}============================== \color{green}██████████\color{LightGray}██████████ \space \color{initial} 50\%}}$
| Feature |
Progress |
|---|---|
| calculate | ✅ |
| relevant | ✅ |
| required | ✅ |
| required message | 🚧 |
| custom constraint | 🚧 |
| constraint message | 🚧 |
| read only | ✅ |
| trigger | |
| choice filter | ✅ |
| default | ✅ |
| query parameter | |
| repeat_count |
${\mathtt{Descriptions \space \space and \space \space Annotations\color{transparent}============ \color{green}██\color{LightGray}██████████████████ \space \color{initial} 13\%}}$
| Feature |
Progress |
|---|---|
| label | ✅ |
| hint | |
| guidance hint | |
| Translations | ✅ |
| Translations with field/question value | |
| Markdown | |
| Inline HTML | |
| Form attachments | |
| image | |
| big-image | |
| audio | |
| video | |
| secondary instance (external choice file ) |
|
| secondary instance (last saved) | |
| autoplay |
${\mathtt{Theme \space \space and \space \space Layouts\color{transparent}======================= \color{green}█\color{LightGray}███████████████████ \space \color{initial} 9\%}}$
| Feature |
Progress |
|---|---|
| grid | |
| pages | |
| logo | |
| theme color | |
| Submissions | |
| preview | ✅ |
| send | |
| view | |
| edit | |
| attachments |
${\mathtt{Offline \space \space capabilities\color{transparent}==================== \color{green}█\color{LightGray}███████████████████ \space \color{initial} 0\%}}$
| Feature |
Progress |
|---|---|
| List of projects & forms | |
| local persistence (single) | |
| save as draft | |
| offline entities | |
| MBtiles / offline map layers |
${\mathtt{XPath\color{transparent}=================================== \color{green}██████████████████\color{LightGray}██ \space \color{initial} 94\%}}$
| Feature |
Progress |
|---|---|
| operators | ✅ |
| predicates | ✅ |
| axes | ✅ |
| string(* arg) | ✅ |
| concat(string arg*|node-set arg*) | ✅ |
| join(string separator, node-set nodes*) | ✅ |
| substr(string value, number start, numbe r end?) |
✅ |
| substring-before(string, string) | ✅ |
| substring-after(string, string) | ✅ |
| translate(string, string, string) | ✅ |
| string-length(string arg) | ✅ |
| normalize-space(string arg?) | ✅ |
| contains(string haystack, string needle) | ✅ |
| starts-with(string haystack, string need le) |
✅ |
| ends-with(string haystack, string needle ) |
✅ |
| uuid(number?) | ✅ |
| digest(string src, string algorithm, str ing encoding?) |
✅ |
| pulldata(string instance_id, string desi red_element, string query_element, strin g query) |
|
| if(boolean condition, _ then, _ else) | ✅ |
| coalesce(string arg1, string arg2) | ✅ |
| once(string calc) | ✅ |
| true() | ✅ |
| false() | ✅ |
| boolean(* arg) | ✅ |
| boolean-from-string(string arg) | ✅ |
| not(boolean arg) | ✅ |
| regex(string value, string expression) | ✅ |
| checklist(number min, number max, string v*) |
✅ |
| weighted-checklist(number min, number ma x, [string v, string w]*) |
✅ |
| number(* arg) | ✅ |
| random() | ✅ |
| int(number arg) | ✅ |
| sum(node-set arg) | ✅ |
| max(node-set arg*) | ✅ |
| min(node-set arg*) | ✅ |
| round(number arg, number decimals?) | ✅ |
| pow(number value, number power) | ✅ |
| log(number arg) | ✅ |
| log10(number arg) | ✅ |
| abs(number arg) | ✅ |
| sin(number arg) | ✅ |
| cos(number arg) | ✅ |
| tan(number arg) | ✅ |
| asin(number arg) | ✅ |
| acos(number arg) | ✅ |
| atan(number arg) | ✅ |
| atan2(number arg, number arg) | ✅ |
| sqrt(number arg) | ✅ |
| exp(number arg) | ✅ |
| exp10(number arg) | ✅ |
| pi() | ✅ |
| count(node-set arg) | ✅ |
| count-non-empty(node-set arg) | ✅ |
| position(node arg?) | ✅ |
| instance(string id) | ✅ |
| current() | ✅ |
| randomize(node-set arg, number seed) | ✅ |
| today() | ✅ |
| now() | ✅ |
| format-date(date value, string format) | ✅ |
| format-date-time(dateTime value, string format) |
✅ |
| date(* value) | ✅ |
| decimal-date-time(dateTime value) | ✅ |
| decimal-time(time value) | ✅ |
| selected(string list, string value) | ✅ |
| selected-at(string list, number index) | ✅ |
| count-selected(node node) | ✅ |
| jr:choice-name(node node, string value) | |
| jr:itext(string id) | ✅ |
| indexed-repeat(node-set arg, node-set re peat1, number index1, [node-set repeatN, number indexN]{0,2}) |
|
| area(node-set ns|geoshape gs) | ✅ |
| distance(node-set ns|geoshape gs|geotr ace gt|(geopoint|string) arg*) |
✅ |
| base64-decode(base64Binary input) |
We welcome discussion about the project on the ODK forum! The forum is generally the preferred place for questions, issue reports, and feature requests unless you have information to add to an existing issue.
Why not evolve Enketo?
Enketo is critical infrastructure for a number of organizations and used in many different ways. As its maintainer, we found deeper changes to be challenging because they often led to regressions, many times in functionality that we don't use ourselves. We hope that the narrower scope of ODK Web Forms (in particular, no transformation step and no standalone service) will allow us to iterate quickly and align more closely with Collect while allowing organizations that have built infrastructure around Enketo to continue using it as they prefer.
What will happen to Enketo?
We are committed to continuing its maintenance through the end of 2024. We are actively seeking new maintainers and will offer some transitional support.
Why not build a web frontend around JavaRosa?
After many years of maintaining JavaRosa and a few maintaining Enketo, we have learned a lot about how we'd like to structure an ODK XForms engine to isolate concerns and reduce the risk of regressions. We believe a fresh start will give us an opportunity to build strong patterns that will allow for a faster development pace with fewer bugs and performance issues.
There exist more and more ways to run code written with web technologies in different environments and web technologies continue to increase in popularity. We believe this choice will give us a lot of flexibility in how these packages can be used.
We aspire to use the engine to drive other kinds of frontends such as test runners and eventually mobile applications. Additionally, our experience maintaining JavaRosa and Enketo suggests that blurring the engine/frontend line can be the cause of many surprising bugs that are hard to troubleshoot.
Vue powers Central frontend where it has served us well. For Web Forms, we've selected to use a component library to help us build a consistent, accessible, and user-friendly experience in minimal time. We chose PrimeVue for its development pace, approach to extensibility, and dedication to backwards compatibility.
Why not use browsers' XPath parser and evaluator (e.g. Enketo's wrapper around them)?
We want to be able to use this code in browsers but also in backends and eventually wrapped by mobile applications. Taking control of XPath evaluation gives us more portability and also has the advantage of giving us the opportunity to make targeted performance improvements.
While XLSForm is a powerful form authoring format, it doesn't have clearly defined engine semantics or a formal specification. An XLSForm engine would have to refer to the underlying ODK XForms specification for much of its behavior and represent the form in a way that's appropriate for XPath querying.
If there's specific functionality you're eager to see, please let us know on the ODK forum. You can see what we're currently prioritizing on the project board and the ODK roadmap.
We will be adding color and more styling soon. We intend to expose a way to do basic theming as well as a no-styles option to let advanced users define their own styling.
- JavaRosa is the reference implementation for ODK XForms. It powers the Collect mobile application.
- Enketo is an ODK XForms web form application that has been maintained by the ODK team since 2021.
- XLSForm is a standard for developing ODK XForms using spreadsheets.
- Orbeon forms is a web form system that uses the W3C XForms standard.
- Fore is an XForms-inspired framework for defining frontend applications.