Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.The great possibility of having fields in core, and even more great possibility with fields on user profile may raise the problem, when the user account edit page simply has too much content. On the other hand, there are vertical tabs here and there and it could be possible to redesign user account edit form to compress all system forms, as in the included screenshot and patch. This patch has no API changes, it only moves user form fieldsets to vertical tabs. It keeps registration form untouched. To avoid scrolling, it splits username and password form into username/password and roles/status.
This issue raised when thinking about #967566: Several important Core User settings need to implement hook_field_extra_fields(), and in fact, I also included in the patch change so that username/password/roles/status can be reordered on Manage Fields tab. After all, the user account edit page looks in my opinion much more prettier
| Comment | File | Size | Author |
|---|---|---|---|
| #31 | vertical_tabs_on_user-993592-31.patch | 154.88 KB | Nitesh Sethia |
| #25 | 993592-user-vertical-tabs.025.patch | 6.92 KB | karschsp |
| #24 | 993592-user-vertical-tabs.024.patch | 6.98 KB | karschsp |
| #5 | 993592_5.patch | 7.18 KB | mariusz.slonina |
| #1 | user_vertical_tabs.png | 112.32 KB | mariusz.slonina |
Comments
Comment #1
mariusz.slonina CreditAttribution: mariusz.slonina commentedpatch and screenshots
Comment #2
mariusz.slonina CreditAttribution: mariusz.slonina commentedComment #3
Dave ReidThis was pretty much discussed to death previously. Our UX standards say it should be a logical grouping (like we currently use for all the e-mail fields), and that vertical tabs should not be the entire UI, which is what you're now doing.
Previous issues:
#434942: Vertical-tab-ify admin/user/settings
#645738: UX: Vertical-tabify the rest of the admin/config/people/accounts page
http://drupal.org/ui-standards
Comment #4
Dave ReidGrrr, completely missed you're talking about the user edit page, not user settings page.
1. Still need to follow the UI guidelines of not having all elements in the vertical tabs.
2. Vertical tabs need JavaScript summaries to be useful.
Comment #5
mariusz.slonina CreditAttribution: mariusz.slonina commentedI don't know much about js, so I followed node.js. This patch adds initial js status support, for roles/status and administrative overlay. It also moves username/password settings outside vertical tabs, since it is rather critical information and should be always available. I don't know if verticaltabs-js for all core modules which are interacting with user module should be included in user.js or rather in module.js.
Comment #6
Dave ReidIt's also waaaaaay to late to change UI since we are now post RC1. This has to get bumped to D8.
Comment #7
mariusz.slonina CreditAttribution: mariusz.slonina commentedok, in that case, is there a way to override this user edit page with contrib module? I tried using hook_form_FORM_ID_alter, which works with user_register form, but I couldn't get it working on user_account_form / user_profile_form...
Comment #8
mariusz.slonina CreditAttribution: mariusz.slonina commentedI got some problem with caching. I am able to do such change in contrib module, but anyway, redesign of user edit page should be considered
Comment #9
mariusz.slonina CreditAttribution: mariusz.slonina commentedWith patch from http://drupal.org/node/967566#comment-3818726 I can redesign the user account edit page with help of Fieldgroup module.
Comment #10
Tlommy CreditAttribution: Tlommy commentedIm just wondering if anyone ever solved this issue, Im on D7. The vertical tabs works fine when using it with content types, But when I attempt to use them on the user account edit page I run into problems. If I just have one field group set up as a vertical tab it works...but when I add multiple my fields groups and fields disappear. Does anyone know whats goin on with this?
Comment #11
Tlommy CreditAttribution: Tlommy commented#1: 993592_1.patch queued for re-testing.
Comment #12
mariusz.slonina CreditAttribution: mariusz.slonina commentedWell, I think it should be 8.x issue -- right now there are two possibilities: 1) move Fieldgroup into core, and make user account edit page customizable, or 2) fix user account edit page with vertical tabs. Both of them are huge UI change, and for sure will not be the case of D7. You can try Fieldgroup module, with my patch http://drupal.org/node/967566#comment-3818726. To do so, You have to create a vertical tabs group and then vertical tabs for your fields. If there are fieldsets inside (i.e. user name and password fields) you have put them into additional fieldset. So, it is possible to fully customize user account edit page. I agree, however, it should be solved -- with so many core improvements, shame we forgot about such thing like user account edit page. Even if User will get there once or twice, it should rock, too. What we really need right now, is #967566: Several important Core User settings need to implement hook_field_extra_fields() solved, because without it, the D7 looks unfinished.
Comment #13
sunReplacing with proper tag, so hopefully the usability team notices this issue.
Comment #14
droplet CreditAttribution: droplet commented1. Patches need works, some unnecessary space there.
2. "Username and password" not inside the group (-dev version)
3. some inputs broken under Bartik, and I think a lot of theme will have same issue because vertical tabs make the main content more narrow. (most of sides have a sidebar)
using horizontal tabs more better IMO.
#1168364: Add horizontal tabs supports to FAPI
Comment #15
Rob C CreditAttribution: Rob C commentedSubscribe! This is awesome.
Comment #16
RobLoachWould be great to prettify this a bit.
Comment #17
Bojhan CreditAttribution: Bojhan commentedComment #18
geerlingguy CreditAttribution: geerlingguy commentedSubscribe. Been working on the profile edit form a while on my site, and having it prettier by default would go a long way towards saving me time.
Comment #19
juampynr CreditAttribution: juampynr commentedHere is an implementation that separates user account fields from the rest of the fieldsets.
Here are screenshots to what does it look like:
* Account tab
* Personal tab
* as opposed to the current Edit page with all the fields in one place.
Looking forward for reviews/opinions in that issue.
Cheers
Comment #20
klonos...subscribing.
Comment #21
bryancasler CreditAttribution: bryancasler commentedsubscribing
Comment #22
karschsp CreditAttribution: karschsp commentedsubscribe
Comment #23
yoroy CreditAttribution: yoroy commentedYup, still worthwhile to pursue this. Looking at the screenshot in #1 I see only the real name field excluded outside of vertical tabs. I think we should first have a good look at what the primary fields for this page are and expose more of them outside (above) the vertical tabs. User picture and email for example. We don't want to hide too much, only the secondary things that are less likeley to be revisited often.
Comment #24
karschsp CreditAttribution: karschsp commentedHere's a re-roll of what's in #5.
Comment #25
karschsp CreditAttribution: karschsp commentedUgh. Fixing some whitespace issues.
Comment #26
Bojhan CreditAttribution: Bojhan commentedI am a bit worried about this one, its not really a good pattern - nor is it what we want for our normal users to see.
Comment #27
klonos@Bojhan: Can you please elaborate more on that? What would be a good pattern? What do we want normal users to see?
Comment #30
alansaviolobo CreditAttribution: alansaviolobo commentedComment #31
Nitesh Sethia CreditAttribution: Nitesh Sethia commentedRerolled patch.
Comment #33
lpalgarvio CreditAttribution: lpalgarvio commented