Gadget for Last Updated Pages to work in Dashboard

One change EPiServer did in version 7 was to move the built in gadget for last updated pages from the dashboard to the edit mode in the tree view. Even if it feels like a place more closely related to the function it also made it harder to use, since there is not much room there.

Thankfully with EPiServer 7 and MVC it is incredible easy to create a gadget and since the code for the report on last updated pages are there it is not necessary to invent the wheel again . To get back this little nice gadget do like this:

1: Create Gadget control
This is based on that you are using MVC on your site.

using System;
using System.Web.Mvc;
using EPiServer.Core;
using EPiServer.ServiceLocation;
using EPiServer.Shell.Gadgets;
using EPiServer.UI.Report.Reports;

namespace SiteName.Controllers.Gadgets
{
    [Gadget(Name = "Updated Pages", Description = "List the last 15 updated pages for this site", Title = "Last updated pages")]
    public class UpdatedPagesController : Controller
    {
        public ActionResult Index()
        {
            var instance = ServiceLocator.Current.GetInstance<ChangedPagesData>();
            int numOfRows = 0;

            //It is important to set the parameters correct since for example if you define other sorting than "Saved" nothing will be returned, why? I do not know
            var pages = instance.GetPages(ContentReference.StartPage, -1, false, DateTime.UtcNow.AddDays(-14),
                DateTime.UtcNow, "Saved", 15, 0, out numOfRows);
   
            return View(pages);
        }


    }
}

2: Create the View

@model EPiServer.Core.PageDataCollection

@{
    ViewBag.Title = "Updated pages";
    Layout = null;
}

@if (Model.Any())
{
    <div>
        <table class="epi-default epi-default-legacy" cellspacing="0" border="0" id="ctl00_FullRegion_MainRegion_ReportView" style="border-style:None;width:100%;border-collapse:collapse;">
            <tr>
                <th scope="col">Pagename</th>
                <th scope="col">Last changed</th>
                <th scope="col">Changed by</th>
                <th scope="col">PageType</th>
            </tr>
            @foreach (var entry in Model)
            {
                <tr>
                    <td style="width: 27%;">
                        <a href="/EPiServer/CMS/#context=epi.cms.contentdata:///@entry.PageLink.ID.ToString()" target="EPiServerMainUI" title="PageType: @entry.PageTypeName PageId: @entry.PageLink.ID.ToString()">@entry.PageName</a>
                    </td>
                    <td>
                        <span title="@entry.Saved.ToString("yyyy-MM-dd HH:mm:ss")"> @entry.Saved.ToString("yyyy-MM-dd")</span>
                    </td>
                    <td>
                        @entry.ChangedBy
                    </td>
                    <td>
                        @entry.PageTypeName
                    </td>
                </tr>
            }
        </table>
    </div>
}

The layout and styling isn’t the best and I have used the same code that EPiServer use so I am depending on their styles.

I will update (or write a new) post on this with a updated version that are using AngularJS and better styling to do filtering/sorting and so on, but this is how easy it is to create your own Gadget to use in the Dashboard.

Happy coding!