Code Monkey home page Code Monkey logo

skybrud.umbraco.dashboard's Introduction

Skybrud.Umbraco.Dashboard

This package can be divided and described in two seperate parts:

  1. The base of this package is to provide a way to manipulate tabs and panels in dashboards in Umbraco 7 - all by using C#. Currently in Umbraco, dashboards needs to be configured in ~/config/Dashboard.config, but this package lets you add news tabs and panels as well as minipulating existing tabs and panels in Umbraco. Since this was thought as something other packages could use as well, I have created an issue on the Umbraco tracker since I believe this is something that should be in the Umbraco core.

  2. Secondly, this package adds a few panels can you can add to a dashboard - eg. a panel for showing Analytics statistics for sites in your Umbraco installation. This package won't add any panels by default, so you need to do this by writing a bit of code yourself - you can find a bit of inspiration in the examples below.

Links

Installation

The code in this repository has been released as v1.0.0-beta1. The beta label is primarily because I hadn't testet the code thoroughly at the time of the release, but I haven't experienced any issues since the beta release.

  1. NuGet Package
    Install this NuGet package in your Visual Studio project. Makes updating easy.

  2. ZIP file
    Grab a ZIP file of the latest release; unzip and the files to the root directory of your website.

Quick example

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());
    }

}

So why does this work?

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.

The Future

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:

An example

skybrud.umbraco.dashboard's People

Contributors

abjerner avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

skybrud.umbraco.dashboard's Issues

Improve the logic used for translations

The current logic is based on something I wrote for Umbraco 6.x. It still works in Umbraco 7, but ideally we should use the new translation configuration for plugins introduced by Umbraco for 7.3+.

Add dependency for Skybrud.Social.Core and Skybrud.Social.Google

The dashboard currently has a dependency for Skybrud.Social, which contains both the core functionality as well as the Google/Analytics implementation.

In the future, Skybrud.Social will be replaced by Skybrud.Social.Core for the core functionality, and each service as it's own package - eg. Skybrud.Social.Google. This process isn't complete yet, but the Skybrud.Social dependency should be replaced by the two new packages before coming out of beta.

cant find Skybrud.Dashboard.config after installing nuget package

I would like to add a Google Analytics panel to an Umbraco Dashboard.
I have installed Umbraco 7.12.4, then, i have installed the nuget package v1.0.0-beta4
Then i log into Umbraco and the Content section dashboard does not load.
Looking into the log file, i see this error:

ERROR Skybrud.Umbraco.Dashboard.DashboardContext - Unable to load configuration file for the Dashboard: Could not find file 'C:\Webs_demos\Skybrud.Umbraco.Dashboard\Config\Skybrud.Dashboard.config'.
System.IO.FileNotFoundException: Could not find file 'C:\Webs_demos\Skybrud.Umbraco.Dashboard\Config\Skybrud.Dashboard.config'.
File name: 'C:\Webs_demos\Skybrud.Umbraco.Dashboard\Config\Skybrud.Dashboard.config'
at System.IO.__Error.WinIOError(Int32 errorCode, String maybeFullPath)
at System.IO.FileStream.Init(String path, FileMode mode, FileAccess access, Int32 rights, Boolean useRights, FileShare share, Int32 bufferSize, FileOptions options, SECURITY_ATTRIBUTES secAttrs, String msgPath, Boolean bFromProxy, Boolean useLongPath, Boolean checkHost)
at System.IO.FileStream..ctor(String path, FileMode mode, FileAccess access, FileShare share, Int32 bufferSize, FileOptions options, String msgPath, Boolean bFromProxy, Boolean useLongPath, Boolean checkHost)
at System.IO.StreamReader..ctor(String path, Encoding encoding, Boolean detectEncodingFromByteOrderMarks, Int32 bufferSize, Boolean checkHost)
at System.IO.File.InternalReadAllText(String path, Encoding encoding, Boolean checkHost)
at System.IO.File.ReadAllText(String path)
at Skybrud.Umbraco.Dashboard.Config.DashboardConfiguration.Load(String path)
at Skybrud.Umbraco.Dashboard.DashboardContext..ctor()

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.