Customizing the MVC Views of the Falafel Dashboard Widgets for Sitefinity

By February 24, 2014Sitefinity

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:

Sitefinity-Falafel-Dashboard-Widgets-System-Health-Default-View

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.

 


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.

Sitefinity-Falafel-Dashboard-Widgets-System-Health-Custom

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.

Sitefinity-Falafel-Dashboard-Widgets-Forum-Discussions-Modified

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.

Sitefinity-Falafel-Dashboard-Widgets-Content-Stats-Default  Sitefinity-Falafel-Dashboard-Widgets-Content-Stats-Modified

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!

The following two tabs change content below.