victorcamposramirez Posts - Answer Overflow

victorcamposramirez

•Created by victorcamposramirez on 3/11/2025 in #❓┊help

Customize Select in Relation Manager

Hi there! I have a model with a Relation Manager, relating Product and Allergen models. What I'm trying to do is show image and description of allergen in the Select component inside the AttachAction modal of the RelationManager. Something similar to this: https://v2.filamentphp.com/tricks/render-html-in-select-options So, here is my code:

->headerActions([
    Tables\Actions\AttachAction::make()
        ->recordSelect(function (Select $select) {
            $select->getOptionLabelUsing(function ($record) {
                    dd($record);
                    return new HtmlString(<<<HTML
                        <div class="flex items center">
                            <div class="flex-shrink-0 h-8 w-8 mr-2">
                                <img class="h-8 w-8 rounded-full" src="{$record->icon}" alt="">
                            </div>
                            <div class="text-sm">
                                <div class="font-medium">{$record->name}</div>
                                <div class="text-xs text-gray-500">{$record->description}</div>
                            </div>
                        </div>
                    HTML);
                })
                ->placeholder("Selecciona los alérgenos de la lista")
                ->searchable(false)
                ->allowHtml()
                ->multiple(true);
            return $select;
        })
        ->preloadRecordSelect()
])

->headerActions([
    Tables\Actions\AttachAction::make()
        ->recordSelect(function (Select $select) {
            $select->getOptionLabelUsing(function ($record) {
                    dd($record);
                    return new HtmlString(<<<HTML
                        <div class="flex items center">
                            <div class="flex-shrink-0 h-8 w-8 mr-2">
                                <img class="h-8 w-8 rounded-full" src="{$record->icon}" alt="">
                            </div>
                            <div class="text-sm">
                                <div class="font-medium">{$record->name}</div>
                                <div class="text-xs text-gray-500">{$record->description}</div>
                            </div>
                        </div>
                    HTML);
                })
                ->placeholder("Selecciona los alérgenos de la lista")
                ->searchable(false)
                ->allowHtml()
                ->multiple(true);
            return $select;
        })
        ->preloadRecordSelect()
])

I've skipped linking it to a view until I could check it were working. Unfortunately, even when the placeholder(), searchable() and multiple() methods are working fine, it seems to be ignoring the getOptionLabelUsing() method. I've tried also getOptionLabelsUsing() (I can't tell the difference between both methos yet because I'm still a Filament newbie). Is there something I'm doing wrong here? It is not the right way, maybe?

5 replies

FFilament

•Created by victorcamposramirez on 3/5/2025 in #❓┊help

FileUpload (avatar) when record is in other model

24 replies

FFilament

•Created by victorcamposramirez on 3/5/2025 in #❓┊help

Change the size of RelationManager's create/edit modal?

I have a RelationManager created to manage Product assets. I've done my form with ID (hidden), name, type, file and is_primary (bool). I've arranged the form to 1 column, but I'd like to change modal width so the fields don't show so long. When talking about Actions, you can change the width of the modal by using the modalWidth() method. Is this posible in a RelationManager's create/edit modal?

4 replies

FFilament

•Created by victorcamposramirez on 3/4/2025 in #❓┊help

Change navigation icon size

Is there a way to change navigation item icon size? I'm using the FontAwesome's icon set and the default Tailwind w-6 classes for the sidebar's item icons are quite large for me. Instead I'd like to use w-5 so the icons are represented in a more compact look.

4 replies

Gaming

Programming