```
{% endcode %}
{% hint style="info" %}
The use of `vm` (short for view model) is to enable communication between the view and the controller.
{% endhint %}
4. Update the `package.manifest` file to load the additional controller JavaScript file when the dashboard is displayed:
{% code title="package.manifest" %}
```json
{
"dashboards": [
{
"alias": "welcomeDashboard",
"view": "/App_Plugins/CustomWelcomeDashboard/WelcomeDashboard.html",
"sections": [ "content" ],
"weight": -10,
"access": [
{ "deny": "translator" },
{ "grant": "admin" }
]
}
],
"javascript": [
"~/App_Plugins/CustomWelcomeDashboard/customwelcomedashboard.controller.js"
],
"css": [
"~/App_Plugins/CustomWelcomeDashboard/customwelcomedashboard.css"
]
}
```
{% endcode %}
Once done, we should receive the 'Hello world' alert every time the dashboard is reloaded in the content section.
## Step 5: Using Umbraco Angular Services and Directives
Umbraco has a fine selection of angular directives, resources, and services that you can use in your custom property editors and dashboards.
The details are in the [Backoffice UI](https://docs.umbraco.com/umbraco-cms/13.latest/reference/api-documentation). For this example, it would be nice to welcome the editor by name. To achieve this we can use the `userService` to customize our dashboard welcome message and increase friendliness.
1. Inject the `userService` into our AngularJS controller:
{% code title="customwelcomedashboard.controller.js" %}
```js
angular.module("umbraco").controller("CustomWelcomeDashboardController", function ($scope,userService) {
```
{% endcode %}
2. Use the `userService's` promise based `getCurrentUser()` method to get the details of the currently logged-in user:
{% code title="customwelcomedashboard.controller.js" %}
```js
angular.module("umbraco").controller("CustomWelcomeDashboardController", function ($scope, userService) {
var vm = this;
vm.UserName = "guest";
var user = userService.getCurrentUser().then(function(user) {
console.log(user);
vm.UserName = user.name;
});
});
```
{% endcode %}
{% hint style="info" %}
Notice you can use `console.log()` to write out to the browser console window what is being returned by the promise. This helps to debug, but also understand what properties are available to use.
{% endhint %}
3. Update the view to incorporate the current user's name in our Welcome Message:
{% code title="WelcomeDashboard.html" %}
```html
Default heading {{vm.UserName}}
```
{% endcode %}
### Add a list of edited articles
An editor may find it useful to see a list of articles they have been editing along with a link to load and continue editing. This could be instead of having to remember and find the item again in the Umbraco Content Tree.
We can make use of Umbraco's Angular resource for retrieving audit log information.
We add `logResource` to the method and use the `getPagedUserLog` method to return a list of activities the current user has performed recently.
1. Inject the `logResource` into our controller:
{% code title="customwelcomedashboard.controller.js" %}
```js
angular.module("umbraco").controller("CustomWelcomeDashboardController", function ($scope, userService, logResource) {
```
{% endcode %}
2. Add a property on our `ViewModel` to store the log information:
{% code title="customwelcomedashboard.controller.js" %}
```js
vm.UserLogHistory = [];
```
{% endcode %}
3. Add to our `WelcomeDashboard.html` View some markup using angular's `ng-repeat` to display a list of these log entries:
{% code title="WelcomeDashboard.html" %}
```html
We know what you edited last week...
- {{logEntry.nodeId}} - {{logEntry.logType}} - {{logEntry.timestamp | date:'medium'}}
```
{% endcode %}
4. Populate the array of entries using the `logResource` In our controller.
The `getPagedUserLog` method expects to receive a `JSON object` containing information to filter the log by:
{% code title="customwelcomedashboard.controller.js" %}
```js
var userLogOptions = {
pageSize: 10,
pageNumber: 1,
orderDirection: "Descending",
sinceDate: new Date(2018, 0, 1)
};
```
{% endcode %}
These options should retrieve the last ten activities for the current user in descending order since the start of 2018.
5. Pass the options into the `getPagedUserLog` like so:
{% code title="customwelcomedashboard.controller.js" %}
```js
logResource.getPagedUserLog(userLogOptions)
.then(function (response) {
console.log(response);
vm.UserLogHistory = response;
});
```
{% endcode %}
Take a look at the output of console.log of the response in your browser to see the kind of information retrieved from the log:
```js
{pageNumber: 1, pageSize: 10, totalPages: 1, totalItems: 1, items: Array(1)}
items: Array(1)
0:
$$hashKey: "object:1289"
comment: "Published languages: English (United States)"
entityType: "Document"
logType: "PublishVariant"
nodeId: 1055
parameters: "English (United States)"
timestamp: "2019-10-10T14:49:55.223Z"
userAvatars: []
userId: 1
userName: "Jakob N"
pageNumber: 1
pageSize: 10
totalItems: 1
totalPages: 1
```
It's nearly all we need but missing information about the item that was saved and published.
We can use the `entityResource`, another Umbraco Angular resource to enable us to retrieve more information about an entity given its id.
6. Inject the following code into our angular controller:
{% code title="customwelcomedashboard.controller.js" %}
```js
angular.module("umbraco").controller("CustomWelcomeDashboardController", function ($scope, userService, logResource, entityResource) {
```
{% endcode %}
We need to loop through the log items from the `logResource`. Since this includes everything, we need to filter out activities we're not interested in eg, Macro Saves, or DocType Saves. Generally, we need the entry in the log to have a `nodeId`, a `logType` of 'save' and an entity type of Media or Content.
The `entityResource` has a `getById` method that accepts the `ID` of the item and the entity `type` to retrieve useful information about the entity. For example, its Name and Icon.
The `getById` method is supported on the following entity types:
* Document (content)
* Media
* Member Type
* Member Group
* Media Type
* Document Type
* Member
* Data Types
This needs to be defined before we loop through the entries.
Putting this together it will look like this:
{% code title="customwelcomedashboard.controller.js" %}
```js
logResource.getPagedUserLog(userLogOptions)
.then(function (response) {
console.log(response);
vm.UserLogHistory = response;
// define the entity types that we care about, in this case only content and media
var supportedEntityTypes = ["Document", "Media"];
// define an empty array "nodes we know about"
var nodesWeKnowAbout = [];
// define an empty array "filtered log entries"
var filteredLogEntries = [];
// loop through the entries in the User Log History
angular.forEach(response.items, function (item) {
// if the item is already in our "nodes we know about" array, skip to the next log entry
if (nodesWeKnowAbout.includes(item.nodeId)) {
return;
}
// if the log entry is not for an entity type that we care about, skip to the next log entry
if (!supportedEntityTypes.includes(item.entityType)) {
return;
}
// if the user did not save or publish, skip to the next log entry
if (item.logType !== "Save" && item.logType !== "Publish") {
return;
}
// if the item does not have a valid nodeId, skip to the next log entry
if (item.nodeId < 0) {
return;
}
// now, push the item's nodeId to our "nodes we know about" array
nodesWeKnowAbout.push(item.nodeId);
// use entityResource to retrieve details of the content/media item
var ent = entityResource.getById(item.nodeId, item.entityType).then(function (ent) {
console.log(ent);
item.Content = ent;
});
// get the edit url
if (item.entityType === "Document") {
item.editUrl = "content/content/edit/" + item.nodeId;
}
if (item.entityType === "Media") {
item.editUrl = "media/media/edit/" + item.nodeId;
}
// push the item to our "filtered log entries" array
filteredLogEntries.push(item);
// end of loop
});
// populate the view with our "filtered log entries" array
vm.UserLogHistory.items = filteredLogEntries;
// end of function
});
```
{% endcode %}
7. Update the view to use the additional retrieved entity information:
{% code title="WelcomeDashboard.html" %}
```js
We know what you edited last week...
```
{% endcode %}
We now have a list of recently saved content and media on our Custom Dashboard:
{% hint style="info" %}
The URL `/umbraco/#/content/content/edit/1234` is the path to open up a particular entity (with id 1234) ready for editing.
The `logResource` has a few bugs prior to version 8.1.4. If you are on a lower version this may not give the expected result.
{% endhint %}
### Creating a shortcut for creating new content
A key user journeys an editor will make in the backoffice is to create content. If it is a person's job to create new blog entries, why not create a handy shortcut to help them achieve this common task?
We can add a shortcut to allow the users to add a blog post.
To do this we add the following code to our view:
{% code title="WelcomeDashboard.html" %}
```html
```
{% endcode %}
`1065` is the `ID` of our blog section and `blogPost` is the alias of the type of document we want to create.
At this point we are done with the tutorial, your files should contain this:
CustomWelcomeDashboardController
{% code title="customwelcomedashboard.controller.js" %}
```javascript
// Some angular.module("umbraco").controller("CustomWelcomeDashboardController", function ($scope, userService, logResource, entityResource) {
var vm = this;
vm.UserName = "guest";
var user = userService.getCurrentUser().then(function (user) {
console.log(user);
vm.UserLogHistory = [];
vm.UserName = user.name;
});
var userLogOptions = {
pageSize: 10,
pageNumber: 1,
orderDirection: "Descending",
sinceDate: new Date(2018, 0, 1)
};
logResource.getPagedUserLog(userLogOptions)
.then(function (response) {
console.log(response);
vm.UserLogHistory = response;
// define the entity types that we care about, in this case only content and media
var supportedEntityTypes = ["Document", "Media"];
// define an empty array "nodes we know about"
var nodesWeKnowAbout = [];
// define an empty array "filtered log entries"
var filteredLogEntries = [];
// loop through the entries in the User Log History
angular.forEach(response.items, function (item) {
// if the item is already in our "nodes we know about" array, skip to the next log entry
if (nodesWeKnowAbout.includes(item.nodeId)) {
return;
}
// if the log entry is not for an entity type that we care about, skip to the next log entry
if (!supportedEntityTypes.includes(item.entityType)) {
return;
}
// if the user did not save or publish, skip to the next log entry
if (item.logType !== "Save" && item.logType !== "Publish") {
return;
}
// if the item does not have a valid nodeId, skip to the next log entry
if (item.nodeId < 0) {
return;
}
// now, push the item's nodeId to our "nodes we know about" array
nodesWeKnowAbout.push(item.nodeId);
// use entityResource to retrieve details of the content/media item
var ent = entityResource.getById(item.nodeId, item.entityType).then(function (ent) {
console.log(ent);
item.Content = ent;
});
// get the edit url
if (item.entityType === "Document") {
item.editUrl = "content/content/edit/" + item.nodeId;
}
if (item.entityType === "Media") {
item.editUrl = "media/media/edit/" + item.nodeId;
}
// push the item to our "filtered log entries" array
filteredLogEntries.push(item);
// end of loop
});
// populate the view with our "filtered log entries" array
vm.UserLogHistory.items = filteredLogEntries;
// end of function
});
});
```
{% endcode %}
WelcomeDashboard.html
{% code title="WelcomeDashboard.html" %}
```html
Default heading {{vm.UserName}}
Default bodytext
Default copyright
We know what you edited last week...
```
{% endcode %}
## **Extending with Custom External Data**
You can create custom Angular services/resources to interact with your own serverside data using the`UmbracoAuthorizedJsonController`.
Have a look at the [property editor tutorial](https://docs.umbraco.com/umbraco-cms/13.latest/tutorials/creating-a-property-editor/part-4) step which explains how this can be done.
## Going Further
With all of the steps completed, you should have a functional dashboard that will let the logged-in user see the changes they made! Hopefully, this tutorial has given you some ideas on what is possible to do when creating a dashboard.
You can also go further and [extend the dashboard](https://docs.umbraco.com/umbraco-cms/13.latest/tutorials/creating-a-custom-dashboard/extending-the-dashboard-using-the-umbraco-ui-library) with UI elements from the Umbraco UI Library.
Remember to check out the [Angular API docs](https://docs.umbraco.com/umbraco-cms/13.latest/reference/api-documentation) for more info on all of the resources and services you can find for the backoffice.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.umbraco.com/umbraco-cms/13.latest/tutorials/creating-a-custom-dashboard.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
