custom admin UI dashboard #6324
Replies: 8 comments 59 replies
-
|
Admin Widgets are custom React components that developers create to be injected into predetermined injection zones across the Medusa Admin dashboard. Widgets allow you to customize the admin dashboard by providing merchants with new features. For example, you can add a widget on the order details page that shows payment details retrieved from Stripe. This guide explains the available injection zones and how to create an admin widget. https://docs.medusajs.com/admin/widgets here you will find how to customize medusajs admin dashboard by creating widgets: |
Beta Was this translation helpful? Give feedback.
-
|
@Zeeshan-Mehdi110 Although one can add widgets to existing components or create new ones all together, one cannot currently edit the existing dashboard, to for example, show / hide left hand side menu items based on user roles or navigate to a custom page after login, like '/pending-verification' when a Vendor first signs up in a multi-vendor marketplace environment |
Beta Was this translation helpful? Give feedback.
-
|
@Zeeshan-Mehdi110 Please answer. It's very important |
Beta Was this translation helpful? Give feedback.
-
|
@Zeeshan-Mehdi110 Is there any realistic way to replace or update an existing component without completely copying the admin ui src code and manually changing it? The injection zones are great for plugin developers and allows them to ship premade ui components with their libraries, but when it comes to actual in project source code, they don't provide much utility and are fairly limiting. I personally want to replace the variants section component with my own which has extended utilities. But the only way I can think of doing that is by cloning the admin ui source code into a standalone project and completely ditching the admin ui in the backend. This of course would mean that ui components shipped by plugins will no longer be accessible and I will be forced to copy them as well, or recreate my own from scratch. Or, the only other alternative I can think of is replacing the entire route, cloning the relevant components and recreating the route from scratch. I think it's very important to allow developers to replace existing components in the admin ui, or at the very least allow them to replace organisms (which seem to be the top level component, and therefore won't affect other components in the source). Maybe just replicate the admin ui directory structure in the backend and merge it in with the base, overwritting existing files accordingly. So if I want to replace the options modal in /components/organisms/product-variants-section/options-modal.tsx, I can create the following file in my backend to replace that components: /admin/components/organisms/product-variants-section/options-modal.tsx. This functionality of overwritting components should be prohibited in plugins, as that would clearly break things. But the source project should have the ability to replace these components at their own risk. Otherwise the admin-ui is a nice default, but is a ticking time bomb. You will simply be forced to move away from it the second you need to replace something outside an injection zone. |
Beta Was this translation helpful? Give feedback.
-
|
any response ? |
Beta Was this translation helpful? Give feedback.
-
|
@nozhaa To customize the Medusa admin dashboard, you can create Admin Widgets that allow you to inject custom React components into specific zones. Unfortunately, as my experience, modifying existing components directly isn't supported, so using widgets is the best approach. |
Beta Was this translation helpful? Give feedback.
-
|
Update: I succeeded replacing @medusajs/dashboard by my own npm package inside medusa backend (v2.0.1) project. When I previously said that "but that did not change anything when running the project" it was because @medusajs/admin-bundler still used original package. Just for now I went straight into node_modules/@medusajs/admin-bundler/package.json and also did this |
Beta Was this translation helpful? Give feedback.
-
|
@JovanJevtic Is it a bug? it would be nice you share the whole procedure related to it. |
Beta Was this translation helpful? Give feedback.
-
Is this sustainable? How can we manage the new updates that will come to @medusajs/dashboard with this method? #6324 (reply in thread) as mentioned here, isn't this method an unsustainable method for general admin UI development? I would be happy if friends who have experienced this issue before write their opinions. |
Beta Was this translation helpful? Give feedback.
-
|
Isn't admin a module? we could create modules to custom the admin. |
Beta Was this translation helpful? Give feedback.
-
|
Does any one know the injection zones to add something in sidebar. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
following this extraction of dashboard to a standalone app, I am wondering if there is an effective way to benefit from coming dashboard related changes to the medusa repo. does anyone have a wise approach to this problem? |
Beta Was this translation helpful? Give feedback.
-
|
well I don't know what exactly you want to do, but your medusa backend is simply for the logic, workflows, api routes etc. while admin dashboard is UI related. you can call api endpoints from dashboard to backend |
Beta Was this translation helpful? Give feedback.
-
|
maybe my question could have been a bit confusing and misleading. i was wondering how to get the new changes from the contributers related to the dashboard effectivley, now that the dashboard is separated from the main repo. |
Beta Was this translation helpful? Give feedback.
-
|
might be a bit tedious but you could manually extract the dashboard folder from the latest release I think. |
Beta Was this translation helpful? Give feedback.
-
Hello @Op-Pautu when i run it in dev mode it works fine when i create its build for production it show me empty page . Have any idea why this happening? |
Beta Was this translation helpful? Give feedback.
-
|
admin panel should be separate like store-front so that developers can easily customize it. As now i want to change navbar but there is not any option .It is requested to contributers to make if separat. |
Beta Was this translation helpful? Give feedback.
-
is this command |
Beta Was this translation helpful? Give feedback.
-
|
yeah |
Beta Was this translation helpful? Give feedback.
-
|
@Op-Pautu i want to integrate NMI payment in medusa , can i do this? And how. Thank for your support |
Beta Was this translation helpful? Give feedback.
-
|
@Alishan786a there's a guide on the docs for setting up custom payment provider |
Beta Was this translation helpful? Give feedback.
-
Okay thank you very much |
Beta Was this translation helpful? Give feedback.
-
|
We resolved customizing the admin dashboard and keep it maintainable in a turborepo, you can use a setup like this:
module.exports = defineConfig({
admin: {
disable: process.env.NODE_ENV === 'development',
},
...
})
"build#medusa": {
"dependsOn": ["^build"],
"inputs": ["$TURBO_DEFAULT$", ".env*"],
"outputs": [".medusa/**"]
}Committing changes
CI buildNote: you need to clone your project with submodules, i.e. git clone --depth=1 --recurse-submodules . Sync upstream
|
Beta Was this translation helpful? Give feedback.
-
|
To make it complete for local development when you also want to build custom widgets or routes from inside your Medusa project (recommended to not alter the core dashboard to much). You then also need to add this env, otherwise they will not show: |
Beta Was this translation helpful? Give feedback.
-
|
I am unable to see the plugins in custom dashboard, currently building one custom plugin locally (following the docs). |
Beta Was this translation helpful? Give feedback.
-
|
For everyone who is interested - my company is working on pluggable version of Medusa Admin - it will be open-source. showcase-1.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
Hi this seems interesting where can I get to know more about it |
Beta Was this translation helpful? Give feedback.
-
|
Still not yet released - we will update. showcase-2.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
It looks but I have some questions, is it going to be free, is there any limitation in customization or no like we can customize anything, how long can we expect to come |
Beta Was this translation helpful? Give feedback.
-
|
it will be open-source. There will be much more places and the whole framework which will let you inject your components or pages etc. wherever you want. |
Beta Was this translation helpful? Give feedback.
-
|
For everyone who is interested in high customization of Medusa - we launched new project called Nocto which tries to fixes it - https://www.noctojs.com/ |
Beta Was this translation helpful? Give feedback.
-
To fix what? If it is a bug and not an intended behavior, it should be better to open a PR on the project. |
Beta Was this translation helpful? Give feedback.
-
|
The link is working but I had to use Vpn for it. Is this because of a region thing ? |
Beta Was this translation helpful? Give feedback.
-
|
hi @Sheikh-Faraz - sorry, there was a DNS problem. It shall work now. |
Beta Was this translation helpful? Give feedback.
-
|
hi @radoslaw-sz , that is very helpful to kick-off and customize all owned places in the codebase continuously. |
Beta Was this translation helpful? Give feedback.
-
Tutorial? |
Beta Was this translation helpful? Give feedback.
-
|
hi @SalahAdDin - maybe wrong word, just improve. We decided to go with the fork due to significant changes. |
Beta Was this translation helpful? Give feedback.
-
You mean you are forking Medusa? |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi everyone! I'm currently working on a project using Medusa, and I've hit a bit of a roadblock. The admin UI is located within the node_modules, and unfortunately, I don't have direct access to it for customization purposes.
I'm looking to customize the admin dashboard but want to ensure I'm following the best practices recommended by the Medusa library. My main questions are:
What is the recommended approach for customizing the Medusa admin dashboard when direct access to the node_modules directory is not feasible?
Mainly I wanna do this in order to edit the forms, products fields change doesn't reflect on the UI
Beta Was this translation helpful? Give feedback.
All reactions