FilamentF
Filament•10mo ago
victorcamposramirez

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()
])


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?
Filament
Render HTML in select options by Matthew Ost - Tricks - Filament
Filament is a collection of tools for rapidly building beautiful TALL stack apps, designed for humans.
Solution
It wasn't working either in a normal select. After a few tries, I've solved in a simpler way:

->headerActions([
  Tables\Actions\AttachAction::make()
      ->recordSelect(function (Select $select) {
          $select
              ->placeholder("Selecciona los alérgenos de la lista")
              ->multiple(true)
              ->searchable(false)
              ->searchDebounce(200)
              ->allowHtml()
              ->getSearchResultsUsing(function (string $search) {
                  return Allergen::query()
                      ->where('name', 'like', "%$search%")
                      ->get()
                      ->mapWithKeys(fn ($allergen) => [
                        $allergen->id => static::getAllergenHtmlOption($allergen)
                      ]);
              })
              ->options(
                  Allergen::all()
                      ->mapWithKeys(fn ($allergen) => [
                          $allergen->id => static::getAllergenHtmlOption($allergen)
                      ])
                      ->toArray()
              );
          return $select;
      })
])


I've added a getOptionHtml to retrieve the search result view:

public static function getOptionHtml($record): string
{
    return new HtmlString(
        view('filament.components.select-allergen-result')
            ->with('name', $record?->name)
            ->with('icon', $record?->icon)
            ->render()
    );
}
image.png
Jump to solution
Was this page helpful?