Kentico CMS 5.0 - UI Personalization

What is UI personalization and why should I use it?

Even we do our best to make the user interface of Kentico CMS really intuitive and easy to use, sometimes it would be better to completely hide specific functionality from less experienced users or just from users who shouldn't use it. With new UI personalization module in version 5.0, you can easily achieve this by creating some UI profiles that will specify which parts of the user interface the users can see. It means users who need to use only limited number of features, can be offered only with such functionality that is relevant for their job. This will make the product easier to learn and use. First, let's have a look at the UI personalization possibilities in version 4.1.
 

UI personalization in version 4.1

In fact, there was no UI personalization module in version 4.1, however you could use some UI-related module permissions to hide specific user interface from specific roles. That is what I will call UI personalization in version 4.1. Later in this post you will see that it is uncomparable to version 5.0 which delivers full support for advanced UI personalization.  
 

Personalizable parts of the CMS Desk

1) Menu items in Tools and Administration sections
All menu items in CMS Desk -> Tools (tools modules) and all menu items in CMS Desk -> Administration (administration modules) were registered as standard modules in Site manager -> Development -> Modules section. All these modules had "Display" permission. Users, who were granted with specified "Display" permission, were displayed with corresponding module in Tools/Administration menu.




2) Document properties
All vertical tabs in CMS Desk -> Content -> Properties tab could be hidden from user based on CMS User interface module permissions. If the "Personalize user interface by permissions'' setting were turned on, only users who were granted with these permissions were displayed with corresponding tabs, otherwise  CMS User interface module permissions take no effect so all users could see all document properties tabs.




3) CMS Desk tabs
Content, Tools and Administration tabs of the CMS Desk could be hidden based on the following module permissions:
Tools tab - open permission of the CMS.Tools module
Administration tab - read permission of the CMS.Administration module
Content tab - exploretree permission of the CMS.Content module

Only users granted with these permissions were able to see corresponding tabs:



 

Custom UI elements

1) Custom menu items in My desk, Tools and Administration
You could register your custom module in Site manager -> Development -> Modules section, set the URL of its base administration page and decide which sections your custom module will be displayed in:




2) Custom tabs around the whole administration interface
Using page events, you were able to add custom tab to any part of the user interface. However, this option was not accessible directly from the administration user interface and you should write some code to achieve this, see online documentation for more details (this option is available also in version 5.0).
 

UI personalization in version 5.0

Kentico CMS 5.0 brings true UI personalization with improved functionality:

1) Unified administration of personalizable UI elements and UI profiles
Now, each module has its User interface tab where you can define its UI elements which should be personalizable. UI element can be implemented as any part of the module user interface (menu item, tab, user control, group of controls, ...):



Administrators can manage UI profiles from new section in Administration -> UI personalization:

   
 

How it works

1) Each role within one site can be displayed with different UI elements depending on role-UI elements settings for that site.

2) If there are two roles (within one site) with different visibility settings for the same UI element (members of the first roles are allowed to see it, members of the second role are not allowed to see it) and the current user is member of both roles, he is allowed to see it. In general, user is granted with permission to see UI element if he is member at least of one role the UI element is allowed for. Finally, UI profile for that user is a set of role-UI element relationships which define the visibility of the UI elements.

3) UI profile is depended on the role. Role is site-related and user can be member of any number of roles across all sites. It means one user can be displayed with different UI elements on different sites depending on his UI profile for each site.


2) Extensible model of personalizable UI elements
We have created an easily extensible model of personalizable UI elements. That model is be able to cover both our new user interface in future versions and your custom user interface such as custom tabs and custom menu items. It means you can easily create your custom module with personalizable UI (I will focus on this topic in some of my future blog posts).
 

3) Main parts of the CMS Desk are now personalizable
Kentico CMS 5.0 comes with predefined UI elements for main parts of the CMS Desk user interface, following UI can be hidden based on user's UI profile:
 
a) CMS Desk main tabs
There is a new module CMS.Desk with UI elements which represent main tabs of the CMS Desk user interface. See Tom's video to learn how you can easily add your custom tab to the current CMS Desk tabs.




b) User interface on Content tab
Content tab is the part of the CMS Desk which is the most personalizable. There are a lot of different UI elements which can be hidden from user, all these UI elements are registered within the CMS.Content module. Bellow you can see some of the personalizable UI elements within the Content tab:

 


c) Menu items on My desk, Tools and Administration tabs
Each of these sections has its left side menu. Items of these menus are represented by UI elements of the corresponding modules:
My desk menu items - UI elements of the CMS.MyDesk module
Tools menu items - UI elements of the CMS.Tools module
Administration menu items - UI elements of the CMS.Administration module

     

All these menus are populated dynamically based on the UI elements of the corresponding module. This allows you to add your custom menu item which will be also personalizable.


d) WYSIWYG editor toolbar
Another new part of the UI which is now personalizable is WYSIWYG editor toolbar. So if your content editor is not skilled enough to use all actions on the toolbar, you can easily hide some actions from his toolbar just by setting his UI profile. There is a new module CMS.WYSIWYGEditor with UI elements which represent all built-in actions on the toolbar:



