Falafel Dashboard is a new state-of-the-art dashboard for Sitefinity MVC. Falafel Dashboard can be easily extended by the introduction of custom widgets for the Dashboard. In this column, we are going to create a “Hello World” widget and add it to the Dashboard.
The “Hello World” widget albeit very simple resembles the other widgets that are included out-of-the-box by being a standard Sitefinity MVC widget.
Let us start by creating the “Hello World” MVC widget:
The model:
namespace SitefinityWebApp.Mvc.Areas.HelloWorld.Models
{
public class HelloWorldViewModel
{
public string Message { get; set; }
}
}
The view
@model SitefinityWebApp.Mvc.Areas.HelloWorld.Models.HelloWorldViewModel
<div class="dashboard_right_now">
<strong>@Model.Message</strong>
</div>
The controller:
using System;
using System.Linq;
using System.Web.Mvc;
using FalafelDashboard.Common;
using FalafelDashboard.Configuration;
using SitefinityWebApp.Mvc.Areas.HelloWorld.Models;
using Telerik.Sitefinity;
using Telerik.Sitefinity.Configuration;
using Telerik.Sitefinity.Modules.Pages;
using Telerik.Sitefinity.Pages.Model;
namespace SitefinityWebApp.Mvc.Areas.HelloWorld.Controllers
{
/// <summary>
/// Controller that provides functionality
/// </summary>
public class HelloWorldController : Controller
{
#region Constants and Fields
#endregion
#region Properties
/// <summary>
/// The message to display in the hello world view
/// </summary>
public string Message { get; set; }
#endregion
#region Methods
public ActionResult Index()
{
try
{
if (Utils.IsWidgetAllowed("HelloWorld"))
{
//INITIALIZE VIEW MODEL
var model = new HelloWorldViewModel { Message = "Hello world dashboard widget"};
//TODO: POPULATE VIEW MODEL WITH DATA
//RETURN AREA VIEW WITH VIEW MODEL
return View("../../Areas/HelloWorld/Views/HelloWorld/Index", model);
}
return View("../../Areas/HelloWorld/Views/HelloWorld/Unauthorized");
}
catch (Exception ex)
{
return View("../../Areas/HelloWorld/Views/HelloWorld/Error", ex);
}
}
#endregion
}
}
Now it's time to add the widget to the dashboard. For this purpose, we will go to Administration -> Settings -> Advanced Settings -> Falafel Dashboard -> Widget and click on Create New
Et Voila, now you should see the HelloWorld Widget on your new Dashboard
You can download the source code from here