Wiki source code of AJAX Forms
Last modified by smirea on 2011/06/30 19:43
Show last authors
author | version | line-number | content |
---|---|---|---|
1 | |||
2 | =AJAX Forms Application= | ||
3 | [[http://incubator.myxwiki.org/xwiki/bin/view/Improvements/ApplicationWithinMinutesProposalI2]] | ||
4 | |||
5 | {{toc/}} | ||
6 | |||
7 | ==Main Objective== | ||
8 | 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 | ||
9 | |||
10 | |||
11 | ==Description== | ||
12 | 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. | ||
13 | When a form is filled in, a user will have the option to hide his submission to others/track it/ watch it/ etc | ||
14 | |||
15 | == Functionality== | ||
16 | * Step 1 - Describe your application | ||
17 | ** Application Name - the desired title for the form visible to the users | ||
18 | ** Application Icon - allow users to upload an icon for their forms | ||
19 | ** Application Description | ||
20 | * Step 2 - Define the structure of your application | ||
21 | ** 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. | ||
22 | ** 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 | ||
23 | ** 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) | ||
24 | ** Once an element is updated, the final form is updated | ||
25 | ** Import/export functionality for the form data/submissions | ||
26 | ** 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 ) | ||
27 | ** Privacy setting on forms | ||
28 | ** Have an API for accessing the data | ||
29 | ** Each submission is stored in its own document | ||
30 | ** Each form is stored in its own space ( 1forms/space only ) | ||
31 | * Step 3 - Customize homepage presentation | ||
32 | ** List entries on the homepage: true/false | ||
33 | ** Entries livetable fields: (have a dynamically created list of the form's fields) | ||
34 | ** Entries livetable options: | ||
35 | *** Enable excel support on livetable: true/false | ||
36 | *** Hide edit buttons on homepage: true/false | ||
37 | |||
38 | Alternatives: | ||
39 | |||
40 | |||
41 | |||
42 | == Detailed Functionality== | ||
43 | |||
44 | * Element types/categories: | ||
45 | ** Standard | ||
46 | *** Heading | ||
47 | *** Textbox | ||
48 | *** Textarea | ||
49 | *** Number | ||
50 | *** Dropdown ( with option for allowing multiple selections ) | ||
51 | *** Check box | ||
52 | *** Radio button | ||
53 | ** Pickers | ||
54 | *** Date | ||
55 | *** Time | ||
56 | *** Image | ||
57 | *** Attachment | ||
58 | *** Single Page | ||
59 | *** 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?) | ||
60 | *** Single User | ||
61 | *** Multiple Users ( same question as single/multiple pages ) | ||
62 | ** Advanced | ||
63 | *** Single static list | ||
64 | *** Multiple static list | ||
65 | *** Single Database list | ||
66 | *** Multiple Database lis | ||
67 | * Elements global options: | ||
68 | ** Title: | ||
69 | ** Subtitle/Hint | ||
70 | ** Required: true/false | ||
71 | ** Error message | ||
72 | * Elements specific options: | ||
73 | ** Text elements: | ||
74 | *** Default: | ||
75 | *** Placeholder (html5): | ||
76 | *** Min length: 0 | ||
77 | *** Max length: 0 (infinite) | ||
78 | *** Validation: have a list of predefined validation types like email, numbers only, text, date only and (maybe) also allow a regexp pattern? | ||
79 | ** Multiple list elements: | ||
80 | *** Min selections: 0 | ||
81 | *** Max selections: 0(infinite) | ||
82 | ** File upload elements: | ||
83 | *** Size | ||
84 | *** Extension | ||
85 | * Submitting data | ||
86 | ** Users fill in the required field and hit submit. Error notifications are displayed if required otherwise a success message is outputted | ||
87 | * Viewing submissions | ||
88 | ** Submissions will be visible/sortable/exportable via the livetable | ||
89 | * Settings | ||
90 | ** General | ||
91 | *** Form Name | ||
92 | *** Form Owner (allow affiliates to send notifications to multiple adresses?) | ||
93 | *** Form Description | ||
94 | *** Form status: Open/Closed | ||
95 | ** Privacy settings for the form | ||
96 | *** Public | ||
97 | *** Visible for specific users/group of users | ||
98 | ** Notifications | ||
99 | *** New Submission Notification: Instant/Daily/Weekly/None | ||
100 | * Search | ||
101 | ** It is done via the livetable | ||
102 | |||
103 | |||
104 | |||
105 | == Suggestions== | ||
106 | |||
107 | (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 | ||
108 | |||
109 | == Further Work== | ||
110 | |||
111 | == Technicalities== | ||
112 | |||
113 | Two classes will be used: FormClass and SubmissionClass | ||
114 | * 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 | ||
115 | * 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) | ||
116 | |||
117 | FormClass Properties: | ||
118 | * name (Name: text): //the title of the form// | ||
119 | * description (Description: text): //the description of the form// | ||
120 | * privacy (Privacy: static list): s//et the calendar to be public(visible to everyone) or visible to specific users// | ||
121 | * shareList (Share Form: user list): //if privacy is set to visible for specific users, this list will contain the users who can view it// | ||
122 | * owner (Owner: user): //the user who owns the calendar// | ||
123 | |||
124 | Form class sheets: | ||
125 | * FormViewSheet: contains the form and all its elements |