F
Filament•2mo ago
Illizian

Advice: Building a "unified" platform.

I have a few direct questions, but they're related to a general question on how to "handle" an admin area, and, a client (customer) views. I have been using Laravel Nova for many years, where I would usually have a pretty clear distinction between the admin UIs, and the customer views. For these customer views, I would use Tailwind and create my own UI components, though recently I have been using Flux. With filament, I feel like I can lean on it more heavily and can use a lot of these elements for client views. I can see a few paths forward: 1. Create a Customer Panel, and lean on Filament Pages to build these views 2. Use Filament components, and use traditional blade views (plus a sprinkling of Livewire where appropriate) My concerns/questions then become: 1. Filament "lock-in" may make building Customer User Journeys quite difficult & restrictive, should we need to venture out of the norm. 2. How do I use filament components, I'm comfortable including them in Livewire components, but not so certain on using the blade components directly (e.g. I'm getting mixed results with using the <x-filament::* />)
4 Replies
Illizian
IllizianOP•2mo ago
I saw a question around here, but I can't find it now. In regards to the docs for v4. Could I suggest embellishing on this section with full examples of a form using the components. I'm hoping there's some missing components in there too; I'm now reviewing the repo for components
Illizian
IllizianOP•2mo ago
Dennis Koch
Dennis Koch•2mo ago
1. Depends on how crazy you go. It can definitely happen. The real lock-in is Livewire as it's the technology behind Filament and you could swap out any Filament component with your own component. Still I understand the sentiment: Filament helps with a lot of boilerplate, but can make sometimes simple tasks really hard because of it's complexity. 2. We have a bit of docs about them, but it's probably one of the lesser documented stuff: https://filamentphp.com/docs/3.x/support/blade-components/overview
Overview - Core Concepts - Filament
Illizian
IllizianOP•2mo ago
Now trying out a mix of Livewire and standard forms. Currently trying to work out how to set the name attribute on an input field haha With the blade components. I seem to have the packages/support/ components, but I need the ones from packages/forms/. Are they in a different namespace? boom, they're in <x-filament-forms:: />, I think haha ah ha, ok. This is looking like a pretty good replication of the "internal" fields. 
<form
    method="post"
    class="flex flex-col gap-6"
>
    @csrf

    <x-filament-forms::field-wrapper
        label="Email address"
        required
    >
        <x-filament::input.wrapper>
            <x-filament::input
                type="text"
                name="email"
            />
        </x-filament::input.wrapper>
    </x-filament-forms::field-wrapper>

    <x-filament-forms::field-wrapper
        label="Password"
        required
    >
        <x-filament::input.wrapper>
            <x-filament::input
                type="password"
                name="password"
            />
        </x-filament::input.wrapper>
    </x-filament-forms::field-wrapper>

    <x-filament::button type="submit">
        Login
    </x-filament::button>
</form>
<form
    method="post"
    class="flex flex-col gap-6"
>
    @csrf

    <x-filament-forms::field-wrapper
        label="Email address"
        required
    >
        <x-filament::input.wrapper>
            <x-filament::input
                type="text"
                name="email"
            />
        </x-filament::input.wrapper>
    </x-filament-forms::field-wrapper>

    <x-filament-forms::field-wrapper
        label="Password"
        required
    >
        <x-filament::input.wrapper>
            <x-filament::input
                type="password"
                name="password"
            />
        </x-filament::input.wrapper>
    </x-filament-forms::field-wrapper>

    <x-filament::button type="submit">
        Login
    </x-filament::button>
</form>

Did you find this page helpful?