How to create your own cool custom report module in Kentico

This post contains steps to create a new Kentico module using a custom UI template and custom UI web part to display a sample report. It will allow you to grant access to single reports by simply configuring roles and permissions. No coding required!

Step 1: Create the module

The first thing that we are going to do is creating the new module. For more info on module development check out the documentation.

Module display name: My cool report module

Don't forget to define the module read permissions (with display in matrix checked) and grant desired roles (e.g. content editor in Dancing Goat) access to the module. If you have the UI personalization switched on (within Security & Membership settings) then please ensure that you enable the UI elements for the roles.

Check out my post on working with roles and permissions for more info.

Step 2: Build the user interface

Create a new user interface within a desired section (e.g. Configuration).

Display name: My cool report module
Caption: My cool report module
Element icon type: Class
Element icon CSS class: icon-app-marketing-reports
Page template: Vertical tabs

Add a child element:

Display name: Sample report
Caption: Sample report

We will leave the rest empty and ensure that the module works as expected first :) If you log in with a user (e.g. Andy) that has the configured role you should see the module and inform you that the Template "" was not found:

Template was not found

Step 3: Create a custom UI page template

What I would like to do know is create a custom UI page template to be able to have full control over the content of the module. Go to the page template application and within the UI templates section create a optional category and new template:

Template display name: My cool report UI template

Switch to the General tab and change the Template type to "UI page".
In the Layout tab add the following markup: <div class="PageContent"><cms:CMSWebPartZone ZoneID="zContent" runat="server" /></div>

We are now ready to add web parts to the template in the Design tab. But before we do that let's configure a web part that can display a selectable report.

Step 4: Configure the UI report web part

Fire up the web parts application and within the UI Webparts section create a optional category and new web part:

Web part: Inherit from an existing
Display name: Report (UI)
Inherit from: Report

After saving the web part change it's Type to UI.

Go back to the Page templates section and add the Report (UI) web part to the "My cool report UI template" in the Design tab.

Now we could select the "Sample report" in the report name selector but we can make it more flexible using configurable UI template properties.

For additional info on how to create custom reports in Kentico I highly recommend the post by Kentico MVP Laura Frese.

Optional step 5: Define UI template properties

Select the "My cool report UI template" and open the Properties tab. Create a new field:

Field name: Report
Field caption: Report
Form control: Report selector with parameters

Go back to the Design tab and configure the Report (UI) web part. Click on the arrow to edit the value of the Report name and add the following macro condition:

Report condition
This will automatically pass the selected report from the template properties into the web part. Don't forget to select the report in the sample report user interface properties:

UI template properties

View the result

If you have followed all the above steps carefully then you should have a new cool report module available. Enjoy!

My cool report module