AJAX Forms
AJAX Forms Application
http://incubator.myxwiki.org/xwiki/bin/view/Improvements/ApplicationWithinMinutesProposalI2
Main Objective
This application aims to allow end users to create custom forms via an easy-to-use drag-and-drop interface and manage/export the submitted data
Description
The application will allow users to create custom forms via a 3 step wizard. Users will be able to drag-and-drop form elements into place and edit them, the resulted form being generated live.
When a form is filled in, a user will have the option to hide his submission to others/track it/ watch it/ etc
Functionality
- Step 1 - Describe your application
- Application Name - the desired title for the form visible to the users
- Application Icon - allow users to upload an icon for their forms
- Application Description
- Step 2 - Define the structure of your application
- Have a list on the right portraying all the available form elements structured by type in categories. Users will drag-and-drop these into their respective places.
- Every element is inserted into its own block which contains a Title and an optional Description/hint/subtitle of what it is supposed to represent
- Elements will have the ability to be moved/edited once added by having a menu appear once they are clicked (menu containing edition/update/delete options/fields)
- Once an element is updated, the final form is updated
- Import/export functionality for the form data/submissions
- Email notifications(can be disabled): both for the creator of the form to receive a notification once a submission occurs or (optionally) a day/week summary of submissions. As for user, notifications on updated of the state of his submission (accepted/rejected/ etc )
- Privacy setting on forms
- Have an API for accessing the data
- Each submission is stored in its own document
- Each form is stored in its own space ( 1forms/space only )
- Step 3 - Customize homepage presentation
- List entries on the homepage: true/false
- Entries livetable fields: (have a dynamically created list of the form's fields)
- Entries livetable options:
- Enable excel support on livetable: true/false
- Hide edit buttons on homepage: true/false
Alternatives:
Detailed Functionality
- Element types/categories:
- Standard
- Heading
- Textbox
- Textarea
- Number
- Dropdown ( with option for allowing multiple selections )
- Check box
- Radio button
- Pickers
- Date
- Time
- Image
- Attachment
- Single Page
- Multiple Pages (can't this and the above be included in a "Page" input which will have an option for "allow multiple selections" or not?)
- Single User
- Multiple Users ( same question as single/multiple pages )
- Advanced
- Single static list
- Multiple static list
- Single Database list
- Multiple Database lis
- Standard
- Elements global options:
- Title:
- Subtitle/Hint
- Required: true/false
- Error message
- Elements specific options:
- Text elements:
- Default:
- Placeholder (html5):
- Min length: 0
- Max length: 0 (infinite)
- Validation: have a list of predefined validation types like email, numbers only, text, date only and (maybe) also allow a regexp pattern?
- Multiple list elements:
- Min selections: 0
- Max selections: 0(infinite)
- File upload elements:
- Size
- Extension
- Text elements:
- Submitting data
- Users fill in the required field and hit submit. Error notifications are displayed if required otherwise a success message is outputted
- Viewing submissions
- Submissions will be visible/sortable/exportable via the livetable
- Settings
- General
- Form Name
- Form Owner (allow affiliates to send notifications to multiple adresses?)
- Form Description
- Form status: Open/Closed
- Privacy settings for the form
- Public
- Visible for specific users/group of users
- Notifications
- New Submission Notification: Instant/Daily/Weekly/None
- General
- Search
- It is done via the livetable
Suggestions
(advanced) Conditional layout: Have a different form depending on previous selected options. i.e. You have a Radio list to select gender and have certain field appear/disappear depending on if the user is a male of female
Further Work
Technicalities
Two classes will be used: FormClass and SubmissionClass
- A Form is a document with an object of FormClass attached. When a form is added a space is also created which will contain the form document and all its submission documents
- A Submission is a document with an object of SubmissionClass attached. Every time a submission is made/modified the Property specific to that input is also made/modified in the Form document (i.e. you drag a textArea into the form and set its options => a textarea Property is also created in the Form document)
FormClass Properties:
- name (Name: text): the title of the form
- description (Description: text): the description of the form
- privacy (Privacy: static list): set the calendar to be public(visible to everyone) or visible to specific users
- shareList (Share Form: user list): if privacy is set to visible for specific users, this list will contain the users who can view it
- owner (Owner: user): the user who owns the calendar
Form class sheets:
- FormViewSheet: contains the form and all its elements