10 minutes reading time (1966 words)

Joomla 4 for Clients, Part 2: Creating a Streamlined Admin Experience

February-J4Clients

Joomla 4 is here, and with it comes a completely revamped administration panel. We now have the ability to totally control our clients' editing experience, above and beyond what we could do with Joomla 3. In this post, we're going to cover setting up client editor profiles, creating a custom admin menu, and creating custom dashboard pages from scratch.

 

This post assumes you have already set up the appropriate user group and view access levels for your use case. If you're not sure or haven't done so yet, head on over to Part 1 of this series. You'll learn how to add a custom user group and view access level for your clients so you can precisely control what they see.

Jump to:


Creating a simplified editor profile

TInyMCE, the default Joomla editor, has gotten even better in Joomla 4. The default tool set for it, which is assigned to Super Users by default, has a ton of icons, and can be overwhelming for our clients. (To be honest, sometimes it overwhelms me, too!)

A lot of people don't realize that TinyMCE supports different tool sets for different user groups, which will make the editing experience a much calmer one for our clients!

From the home dashboard, click on the "Plugins" quick icon.

You can also go to System > Manage > Plugins, but the quick icon is faster.

In the search bar, type "TinyMCE" (or just "tiny") and select "Editor - TinyMCE".

Find the heading "TinyMCE Sets".

You'll see something like this:

You can add or remove icons to any set here. I like to remove the ones I don't use from Set 0, but for now, let's take a look at Set 1.

That's more like it! I might still remove some options, but for the most part, this looks more useful for my clients, so let's add them to Set 1.

Type or select "Client" (or your user group name) in the box next to "Assign this Set to".

Make any changes to the tools or ordering of icons that you want, and then save and close the plugin.

 


Custom administrator menus and menu items

The default admin menu is fine if your site is pretty much just a blog, but once you start having different categories for different kinds of content, walking a client through how to edit the correct articles can be a pain. 

This is where creating a custom admin menu can come in handy! You can create links to the particular components and views that your clients need most, and hide the rest.

Step 1: Click on "Menus" in the left-hand menu, and select "Manage".

Step 2: Select the dropdown that says "Site", and select "Administrator".

Step 3: Select "New", and fill out the details.

If you select a preset, it will auto-create the menu items for you based on that preset. I like to start from scratch, so I leave it as "none". Once you're ready, Save & Close.

Step 4: Add the menu items you want to include in your client menu.

You'll notice that when you click on "Menus" in the menu, there is a new section titled "Administrator", with the menu you just created underneath. Click the plus sign next to it to add a new menu item. 

Create a new menu item just like you would for a front-end menu. For example purposes, we're going to create a menu item that goes to the Home Dashboard.

Under Menu Item Type, select Home Dashboard. Fill out a title for your item - in this case, I'm using Control Panel.

If you want, go to the second tab ("Link Type") and you'll see a field called "Link Icon Class". You can add a Font Awesome icon here—Joomla 4 has loaded the free Font Awesome 5 icons in the backend. Check out all the icons here

In this case, I want to have a home icon, since it's the home dashboard. So I will use fas fa-home as the icon class. (Note you need to include the fill icon class so that Joomla knows to look for a Font Awesome icon.

Once you're done, hit Save & Close.

Add as many menu items as you need, and then move onto the next step.

Step 5: Create a new menu module.

Once you're ready, click on "Content" in the menu, and then click on "Adminstrator Modules".

Before we add a new menu module, we have to hide the default one from our clients.

Click on "Filter Options" and then click on the "Select Position" dropdown and select "menu".

You'll notice that the access is currently "Special". We know from our part 1 article that that means both super users AND clients will see it, but we're making a special client menu, so we'll need to change that.

Click on "Admin Menu" to edit it.

Find the "Access" dropdown (you may need to scroll down), and then select "Super Users". Then, Save & Close.

Now we're ready to create a new menu module. Click "New" in the toolbar.

In the "Select a Module Type" screen, pick "Administrator Menu".

Name the menu module.

In the "Menu to show" dropdown, select the menu we just created. Make sure you change "Check Menu" to No, otherwise your clients will get a notice to revert to the default menu.

Scroll down a bit to see the access dropdown, and select the "Client" view access level we created in part one. 

Since we had already filtered the administrator modules to the menu position, it's already pre-filled, but double check that anyway.

Your screen should look something like this:

When you're ready, click Save & Close.

That's it! Now's a great time to login in a private window with your test client user.

My test client sees this now:

Woohoo! You can add links, headings (with nested menu items), and more to make this a perfect, streamlined menu for your clients.

 


Creating (and using!) new dashboard pages

Dashboard pages are totally new in Joomla 4, and they make use of a new component called com_cpanel. They're what you see when you click on the little "window" icons in the default admin menu:

There are 7 core dashboard pages (that I'm aware of):

  1. Home Dashboard
  2. Content
  3. Menus
  4. Components
  5. Users
  6. System
  7. Help

Third-party extensions can also choose to integrate with com_cpanel and display their own dashboards.

What isn't necessarily obvious is that if you create your own admin menu, you can also add your own dashboard pages, outside of the default 7 that Joomla has...and it doesn't require any coding at all.

This is super useful, because Joomla's dashboards are organized by the function or component; this makes sense to us as site builders, because we understand Joomla. However, our clients have a different mental model of their site, and it's probably dependent on how content is categorized on the site (rather than the type of content).

For many of my clients, even though news articles and site pages are both "articles", they think about them differently, so it's unintuitive to access those articles in the same way.

To fix this hypothetical scenario, let's build a dashboard for the News section of our test site.

Click Menus, and open the Client Menu we just created.

Select "New" to create a new menu item. 

Fill out the menu title. (I used "News".)

Select the menu item type: Scroll down to System Links, and select Menu Heading.

This will create a dropdown for the section, and is the menu item that the "window" icon will show next to.

Go to the second tab. If you want, fill out an icon class.

Scroll all the way down in the second tab, and find the field for Dashboard.

Aha! This is where the magic starts to happen. The help text here reads: If an identifier is provided, a dashboard is created for this menu item.

Select an identifier carefully—you don't want it to be the same as a component. It also must not have any spaces or special characters besides underscores or dashes. To be on the safe side, I prepend the identifier with "client-". So, in this case, let's use "client-news".

Save and close the menu item.

Add at least one nested menu item.

This is necessary, otherwise the menu heading won't show up. For my example, I'm going to "list all articles" in the "News" category. Make sure you select the menu heading we just created as the "Parent Item", like so:

Save & close the menu item.

Now, if we log in with our test client, we'll see the following:

Yay!!! We did it!

If you click the dashboard icon, you'll see the following:

So, now we're free to add modules and make our custom dashboards, right?

Well...not quite. If you look closely at the top header, it's still showing the home icon and "Home Dashboard". 

Not really a big deal, but if we're doing this, let's do it right.

Back in your super user account, click on System, and then "Language Overrides".

In the "Select Language & Client" dropdown, select "[DESIRED LANGUAGE] - Administrator".

In my case, I'm creating a dashboard in English, so I'll select "English (United Kingdom) - Administrator". Remember you'll need to do this for every language in which you want to provide custom dashboards.

Click on "New" to create a new language override.

The icon and title are provided separately.

To define an icon, your language constant is:

COM_[IDENTIFIER]_DASHBOARD_ICON 

Replace [IDENTIFIER] with the identifier we created above. In this case, I'm using the language constant COM_CLIENT-NEWS_DASHBOARD_ICON.

In "Text", put the Font Awesome classes of the icon you want to use. I want to use the same newspaper icon, so I'm using far fa-newspaper. Save and close.

To define the title, your language constant is:

COM_CPANEL_DASHBOARD_[IDENTIFIER]_TITLE

Like above, replace [IDENTIFIER] with the identifier we created. So, my language constant is COM_CPANEL_DASHBOARD_CLIENT-NEWS_TITLE.

In "Text", put the title you want to use. I'm using "Manage News Articles" for mine. Save and close.

Once you've added both of those, you should see something like this:

Let's head over to our test client account to see what shows up now...

Yay! We did it!

Now let's add some modules to our new dashboard.

You do not want to do this from the test client account, because want to create modules that our clients can't edit accidentally. So let's switch back to our Super User account.

Click "Content" in the menu, and then select the plus icon next to "Administrator Modules" to add a new module.

Select a module type. For this example, I'm creating a custom HTML module.

Configure the module the way you want. Make sure it's position cpanel-[identifier].

You'll have to type the position manually, and then hit 'enter' to add it. For this example, the position is cpanel-client-news.

Save the module. Do not save and close.

After saving, go to the "Permissions" tab, and click on "Client".

You'll want to double check that they can't edit or unpublish the module. (If they have permission to edit front end modules, they will also have permission to edit back end modules.)

Save and close.

Let's head back to our test client login, and see what shows up now...

Beautiful!!

You can repeat the steps above as necessary to add any other modules to this dashboard, add more dashboards, and customize the admin experience the way your clients need.

How do you plan on taking advantage of custom admin menus and dashboards? Let me know in the comments below!


German translation of this article: https://www.jug-zueri.ch/artikel/joomla-administration-fuer-kunden-teil-2

1
The February Issue
What will Joomla 4.2 bring in August 2022?
 

Comments 10

Already Registered? Login Here
Anna Robinson on Tuesday, 22 February 2022 16:42
I'm loving this!

This is so great Crystal! 🙌🏽 I just have one question.

Since in Part 1 we added the "Client" user group to the "Special" view access level, we now only give view access for the "default Admin Menu" module to Super Users (Step 5). This is in order to hide it from Clients.

Now, what if my client is a large organisation and some of their users should be for example Managers (but not Super Users). Then the Managers won't be able to view the "default Admin Menu".

How would you solve that?

1
This is so great Crystal! 🙌🏽 I just have one question. Since in Part 1 we added the "Client" user group to the "Special" view access level, we now only give view access for the "default Admin Menu" module to Super Users (Step 5). This is in order to hide it from Clients. Now, what if my client is a large organisation and some of their users should be for example Managers (but not Super Users). Then the Managers won't be able to view the "default Admin Menu". How would you solve that?
Crystal Dionysopoulos on Wednesday, 23 February 2022 05:37
Multiple view access levels

Great question!! In these cases I create a “parent” client user group that has either no permissions or very basic (log into admin).

Then, I create different user groups based on my clients needs. For example:

  • Client
  • [list]
  • Blog Author
  • Content Reviewer
  • Full Administrator

[/list]

I also create associated view access levels - one low level “client” default, and then one for each user group.

Depending on the needs, you could even make different dashboards and admin menus for each user group…. lots of possibilities!

Does that help?

1
Great question!! In these cases I create a “parent” client user group that has either no permissions or very basic (log into admin). Then, I create different user groups based on my clients needs. For example: [list] [*] Client [list] [*] Blog Author [*] Content Reviewer [*] Full Administrator [/list] [/list] I also create associated view access levels - one low level “client” default, and then one for each user group. Depending on the needs, you could even make different dashboards and admin menus for each user group…. ;) lots of possibilities! Does that help?
Crystal Dionysopoulos on Wednesday, 23 February 2022 05:37
Multiple view access levels

