Add part of filament in external Page
Hello,
We already build a custom web-page made with bootstrap 5 where we would like to embed filament in some parts of the page.
It could be on a edit page directly or within a popup.
It‘s the same laravel page currently displaying content and under a separate are (/admin) the filament.
Is this possible? I found nothing in the documentation
We do not need to embed tables, only forms. Currentöy we buold forms twice - one with default javascript in the frontend and one with filament in the backend. It would be nice to combine it into one view as we now have to manage two views
10 Replies
Are you using Livewire? Because the Docs have a section for each component on how to add it to a Livewire component.
For example, if you want to add a Filament Form to a page, you'd made a new Livewire component, and then can use Filament Form inside of that Livewire component.
And here it is in the Docs --> https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component
Yes i‘m using livewire - but if i‘m following this tutorial I‘m missing all filament styles, and I‘m unable to find any docu / info hownto add these.
The forms would work this way, but not styled….
if you want to use the style of the forms.. you must import its style
this is mine
It seems that the vite includes are wrong - how do infind out the correct ones? Filament 3.2.124
No, because we installed fillament first and added then standalone laravel pages withoit filament css - but i‘ll try this way and check if it works
yea, what @LeandroFerreira said, you'll have to install each Filament "component" and then update tailwind, vite, etc accordingly
Okay, this works - but in this case I have many overwrites (our bootstrap template overwrites tailwind classes and the tailwind css overwrites some bootstrap classes). Adding prefixes and reset-css optimize it but the solution is not ideal.
So I think I‘ll create a BasePage in filament what creates only the form on a route and embed the form within a iframe in the page, then the iframe-heigt will be done with iframe-resizer.com
In my opinion this is the best solution or do you suggesst me an alternative?
One approach would be shadow-dom, but with this i do not have many experience: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM
MDN Web Docs
Using shadow DOM - Web APIs | MDN
An important aspect of custom elements is encapsulation, because a custom element, by definition, is a piece of reusable functionality: it might be dropped into any web page and be expected to work. So it's important that code running in the page should not be able to accidentally break a custom element by modifying its internal implementation. ...
How I did it (temporarily) was the following, but this worked:
- Create full page Livewire (filament) components
- Set livewire inject_assets to TRUE in the config
- Load the full page with HTMX inside of your old page
This post might help you, but it's more of a global integration for the front end. You’ll likely face issues with overriding Bootstrap classes
https://filamentmastery.com/articles/guide-to-using-filament-components-in-public-facing-pages
Filament Mastery
Guide to using Filament Components in public-facing pages - Filamen...
Learn how to integrate Filament components into your public-facing pages with this step-by-step guide.