Filament•14mo ago

Display "preview" from Form field?

Very new to Filament. I am needing to show a "preview" of the fields. For example, two columns. 1. Displays name and color input fields 2. Displays a preview of the name in said color This is just for example sakes. I understand this all uses Livewire, so what I'm thinking is I create a new form field that basically acts as my preview window... but how specifically would I pass the name/color fields to my preview field? Thanks so much!

15 Replies

Patrick Boivin•14mo ago

There's a View form component you can use just like any other form field, and with it you can render a custom Blade view, right there in the form. This can be the basis of your preview.

bflipOP•14mo ago

What if I'm just using a Filament Resource? I'm not seeing where/how there's a form view?

Patrick Boivin•14mo ago

In your Filament resource, you have a form with 2 fields?

bflipOP•14mo ago

Yes, this for example sake:

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('name')
                    ->autofocus()
                    ->required()
                    ->string()
                    ->maxLength(255),

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('name')
                    ->autofocus()
                    ->required()
                    ->string()
                    ->maxLength(255),

The view must be coming from the vendor folder as a default?

Patrick Boivin•14mo ago

Forget about the view for a minute Where do you want to show your preview exactly?

bflipOP•14mo ago

Left column will have fields. Right column will have a rendering. So that rendering I need based on field values Note that most fields are simply for the preview, and not saved directly in the DB as a single value Basically giving values to a JS script that will output my final string that I need to save in the DB (and display as a preview) (this is my first filament project, but I've done Livewire stuff before)

Patrick Boivin•14mo ago

Ok, so the first step is to arrange your form in 2 columns. Do you have that already?

bflipOP•14mo ago

Yea, that part seems straight forward using columns like this

Section::make()
    ->columns([
        'sm' => 3,
        'xl' => 6,
        '2xl' => 8,
    ])

Section::make()
    ->columns([
        'sm' => 3,
        'xl' => 6,
        '2xl' => 8,
    ])

bflipOP•14mo ago

https://filamentphp.com/docs/3.x/forms/layout/grid

Grid - Form Builder - Filament

Patrick Boivin•14mo ago

Great. So in your right column, for your preview, you can use a View component:

  Forms\Components\View::make('my-custom-blade-view'),

  Forms\Components\View::make('my-custom-blade-view'),

bflipOP•14mo ago

ah, OK That makes sense. So, if for example 2 fields: first name, last name exist, and I need more logic for the final value to save in the DB as "first + last" in one field... where do I put that logic? In a normal LW component, I'd usually modify stuff within a save() method of sorts

Patrick Boivin•14mo ago

Maybe mutateFormDataBeforeSave() can be used for that: https://filamentphp.com/docs/3.x/panels/resources/editing-records#customizing-data-before-saving

Editing records - Panel Builder - Filament

bflipOP•14mo ago

Thanks so much! That puts me on the right track!

bflipOP•14mo ago

This looks like exactly what I need: https://filamentphp.com/docs/3.x/panels/resources/creating-records#customizing-data-before-saving I added it to my Create Class for that resource, and the $data array is including the user_id, however I get DB Error field 'user_id' doesn't have a value

Creating records - Panel Builder - Filament

bflipOP•14mo ago

nvm, wasn't fillable! Thanks for all your help @Patrick Boivin !

Gaming

Programming

Display "preview" from Form field?