Views: 17788
Number of votes: 6
Average rating:

Create Your Own Reports in the Report Center

The release of EPiServer CMS 5 R2 contains the new Report Center module. The standard installation of Report Center comes with five page reports providing an overview of published, unpublished, expired pages and simple pages for the Web site. This is only the beginning; with the Report Center you can create your own reports, in this article you will find out how.

There has been no obvious place in versions prior to EPiServer CMS 5 R2 to place reports, except for the EditPanel, if the report is aimed towards editors, or the AdminMenu if administrators are the audience.

When I first looked at the new Report Center in EPiServer CMS 5 R2 I considered it to be “yet another plug-in area”, but after giving it some thoughts I realized that there is more to it. As users of EPiServer CMS we have grown accustomed to the concepts of the Edit, Admin and View modes, but now we will have to add the Report Center to this list.

This article will describe how you can easily develop a report and plug it in to the Report Center and adapt it to the Master Page for the Edit and Admin modes.

Start by adding content

The first step towards creating a meaningful report is to add some real content. For the sample report we are creating, I have chosen to present the warnings generated by Log4Net (http://tinyurl.com/67td7v) in a table. With the help of Reflector for .NET (http://tinyurl.com/6a434r) I found out that there is a Memory Appender in Log4Net which will save the log in the memory of the Web Server. From here you should proceed with caution and kids don’t try this at home, because Log4Net can generate a huge amount of content, which we do NOT want in our precious memory on our Web server.

Getting started

First we have to register the Memory Appender in the file called EPiServerLog.config which is located in the root of our Web application. This is done by adding the section below under the root node <log4net>.

 

<appender name="memoryLogAppender" type="log4net.Appender.MemoryAppender">
  <onlyFixPartialEventData value="true" />
</appender>

 

This will tell Log4Net that we now can send log events in to the memory. In order to do so, set the Log Level to Warn and add an appender-ref to our memory appender.

 

<root>
  <level value="Warn" />
  <appender-ref ref="memoryLogAppender" />
</root>

 

By saving EPiServerLog.config we now have enabled the logging functionality for the Web site.

Continuing with Presentation

For this I have chosen to use a simple GridView for presentation of the log, which will require a minimum of code. Add a web form to your project and only add a GridView in the sample code we get from Visual Studio.

 

<%@ Page Language="C#" AutoEventWireup="true"  
    CodeBehind="Log4NetReport.aspx.cs"
    Inherits="EPiServer.Reports.LogViewer.Log4NetReport" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Log4Net Report</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="grdLogViewer" runat="server" />
    </div>
    </form>
</body>
</html>

 

Then data bind the GridView to the MemoryAppender from the code behind file. First we will add references to the required Log4Net name spaces and to EPiServer.PlugIn by adding the following lines:

 

using log4net;
using log4net.Appender;
using log4net.Repository.Hierarchy;
using EPiServer.PlugIn;

 

 In the Page_Load we have to do the data binding:

 

protected void Page_Load(object sender, EventArgs e)
{
    Hierarchy h = LogManager.GetRepository() as Hierarchy;
    MemoryAppender ma = h.Root.GetAppender("memoryLogAppender")
        as MemoryAppender;         grdLogViewer.DataSource = ma.GetEvents();
        grdLogViewer.DataBind();
}

 

Save and build the project then open up the page in a Web browser and the result appears as a table, like in the screenshot below.

 

Report table view

 

The next step is to plug in the report in the Report Center.

Finally plug it in to Report Center

If you are used to creating plug-ins with EPiServer CMS, adding reports will be an easy task for you. In order to make this work, add the GuiPlugIn attribute to the report we just created. So switch back to your code behind file and add the following code before the class definition.

[GuiPlugIn(
    Area=PlugInArea.ReportMenu,
    Description="Log4Net Report",
    Category="Log4Net", DisplayName="Log4Net",   
    Url="~/Reports/LogViewer/LogViewer.aspx")]

 

Please note that we are using the new plug-in area called ReportMenu and that we are setting the Category to Log4Net to get our report in a separate group. You also have to change the URL argument to point to the report you have created.

When looking at the result in the Report Center, note that the report has been plugged in but the actual report still lacks the look and feel of the rest of EPiServer CMS. To come to terms with that, implement the masterpage of the user interfaces in EPiServer CMS. In order to do that, add a reference to EPiServer.UI in Visual Studio.

  1. In Visual Studio right-click on References in Solution Explorer and select Add Reference…
  2. In the dialog select the tab Browse.
  3. Select bin/EPiServer.UI.dll.   
  4. Press OK.

Verify that the Reference has been added correctly

Now to make sure that the template page inherits from an EPiServer Page Base Class, change the inheritance of the report page to be SystemPageBase which will give us all the necessary properties to implement the design.


public partial class Log4NetReport : EPiServer.UI.SystemPageBase


With EPiServer CMS 5 R2 the UI folder was moved to \Program Files\EPiServer\CMS\5.2.375.7\Application\UI and is not located in the actual Web application as before. As a consequence of that, it is not possible to add the MastePageFile parameter to the <%@ Page … %> directive anymore. Instead you have to do this from code in the PreInit event of the page instead.

 

protected override void OnPreInit(EventArgs e)
{
    base.OnPreInit(e);
    this.MasterPageFile = ResolveUrlFromUI("MasterPages/EPiServerUI.master");
}

 

The last thing that has to be done is to change the html based layout so it will use the Master Page of EPiServer UI instead, by putting the GridView in a content control.

 

<%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="Log4NetReport.aspx.cs"  
    Inherits="EPiServer.Reports.LogViewer.Log4NetReport" %> <asp:Content ContentPlaceHolderID="FullRegion" Runat="Server">
    <asp:GridView ID="grdLogViewer" runat="server" />
</asp:Content>

 

Now when you look at the report in Report Center, it will look as a part of EPiServer CMS.

 

EPiServer CMS report view

 

This is one example of the kind of report you can create in the Report Center. It gives you the freedom to take control over your Web site. 
 

Kevin OShaughnessy
( By Kevin OShaughnessy, 1/20/2011 11:50:52 AM)

developing reports forum thread is here: http://world.episerver.com/Templates/Forum/Pages/Thread.aspx?id=47242&epslanguage=en

Please login to comment.