Is this really the version you are looking for? Kentico Xperience 12 Service Pack Documentation is no longer updated. Use the switcher in the header to choose your product version.
When building the user interface for custom modules, you can either use the Portal Engine (as described in Creating custom modules) or develop pages manually as standard web forms.
With the manual approach of designing UI elements, you:
Development approaches for custom user interface pages
Before you start developing a user interface page that requires customization, carefully consider which of the following approaches best fits your needs:
The following example demonstrates how to manually create a listing page for the sample Company overview module. See Creating custom modules to learn how to add the module and its Office class.
Start by creating a UI element:
The system creates the new UI element. The position in the user interface tree under the CMS -> Administration -> (Category) section identifies the new element as an application.
Next, you need to build a web form that serves the URL of the UI element:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="OfficeListing.aspx.cs" MasterPageFile="~/CMSMasterPages/UI/SimplePage.master" Inherits="CMSModules_CompanyOverview_OfficeListing" Theme="Default" %>
<%@ Register src="~/CMSAdminControls/UI/UniGrid/UniGrid.ascx" tagname="UniGrid" tagprefix="cms" %>
<%@ Register Namespace="CMS.UIControls.UniGridConfig" TagPrefix="ug" Assembly="CMS.UIControls" %>
<asp:Content runat="server" ContentPlaceHolderID="plcContent" ID="plcOfficeList">
<cms:UniGrid ID="officeList" runat="server" ObjectType="CompanyOverview.Office">
<GridActions>
<ug:Action Name="edit" Caption="$General.Edit$" FontIconClass="icon-edit" FontIconStyle="allow" />
<ug:Action Name="#delete" Caption="$General.Delete$" FontIconClass="icon-bin" FontIconStyle="critical" Confirmation="$General.ConfirmDelete$" />
</GridActions>
<GridColumns>
<ug:Column Source="OfficeDisplayName" Caption="Office name" Localize="true">
<Filter Type="Text" Size="200" />
</ug:Column>
<ug:Column Source="OfficeAddress" Caption="Address" Width="100%" />
</GridColumns>
<GridOptions DisplayFilter="true" />
</cms:UniGrid>
</asp:Content>Edit the web form's code behind:
using CMS.UIControls;
using CMS.Helpers;
using CMS.Base.Web.UI.ActionsConfig;
[UIElement("CompanyOverview", "ManualOfficeList")]
public partial class CMSModules_CompanyOverview_OfficeListing : CMSPage
{
protected void Page_Load(object sender, EventArgs e)
{
// Creates and adds the "New office" button as a header action
HeaderAction newOffice = new HeaderAction
{
Text = GetString("New office"),
RedirectUrl = "~/CMSModules/CompanyOverview/NewOffice.aspx"
};
CurrentMaster.HeaderActions.AddAction(newOffice);
// Sets the URL for the edit action
officeList.EditActionUrl = "~/CMSModules/CompanyOverview/EditOffice.aspx";
}
}The sample code above:
Users can access the page as a standard Kentico application. You can use a similar approach to add any required content or functionality to the Kentico administration interface.