[FR] Change order of tabs when editing a User (move "Account" tab)

[lindseydiloreto]

Simple enough request (I believe)... 🤞

When editing a User, can we change the order of the tabs? More specifically, can we arrange them like so?

|-----------|-----------------|---------|-------------|
| All of my | Own custom tabs | Account | Permissions |

I just want the Account tab to be moved over beside the Permissions tab. That's literally all I'm asking for.

It always drives my OCD crazy that my own tabs are nestled within two of Craft's tabs...

Similarly, I always find it a little unnecessary to be viewing the "Account" details first. User login data doesn't change that frequently, and is often something that the users can change by themselves.

IMO, the "Account" information is actually the least likely to change on a regular basis. Imagine the content editors who are responsible for managing user accounts... it's likely that they'll be managing their own custom fields far more frequently than any user login data (as it is in my case).

Let me know if that makes sense! 🙂

[lindseydiloreto]

Oh, I completely forgot to mention... I loooooove the fact that Users can now accept custom fields! ❤️

I know it's not a brand-new feature (Craft 3.0-ish?), but it was still a game-changer. I remember back in the day when Users couldn't even have fields beyond Account and Permissions. We had to do some ugly workaround back then to link Users to custom data. Just having custom fields at all has been a breath of fresh air.

[michaelrog]

fwiw - You can currently accomplish this using the cp.users.edit hook.

Craft generates its tabs from the tabs array, which is exposed from the Twig $context.

Maybe something like this...

function cpUsersEditHook(array &$context)
{

    $oldTabs = $context['tabs'];

    $context['tabs'] = [
        'Account' => $oldTabs[0],
        'Page' => $oldTabs[2],
        ...
        'Permissions' => $oldTabs[1]
    ];

}

Still, hijacking the Twig context like this is a bit hacky and maybe glitch-prone if you're not really careful.

It'd definitely be nifty if Craft's layout editor allowed re-ordering the default tabs alongside the custom ones...

[lindseydiloreto]

Good to know, thanks @michaelrog! I'll give that workaround a shot. 👍

I'm certainly not opposed to fully-rearrangable tabs, but at the very least, the Craft-managed tabs should be grouped together. Seems the problem is even more pronounced when a user is looking at their own profile page, because that creates an additional "Preferences" tab...

[lindseydiloreto]

Here's my quick & dirty workaround, based on @michaelrog's recommendation...

Craft::$app->view->hook('cp.users.edit', function(array &$context) {

    // Chop off the first item
    $tab = array_shift($context['tabs']);

    // Add it back at the end
    $context['tabs']['account'] = $tab;

});

Disclaimer, I did it the lazy way... instead of carefully moving "Account" to appear before "Permissions" (which would probably be the ideal way), I just chopped "Account" off the beginning and tagged it back onto the end of the array.

[lindseydiloreto]

Annoyingly, it still pre-selects the "Account" tab... what's the workaround for that?

[brandonkelly]

I’m not going to change the tab order out of the blue, but we can consider making it configurable for the next major release. We’d most likely end up just making all user fields/tabs configurable via the field layout designer (similar to how you can customize the placement of Title fields in 3.5).

Annoyingly, it still pre-selects the "Account" tab... what's the workaround for that?

Are you sure that’s not just because you are reloading the page with #account in the URL?

[michaelrog]

Annoyingly, it still pre-selects the "Account" tab... what's the workaround for that?

That's probably because #account doesn't start with class="hidden" like the other tab divs do. So, maybe in your users.edit hook, you can registerJs() a little snippet to fix it, like...

location.href = location.href + "#my-target-tab"; 

or

$('#account').addClass('hidden');
$('#my-target-tab').removeClass('hidden');

you can registerJs() a little snippet

...and now we've come full-circle, @lindseydiloreto 😆

[lindseydiloreto]

I’m not going to change the tab order out of the blue, but we can consider making it configurable for the next major release. We’d most likely end up just making all user fields/tabs configurable via the field layout designer (similar to how you can customize the placement of Title fields in 3.5).

Understood, thanks @brandonkelly.

Are you sure that’s not just because you are reloading the page with #account in the URL?

Nope, I'm just going to admin/myaccount, or navigating to a user's profile via the Users index page. It preselects the "Account" tab, even though that tab is now at the end.

This is slightly helpful...

$context['selectedTab'] = 'profile-tab-page';

When I add that to my hook, it selects the right tab but it's still showing the wrong fields...

---

Using JS to hack it as @michaelrog has suggested feels a bit icky.

If the long-term fix is still a ways out, can we at least consider this to be a bug in the behavior of selectedTab for this page?