Customizing the MVC Views of the Falafel Dashboard Widgets for Sitefinity

Last week, Falafel released the new Dashboard Widgets for Sitefinity, allowing you to easily add 11 new widgets to the administration dashboard for Sitefinity 6.2+. The widgets are easy to use and provide valuable information at a glance. But did you know they're also highly customizable? Because these widgets are built with ASP.NET MVC, you can modify the View templates of each individual widget to change the layout to suit the visual needs of your site. In this post we'll take a look at how you can achieve this. In a later post, we'll look at the technical details that make this possible.

Embedded View Templates

By default, each of the widget views are served from the embedded resources of the Falafel Dashboard library file. However, the path to these resources is actually a Virtual Path that gets resolved at runtime, and for convenience, that path matches the expected path for an MVC View. We even placed this path in a separate MVC Area to avoid conflicting with any other Views in your project that might be similarly named to ours. For example, let's take a look at the View path for this System Health Widget, shown here using the default View template: The virtual path to this View is ~/Mvc/Areas/FalafelDashboard/Views/SystemHealth/Index.html. Obviously, by default this file doesn't physically exist on the server, so when it's requested, it's instead served from the Embedded Resource, delivering the default View.

Creating A New View

To override this, we can simply create an actual Index.html file in that file path location, and modify the default view as needed. For example, here is an updated markup for the default View of the System Health widget, updated to place the Functions tab first, for quick access to the Restart button.

@using System.Globalization

@using Falafel.Sitefinity.Dashboard.Helpers

@using Telerik.Sitefinity.Mvc.Rendering

@model Falafel.Sitefinity.Dashboard.Mvc.Models.SystemHealthViewModel

 

<div>

<div class="sfDashboardWidgetWrp falafel-widget falafel-system-health">

<h2 class="sfBlack">System Health</h2>

<ul class="css-tabs">

<li><a href="#">Functions</a></li>

<li><a href="#">Server</a></li>

<li><a href="#">Webserver</a></li>

<li><a href="#">Sitefinity</a></li>

</

ul>

<div class="dataWrapper css-panes">

<div>

<table>

<tbody>

<tr>

<td colspan="2">

<button class="restart-sitefinity" value="Go" type="button" title="Restart Sitefinity">Restart Sitefinity</button>

</td>

</tr>

</tbody>

</table>

</div>

<div>

<table>

<tbody>

<tr class="first">

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("time.png")" width="20" height="20" />

<span class="withIcon">Local time</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.CurrentLocalTime</td>

</tr>

<tr>

<td class="w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("server.png")" width="20" height="20" />

<span class="withIcon">Server culture</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.CurrentCulture</td>

</tr>

<tr>

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("machine.png")" width="20" height="20" />

<span class="withIcon">Machine name</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.MachineName</td>

</tr>

<tr>

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("os.png")" width="20" height="20" />

<span class="withIcon">OS</span>

</td>

<td class="t w50 systemRight">

<div style="width: 180px;" class="wordwrap">@Model.ServerInfo.OSName</div>

</td>

</tr>

<tr>

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("processor.png")" width="20" height="20" />

<span class="withIcon">Processors</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.ProcessorCount</td>

</tr>

<tr>

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("memory.png")" width="20" height="20" />

<span class="withIcon">Free Physical memory</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.FreePhysicalMemory of @Model.ServerInfo.TotalPhysicalMemory

</td>

</tr>

<tr>

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("diskSpace.png")" width="20" height="20" />

<span class="withIcon">Free disk space</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.FreeDiskSpace of @Model.ServerInfo.TotalDiskSpace

</td>

</tr>

</tbody>

</table>

</div>

<div>

<table>

<tbody>

<tr class="first">

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("name.png")" width="20" height="20" />

<span class="withIcon">Name</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.WebServerName</td>

</tr>

<tr>

<td class="w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("asp.png")" width="20" height="20" />

<span class="withIcon">ASP.NET version</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.ASPNETVersion</td>

</tr>

<tr>

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("browser.png")" width="20" height="20" />

<span class="withIcon">Browser</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.Browser</td>

</tr>

</tbody>

</table>

</div>

<div>

<table>

<tbody>

<tr class="first">

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("version.png")" width="20" height="20" />

<span class="withIcon">Version

</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.SitefinityProductVersion&nbsp;@Model.ServerInfo.SitefinityLicenseType&nbsp;(@Model.ServerInfo.SitefinityLicenseMode)

