Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI Factory - Forms - Feature, improvement requests #367

Open
11 of 28 tasks
bkamapantula opened this issue Feb 2, 2021 · 5 comments
Open
11 of 28 tasks

UI Factory - Forms - Feature, improvement requests #367

bkamapantula opened this issue Feb 2, 2021 · 5 comments

Comments

@bkamapantula
Copy link
Contributor

bkamapantula commented Feb 2, 2021 •
edited
Loading

Is your feature request related to a problem? Please describe.
Improve Forms builder from a usability standpoint.

Describe the solution you'd like

Desired features are described below.

Features

Copy or Clone fields

  • copy or clone already added fields (without clicking the add modal again). consider a few fields (email, text, password) are added by a user via modal prompt on Add option click. If the user wants to create another text input, they should be able to copy the created field and modify its properties.

Elaborating on the Copy/Clone field. A new element containing these options can wrap the field when clicked for setting its properties: clone, delete, required

Render form from JSON

  • render form from JSON (instead of HTML). Currently the form in .user-form is rendered by a saved HTML string. We also save its corresponding JSON configuration. Use it instead to render the form.

Name attribute editing

  • Clicking a field brings up its attributes on the right side. "name" attribute behavior should be as follows:
    • make it a slug of its label (as user types the label) with an option for the user to change it
    • user should also be able to edit the name field directly. These edits should be prioritized over slugifying the label.

Custom HTML field

  • custom field for HTML. Users should be able to add arbitrary HTML in the custom field.

Fork a form

  • Users should be able to fork an existing form.
    • details: add a fork option wherever there's a Remove option. duplicate database entry and the thumbnail

Restructure without .form-group

  • Components/fields needn't be wrapped in a .form-group container for form fields to work.

Components

  • 1-10 rating scale - https://stackoverflow.com/a/21231958 with an option to configure the icon
  • password component to have view/hide toggle. Current password field has basic behavior.
  • select, https://codepen.io/lathaoro/pen/qBZMjVK
  • dropdowns, with support for md, lg, sm classes
  • checkboxes and radioboxes with an option to add multiple "Other" options. for reference, view a snapshot from Google form (this doesn't support multiple Other fields though)

image

Other features

  • keyboard navigation
  • accessibility

Bugs, improvements

  • make background color stick (push to config column) on path/to/forms/form/id page. Preview page (for form submission) should retain the background color.
  • it's unclear where to click to Submit the form on path/to/forms/form/id. make it prominent, next to Edit field?
  • viewing responses is broken (500 internal server error) if the limit is off (lot more than the records). This leaves a bad end user experience.
  • form.html and view.html should use the same source code template
  • Home page - Recent Forms section
    • round the menu or make it look good on focus or hover
    • positioning of the menu towards the right
    • It's hard to position the mouse and click the menu
  • Add form name, description while viewing the form for submission
  • remove the hard-coded directory names in create.html and script.js and make it auto-discoverable
  • add a comment in script.js on why .html() is required (in .edit-properties change event)
  • for select element, use the option value and set the select attribute.

Describe alternatives you've considered
NA

Additional context
NA
bkamapantula added a commit that referenced this issue Feb 4, 2021
@bkamapantula
FXD: merge form.html and view.html in one file
e581770 
- fixes bug 4 in #367
- compact yaml config
- introduces viewform.html, viewform.js instead of view.html, form.html, view-form.js, preview-form.js
@bkamapantula
Copy link
Contributor Author

bkamapantula commented Feb 4, 2021 •
edited
Loading

@bkamapantula bkamapantula mentioned this issue Feb 4, 2021
Merged
sanand0 pushed a commit that referenced this issue Feb 8, 2021
@bkamapantula
BUG: UI Factory - Forms - Usability improvements (#369)
8612e25 
* FXD: initialize forms on app import or on demand

- forms.db and necessary tables (analytics and forms) need to be created before forms app can be used.
- /configure will test for database and table (forms) and create tables (forms, analytics) if necessary.
- scheduler creates database and tables (forms, analytics) on startup.

Without this, forms app wouldn't work.

* FXD: use formhandler columns to initiate table creation

- remove create_form_tables utility that uses queries
- introduce formhandler columns-based table creation for `analytics` and `forms` tables
  - downstream impact: update data-source for `.formhandler()` in form.html
- disable mouse events while previewing the form at `/form/id`

* FXD: remove form table creation scheduler

* FXD: remove nosuchtableerror import as it's no longer used

* FXD: remove sqlite3, re dependencies

* FXD: merge form.html and view.html in one file

- fixes bug 4 in #367
- compact yaml config
- introduces viewform.html, viewform.js instead of view.html, form.html, view-form.js, preview-form.js

* WIP: background color attribute

* ENH: capture background color of form

* DOC: note on the use of .html() - forms

* FXD: account for missing background attribute while page loads

* FXD: build errors
@bkamapantula
Copy link
Contributor Author

bkamapantula commented Feb 9, 2021 •
edited
Loading

  • bug 7 addressed in sa-form-components branch
  • bug 9 addressed in bk-issue367-b7

@bkamapantula bkamapantula mentioned this issue Feb 9, 2021
Closed
@bkamapantula
Copy link
Contributor Author

bkamapantula commented Feb 11, 2021 •
edited
Loading

Features 1 (duplicate field) and 2 (JSON form rendering) is are available in sa-form-components branch.

@bkamapantula
Copy link
Contributor Author

Feature 5 (fork a form) is now available in sa-form-components branch.

@bkamapantula
Copy link
Contributor Author

Features 4 (custom HTML) and 6 (refactor without .form-group) are now available in sa-form-components branch

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@bkamapantula