getodk / web-forms

ODK Web Forms enables form filling and submission editing of ODK forms in a web browser. It's coming soon! ✨

Home Page:https://getodk.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Public service where anyone can try their XLSForm with Web Forms

lognaturel opened this issue · comments

User story

As someone interested in web forms for the ODK ecosystem
I want to try my XLSForm with ODK Web Forms
So that I can provide feedback and determine whether it's ready for my use

We had initially discussed adding this as a button on https://getodk.org/xlsform/ but we've decided we'd rather have a dedicated page with more information. XLSForm online may link to that page.

Requirements:

  • upload an XLSForm and preview it
  • list of demo forms to preview
  • clear way to give feedback
  • mark an uploaded form as ok for the ODK team to look at and use for development purposes

On the ODK website, I think it should go under resources as "Try new ODK Web Forms" or "Web Forms"

Figma

Image

User flow:

  • User click "upload file" link or drops an XLSForm file
  • System shows loading spinner while file is being uploaded and converted
  • If file has errors/warnings those are listed below the upload section otherwise system shows "Preview Form" and "Upload new Form" buttons
  • On pressing "Preview Form" button, Web Form is previewed in a new tab
  • If user clicks "Upload new Form" then system shows the initial state, user can upload another file and see its preview.
  • System should allow user to preview multiple Form at the same time in different tabs

Future considerations

In the designs we have some of the future state considerations like:

  • Couple of paragraphs about ODK Web Forms
  • The status and timeline
  • Ways to find out more

We now have a UI design for this at https://www.figma.com/design/6v0NnvayfDlaQhYpjv37Bn/Web-Forms?node-id=30-1739&t=nhahbntZEAL3n873-1

Few Ideas for Implementation:

I am thinking we can modify existing Demo application inside @getodk/web-forms package to include:

  • Option to upload XLSForm/XForm for preview
  • Build configuration to specify which demo Forms to include; For development we can have all the test Forms and only selective Forms for build.

XLSForm to XForm conversion options:

1- We can either deploy a dedicated instance of pyxform-http or add CORS rule in XLSForm Online
2- We can run pyxform python package directly in browser using WebAssembly, I have done a proof-of-concept to check its feasibility:
demo: https://www.sadiqkhoja.com/web-forms/pr-preview/pyxform (chrome only because I am using Native File System API)
source code: https://github.com/sadiqkhoja/web-forms/tree/pyxform-in-browser

Pros of 2nd option:

  • We don't need a server for converting xlsform (we would still need something for saving xlsform if user consents, we can use S3 bucket or Central)
  • Fast feedback if we use Chrome's Native File System API. That means user would be able to modify XLSForm locally and see the change immediately on the browser without browsing/uploading the Form again (see demo)

Cons of 2nd option

  • Extra JS/wasm files to download ~20MB;

Integration with getodk.org

1- Render this service in iFrame
2- Add a build step to copy header and footer of getodk.org

commented

Feedback from Yaw & Hélène:

  • Instead of the consent box, say “New to XLSForms? Try this tutorial
  • Change title for demo forms to “Try real forms”
  • Explore adding a light blue colour block to break up the two sections (like the main page of the website)
  • Depending on the colour block, we may want to also lighten images so they don’t pop as much, like they do on white.
  • Change photo for the socio economic
  • Change description for All question types to “See all question types available in ODK! Track our feature progress to learn about which are supported in Web Forms.”
  • All question types should go last with this image
  • New copy for top section:
    "Try ODK Web Forms
    We’re building a new web forms experience designed from the ground up to be fast and user-friendly. Try a preview below! You can learn more and let us know what you think on the forum."