Public service where anyone can try their XLSForm with Web Forms

[lognaturel]

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

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

[sadiqkhoja]

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

[alyblenkin]

Feedback from Yaw & Hélène:

• [x] Instead of the consent box, say “New to XLSForms? Try this tutorial”
• [x] Change title for demo forms to “Try real forms”
• [x] Explore adding a light blue colour block to break up the two sections (like the main page of the website)
• [x] Depending on the colour block, we may want to also lighten images so they don’t pop as much, like they do on white.
• [x] Change photo for the socio economic
• [x] 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.”
• [x] All question types should go last with this image
• [x] 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."