Extending the Dashboard using the Umbraco UI library

Now that we have a fully functioning dashboard we might want to make it look prettier. To do this we can use the Umbraco UI library.

The Umbraco UI Library is a set of web components that we can use to build Umbraco User Interfaces.

To get started using the UI library, the easiest way is to add the Content Delivery Network (CDN) script.

Add it at the bottom of the WelcomeDashboard.html file.

WelcomeDashboard.html
<script src="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui@latest/dist/uui.min.js"></script>

Once it has been added, we can start building our UI for our editors.

Since we are showing our editors their recently edited content nodes on this dashboard, it makes sense to use the Content Node Card:

Content Node Card

  1. Wrap our unordered list and its content in the <uui-card-content-node> so it will look like this:

Make sure that the card shows the name of the content nodes that the editors recently worked with.

  1. Replace "The card" value of the name property in the <uui-card-content-node> with {{logEntry.Content.name}} so it will look like this:

  1. Move the ng-repeat parameter from the tag below into the uui-card-content-node as well:

At this point, the code looks like this:

We want the editors to go directly to the content node,

  1. Move the <a href="/Umbraco/#/{{logEntry.editUrl}}">{{logEntry.Content.name}} <span ng-if="logEntry.comment">- {{logEntry.comment}}</span></a> line down under the <uui-card-content-node>.

  2. Add some text to the <a> tag like "click here" or "See Node".

This is how the code should look like this:

  1. Go ahead and update the <ul> tag with the style from the UI library Card with the following:

  1. Remove the <i class="{{logEntry.Content.icon}}"></i> from our list as we won't be using the icon as the card has one by default.

Once that is done, our code looks like this:

  1. Add the styling from the Content Node Card to our <li> tag as well so it will look like this:

Once the styling has been added, we are done editing the card.

And your file should look like this:

The last thing we need to do is to add a bit of styling to the UI.

  1. Go to the customwelcomedashboard.css file and add the following:

Once it has been added, we are done and it should look something like this:

Custom Dashboard extended with UI Library Card
PreviousCreating a Custom DashboardNextCreating a Property Editor

Last updated

Was this helpful?