Filament•13mo ago•

4 replies

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

placeholder()

searchable()

searchable()

and

multiple()

multiple()

methods are working fine, it seems to be ignoring the

getOptionLabelUsing()

getOptionLabelUsing()

method. I've tried also

getOptionLabelsUsing()

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;
      })
])

->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()
    );
}

Jump to solution

Customize Select in Relation Manager

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

placeholder()

searchable()

searchable()

and

multiple()

multiple()

methods are working fine, it seems to be ignoring the

getOptionLabelUsing()

getOptionLabelUsing()

method. I've tried also

getOptionLabelsUsing()

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;
      })
])

->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()
    );
}

Jump to solution

Customize Select in Relation Manager

Customize Select in Relation Manager

Similar Threads

Similar Threads

Similar Threads