Brian - Forms Audit
Location | Effort to convert into PL | Existing PL component | Form Layout | Alignment | Label location | Tooltips | Placeholder text | Validation | Location of validation | Advance input fields | Semantic HTML | Links | Action buttons | Submit | Screenshots |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Discussion board home, search box: https://courses.stage.edx.org/courses/course-v1:edx+bj101+2016/discussion/forum/ | Already using it. | Yes, search component | Inline, single text field | Left align | Inside, hidden | None | Yes | None | N/A | No | Yes | No | Yes | Updates a results list outside the component. Doesn't update focus or provide feedback search has completed. | Base state: https://i.bjacobel.com/20161205-14ss7.png Focused & filled: https://i.bjacobel.com/20161205-hrr08.png After submitted: https://i.bjacobel.com/20161205-79h02.png |
Discussions add/edit post form: https://courses.stage.edx.org/courses/course-v1:edx+bj101+2016/discussion/forum/course/threads/57e18a0081e610058d00000c Used with Inline Discussions as well. | Already using it | Uses UXPL dropdowns and buttons, but not UXPL inputs | Stacked | Left | Labels on left, with longer helptext on right | None | No | Yes - cannot submit with an empty title or body | Top of form | Weird custom radio button toggle thing that displays as buttons (see screenshot) WMD markdown editor input. Provided by 3rd-party vendor. Supports rendering of LaTeX expressions via MathJax with live preview. | Yes, except for help text - I don't think it's "linked" to the input strongly enough. Only some field sets are wrapped in fieldsets | No | Yes - Add/Edit post and Cancel (uses UXPL buttons) | Sends AJAX, form disappears and is replaced with post view | Edit base state: https://i.bjacobel.com/20161205-5tgsw.png Add base state: https://i.bjacobel.com/20161205-8u5ud.png Radio button toggler thingy: https://i.bjacobel.com/20161205-kcxth.png Validation message: https://i.bjacobel.com/20161205-fwvmo.png Checkboxes on bottom: https://i.bjacobel.com/20161205-oi72n.png |
Discussions "Add a response" / "Add comment". Used with Inline Discussions as well. |
|
|
|
|
|
|
|
|
| WMD editor (see above) |
|
|
|
| Response: https://i.bjacobel.com/20161205-xgo9b.png Comment: https://i.bjacobel.com/20161205-zne38.png
|
Discussions thread listing filter on discussions home | Page uses it, but it's not a UXPL input | No | Inline single field | Left | Hidden (sr-only) label, placeholder and icon (right) | No | Yes | None | N/A | No | pretty close | No | No | Updates the listbox below on keydown | |
Create new program page: https://studio.stage.edx.org/program/new | Already using it | Yes! Fields and buttons are already UXPL components | Stacked | Left | Above | No | No | Yes, using UXPL form validations - although when there is a JS error submitting, nothing is displayed | below field | No | Yes | No | Yes, Create and cancel | Create takes you to the edit/detail page for the new program, cancel closes the form and returns you to Studio home | Base state: https://i.bjacobel.com/20161205-f1dju.png Validations displayed: https://i.bjacobel.com/20161205-nyn12.png |
Edit program page: https://studio.stage.edx.org/program/111 | UXPL page, but not using UXPL inputs | Some inputs are, some aren't | Stacked | Left | Some are on top, some don't have them | Only the non-UXPL inputs have them | No | Top three inputs don't have them. | Below the field, where it exists | No | No, for the three really weird inputs on top | No | Yes, for the save on the add course part of the form | Clicking the pencil icon brings a field out of nowhere. Clicking away from the field (apparently) saves your input - with no validation - and removes the input, making your input look like a <span>. It's really messed up. | Base state: https://i.bjacobel.com/20161205-tp0m2.png Fields active: https://i.bjacobel.com/20161205-tflq6.png Tooltips: https://i.bjacobel.com/20161205-az1oh.png Add a course to the program: https://i.bjacobel.com/20161205-3w8zz.png Add course validations: https://i.bjacobel.com/20161205-57nht.png |
Create Library form: can't be linked by URL, but click "Add Library" on Studio home | ??? | Nope | Stacked | Left | Above, with longer help text below | No | Yes | Yes | Below help text | No | "tip"/help fields and validation errors are not semantic | No | Create and cancel (create is disabled while validation errors exist, which is a nice touch) | Cancel hides the form (no page transition), create takes you to a detail page for the new library | Base state: https://i.bjacobel.com/20161205-7h8vi.png (validation triggered as I took screenshot) |
