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).
- Double-check the file paths and aliases in