F
Filament•2mo 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()
])
->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()...
No description
Jump to solution
3 Replies
victorcamposramirez
victorcamposramirezOP•2mo ago
This is how it renders
No description
Lara Zeus
Lara Zeus•2mo ago
try it with normal action instead of using AttachAction , just for testing! I think the AttachAction overriding your getOptionLabelUsing
Solution
victorcamposramirez
victorcamposramirez•2mo ago
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;
      })
])
->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()
    );
}
public static function getOptionHtml($record): string
{
    return new HtmlString(
        view('filament.components.select-allergen-result')
            ->with('name', $record?->name)
            ->with('icon', $record?->icon)
            ->render()
    );
}
No description

Did you find this page helpful?