For now, this is a project that lets you add custom tabs and panels to a dashboard in Umbraco - all by using C#.
By default, the "Content" section in Umbraco 7 will have two tabs - "Get Started" and "Change Password". Let us for this demo play around with those tabs.
Given this project, we can implement the IDashboardPlugin interface, and use the GetDashboard method to do our thing.
The plugin will change the tab name from "Get Started" to "Umbraco FTW" (because why not?), and add a new tab with our custom panel (or property as called internally in Umbraco). Properties of the DashboardDataProperty class will be available to play around with in AngularJS ;)
public class DemoDashboardPlugin : IDashboardPlugin {
public void GetDashboard(string section, List<DashboardTab> tabs) {
// Skip if not the dashboard for "content"
if (section != "content") return;
// Find the "Get Started" tab
DashboardTab getStarted = tabs.FirstOrDefault(x => x.Alias == "GetStarted");
if (getStarted == null) return;
// Adjust the label a bit
getStarted.Label = "Umbraco FTW";
// Add a new tab
tabs.Add(new DashboardTab {
Label = "A lot of bacon",
Alias = "bacon",
Properties = new List<DashboardProperty> {
new DashboardDataProperty("Demo") {
Data = new {
a = 123,
b = 456,
c = 789
}
}
}
});
}
}The plugin doesn't get picked up by it self, so we need to add it our selves. This can be done as:
public class Startup : ApplicationEventHandler {
protected override void ApplicationStarted(UmbracoApplicationBase app, ApplicationContext ctx) {
DashboardContext.Current.Plugins.Add(new DemoDashboardPlugin());
}
}In a normal Umbraco installation, you can only add tabs and panels by editing the /config/Dashboard.config file (or by writing some code, that modifies that file). When Umbraco needs to render the dashboard for the "Content" section, it will make a request to /umbraco/backoffice/UmbracoApi/Dashboard/GetDashboard?section=content, and the response will be an array of the tabs for that section.
However with a little hack, we can change which URL that Umbraco will request, so Umbraco instead will make a request to our custom Dashboard WebApi controller at /umbraco/backoffice/Skybrud/Dashboard/GetDashboard?section=content.
In the future, this project will also feature panels/properties that you can add to your dashboard. Have a look at the screenshot below.
While the Mailchimp and NuGet boxes are currently just mockups, the big box with the statistics pulls information directly from Google Analytics.
So when your editors log in, they could be presented with a view like this:
