[5.0][Feature][Proposal] Accordion instead of tabs

[tabacitu]

On super big Create/Update forms, using Tabs is very useful for non-mandatory fields. But for mandatory fields maybe it would make more sense to have an Accordion, so that it's obvious to the user that he has to fill in all fields before he clicks Save. Otherwise, when you're at the bottom of the page you can't actually see the tabs.

Could we add this inside the "tabs" feature? Like, you could pick the "tabs type": horizontal, vertical or accordion?

Or maybe... maybe... we further simplify this by making multiple form views? And in the controller you can change the create/update view from: form.blade.php to:

• form_with_tabs_vertical
• form_with_tabs_horizontal
• form_with_accordion
• form_with_boxes

Thoughts anyone?

[johnpuddephatt]

An accordion layout could be definitely be useful in some cases.

form_with_boxes... that could actually be very useful! Currently to 'group' fields without using tabs we have to resort to adding custom_html fields... this means writing html in the crud controller feels messy to me :/

Being able to easily group related fields into neat sections would actually mean I relied less on tabs/accordions I think... which is good because both harm discoverability for new users (even when carefully choosing tab names it's not always clear to the user which tab a particular field will live in).

If you were introducing different form views... would this open up the possibility of a form with multipled columns? e.g. a 'main' column and a 'sidebar' next to it? Could this just be as simple as adding an attribute to each field called 'column' or 'position' or something, and then outputting the right column in the right place? I've not thought this through much... it's not essential but if it was easily achieved I could see it being useful.

[tabacitu]

Hi @johnpuddephatt ,

I guess so. In your scenario you'd only need to create a form_with_sidebar layout, which splits/outputs form items the way you want it. So you'd decide if the outputting is done with a "column" or "position" attribute, inside form_with_sidebar.

Boxes have been proposed before, there's even an old PR for it here Laravel-Backpack/CRUD#487 . Personally I don't like having a form span across multiple boxes, it seems to me more difficult to understand, not less. Part of the reason I haven't merged it. But I do understand people might not agree with me on this one, and prefer to have boxes. Or accordions. Or tabs. The problems might be:

• when you want both boxes, and tabs, and accordions (difficult to create, use and maintain);
• technically anything is possible, but when creating a new form view, there are quite a few "features" that need to be implemented; creating from a simple template, rather than from scratch, would probably help make sure all "standard" features are implemented;

[johnpuddephatt]

Yes, boxes definitely don’t work well in all instances. The example below which I shared previously shows the sort of ‘boxed’ layout I think works well – logical groupings of related fields that are still easy to scan over.

Yes, combining them would be tricky. There would need to be a logical hierarchy/order so that fields are always divided first into tabs, second into accordions and third into boxes/cards. If I get the chance I might have a play around with this.

[tabacitu]

Totally agree - I like how you put these. Each box is a stand-alone form, and has its own submit button. It's super-clear how to use.

What I personally don't like is the old Wordpress Edit screen, and I was kind of trying to avoid forms being able to end up like that:

Where you have:

• a title without a wrapper
• a main section (because it's wider)
• then a small box with a PUBLISH button (arguably the smallest box on page, yet it has the most important action buttons - Publish and Trash)
• THEN some categories and other stuff (which are placed AFTER the publish button - you wouldn't usually have a form with 5 inputs, and the Submit button after the 3rd input, followed by 2 more inputs)

---

I think it would make more sense to be cards > tabs > accordions. That way you could have:

# Create entry
[ card ] [ card with tabs ] 
[ card with accordion ]
# Save

(in my mind, if you have no tabs, it's still in a card, right?)

If you do play around, consider starting from the v4 branch - it has Bootstrap 4 so also flexbox ;-)

[asdf072]

While doing this, it would be great if you could implement it using a generic "container." That way I can have a div.cool-container. Tabs/Accordians would be a packaged type of container. Ideally, have a Container object that can include child fields or other containers.