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"
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
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."