Development

Creating Custom Dashboards in Umbraco 17: A Beginner's Tutorial

Published

Reading Time

3 minutes

Ever wish your Umbraco back office felt as custom as your morning coffee order? Good news—Umbraco 17 gives you the tools to craft dashboards that put the info you want front and center. No more endless clicking, no more searching for stats. Now it's just your data, your way.

Why bother with a custom dashboard?

Picture starting your day and seeing all your KPIs, content stats, and action items at a glance. With custom dashboards in Umbraco 17, you can:

  • Boost productivity by gathering all the key data in one place.

  • Save time since you won’t have to dig through menus.

  • Impress your teammates with a back office setup suited to your workflow.

Getting Started: The Basics

Set Up Your Project

First, make sure Umbraco 17 is installed and working. If you haven’t upgraded yet, maybe put that on your to-do list once you finish this article!

Create the Dashboard Manifest

Dashboards in Umbraco use manifest files—the dashboard's blueprint. In your project, add a manifest JSON file (for example, dashboard.manifest.json) inside the /App_Plugins/YourDashboard/ folder. It might look like this:

{
  "dashboards": [
    {
      "alias": "customDashboard",
      "view": "/App_Plugins/YourDashboard/customDashboard.html",
      "sections": [ "content" ],
      "weight": 10,
      "hideWhenNoAccess": true
    }
  ]
}

Build the Dashboard View

Now, create the HTML file you pointed to in the manifest (customDashboard.html). Here’s a simple starter:

<div>
    <h2>Welcome to Your Custom Dashboard!</h2>
    <p>Here’s where you can add your widgets, stats, or even a daily joke (because honestly, who can’t use a laugh at work?).</p>
</div>

Add Controllers (Optional)

Want your data to update and come alive? Write AngularJS controllers to fetch APIs or other data sources. Umbraco 17 hasn’t abandoned AngularJS in the back office, so you can still use your existing JavaScript skills.

Register and Test

Restart your site, log into the back office, and check the section you picked (Content, Media, etc.). Your custom dashboard should be right there, ready to make your day smoother.

Pro Tips

  • Adjust the weight property in your manifest to change the dashboard’s order.

  • Use hideWhenNoAccess: true for better security and a cleaner user experience.

  • Try different widgets—the dashboard’s yours to shape.

Wrapping up

Building a custom dashboard in Umbraco 17 isn’t just for show. It’s about making your workspace fit you. So personalize it, optimize your flow, and hey, toss in a joke or two—everyone codes a little better with a smile.

Want more details? Check out:
https://docs.umbraco.com/umbraco-cms/tutorials/creating-a-custom-dashboard