By default, WYSIWYG editor is personalizable only in CMS Desk administration. If you would like to make it personalizable also on the live site, please put the following key into your web.config file:
<add key="FCKEditor:PersonalizeToolbarOnLiveSite" value="true">

If you would like to add your custom action (plugin) on the WYSIWYG toolbar and you want it to be personalizable, you will need to register its UI element in WYSIWYG editor module and set its code name to your plugin's name.


e) Media dialog
Since version 4.1 you can enjoy completely new dialog for inserting/selecting images, media and links. Since version 5.0 it is also personalizable. Why? I can image the situation when you do not want some of your content editors to use specific storage (Document attachments, Content or Media libraries) as the source of the images and media. So you can set his UI profile in the way which hides unnecessary storages from him and forces him to use only those storages which are visible.

To achieve this, there is a new CMS.MediaDialog module with UI elements which represent all tabs of the Media dialog so they can be easily hidden:



 

UI Personalization 5.0 - data and UI changes summary

1) New modules in Development -> Modules section
- CMS.Desk
- CMS.MyDesk
- CMS.WYSIWYGEditor
- CMS.MediaDialog
- CMS.UIPersonalization

2) Removed modules from Development -> Modules section
- CMS.UserInterface

3) Removed module permissions
- Open permission from CMS.Tools module
- Display permission from all modules

4) Settings
Setting Content management -> Personalize user interface with permission was moved to the Security category and renamed to Enable UI personalization. Its key remained the same.

5) User interface
- Administrator can define module UI elements on its new User interface tab.
- Administrator can manage UI profiles on Administration -> UI personalization page
- Options Show module in: Tools, Administration, My desk and Development were removed from module properties and replaced by defined UI elements in corresponding sections.
 

UI Personalization 5.0 - import and upgrade

If you look at the changes summary above you will probably be interested how we handle import of the packages from older versions to version 5.0 or how we will handle upgrade from version 4.1 to 5.0.

I have created a site import package in version 4.1 and imported it to version 5.0 to demonstrate it for you. Import package includes following data:

Modules:
- Ecommerce (Show int Tools = true, Show in Administration = true)
- My module (Show in My desk = true, Show in Administration = true)
- My development module (Show in Development = true)
- CMS Usert Interface

Site roles:
- role A
- role B

Module permissions:
- Only role A is granted with Ecommerce Display permission
- Only role B is granted with My module Display permission
- Only role A is granted with CMS User Interface module permissions
 
Site settings:
- Content management -> "Personalize user interface with permissions" is turned off

 

General rules for import:

1) If a module was displayed in any CMS Desk section in version 4.1 (Show in Tools = true OR Show in My desk = true OR Show in Administration = true) we automatically ensure creating corresponding UI element in CMS.Tools/CMS.MyDesk/CMS.Administration modules if such UI element doesn't exist yet.

After import:
- Ecommerce 
    No UI element is created in CMS.Tools because there is already such UI element
    Ecommerce UI element is  created in CMS.Administration module because there isn't such UI element

- My module
     My module UI elements are created both in CMS.MyDesk and CMS.Administration modules  

- My development module
     No UI element is created because option Show in development remains in version 5.0.

- CMS User Interface module is not re-created after import, see rule 4.



2) If UI element is created or already exists according to the rule 1 and its corresponding module has Display permission in the import package, all roles granted with that Display permission are automatically granted with access to the UI element. There are more similar transfers from role-module permission relationship to role-UI element relationship, so I recommend you to check out the following data sheet to learn more. Display permissions are not re-created.

After import:
- Display permission is not created under Ecommerce module
- Only role A is granted with access to the Ecommerce UI element of modules CMS.Tools and CMS.Administration
- Only role B is granted with access to the My module UI element of modules CMS.MyDesk and CMS.Administration




3) All roles included in site import package are automatically granted with access to all default UI elements of the following modules that are new in version 5.0 and do not exist in older versions: CMS.MyDesk, CMS.WYSIWYGEditor, CMS.MediaDialog.

After import:
Roles A and B are granted with access to all UI elements of the modules CMS.MyDesk, CMS.WYSIWYGEditor, CMS.MediaDialog


4) If the setting Personalize user interface with permissions is turned on in import package, only roles which are granted with CMS User Interface module permissions will be granted with access to the specified UI elements of the CMS.Content module. If the Personalize user interface with permissions is turned off (this says that you didn't use UI personalization of the Document properties in older version), all roles will be granted with access to the specified UI elements of the CMS.Content module. CMS User Interface module is removed after its role-module permission relationships are transferred to corresponding role - UI elements relationships.

After import:
All roles (roles A and B) are granted with access to all UI elements which represent document properties because the Personalize user interface with permissions was turned off in the import package.




5) UI personalization is automatically enabled on the imported site to ensure correct CMS Desk user interface after the role-module permission relationships are transferred to the role-UI element relationships, see rule 2.

Please note, the same rules are applied automatically when you upgrade from version 4.1 to version 5.0.
 

What's next?

In some of the future versions we plan to come with support for personalizable user interface in all modules from CMS Desk -> Tools and CMS Desk -> Administration sections. Remember, you still can express your suggestions on User Voice portal so feel free to suggest the way the Kentico CMS UI Personalization should follow. I will also be happy if you put your comments on new Kentico CMS 5.0 UI Personalization here under my post.

P.V.