Reference - Managing UI elements

You can edit UI elements of a particular module in the Modules application. Edit a module and select the User interface tab. The UI element tree shows all UI elements in the system, but you can edit only UI elements that belong to the module.

Warning: Do NOT use the Customize option to edit the UI elements of the default Kentico modules. The system may overwrite such changes when upgrading or hotfixing to a newer version. Instead, add your own UI elements under a custom module and then use the resulting interface instead of the original.

On the General tab, you can set the following properties of the UI element:

General

Display name

The name of the element displayed in the user interface tree.

Code name

Serves as an identifier of the UI element. Must be unique within the module.

You can leave the (automatic) value to have the system generate an appropriate code name based on the Display name.

Parent element

Allows you to change the position of the element in the user interface tree. The system places the current element under the selected parent element.

Module

Select the module to which the UI element belongs.

Element appearance

Caption

Sets the caption of the UI element in the user interface. If empty, the system uses the element’s Display name.

Element icon type

Determines the type of the icon used to represent the element in the user interface. You can choose between:

Fill in the corresponding property:

  • Icon path - the path to the image file. You can enter either a full relative path (~/App_Themes/Default/Images/CMSModules/list.png) or a short path inside the Images folder in App_Themes/Default/Images (CMSModules/list.png).
  • Element icon class - the name of the font icon class.

Icon size

The size of the UI element icon. Takes effect only for UI elements included in ribbon-like toolbars.

Description

A text description of the UI element. The system displays the description in tooltips.

Element content

Type

Sets the type of the element’s content:

  • Page template - a UI template based on the portal engine. You can manage the template on the Properties and Design tabs.
  • URL - a web form (aspx file) or web page specified through the Target URL property.
  • User control - a dynamically loaded user control (ascx file) specified through the Target URL property.
  • JavaScript - the element executes a JavaScript action when clicked (the element does not have content).

Page template

Selects the UI template that provides the content for UI elements of the Page template type. You can configure the template on the Properties tab of the UI element.

  • Save as new template - saves the current template as a new re-usable UI template. This can be useful if you wish to use an ad-hoc template for other UI elements.
  • Clone template as ad‑hoc - creates a copy of the current UI template as a new ad-hoc template. Allows you to modify the design of the UI element without affecting other elements that use the original template.
  • Edit template properties - opens a new window where you can configure the properties of the currently assigned UI template.

Target URL

Specifies the path to the file that provides the content for UI elements of the URL or User control type. For example: ~/CMSModules/Content/CMSDesk/Default.aspx

For URL elements, you can also enter absolute URLs, for example: http://www.google.com

JavaScript

Enter the JavaScript action executed by JavaScript type elements.

Element restrictions

Access condition

Sets a macro condition that must be fulfilled to view the UI element’s content. If the condition is false, the element displays an access denied error instead of the content.

Note: All descendant elements in the user interface tree automatically inherit the condition.

You can create the condition using the following macro rules:

  • Current user has permission
  • Current user has privilege level

Or the following methods if you prefer to write the macro condition code directly:

  • CurrentUser.IsAuthorizedPerResource(“module code name”,“permission code name”)
  • CurrentUser.CheckPrivilegeLevel(UserPrivilegeLevelEnum.GlobalAdmin)

For information about macro options and syntax, see:

Check module “read” permisson

If enabled, users must have the Read or GlobalRead permission for the UI element’s Module to access the element’s content. The system displays an access denied error for users without the read permission.

Has no effect for elements whose module does not have read permissions.

If enabled, the system also checks the read permission for all child elements.

Visibility condition

Sets a macro condition that must be fulfilled for the UI element to be visible in the system’s administration interface.

For information about macro options and syntax, see Writing macro conditions.

Is global application

Applies to UI elements that represent applications.

If true, the application:

  • Can only be accessed by users with the Global administrator privilege level. Other users cannot see global applications.
  • Remains available even if no site is running on the current domain.

Also applies to all child elements.

Warning: Do not disable the Is global application flag for the default global applications.

On the Roles tab, you can directly configure which roles will be able to see the selected UI element.

Configuration made on the Roles tab is reflected in the UI personalization application and vice versa.

Click Copy permissions from parent to delete all existing UI element permissions and add new ones based on settings of the parent UI element.

Using Copy permissions from parent affects all available sites, i.e. not only the currently selected one.

Because the root-level UI element cannot have any UI access permissions assigned, the button is disabled for all first-level UI elements

To check if a particular element is visible to a user, you can select the user from the Report for user drop-down list. After doing so, a sum of all permissions granted to the user’s roles is displayed in the first line, highlighted in green color. Roles where the selected user is a member will be highlighted.