• Documentation
  Kentico development modelsInstallationUsing the Kentico interfaceDeveloping websitesConfiguring KenticoManaging usersSecuring websitesDeploying websitesManaging website contentMultilingual websitesMacro expressionsExternal utilitiesIntegrating 3rd party systemsCustom developmentE-commerce featuresOn-line marketing featuresCommunity featuresRelease notes - Kentico 12
• Tutorial
  Getting started with KenticoUsing the Kentico interfaceSelecting your tutorial pathSite development overviewPortal Engine developmentMVC developmentMVC business tutorialResource hub for marketers
• API Examples
  Content managementOn-line marketingE-commerceSocial and CommunityDevelopmentConfiguration

3. Make the class inherit from an appropriate base class:

   • ControlExtender<TControl> - for extenders that target a control. Set the generic parameter to the type of the control that you are extending (see Extender types).

   • PageExtender<CMSPage> - for extenders that apply to pages. Use CMSPage as the type in the generic parameter.

     The extender base classes are located under the CMS.Base.Web.UI namespace.

4. Override the OnInit() method in the extender class.

   • You can add any custom initialization code for the page or control, for example assign handler methods to events.
   • When extending a control, you can access a strongly typed instance of the given control through the Control property of the extender class.

5. Add any other code required to implement your custom functionality (such as the handler methods assigned to events in the OnInit method).

6. If you created the extender in App_Code, you need to add the RegisterCustomClass assembly attribute above the class declaration (and any namespace declarations). The attribute registers the class under a specific name.

7. Save the file (build the solution if your project is a web application or if you use a separate project for the module code).

Assigning extenders to module pages

After you implement the extender class, you need to assign it to the UI element representing the related page in the module's interface:

1. Open the Modules application and edit the related module.

2. Select the User interface tab.

3. Use the tree to select the UI element representing the page that you wish to extend:

4. Open the element's Properties tab:

5. Find the appropriate Extender property (see Extender types).

6. Select your extender class using the property:

   • Assembly name

     • Choose (custom classes) for extender classes created and registered in App_Code.
     • If you added the extender to a separate module project, choose the matching assembly*.*

   • Class - select the specific extender class (the value includes the class's namespace).

7. Click Save.

The extender is now applied to the given user interface page and the system runs the extender's initialization code when the page is loaded.

Extender types

The following table lists the default UI page templates that you can customize using extenders:

Control extenders must inherit from the ControlExtender<TControl> class, where TControl is a control used on the given UI template. To assign a control extender, edit the module on the User interface tab, select the given UI element and use the appropriate extender property on the Properties tab.

If you are developing an extender for the page itself (not a specific control), the extender must inherit from PageExtender<CMSPage>. To assign a page extender, edit the module on the User interface tab, select a UI element and use the Code behind -> Extender property on the Properties tab. You can assign page extenders to UI elements with any type of page template.

Example - Extending a module's listing page

The following example demonstrates how to create an extender that adds the following features to the listing page of the sample Company overview module:

• A header action button that allows users to send email to all listed offices
• List actions for sending email to specific offices
• An indicator that shows which offices are currently open, based on the time zone of each office's location

Adding class fields

Before you can create the extender, you need to expand the Office class used within the Company overview module to include fields for storing an email address and a reference to a time zone.

1. Open the Modules application and edit the Company overview module.

2. Select the Classes tab and edit the Office class.

3. Open the Fields tab and create a New field:

   • Field type: Standard field
   • Field name: OfficeEmail
   • Data type: Text
   • Field caption: Office email address
   • Form control: Email

4. Click Save.

5. Create another New field:

   • Field type: Standard field
   • Field name: OfficeTimeZoneID
   • Data type: Integer number
   • Reference to: Time zone
   • Reference type: Not required
   • Field caption: Office time zone
   • Form control: Time zone selector (select via the (more items...) option)

6. Click Save.

7. Switch to the Code tab of the class editing interface.

8. Click Save code.

The Office class now contains the OfficeEmail and OfficeTimeZoneID fields, which allow users to set an email address and select a time zone when editing offices. By saving the new code of the class, you also updated the OfficeInfo API class in the web project (allows the system to handle the new fields).

Note: On web application installations, you need to manually build the solution in Visual Studio to process the changes in the code.

Updating the listing grid definition

Because the example extends the listing page of the Company overview module, you need to update the grid definition that specifies the page's content.

By default, the grid definition used by the listing page of the Company overview module is stored in the ~/App_Data/CMSModules/CompanyOverview/UI/Grids/CompanyOverview_Office/default.xml file. Edit the grid definition and change it to the following XML code:

The updated grid definition contains:

• A new email action, which will be handled by the extender.
• A column with the OfficeTimeZoneID field as its source. The extender will handle the officehours source name and provide the output of the column.
• A column displaying the OfficeEmail value.

See also: Reference - UniGrid definition

Creating the extender class

1. Open your project in Visual Studio.

2. Create a new class named OfficeListExtender.cs in the module's code folder (by default ~/App_Code/CMSModules/CompanyOverview).

3. Add the following using statements to the start of the code:

   C#

   Copy

   using System;
   using System.Linq;
   using System.Web.UI.WebControls;
   
   using CMS;
   using CMS.Base;
   using CMS.Base.Web.UI;
   using CMS.Base.Web.UI.ActionsConfig;
   using CMS.Globalization;
   using CMS.Helpers;
   using CMS.UIControls;

4. Use the following code for the class:

   C#

   Copy

5. Save the class (build the solution on web application installations).

The code provides the functionality of the listing page customizations and registers the extender under the name OfficeListExtender.

Assigning the extender to a UI element

To apply the extender to the listing page of the Company overview module:

1. In the Modules application, edit the Company overview module.
2. Select the User interface tab.
3. Select the CMS -> Administration -> Custom -> Company overview element in the UI element tree.
4. Open the Properties tab of the element.
5. Scroll down to the Listing category and set the Grid extender property:
   • Assembly name: (custom classes)
   • Class: OfficeListExtender
6. Click Save.

The extender is now applied to the listing page of the Company overview module. To view the results, open the Company overview application (under the Custom category). The Email all header action button and the Send email actions of individual offices open mailto links, and the Is Open column shows which offices currently have office hours. You need to create offices with email address values and an assigned time zone to fully try out the customizations.