Customize the Admin panel welcome page (Strapi 5) | Voters

Customize the Admin panel welcome page (Strapi 5)

in progress

Marco Wuethrich Pr

In v3 you could override the admin dashboard as follows: https://forum.strapi.io/t/customize-the-dashboard-welcome-page/939/2
This no longer works in v4, or in other words no one in the community knows how to do this.
The patch-package method is not a sustainable solution and not clean, I see that some people in the community would also like to know how to solve this in v4.

June 17, 2022

Lucas Boilly

Hello everyone 👋
We’re currently working on a new version of the admin's homepage! As usual, we would like to know what you’re expecting from it, that’s why we prepared a very short survey for you:
https://strapi.typeform.com/to/TfhyY0pt
Thanks and have a great week!

Carey

After much trial and error, I've been able to replace the default dashboard. My solution does have the limitation of not being able to directly access the Strapi environment, but that wasn't a requirement for me. Basically, what I did was inject custom JS to replace the existing/default content. Here's the breakdown:
Add custom javascript file to the 'public' folder. In my case, I created 'custom-homepage.js'
Add code to the custom JS file to use a MutationObserver to listen for when the DOM is loaded and the main 'div' element with the default dashboard content is loaded, and then replace it with your own. (Below is a condensed version of my own code).
--
const targetNode = document.getElementById('strapi');
const config = { childList: true, subtree: true };
const callback = function (mutationsList, observer) {
const currentPath = window.location.pathname;
if (currentPath === '/admin' || currentPath === '/admin/') {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
const customContentExists = document.querySelector('#lean-dashboard');
const mainContainer = document.querySelector('main');
if (mainContainer && !customContentExists) {
mainContainer.innerHTML = `
<div id="lean-dashboard">
<h2>Welcome 👋</h2>
<p>Select an option from the left to get started, or choose from one of the shortcuts provided below.</p>
<div class="shortcut-cards">
<a class="card" href="/admin/content-manager/collectionType/api::feed-content.feed-content">
Manage Feed
</a>
<a class="card" href="/admin/content-manager/collectionType/api::early-childhood-institution.early-childhood-institution">
Manage ECIs
</a>
<a class="card" href="/admin/content-manager/collectionType/api::facility.facility">
Manage Facilities
</a>
<a class="card" href="/admin/content-manager/collectionType/api::project.project">
Manage Projects
</a>
<a class="card" href="/admin/content-manager/single-types/api::app-setting.app-setting">
Manage App Settings
</a>
<a class="card" href="/admin/content-manager/collectionType/api::donation.donation">
View PayPal Donations
</a>
</div>
</div>
`;
const style = document.createElement('style');
style.textContent = `
#lean-dashboard {
padding: 20px;
}
.shortcut-cards {
display: flex;
flex-direction: column;
gap: 10px;
}
.card {
padding: 10px;
background: #f0f0f0;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
}
.card:hover {
background: #e0e0e0;
}
/ Dark mode styles 
/
body[data-theme='dark'] #lean-dashboard {
color: #e0e0e0;
background-color: #333;
}
body[data-theme='dark'] .card {
background: #444;
color: #e0e0e0;
}
body[data-theme='dark'] .card:hover {
background: #555;
}
`;
document.head.appendChild(style);
observer.disconnect();
}
}
}
}
};
const observer = new MutationObserver(callback);
const observeAndReplace = () => {
observer.observe(targetNode, config);
};
// Initial call
observeAndReplace();
// Handle logo click and other navigations
document.addEventListener('click', function (event) {
const logoLink = document.querySelector('a[href="/admin/"]');
if (logoLink && event.target.closest('a[href="/admin/"]')) {
event.preventDefault();
const mainContainer = document.querySelector('main');
if (mainContainer) {
mainContainer.innerHTML = '';
}
window.location.reload();
}
});
--
Update src/admin/app.tsx to inject the custom JS script. I do this by: A] Adding the below method to the file:
---
const injectCustomScript = () => {
const script = document.createElement('script');
script.src = '/custom-homepage.js';
script.async = true;
document.body.appendChild(script);
};
---
And then B] calling that method within bootstrap:
bootstrap(_: any) {
injectCustomScript();
},

Igor Zinchenko

Why not conditional fields? it have more votes....

Manuel Caicedo

That's great.

Jorge Rivero

👏🏻👏🏻👏🏻👏🏻👏🏻

Niklas Winkels

marked this post as

in progress

Josh

Hey there. arguably this is a very low-level API but you will be able to interact with the client side router for the admin panel in v5. It's an alpha feature, but in short you can replace the entire component thats rendered as the

index

of the application: https://github.com/strapi/strapi/pull/20494 any feedback welcome.

yoya

The present welcome page is predominantly tailored for developers, showcasing technical resources and developer oriented content. This focus, while well-intentioned, is misaligned with the reality that a large portion of Strapi users are non-technical individuals.
For example, features as last updated content, useful shortcuts, personalized tutorial notes, layout customization or even having a two welcome model pages : one for technical users and one for non technical one.
Hard to explain to a client it will display github links and dev tutorials.

rinzler

The community is being completely ignored.

rinzler

Please, at least change the default welcome page to not contain all that tech info and allow us to add our own links and text. It would actually be better to have a blank welcome page with just a "welcome" message at the top than to have all that useless or noisy info. My users are all non-tech users, so that default info is completely useless to them and it's actually just noise. Please, implement this as soon as possible, at least for this welcome page. It's so important to us. Thanks.

→