Preparations
Add a reference in your project to the EPiServer.UI assembly:
Add a web form for the report
Let’s create a new web form which will present our report. Note that we cannot use “Web Form using Master Page” as we cannot select the EPiServer UI master page in this dialog. More on this in a bit.
First, we remove all markup from the web form, leaving only the <% Page … %> directive at the top.
For now we just add a dummy text to the markup:
<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="PagesPerPageTypeReport.aspx.cs" Inherits="Upsales.Website.Templates.UI.Reports.PagesPerPageTypeReport" %>
<asp:Content ContentPlaceHolderID="FullRegion" Runat="Server">
<p>We'll present our report here.</p>
</asp:Content>
Don’t mind the warning about the region FullRegion not existing, that’s because we’ll set the master page programmatically at runtime.
Set the master page programmatically
Next, let’s edit the code-behind for our new web form. First, we’ll ensure it inherits the SystemPageBase class (part of the EPiServer.UI namespace):
public partial class PagesPerPageTypeReport : SystemPageBase
{
}
Next, we override the OnPreInit event to set the master page to EPiServer’s UI master page:
public partial class PagesPerPageTypeReport : SystemPageBase
{
protected override void OnPreInit(EventArgs e)
{
base.OnPreInit(e);
// Use EPiServer UI master page
MasterPageFile = ResolveUrlFromUI("MasterPages/EPiServerUI.master");
}
}
Add a GuiPlugIn attribute
In order for the report to show up in the Report Center we have to add a GuiPlugIn attribute and set the Area property to PlugInArea.ReportMenu:
[GuiPlugIn(
Area=PlugInArea.ReportMenu,
DisplayName="Pages by Page Type",
Description="Lists pages of a specific page type",
Category="Custom Reports",
Url="~/Templates/UI/Reports/PagesPerPageTypeReport.aspx")]
public partial class PagesPerPageTypeReport : SystemPageBase
{
protected override void OnPreInit(EventArgs e)
{
base.OnPreInit(e);
// Use EPiServer UI master page
MasterPageFile = ResolveUrlFromUI("MasterPages/EPiServerUI.master");
}
}
Verify that the new report exists in Report Center
Now, if we login to EPiServer and click Reports…
…we can see our newly created report. Note that the Category property we set for the GuiPlugIn attribute has created a new reports group called “Custom Reports”:
However, so far the report doesn’t do much to woo us:
Add markup for the report
Let’s add a DropDownList for selecting a page type and a ToolButton for listing found pages using a GridView control.
We borrow some native EPiServer CSS classes to make our report look a little more like the built-in reports:
<asp:content ContentPlaceHolderID="FullRegion" runat="Server">
<div class="epi-contentContainer epi-padding epi-contentArea">
<h1 class="EP-prefix">
List pages of a specific type
</h1>
<asp:DropDownList ID="PageTypeSelector" runat="server" />
<EPiServerUI:ToolButton Text="List pages" OnClick="RefreshButton_Click" ID="RefreshButton" runat="server" />
<div class="epi-marginVertical-small">
<asp:GridView ID="PageList" runat="server" AutoGenerateColumns="False" CssClass="epi-padding">
<Columns>
<asp:HyperLinkField HeaderText="Name" DataNavigateUrlFields="LinkUrl" DataTextField="PageName" />
<asp:BoundField HeaderText="Published" DataField="StartPublish" />
</Columns>
</asp:GridView>
</div>
</div>
</asp:content>
Add business logic for the report
Let’s edit the report’s code-behind file again. We populate the dropdown for selecting a page type in the page’s Load event:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
if (!IsPostBack)
{
// Populate page type dropdown
PageTypeSelector.DataSource = PageType.List()
.OrderBy(t => t.Name)
.Select(t => t.Name);
PageTypeSelector.DataBind();
}
}
When the “List pages” button is clicked we want the page list to be refreshed, displaying pages of the selected page type:
protected void RefreshButton_Click(object sender, EventArgs e)
{
// Find pages of the specified type
var pages = DataFactory.Instance.FindPagesWithCriteria(
PageReference.RootPage,
new PropertyCriteriaCollection
{
new PropertyCriteria
{
Name = "PageTypeName",
Value = PageTypeSelector.SelectedItem.Text,
Condition = CompareCondition.Equal,
Type = PropertyDataType.String
}
});
// List found pages
PageList.DataSource = pages;
PageList.DataBind();
}
Test the new report
Now, if we a select a page type in our report and click the “List pages” button we’ll see the result. Although we only have one start page on the site, this will give you an idea of how it works. :)
