help.axcms.netAxinom Logo
Save Save Chapter Send Feedback

Create New Overview Pages

Setp-by-Step guide through the process of creating a new overview. Basically you create an ASPX-page, a custom overview helper, custom filter and wire all stuff togather.

In AxCMS.net version 7.1.4 and above you can easily create overivew pages with the same look and feel and behaviour as standard overview pages.

It is also possible to customize the existing overview pages now (like Pages Overview, Users Overview etc). Please read Customize AxCMS.net Overview Pages for more information.

The following set of instructions will guide you through the process of creating your own overview page. The example will use the Pages Overview source code as a sample here. In reality, you should not create a new Pages Overview - you can just customize the existing one.

1. Create a new ASPX page under the Extras project of your solution

The ASPX page for the overview must be under the Extras project. Never put it under Templates project, because you have to reference AxCMSweb assembly and it is not a good practice to reference that assembly from the Live System. These overview pages should be used only in Management System.

So let's just create a page: MyPagesOverview.aspx

2. Inherit the new ASPX page's codebehind class from

AxCMS.AxCMSweb.admin.templates.GridOverviewCMSPage (remember: reference AxCMSweb if not done yet).

Let's inherit:
public class MyPagesOverview : AxCMS.AxCMSweb.admin.templates.GridOverviewCMSPage
{
...
}

3. Adapt the ASPX file's content according to the rules of overview page

The ASPX file's content should look like the following:
<%@ Page language="c#" Codebehind="MyPagesOverview.aspx.cs" AutoEventWireup="false" Inherits="MyProject.Extras.MyPagesOverview" %>
<%@ Register TagPrefix="AxCMS" namespace="AxCMS.AxCMSweb.admin.templates" assembly="AxCMSweb" %>
<%@ Register TagPrefix="AxMP" namespace="Axinom.AECMS.Backend" assembly="Axinom.AECMS.Backend" %>
<%@ Register TagPrefix="AxCMS" TagName="BaseGridTemplate" src="../admin/templates/BaseGridTemplate.ascx" %>
<%@ Register TagPrefix="Ax" Namespace="AxCMS.AxCMSweb.admin.templates" Assembly="AxCMSweb" %>

<AxMP:ContentContainer runat="server" ID="ctlContentContainer">
<AxMP:Content id="Filter" runat="server" />
<AxMP:Content id="List" runat="server">
<AxCMS:BaseGridTemplate runat="server" ID="_grid" />
</AxMP:Content>
</AxMP:ContentContainer>

In reality, you might need some extra controls on that ASPX page you create - like a button-panel for custom operation buttons and activity buttons. That all will not be covered in the current example's context.

4. Create a helper class for the overview page

Code logic for the overview page will be spread among two classes: the MyPagesOverview.aspx.cs and another - helper - class. So let's create a helper class now and inherit it from the Axinom.AECMS.AxOverviewBaseHelper:
public class MyPagesOverviewHelper : Axinom.AECMS.AxOverviewBaseHelper
{
...
}

5. Fill the helper class with code logic necessary for displaying the item list on the overview page

While the helper class is inherited from the AxOverviewBaseHelper, all you need to do here is to override some methods:
public override ArrayList GetColumnWidth()
{
ArrayList columns = new ArrayList();
columns.Add(new Unit("40%"));
...
return columns;
}

public override ArrayList GetColumnNames()
{
ArrayList columns = new ArrayList();
columns.Add("Name");
... return columns;
}

public override ICollection GetHeaderContent()
{
return new string[] { "Name", "Template", ... };
}

public override ArrayList GetSortOptions()
{
ArrayList sort = new ArrayList();
sort.Add("Name_ASC");
sort.Add("Name_DESC");
sort.Add("Template_ASC");
sort.Add("Template_DESC");
...
return sort;
}

public override bool CustomPaging
{
get { return true; }
}

