Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Matthew Berner 47 posts 327 karma points
    Dec 14, 2020 @ 17:12
    Matthew Berner

    Custom Dashboard not appearing

    I have put togerher a custom dashboard. I have tried in the Content section and did not show and I am tryingnow in the setting section and it stll does not show.

    Here is my code` this lives in a folder call (/App_Plugins/KFADashboard/ and file is called "KFADashboard.html

    <div class="welcome">
        <h1>Weclome to KFA Umbarco Dashboard</h1>
        <p>This is Setting section, where our CSS and JavaScript live</p>

    Here is package.manifest also, it lives there as well:

        "dashboards": [
                "alias": "KFADashboard",
                "view": "/App_Plugins/KFADashboard/KFADashboard.html",
                "sections": [ "settings" ],
                "weight": -10,
                "access": [
                    { "grant": "admin" }

    I have created a language file as well, that lives in a folder (/App_Plugins/KFADashboard/lang/en-US.xml):

    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
      <area alias ="dashboardTabs">
        <key alias="KFADashboard">Welcome</key>

    I am missing somrthing? Thanks Matthew Berner


  • Matthew Berner 47 posts 327 karma points
    Dec 14, 2020 @ 18:35
    Matthew Berner

    I think I figured it out. I needed to added to Dashboard.config file. And now it works.

    If I would need to bring data from my database, can I do that on a custom dashboard. I have table in Umbraco called recipes and I would like to show a list of them,

  • Marc Goodson 2149 posts 14354 karma points MVP 9x c-trib
    Dec 14, 2020 @ 21:08
    Marc Goodson

    Hi Matthew

    Not sure if you've seen the following tutorial about creating a custom dashboard, that might be useful as a reference:

    Essentially you can add an additional javascript file in your manifest file that defines an angularJS controller, and your HTML view can then reference this controller.

    From the controller you can make a Get Request to an API controller.

    So if you create an API controller that inherits UmbracoAuthorizedApiController (to route it so it's only accessible via the backoffice) you create an endpoint that queries your custom database table, and returns the data over the API to the angularJS controller that can then add it to the $scope to be rendered in the custom dashboard view!



  • Matthew Berner 47 posts 327 karma points
    Dec 15, 2020 @ 16:40
    Matthew Berner

    Marc: Would I have to add a custom route in order to see the data in the dqashboard. I am using the tutorial to help me build the api. Here is what I got: In the App Folder, I have an area called "Recipes": Here is api Code:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Net.Http;
    using System.Web.Http;
    using Umbraco.Core.Persistence;
    using Umbraco.Web.WebApi;
    using Umbraco.Web.Editors;
    using Recipes.Models.pocos;
    namespace Recipes.Controllers
        public class RecipeApiController : UmbracoAuthorizedJsonController
            public class Recipe
                 int RecipeId { get; set; }
                 string RecipeName { get; set; }
                 DateTime DateSubmitted { get; set; }
            public IEnumerable<Recipe>GetAllRecipes()
                var db = UmbracoContext.Application.DatabaseContext.Database;
                var query = "SELECT RecipeId, RecipeName, DateSubmitted FROM CMSRecipes WHERE StatusId = 2";
                return db.Fetch<Recipe>(query);

    For the plugin it self, I have a view and two angular controllers, on thatr is resource:

    // adds the resource to umbraco.resources module:
        function ($q, $http, umbRequestHelper) {
            // the factory object returned
            return {
                // this calls the ApiController we setup earlier
                getAllrecipes: function () {
                    return umbRequestHelper.resourcePromise(
                        "Failed to retrieve all Recipe data");

    The other that works on view page: (recipe.picker.js)

        .controller("Recipe.RecipePickerController", function ($scope, recipeResource) {
            recipeResource.getAllrecipes().then(function (response) {
                $ =;

    Then when I tested I got a message, saying I was not autorized. Thanks Matt

  • Marc Goodson 2149 posts 14354 karma points MVP 9x c-trib
    Dec 16, 2020 @ 08:55
    Marc Goodson

    Hi Matt

    If you request the endpoint directly via the browser, then an UmbracoAuthorizedJsonController won't work as it will be missing the AngularJS csrf header on the request.

    If you change to inherit from: UmbracoAuthorizedApiController then does that then work for you?



  • Megha 10 posts 80 karma points notactivated
    Feb 19, 2024 @ 10:50

    Hello Matthew , I'm facing same problem i create view ,package.manifest and lang xml also but my custom dashboard not shown ..i dont know why ..pls help me to resolve this issue

    Regards, Megha

  • Liam Dilley 156 posts 382 karma points
    Feb 20, 2024 @ 05:54
    Liam Dilley

    What version are you doing this on though?

    The original post was years ago and depending on the version things are quite different.

Please Sign in or register to post replies

Write your reply to: