Last updated
Was this helpful?
Last updated
Was this helpful?
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: . 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:
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.
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:
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 :
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:
Your dashboard should now look something like this:
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.
Import UmbUserDetailModel and UmbUserCollectionRepository:
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:
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.
The method requestCollection returns a promise, so let's await the data and save the data in our array:
Now that we have the data from the repository, we need to render the data.
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:
Add the following to the render method and create the _renderUser method:
To make it more readable, add some CSS as well:
We now should have our welcome dashboard filled showing a list of all users:
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.
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 .
You can also go further and with UI elements from the Umbraco UI Library.
Use resources and get data for your dashboard.
