Step‐by‐Step: Add `welcomeDashboard` to the Content Tab in Umbraco 8 - FadiZahhar/umbraco8showandtell GitHub Wiki

1. Create Your Custom Dashboard Folder

Create the folder structure:

/App_Plugins/WelcomeDashboard/

2. Create the Dashboard View (HTML)

Create this file:

/App_Plugins/WelcomeDashboard/welcomedashboard.html

Add simple HTML content, for example:

<div ng-controller="WelcomeDashboardController">
    <h2>Welcome to the Content Section!</h2>
    <p>This is your custom welcome dashboard.</p>
    <p>{{greeting}}</p>
</div>

3. (Optional) Add AngularJS Controller for Dynamic Content

Create this file:

/App_Plugins/WelcomeDashboard/welcomedashboard.controller.js

Add:

angular.module('umbraco').controller('WelcomeDashboardController', function ($scope) {
    $scope.greeting = "Here you can manage your website content. Enjoy your work!";
});

4. (Optional) Add a CSS File

If you want some custom styles:

/App_Plugins/WelcomeDashboard/welcomedashboard.css

Sample CSS:

.welcome-dashboard {
    padding: 32px;
    background: #fafbfd;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

And update your HTML:

<link rel="stylesheet" type="text/css" href="/App_Plugins/WelcomeDashboard/welcomedashboard.css" />
<div class="welcome-dashboard" ng-controller="WelcomeDashboardController">
    <h2>Welcome to the Content Section!</h2>
    <p>This is your custom welcome dashboard.</p>
    <p>{{greeting}}</p>
</div>

5. Register the Dashboard in dashboard.config

Open this file:

/config/dashboard.config

Add a new dashboard tab inside the Content section:

Find (or create if missing):

<section alias="content">
    ...
</section>

Insert your dashboard tab (can be first or last tab):

<section alias="content">
  <tab caption="Welcome Dashboard">
    <control>/App_Plugins/WelcomeDashboard/welcomedashboard.html</control>
  </tab>
  <!-- ... (other default tabs like 'Content', 'Recycle Bin', etc.) ... -->
</section>

Your full section might look like:

<section alias="content">
  <tab caption="Welcome Dashboard">
    <control>/App_Plugins/WelcomeDashboard/welcomedashboard.html</control>
  </tab>
  <tab caption="Content">
    <control>views/dashboard/content/contentoverview.html</control>
  </tab>
  <tab caption="Recycle Bin">
    <control>views/dashboard/content/recyclebin.html</control>
  </tab>
</section>

6. Recycle IIS App Pool / Restart Website

To see your changes, recycle the application pool or restart your site (you can also just touch the web.config).


7. Test Your Welcome Dashboard

  • Log in to Umbraco backoffice.
  • Go to the Content section (left navigation).
  • You’ll see a new Welcome Dashboard tab at the top.
  • You should see your custom message and any dynamic content.

Summary Checklist

  • Create /App_Plugins/WelcomeDashboard/welcomedashboard.html
  • (Optional) Add welcomedashboard.controller.js
  • (Optional) Add welcomedashboard.css
  • Register in /config/dashboard.config under <section alias="content">
  • Recycle/restart
  • Test in backoffice

Example Directory Structure:

/App_Plugins/
    /WelcomeDashboard/
        welcomedashboard.html
        welcomedashboard.controller.js
        welcomedashboard.css
/config/dashboard.config

Extra: Troubleshooting

  • Not showing up?

    • Double-check the file paths and aliases in dashboard.config.
    • Make sure files are published/deployed if you’re on a remote server.
    • Ensure your browser cache is cleared (CTRL+F5).
⚠️ **GitHub.com Fallback** ⚠️