public override object GetDataSource(int pageIndex, string sort, FilterParameters filter)
{
AxPageBaseAdapter adapter = new AxPageBaseAdapter(PageType.Page);
ArrayList pages = adapter.LoadAll(pageIndex, sort, filter);
this.VirtualItemCount = adapter.GetCount(filter);
if (pageIndex == 0)
{
if (this.CurrentID > 0)
{
this.CurrentPageIndex = this.FindCurrentItem(pages);
}
}
else
{
this.CurrentPageIndex = pageIndex;
}
return pages;
}

public override void GridItemDataBound(object sender, DataGridItemEventArgs e)
{
AxPage page = (AxPage)e.Item.DataItem;
Label _nameLabel = (Label)e.Item.FindControl("SortableLabel0");
string pageName = HttpUtility.HtmlEncode(page.Name);
if (page.PublicationState == PublicationState.Deleted)
{
pageName = "<font color=\"red\"><strike>" + page.Name + "</strike></font>";
}
_nameLabel.Text = "<A href=\"" + CMSConfigurationSettings.CMSApplicationVirtualPath + page.Url + "\">" + pageName + "</A>";
Label _templateLabel = (Label)e.Item.FindControl("SortableLabel1");
AxPageTemplate templ = Registry.GetCmsSite().GetPageTemplate(page.PageTemplateID);
_templateLabel.Text = HttpUtility.HtmlEncode(templ.Description);
...
}

Brief explanation:

  • GetColumnWidth() - please use that method for defining the number of columns and the relative width for all the column.
  • GetColumnNames() - set the unique names to the columns you define; please use the corresponding object property names.
  • GetHeaderContent() - set the names to display for each column.
  • GetSortOptions() - define the sort options for each column.
  • CustomPaging - to be set to true; see the GetDataSource() to see how to set current page index for the pager.
  • GetDataSource() - retrieve here the list of objects to be displayed on the overview page.
  • GridItemDataBound() - define how and what to display in each column exactly.
  • Operations() - define available CmsActivities.

The members overridden in the previous example are the most important ones. There are plenty of more members, however, on your service when you need some more enhanced solution. Please see the inline documentation for more information.

 

6. [optional] Create a filter for the overview page

The following step is not required. Please complete it only when you need a filter for your overview page.

Provided you want to create a filter, please do the following:
a) Create a filter control - like MyPagesFilter.ascx
b) Inherit the codebehind of that filter from AxCMS.AxCMSweb.admin.templates.BaseFilter and override relevant methods
c) Create a filterparameters class, inherited from Axinom.AECMS.FilterParameters and use that in your filter control's codebehind

For more information on how to create a custom filter, please see here.

7. Create code logic at your overview page's codebehind

Similarly to the step 5, you should override some members on your overview page's codebehind class:
private void Page_Load(object sender, EventArgs e)
{
this._grid.Headline = "Pages";
if(!IsPostBack)
{
_grid.Sort = "Created_DESC";
this.RestoreParameters();
}
}

protected override short ElementType { get { return (short)ElementTypes.Page; } }
protected override string DefaultFilterControlSrc { get { return "MyPagesFilter.ascx"; } }
protected override string BaseName { get { return "MyPages"; } }

private AxOverviewBaseHelper _overviewHelper;
public override AxOverviewBaseHelper OverviewHelper
{
get
{
if (_overviewHelper == null)
{
_overviewHelper = new MyPagesOverviewHelper();
}
return _overviewHelper;
}
}

override protected void OnInit(EventArgs e)
{
base.OnInit(e);
InitializeComponent();
}

private void InitializeComponent()
{
this.Load += new EventHandler(this.Page_Load);
}

Most of the code should be self-explanatory. There are only few members that need more attention:
* OverviewHelper - please override that property and make it return your own custom helper class we created at the step 4.
* DefaultFilterControlSrc - please override it to return the path to your filter control (if you created it at step 6).

After completing the steps described previously, you should have your own custom overview page. Please also read here how to customize the existing AxCMS.net overview pages and how to create a filter.