Admin Area > Extending Functionality
Custom Dashboard
Learn how to replace the default Dashboard, and implement a custom one.
This feature is available since Webiny v5.40.0.
- how to replace the default Webiny dashboard
Overview
In this article, we show how we can replace the default dashboard in the Webiny Admin app. This is useful when we want to create a custom dashboard that better suits our needs.
Getting Started
To get started, we first scaffold a new Admin extension in the /extensions/adminDashboard
folder, via the following command:
yarn webiny scaffold extension \ --type admin \ --name adminDashboard \ --dependencies @webiny/app-serverless-cms
Once the extension is scaffolded, in order to start developing, we run the followingwebiny watch
command:
yarn webiny watch admin --env ENVIRONMENT_NAME
Replacing the Default Dashboard
To replace the dashboard, in the extensions/adminDashboard/src/index.tsx
file, we place the following code:
As we can see, we first define the MyDashboard
React component, which is actually the decorated version of the original Dashboard
component, imported from the @webiny/app-serverless-cms
package.
Note that, when we say decorated, we basically mean that the component has been wrapped with another component, which ultimately affects the functionality of the wrapped component, or, the decoratee.
In our case, we are replacing the default Dashboard
component that renders the default dashboard, with our own, which just renders a simple greeting message.
To retrieve the currently logged in Admin user, we’ve also used the useSecurity
React hook. As we can see, the hook lets us easily retrieve the currently logged-in identity, whose name we’re displaying on our custom dashboard.