Whoops, sub list formatted badly, but you get the idea.

1
Whoops, sub list formatted badly, but you get the idea.
Anna Robinson on Wednesday, 23 February 2022 10:31
Thank you! What do you think about this alternative solution?

Thank you 🙏🏽 Yes, I think I kind of got the idea. For now I've tried an alternative solution to simplify for myself but not sure if I might be missing something (that might make it a bad one).

Users: Viewing Access Levels
➡️ I've created a new Viewing Access Level: "Special EXCEPT Clients"
User Groups With Viewing Access: Author, Manager, Super Users.
➡️ I've also kept the Viewing Access Level: "Special"
User Groups With Viewing Access: Author, Client, Manager, Super Users.

Modules (Administrator)
Admin Menu module (the default one)
Set Access to "Special EXCEPT Clients"

Now a Manager can see their "default Admin Menu" but a Client can only see their "Control panel".

Can you see any downside to this solution Crystal?

1
Thank you 🙏🏽 Yes, I think I kind of got the idea. For now I've tried an alternative solution to simplify for myself but not sure if I might be missing something (that might make it a bad one). [b]Users: Viewing Access Levels[/b] ➡️ I've created a new Viewing Access Level: "Special EXCEPT Clients" User Groups With Viewing Access: Author, Manager, Super Users. ➡️ I've also kept the Viewing Access Level: "Special" User Groups With Viewing Access: Author, Client, Manager, Super Users. [b]Modules (Administrator)[/b] Admin Menu module (the default one) Set Access to "Special EXCEPT Clients" Now a Manager can see their "default Admin Menu" but a Client can only see their "Control panel". Can you see any downside to this solution Crystal?
Crystal Dionysopoulos on Thursday, 24 February 2022 12:20
Every site is different :)

I don't see any down side! The important thing is that it works for you and your clients. You can always adjust later if you find some reason that it's not working. I like to keep things totally granular because each client has different needs for view access levels, etc, and I would forget between several sites who can see what. But again, it's about what works best for you!

1
I don't see any down side! The important thing is that it works for you and your clients. You can always adjust later if you find some reason that it's not working. :) I like to keep things totally granular because each client has different needs for view access levels, etc, and I would forget between several sites who can see what. But again, it's about what works best for you!
Anna Robinson on Thursday, 24 February 2022 14:39
If I make it too complex I might wake up tomorrow and not understand what I've done 🤣

