Form tabs improvements (Classic UI)

[ale-rt]

Responsible Persons

Proposer:

• Alessandro Pisa (@ale-rt)

Seconder:

• ...

Abstract

The tabbed forms on classic UI, have some usability issues. This PLIP aims to improve the user experience by fixing then and proposes some improvements to enhance the user experience.

Motivation

I see some issues on the current form tabbed forms in Classic UI.

1. The tab markup is not compatible with bootstrap

Compare:

• https://getbootstrap.com/docs/5.3/components/navs-tabs

with:

• https://github.com/plone/plone.app.z3cform/blob/1206ec188d3f0b45464b29cedc07635a223493f9/plone/app/z3cform/templates/macros.pt#L153

2. Tabs with required fields are not highlighted

There is no way other than switching to a tab to know if it has a required field. This can be annoying: a user can post the form and get an unexpected validation error. See also next point. It would be more convenient to see a marker in the tab to spot immediately that it contains a required field.

3. Validation errors on secondary fields

If I have a validation happens on a secondary tab (not only if it is related to a required field), the user has to open the tab to see it. It would be more convenient to see a marker in the tab to spot immediately where the error happens.

4. Warnings

There is no way to have non-blocking warnings in the form. It would be nice to have a way to show a warning in the tab, to let the user know that there is something to check/improve.

This would cover several use cases, like:

• a warning about a field that is not mandatory but it is recommended to fill
• a warning about a field with a default value that should be changed
• a warning about a field that is filled with a value that is not recommended

E.g.:

1. you are writing a blog post and the title is too long and tags are not set. You do not want to prevent the editor from saving the form, but you would like to suggest that, before publishing the post, some adjustment should be made.

2. some customer have really complex forms bound to processes. Some field values might not be available in the initial phases of the process. You cannot set them as required, but you really want them to be filled before the process is completed.

3. Add your own use case here.

Assumptions

• The form is rendered using the plone.app.z3cform macros.
• The form is rendered in the classic UI.
• The "warnings feature" can be implemented at a later stage (see the "Risks" section).

Proposal & Implementation

If form tabbing is used, we will have:

• one tab for the fields not assigned to any fieldset
• one tab for each fieldset

The tabbed form should be rendered using the bootstrap tabs markup.

An example is shown here:

• https://codepen.io/dipsichawan/pen/xxVrmmb

We should have a warnings attribute to widgets and groups (currently we just have the errors attribute).

This attribute will contain a list of WarningWhatever objects that have a render method that spits out the markup for the warning message.

Something similar already happens with the error instances in errors attribute.

If a form contains warnings, the form element will be marked by a class has-warnings-or-whatever. A message/visual marker will be shown at the top of the form about the fact that we have warnings.

If a tab contains warnings, the tab element will be marked by a class has-warnings-or-whatever. A message/visual marker will be shown at the top of the tab about the fact that we have warnings.

If a field contains warnings, the widget wrapper will be marked by a class has-warnings-or-whatever. A warning message will be shown in the widget about the fact that we have warnings.

Deliverables

• A PR in plone/plone.app.z3cform to render the form using the bootstrap tabs markup.
• A PR in plone/plone.staticresources to provide the required CSS and JavaScript pattern.
• A PR in zopefoundation/z3c.form to implement the concept of warnings.
• A PR in plone/documentation to document the feature.

Risks

• Adding the warning feature to z3c.form may not be accepted. In that case some other solution should be found.

Notes

The warning feature is not strictly related to the tabbed forms.
It is a general feature that can be used in any form.
It is proposed here because it is a feature that can be useful in the context of tabbed forms and touches the same page templates.

If needed, it can go in its own PLIP.

The @plone/volto-team might be interested in this feature

Participants

• ...

[petschki]

Please use the latest Bootstrap docs link: https://getbootstrap.com/docs/5.3/components/navs-tabs/

[davisagli]

Have you considered using an accordion UI instead of tabs? It avoids some problems (i.e. you don't have to fit lots of tabs horizontally on a narrow device, and you can avoid hiding errors by expanding those sections). But there is the cost of making it less obvious that there are multiple sections until you scroll.

Here is an example from a site I worked on some time ago:

[thet]

@davisagli @ale-rt 👍 for using an accordion. But instead of an Bootstrap accordion I'd suggest to use the <details> and <summary> elements, my new favorite tags.
That's exactly a replacement for accordions, and if you assign multiple details-elements the same name attribute other details elements close if you open one.

I have already used it for a replacement of accordions, for menus which should open/close (you can nest details within details elements) including a burger menu and also tabs which are shown side-by-side for bigger screens and stacked on small screens.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

[thet]

@ale-rt Here is an example which includes responsiveness by using Tailwind utility classes:

https://codepen.io/thetetet/pen/azbmwWE

Try resizing the browser

[petschki]

I strongly vote against accordion forms on desktop browsers because you will always have to scroll down to get to other sections... this could be a mobile feature though.

@thet tailwind ... nooo 😉 there is movement in bootstrap v6 ... see twbs/bootstrap#41236 ... I propose to use css grid layout in the new Plone 7 theme... but thats out of scope here 🙈

[thet]

@petschki My example on codepen is a typical horizontal tabs navigation but collapses into a vertical/stacked on on smaller screens. I think this is a nice example without using any JavaScript.
You can even [tab]-navigate with the keyboard to the individual tab-headers, press enter and open it, which is good for accessibility.
The Tailwind utility classes are there only for convenience. This can easily be reworked to custom styles or Bootstrap.

I'd suggest to consider this pattern or at least discuss it. However, I'm a but unsure, if I'm misusing the details element here.