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

Create the folder structure:

/App_Plugins/WelcomeDashboard/

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>

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!";
});

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>

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>

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

• 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.

• 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

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

• 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).