Filament•14mo ago

Conditional Form Input and Table Column

I want to create two types of data: 'image' or 'text.' That's why I've structured my code this way. Is there a more optimal approach? Additionally, I'd prefer to hide the 'Status' field on the Create form and reveal it in the Edit form. Please provide me with ideas on how to display input values in a table, where the value type can be either text or an image.

Section::make()->schema([
    TextInput::make('name'),
    Select::make('value_type')
        ->editOptionAction(null)
        ->options([
            'text' => 'Text',
            'image' => 'Image'
        ])->live(),

    TextInput::make('value')
        ->visible(fn (Get $get): string => $get('value_type') === 'text'),
    FileUpload::make('value')
        ->visible(fn (Get $get): string => $get('value_type') == 'image'),
    Select::make('Status')
])

Section::make()->schema([
    TextInput::make('name'),
    Select::make('value_type')
        ->editOptionAction(null)
        ->options([
            'text' => 'Text',
            'image' => 'Image'
        ])->live(),

    TextInput::make('value')
        ->visible(fn (Get $get): string => $get('value_type') === 'text'),
    FileUpload::make('value')
        ->visible(fn (Get $get): string => $get('value_type') == 'image'),
    Select::make('Status')
])

Solution:

This code solved my problem. ```php <div> @if ($getRecord()->value_type === 'text')...

Jump to solution

26 Replies

awcodes•14mo ago

Select::make(‘status’)->hiddenOn(‘create’) The callbacks for the forms have injectable params for the $context or $operation that you can use for display purposes.

awcodes•14mo ago

Specifically https://filamentphp.com/docs/3.x/forms/advanced#injecting-the-current-form-operation but read through the whole page.

Advanced forms - Form Builder - Filament

Abdur RazzaqueOP•14mo ago

Perhaps I didn't understand you correctly. I'm seeking suggestions regarding the conditional table column. In this table section, I aim to dynamically change between 'TextColumn' and 'ImageColumn' based on the value type.

->columns([
    TextColumn::make('name'),
    TextColumn::make('value'), // hidden if value type image
    ImageColumn::make('value') // hidden if value type text
    IconColumn::make('status')
        ->boolean()
])

->columns([
    TextColumn::make('name'),
    TextColumn::make('value'), // hidden if value type image
    ImageColumn::make('value') // hidden if value type text
    IconColumn::make('status')
        ->boolean()
])

awcodes•14mo ago

I don’t think that’s possible. It goes against the fundamental html spec for a table.

Abdur RazzaqueOP•14mo ago

Yes! I know, it's not possible. But What should I change to done this type of condition with filament? Form value can be image or text. And why it's not can be show in list of table?

awcodes•14mo ago

Similar question asked earlier today. https://discord.com/channels/883083792112300104/1162755489436794931

Abdur RazzaqueOP•14mo ago

Actually, I don't understand the custom 'Curator' column. Do you have any information about it? I found only custom column in filamentphp documentation.

awcodes•14mo ago

It’s not an issue with the curator column. But Curator is a plugin, it’s not part of core so it won’t be in the filament docs. It’s covered in the Readme on the Curator GitHub repo.

Abdur RazzaqueOP•14mo ago

Do you think? this plugin can solve my problem

awcodes•14mo ago

But the plugin doesn’t have anything to do with trying to make conditional columns. The curator column is just a stand column that uses the storage facade and the media table to render an image. But your trying to conditionally show a whole different column on a per row record. Tables just don’t work that way from a programmatic standpoint.

Abdur RazzaqueOP•14mo ago

Should I try with filament custom column?

awcodes•14mo ago

There’s not really anything to try. The same column can’t have different column types.

Abdur RazzaqueOP•14mo ago

So you're saying that column types can't be selected based on the value type?

awcodes•14mo ago

I’m saying that having an image, Boolean or text column, in the same column for a table is technically a violation of accessibility and why it’s not really supported. You could potentially do a custom column that parses the state and returns a different html output. The value of a file field is a string and the value of a title is a string, how could it possibly determine what type of field to show if they are both strings?

Abdur RazzaqueOP•14mo ago

I found a way with custom column. But I can't call here the image tag with src attribute.

<div>
    {{ $getRecord()->value_type === 'text' ? $getState() : 'Image Tag' }}
</div>

<div>
    {{ $getRecord()->value_type === 'text' ? $getState() : 'Image Tag' }}
</div>

awcodes•14mo ago

And that’s my point. There’s no reliable way to determine from the state of the field which is a string if it should be a text or an image output which needs the storage facade. Best you could do is check if a file exists with the storage facade and default to a text output. But that could fall apart pretty quick with curator which isn’t a string but a reference to another model on a different table.

Solution

Abdur Razzaque•14mo ago

This code solved my problem.

<div>
    @if ($getRecord()->value_type === 'text')
        {{ $getState() }}
    @else
        <img class='h-6' src='{{ Storage::url($getState()) }}' />
    @endif
</div>

<div>
    @if ($getRecord()->value_type === 'text')
        {{ $getState() }}
    @else
        <img class='h-6' src='{{ Storage::url($getState()) }}' />
    @endif
</div>

awcodes•14mo ago

Ok Feels brittle to me, but if it works for you. Great. 🙂

Abdur RazzaqueOP•14mo ago

At least this is enough for me, I will definitely update if I get a better solution later.

portsign•14mo ago

Hi everyone, I'm experiencing an issue where the image thumbnail is not displaying when I view/edit it, but it appears on the front page (rows). Below is my code, please provide guidance. FileUpload::make('image') ->enableOpen() ->enableDownload() ->label('Company Image') ->disk('cloudinary') ->visibility('private') ->columnSpanFull(),

Abdur RazzaqueOP•14mo ago

What is the reason of this code "->visibility('private')"?

portsign•14mo ago

I was just experimenting with various methods, and when I removed 'visibility('private'),' the image still didn't appear.

Abdur RazzaqueOP•14mo ago

First, you should take your code simple to take the view.

FileUpload::make('image')
->label('Company Image')
->columnSpanFull(),

FileUpload::make('image')
->label('Company Image')
->columnSpanFull(),

May be you forget to create symbolic link of laravel storage. You should run this command on your project.

php artisan storage:link

php artisan storage:link

portsign•14mo ago

I'm using Cloudinary, so I'm not using a storage link.

Abdur RazzaqueOP•14mo ago

Is this a hosting server? Rich Editor can also help solve the creation problem. I can upload images or text using the Rich Editor. But how can I display this data in a list or table?

jbenavidesv•11mo ago

I have a similar scenario but I needed to use Text and Select columns, so I did this that worked as expected. Hope it helps:

TextInput::make('name'),
($condition ? TextColumn::make('whatever') : SelectColumn::make('whocares')),
TextInput::make('desc'),

TextInput::make('name'),
($condition ? TextColumn::make('whatever') : SelectColumn::make('whocares')),
TextInput::make('desc'),

In your case:

# ...
($get('value_type') === 'text') ? TextInput::make('value') : FileUpload::make('value')),
# ...

# ...
($get('value_type') === 'text') ? TextInput::make('value') : FileUpload::make('value')),
# ...

Gaming

Programming

Conditional Form Input and Table Column