Can I use this?

This feature is available since Webiny v5.40.0.

What you’ll learn
  • how to replace the default Webiny dashboard

Overview
anchor

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
anchor

The complete code shown in this article can also be found in our webiny-examples repository.

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
anchor

To replace the dashboard, in the extensions/adminDashboard/src/index.tsx file, we place the following code:

extensions/adminDashboard/src/index.tsx

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.

Custom DashboardCustom Dashboard
(click to enlarge)