Conditional tabs in Kentico’s content admin UI

Kentico 8’s Admin UI control is pretty flexible – you can easily add pages to any part of the admin area. Here’s a quick walk through on how you can add a tab to the content area and make sure it only displays for a specific page type.

Kentico UI - Example

Where we want our new tab

First you add a UI item. If you don’t have a module of your own, use the already-installed ‘Custom’ module. The great thing about Kentico’s UI customisation is that it doesn’t matter which module owns your new item, you can attach it anywhere in the site. We want ours to appear in the Pages area, as an extra tab that shows up when a page is selected.

In the admin area, go to menu > Modules > Custom > User Interface. Add a new item under CMS > Administration > Content Management > Pages > Edit. You can see from the other items under Edit that we’re in the right area. Page, Design, Form, Master Page all look familiar to us from the Pages area in Kentico.

Kentico UI - example

Adding the new UI Item

 

Create your new entry. For this example I chose a blank template and cloned it as adhoc. I then added a text webpart with a little querystring macro value (to demonstrate a thing – but more on that later).

Kentico UI - Example

Setting a little macro in our new Admin page (just for kicks)

Your new tab should now be visible in the admin area, no matter which page you click on.

Kentico UI - Example

Behold! Our new tab is right where we want it! And look at that awesome Node ID coming through from our macro.

But we only want it to show up for one page type – in this case, a page type with the full class name of “Carly.TestPage”, which happens to be the page type of the first page in our site, “Example page”. To apply this restriction, we return to the User Interface area in our Custom Module, and to our “My Custom Tab” entry. We want to set a visibility condition (the last form in the list)…

Kentico UI example

Setting visibility condition for our custom tab

The macro for filtering the tab visibility just to the “Carly.TestPage” page type looks like this:

DocumentContext.EditedDocument.NodeClass.CodeName == "Carly.TestPage"

The tab will now only be visible when the currently selected document is a “Carly Test Page” page type. Magic!

You can do a lot of other fancy things with macros here, so have a play around. Just be aware that the CodeName is case sensitive.

For your custom admin page, your code can find out about which document is selected by requesting the querystring parameter of “nodeid”. Two ways are:

CMS.Helpers.QueryHelper.GetInteger("nodeid",0);

or

{?nodeid?}.

Once you have the node id, you can query the content tree using Kentico’s API, and get all the info you need.

You can read more about Kentico’s UI customisation here: https://docs.kentico.com/display/K82/Reference+-+Managing+UI+elements. You might also like to read about macros or about the Kentico document API.

Leave a Comment.