Skip to content

Uddate: Creating a custom dashboard - the new backoffice #5444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 22, 2023
Merged

Uddate: Creating a custom dashboard - the new backoffice #5444

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
00122d8
Replace 'note that'
erikjanwestendorp Sep 21, 2023
0a15bae
Remove the word simple
erikjanwestendorp Sep 21, 2023
2bac320
Simple
erikjanwestendorp Sep 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions new-backoffice/tutorials/creating-a-custom-dashboard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,14 +99,14 @@ Notice that the file for our dashboard extension is in the root of our WelcomeDa
For more information about the `umbraco-package.json` file, read the article [Package Manifest](../extending/package-manifest.md). You should also read the [Dashboards](../extending/dashboards.md) article for more information about dashboard configurations.

{% hint style="info" %}
Please note that the file`umbraco-package.json` is loaded into memory when Umbraco starts up. If you are changing or adding new configurations you will need to start and stop your application for it to be loaded.
Please be aware that the file`umbraco-package.json` is loaded into memory when Umbraco starts up. If you are changing or adding new configurations you will need to start and stop your application for it to be loaded.
{% endhint %}

## 2. Creating the Dashboard Web Component

Next, let's create a new ts file called `welcome-dashboard.element.ts`. This file is our web component and will contain all our HTML, CSS, and logic.

Let's start with setting the web component with some simple HTML and CSS:
Let's start with setting the web component with some HTML and CSS:

{% code title="welcome-dashboard.element.ts" lineNumbers="true" %}
```typescript
Expand Down Expand Up @@ -147,6 +147,6 @@ You can now start up the Backoffice and see our new dashboard in the content sec

## Going Further

With all the steps completed, you should have a simple dashboard welcoming your users to the Backoffice.
With all the steps completed, you should have a dashboard welcoming your users to the Backoffice.

In the next session, we will look into how to add localization to the dashboard using our own custom translations.