Yup, I suppose totally granular is the best approach for detailed control. But I'm glad I can use my less granular solution for now at least. I'm afraid if I make it too complex I'll wake up tomorrow and not understand what I've done 🤣 This is an old age thing I guess 😁

Anyway, your 2 part series has taught me a lot and also made me start to understand the Joomla ACL better than before. Thank you so much for sharing this Crystal 👍🏽😊🙏🏽

0
Yup, I suppose totally granular is the best approach for detailed control. But I'm glad I can use my less granular solution for now at least. I'm afraid if I make it too complex I'll wake up tomorrow and not understand what I've done 🤣 This is an old age thing I guess 😁 Anyway, your 2 part series has taught me a lot and also made me start to understand the Joomla ACL better than before. Thank you so much for sharing this Crystal 👍🏽😊🙏🏽
Dave Bishop on Monday, 25 April 2022 16:21
Remove Add module to the dashboard

Hello, this is really good info. However, I also want to remove the option to add a module to the dashboard. It just shows a permissions error anyway.

I've searched for this in the plugins and modules but cannot see it to turn this to Super Users only.

Thank you

0
Hello, this is really good info. However, I also want to remove the option to add a module to the dashboard. It just shows a permissions error anyway. I've searched for this in the plugins and modules but cannot see it to turn this to Super Users only. Thank you
Crystal Dionysopoulos on Tuesday, 26 April 2022 14:39
Two ways to limit adding modules...

Hi Dave,

Thanks for the comment!

There are two ways to accomplish that, depending on your needs.

Do your clients ever need to add modules in the front end?

If not, you can edit the permissions for modules to deny module creation for the relevant user groups.

However, if your clients DO need to add modules to the front end, this will not work because Joomla does not distinguish permissions between front end and back end modules.

In this case, the solution is a little more complicated - you need to do a template override for the back end Atum template.


  1. In the back end of Joomla, go to System > Templates > Administrator Templates.
  2. Click on "Atum Details and Files".
  3. Navigate to the tab "Create Overrides".
  4. In the "components" list, click on the "com_cpanel" folder, then on "cpanel". You should get a message that says "Override created in /administrator/templates/atum/html/com_cpanel/cpanel".
  5. In the "Editor" tab, click through the folders html > com_cpanel > cpanel > default.php
  6. Scroll down in the editor until you see the line "authorise('core.create', 'com_modules')) : ?>"
  7. Replace that line with: authorise('core.manage', 'com_modules') && in_array(8,$user->groups)) : ?>
  8. Save & Close.


That line originally checks if the logged in user has the permission to manage modules. The updated line checks that AND also if the user is a Super User, and only will show the "add module" box to Super Users. (You may want to check the ID of the Super User group on your site; on mine it is 8. I'm not sure if it changes between sites.)

Let me know how it goes!

1
Hi Dave, Thanks for the comment! There are two ways to accomplish that, depending on your needs. Do your clients ever need to add modules in the front end? If not, you can edit the permissions for modules to deny module creation for the relevant user groups. However, if your clients DO need to add modules to the front end, this will not work because Joomla does not distinguish permissions between front end and back end modules. In this case, the solution is a little more complicated - you need to do a template override for the back end Atum template. [list=1.] [*] In the back end of Joomla, go to System > Templates > Administrator Templates. [*] Click on "Atum Details and Files". [*] Navigate to the tab "Create Overrides". [*] In the "components" list, click on the "com_cpanel" folder, then on "cpanel". You should get a message that says "Override created in /administrator/templates/atum/html/com_cpanel/cpanel". [*] In the "Editor" tab, click through the folders html > com_cpanel > cpanel > default.php [*] Scroll down in the editor until you see the line "authorise('core.create', 'com_modules')) : ?>" [*] Replace that line with: authorise('core.manage', 'com_modules') && in_array(8,$user->groups)) : ?> [*] Save & Close. [/list] That line originally checks if the logged in user has the permission to manage modules. The updated line checks that AND also if the user is a Super User, and only will show the "add module" box to Super Users. (You may want to check the ID of the Super User group on your site; on mine it is 8. I'm not sure if it changes between sites.) Let me know how it goes!
Dave Bishop on Tuesday, 26 April 2022 15:14
Great Solution

Hello, that was the ticket. This instance was a user that needed very little access and they did not need any module access. So changing the permissions for that group worked like a charm.

Thank you!

Cheers

1
Hello, that was the ticket. This instance was a user that needed very little access and they did not need any module access. So changing the permissions for that group worked like a charm. Thank you! Cheers
Crystal Dionysopoulos on Wednesday, 27 April 2022 07:55
You're welcome!

Glad to help!

0
Glad to help!

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/