</td>

</tr>

<tr>

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("licenseIssue.png")" width="20" height="20" />

<span class="withIcon">License issue date

</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.SitefinityLicenseIssueDate</td>

</tr>

<tr>

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("licenseExpiration.png")" width="20" height="20" />

<span class="withIcon">License expiration date

</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.SitefinityLicenseExpirationDate</td>

</tr>

<tr>

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("started.png")" width="20" height="20" />

<span class="withIcon">Started on

</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.SitefinityStartedOn</td>

</tr>

<tr>

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("loadBalance.png")" width="20" height="20" />

<span class="withIcon">Load balancing</span>

</td>

<td class="t w50 systemRight">

@Html.Raw(Model.ServerInfo.SitefinityLoadBalancing ? "Available" : "Not available")

</td>

</tr>

<tr>

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("contentStatus.png")" width="20" height="20" />

<span class="withIcon">Total content status</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.SitefinityTotalContentCount out of @Html.Raw(Model.ServerInfo.SitefinityTotalContentLimit == 0 ? "unlimited" : Model.ServerInfo.SitefinityTotalContentLimit.ToString(CultureInfo.InvariantCulture))</td>

</tr>

<tr>

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("publicPage.png")" width="20" height="20" />

<span class="withIcon">Total public pages status</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.SitefinityTotalPublicPagesCount out of @Html.Raw(Model.ServerInfo.SitefinityTotalPublicPagesLimit == 0 ? "unlimited" : Model.ServerInfo.SitefinityTotalPublicPagesLimit.ToString(CultureInfo.InvariantCulture))</td>

</tr>

<tr>

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("forums.png")" width="20" height="20" />

<span class="withIcon">Total forums status</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.SitefinityTotalForumsCount out of @Html.Raw(Model.ServerInfo.SitefinityTotalForumsLimit == 0 ? "unlimited" : Model.ServerInfo.SitefinityTotalForumsLimit.ToString(CultureInfo.InvariantCulture))</td>

</tr>

<tr>

<td class="first w50 systemLeft">

<img class="icon" src="@FalafelDashboardHelper.GetImageResourceUrl("subscribersLimit.png")" width="20" height="20" />

<span class="withIcon">Total subscribers status</span>

</td>

<td class="t w50 systemRight">@Model.ServerInfo.SitefinityTotalNewsLettersSubscribersCount out of @Html.Raw(Model.ServerInfo.SitefinityTotalNewsLettersSubscribersLimit == 0 ? "unlimited" : Model.ServerInfo.SitefinityTotalNewsLettersSubscribersLimit.ToString(CultureInfo.InvariantCulture) )</td>

</tr>

</tbody>

</table>

</div>

</

div>

</div>

</div>

<script type="text/javascript">

var falafel_systemHealthOptions = {

// have to hard-code action links because SF UrlHelper is not implemented

ActionUrlRestart: '@Url.Content(Telerik.Sitefinity.Web.SiteMapBase.GetActualCurrentNode().Url)/FalafelDashboard_SystemHealth_Restart'

};

</script>

Now when we reload the Dashboard page, the Embedded Resource Resolver discovers the newly created file, and allows it to be delivered instead of the Embedded Resource, replacing and updating the View with the new markup.

Extend View Properties and Customizations

The implications of this feature are broad, allowing you not only to modify the layouts and styles of the widget, but you can even extend the functionality by retrieving and displaying additional properties from the Model passed to the View. For example, here's a look at the Popular Discussions widget, extended with additional fields from the Model to show the full content of the post. In addition, by using a custom View template, you can also modify the options that are passed into various widgets via JavaScript, customizing them to suit your needs. For example, with one simple change to the Content Stats widget setting the legendPosition value to "top", we can move the legend for the widget to render above the chart.

Download the View Templates

To get you started in customizing the views, I've packaged them all up into this handy zip file: Falafel Dashboard Widgets for Sitefinity View Templates. Simply extract this to your website project folder to get started customizing your widgets.

Next Time: How We Did It

These are just three simple ways you can customize the Falafel Dashboard Widgets for Sitefinity with custom Views. In our next post, we'll look at how we created a Custom Embedded Resource Resolver to make this all possible. Until then, grab your copy of the Falafel Dashboard Widgets for Sitefinity today and start enjoying customizing your widgets. I hope this was helpful!