One of the nice things about Kentico 8 and its custom modules for me has become the look, feel, and flow of how you use them. When you create custom modules, sometimes a module has multiple parts for a specific task. A great example of this is Kentico’s built in “E-mail Queue” module. This e-mail queue module provides functionality for the user to view the emails in the queue to send, view sent emails, and create a new email to send. A different tab separates each piece of functionality and they are all held within the same module, so you don’t have to access multiple modules. Surprisingly, this is simple to do.
Getting Started
To get started, you need to be in the CMS Desk / Admin side of a Kentico 8 site running on Hotfix 7 or higher. Once you are in the backend of the CMS portal go to Modules. Once here follow the steps below:
Step 1
In the top right click on “New Module”. Then give your module a display name that you will want the user to see.
Step 2
Fill out the fields accordingly to the name of the module. Once complete, click “Save” to create your new module.
Step 3
Next, you will need to register the UI aspect of the module so users can reach the custom code that has been developed. Start by clicking on “User Interface” in the left menu options.
Step 4
From here click, the “+” sign next to “Administration” and click on “Custom”. Once selected click the “+” at the top left to create a new UI element.
(Note: This action tells Kentico where in the navigation to register your module for access through the UI. For instance, if something you were creating dealt with E-Commerce you could register it under that section. Typically, I keep custom parts under the “Custom” section.)
Step 5
Now we will create four elements. First will be the parent / container element with that contains our styling. Make sure the following fields are filled out appropriately.
- Display name: {this is the name that the user will interact with}
- Module: {make sure the module you created is selected}
- Element icon type: Class
- Element icon CSS class: {this is used to show an icon next to your module}
- Type: Page Template
- Page Template: Vertical tabs with the site selector
Step 6
Next we will create the three remaining elements underneath the element we just created and these will link to our code files. These elements will all be similar but will just point to different code files for the correct tab.
- Display name: {name of the tab}
- Module: {make sure same module as parent element is selected}
- Type: URL
- Target URL: {this is the location of your custom module code}
- Click “Save” to save your changes.
Step 7
Now that you have completed one, just simply “rinse and repeat” Step 6 until all the desired tabs are setup with the appropriate code files.
Step 8
Once your all of your elements are created you’re almost there! Now just go on the left panel and select “Sites”. Here select the website you want this module to be viewable to.
Step 9
You have now completed creating, registering and setting up a custom module with vertical tabs.
To access your new module:
Go to the top right corner of the portal, click the Kentico icon, select custom, then your custom module will now display (if it is not displaying check through the steps to ensure all element properties are setup correctly).
We Got It!
Now you have your module with vertical tabs! But what’s happening and how does it work? In Step 5 we setup a “parent” or a “container element” to link our code files to. We then tell it to use a particular page template that then has a special web part setup to grab the code files underneath and display it as vertical UI tabs for us.
Fairly simple once you have done it once, but it can very easily be over-looked. As with a lot of development in Kentico, the functionality and help is already there all that you need is to know is where to look. Good luck and happy coding!