# Adding functionality to the Dashboard
## Overview
This is the third part of our guide to building a custom dashboard. This part continues work on the dashboard we built in part two: [Add localization to the dashboard](https://docs.umbraco.com/umbraco-cms/tutorials/creating-a-custom-dashboard/adding-localization-to-the-dashboard). But it goes further to show how to add functionality and data to our dashboard.
The steps we will go through in this part are:
1. [Contexts](#contexts)
2. [Getting data from the server](#getting-data-from-the-server)
3. [Rendering the data from the server](#render-the-data)
## Contexts
Umbraco has a large selection of contexts that you can use in your custom Property Editors and Dashboards. For this example, we will welcome the editor by name. To achieve this we can make use of the Umbraco Contexts.
To get information on the current user that's currently logged in, we first need to get the context and its token. We use the Current User Context to receive the user that is currently logged in.
1. Import the `UMB_CURRENT_USER_CONTEXT` and the `type UmbCurrentUserModel` for the logged-in user. We also need to update the import from lit decorators to get `state` in the `welcome-dashboard.element.ts` file:
{% code title="welcome-dashboard.element.ts" lineNumbers="true" %}
```typescript
import { LitElement, css, html, customElement, state } from "@umbraco-cms/backoffice/external/lit";
import { type UmbCurrentUserModel, UMB_CURRENT_USER_CONTEXT } from "@umbraco-cms/backoffice/current-user";
```
{% endcode %}
2. Now that we have access to the Current User Context, we can consume it in the constructor to obtain the current user. We do this using the `consumeContext` method, which is available on our element because we extended using `UmbElementMixin`.\
\
As the first thing in the `export class MyWelcomeDashboardElement` add the following to the element implementation :
{% code title="welcome-dashboard.element.ts" %}
```typescript
...
@state()
private _currentUser?: UmbCurrentUserModel;
constructor() {
super();
this.consumeContext(UMB_CURRENT_USER_CONTEXT, (instance) => {
this._observeCurrentUser(instance);
});
}
private async _observeCurrentUser(instance: typeof UMB_CURRENT_USER_CONTEXT.TYPE) {
this.observe(instance.currentUser, (currentUser) => {
this._currentUser = currentUser;
});
}
...
```
{% endcode %}
{% hint style="info" %}
The entire `welcome-dashboard.element.ts` file is available for reference at the end of the step to confirm your placement for code snippets.
{% endhint %}
3. Now that we have the current user, we can access a few different things. Let's get the `name` of the current user, so that we can welcome the user:
{% code title="welcome-dashboard.element.ts" %}
```typescript
render() {
return html`
Welcome
${this._currentUser?.name ?? "Unknown"}!
This is the Backoffice. From here, you can modify the content,
media, and settings of your website.
`;
}
static styles = [
css`
:host {
display: block;
padding: 24px;
}
`,
];
}
export default MyWelcomeDashboardElement;
declare global {
interface HTMLElementTagNameMap {
'my-welcome-dashboard': MyWelcomeDashboardElement;
}
}
```
{% endcode %}
## Getting data from the server
Let's dive deeper into some new resources and see what we can do with them.
Before we can get data from the server we need to start up the repository that handles said data.
Let's say we want to get the data of all of the users of our project.
* To get the user data, we need to start up the user repository.
* We are also going to need a type for our user details.
1. Import `UmbUserDetailModel` and `UmbUserCollectionRepository`:
{% code title="welcome-dashboard.element.ts" %}
```typescript
import { type UmbUserDetailModel, UmbUserCollectionRepository } from '@umbraco-cms/backoffice/user';
```
{% endcode %}
2. Start up the repository and then create a new `async` method that we call from the constructor. We are also going to create a new `state` for our array that is going to contain our user details:
{% code title="welcome-dashboard.element.ts" %}
```typescript
@state()
private _userData: Array = [];
#userRepository = new UmbUserCollectionRepository(this);
constructor() {
...
this._getPagedUserData();
}
private async _getPagedUserData() {
//this._userRepository
}
```
{% endcode %}
3. Notice that the user repository has a lot of methods that we can use. We are going to use `requestCollection` to get all the users.
Options from the user repository
The method `requestCollection` returns a promise, so let's `await` the data and save the data in our array:
```typescript
private async _getPagedUserData() {
const { data } = await this.#userRepository.requestCollection();
this._userData = data?.items ?? [];
}
```
## Render the Data
Now that we have the data from the repository, we need to render the data.
1. We are going to use the `repeat` directive to loop through the array of users and render each user. We are also going to create a new method `_renderUser` that will render the user details.\
\
Add the `repeat` directive to the import:
{% code title="welcome-dashboard.element.ts" %}
```typescript
import { LitElement, css, html, customElement, state, repeat } from "@umbraco-cms/backoffice/external/lit";
```
{% endcode %}
2. Add the following to the `render` method and create the `_renderUser` method:
{% code title="welcome-dashboard.element.ts" %}
```typescript
render() {
return html`
...
...
`;
}
```
{% endcode %}
3. To make it more readable, add some CSS as well:
{% code title="welcome-dashboard.element.ts" %}
```typescript
static styles = [
css`
:host {
display: block;
padding: 24px;
}
#users-wrapper {
border: 1px solid lightgray;
}
.user {
padding: 5px 10px;
}
.user:not(:first-child) {
border-top: 1px solid lightgray;
}
`,
];
```
{% endcode %}
{% hint style="info" %}
We recommend using variables for colors and sizing. See why and how you could achieve this in the next part where we will use the [Umbraco UI Library](https://docs.umbraco.com/umbraco-cms/tutorials/creating-a-custom-dashboard/extending-the-dashboard-using-umbraco-ui-library).
{% endhint %}
We now should have our welcome dashboard filled showing a list of all users:
Dashboard with all users. Output may vary depends on your users.
`;
}
static styles = [
css`
:host {
display: block;
padding: 24px;
}
#users-wrapper {
border: 1px solid lightgray;
}
.user {
padding: 5px 10px;
}
.user:not(:first-child) {
border-top: 1px solid lightgray;
}
`,
];
}
export default MyWelcomeDashboardElement;
declare global {
interface HTMLElementTagNameMap {
'my-welcome-dashboard': MyWelcomeDashboardElement;
}
}
```
{% endcode %}
## Going Further
With all of the steps completed, you should have a functional dashboard that welcomes the user and shows a list of all users. 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/tutorials/creating-a-custom-dashboard/extending-the-dashboard-using-umbraco-ui-library) with UI elements from the Umbraco UI Library.
