How to create custom components in code

[dhruv-db]

We want to use the MUI tool kit as a dashboard builder tool and we want to custom below-mentioned components in the project:

1. Can we initialise the app, pages, and components with a custom context to provide our components with the requested data? As we did not see any entry point we could not spot out where this can be injected
2. How we can introduce our own components from the code itself (not from UI)?
3. How to modify the initial appearance of the page so that it initially has a predefined layout that meets our needs (header, sidebar, footer, etc.)

[Janpot]

1. We currently don't support wrapping the application entrypoint with a custom React component. But we could definitely consider this as a feature. Out of curiosity, which kind of data do you want to distribute in this context?
2. Any tsx file under ./toolpad/components/ that exports a react component in its default export will be available to use in the drag&drop editor.
3. There's a feature request under Support layout templates #1064. Which customizations are you looking for exactly? Or differently, where does the default fall short for your needs? Which content is expected to be in header/footer? How can we improve the side navigation?

[pamatulli81]

Hi @Janpot just to give you a bit of context, we have developed a framework on top of Qlik which are distributed via npm package to our audience. Those components are allowing to easily integrate analytics into web application, currently in a low code manner but we are evaluating also to extend it and give the possibility to design the web apps via a no code approach and this is why we came up to mui-toolpad, as our framework is build on top of MUI.

But for making it possible we would need advanced possibility of hooking in the mui-toolpad with our context, e.g.

• Wrapping the app, pages, component with our providers which are responsible for bootstrapping the Qlik part by handing over some configurations which includes:

  • Auth and Assets download (js, css) on Application init => this is why we request a way to hook the app entrypoint
  • Creation of WSS to the target Qlik Native Apps for anayltics consumption => this can be done either on a global level, or page or component level

  As soon this is done we can re-use our UI components and use the drag and drop feature of mui-toolpad.

[oliviertassinari]

This sounds to me connected with #791. It would be great to have a deep integration with Qlik.

One part of the problem we are trying to solve with Toolpad is to allow people to go way beyond the built in dashboarding features that products are building in isolation. This can be used as a way to deeply extend Zendesk Explore https://support.zendesk.com/hc/en-us/categories/4405298746906, MongoDB Atlas Chart https://www.mongodb.com/products/charts, Salesforce Dashboard https://help.salesforce.com/s/articleView?id=sf.analytics_landing_page.htm&type=5, etc.

If you are looking for a white label UI builder, I wouldn't recommend Toolpad as it's not a use case we are optimizing for. Having said this, maybe it can be wrapped.