UI Factory - Forms - Feature, improvement requests

[bkamapantula]

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

• [x] 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

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

Fork a form

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

Restructure without .form-group

• [x] 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)

Other features

• [ ] keyboard navigation
• [ ] accessibility

Bugs, improvements

• [x] 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.
• [x] it's unclear where to click to Submit the form on path/to/forms/form/id. make it prominent, next to Edit field?
• [x] 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.
• [x] 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
• [x] 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
• [x] 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]

• bugs 2, 3 addressed in https://github.com/gramener/gramex/pull/365
• bugs 1, 4, 6, 8 addressed in bk-issue367-b4 branch

[bkamapantula]

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

[bkamapantula]

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

[bkamapantula]

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

[bkamapantula]

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