Topics

Filament•2y ago

How to customize Title of Modal when use createOptionForm()

Hello, Is there a way to customize modal title after clicked on + near select field with createOptionForm() method ? And so, the tooltip of + button shows always "Create option" (<span class="sr-only">Create option</span>), any tip to customize it ? Thanks

39 Replies

IndomieRendang•2y ago

->createOptionModalHeading('Modal Title') And for customizing button tooltip, you need to build your own suffix action similar to createOptions

yagrasdemondeOP•2y ago

nice for createOptionModalHeading(), I didn't see in docs, so my question

IndomieRendang•2y ago

->suffixAction(
    Forms\Components\Actions\Action::make('create-new-thing')
        ->form([
            // ... your form schema
        ])
        ->action(function ($component, $data, $form) {
            $createdOptionKey = $component->evaluate($component->getCreateOptionUsing(), [
                'data' => $data,
                'form' => $form,
            ]);

            $component->state($createdOptionKey);
            $component->callAfterStateUpdated();
        })
        ->modalWidth('2xl')
        ->icon('heroicon-o-plus')
        ->label('Button Label') // tooltip
        ->hidden(fn ($livewire) => $livewire instanceof ViewYourResource) // change to your resource "view" class (to hide it when in view page)
),

->suffixAction(
    Forms\Components\Actions\Action::make('create-new-thing')
        ->form([
            // ... your form schema
        ])
        ->action(function ($component, $data, $form) {
            $createdOptionKey = $component->evaluate($component->getCreateOptionUsing(), [
                'data' => $data,
                'form' => $form,
            ]);

            $component->state($createdOptionKey);
            $component->callAfterStateUpdated();
        })
        ->modalWidth('2xl')
        ->icon('heroicon-o-plus')
        ->label('Button Label') // tooltip
        ->hidden(fn ($livewire) => $livewire instanceof ViewYourResource) // change to your resource "view" class (to hide it when in view page)
),

It is not documented but we're always able to "recreate" something similar from the codebase... The codebase is a great cheat sheet for us 😁

yagrasdemondeOP•2y ago

Well, you give me a suffixAction() method, I don't know how to use it...

IndomieRendang•2y ago

just copy it and change everything you want...

Select::make('something')
    ->label('Something')
    ->suffixAction(
      // it is here
    )

Select::make('something')
    ->label('Something')
    ->suffixAction(
      // it is here
    )

yagrasdemondeOP•2y ago

yes this part is Ok, I knew this code goes here, thi is the content of suffixAction is complex for me

IndomieRendang•2y ago

Afterall, you just want to change tooltip, consider again you really need it or not copy it and it will just work... I even copied that from the source code, and modify it using my basic php knowledge

yagrasdemondeOP•2y ago

To be sure, In ->form([]) I put fields I want in modals ?

IndomieRendang•2y ago

Yes...true

yagrasdemondeOP•2y ago

Ok I understand !! ->suffixAction replace ->createOptionForm() and permit to set an icon opening a modal to add new resource.

IndomieRendang•2y ago

createOptionForm is basically a set of suffix action with form and preconfigured action even you can move the button onto the left side of select field just by changing suffixAction into prefixAction... so fun isn't it?

yagrasdemondeOP•2y ago

yeas absolutely so in my case, if I use suffixAction I can remove createOptionForm isnt it ?

IndomieRendang•2y ago

ah yes remove it forgot to mention

yagrasdemondeOP•2y ago

ok nice but last thing I don't understand is the hidden() method inside suffixAction

IndomieRendang•2y ago

We don't want the plus button to be active when viewing the data

yagrasdemondeOP•2y ago

why did you mention in comment change to your resource class

IndomieRendang•2y ago

For example if your resource name is PostResource, then change it to ViewPost... you can remove it if you don't have view page for you resource

yagrasdemondeOP•2y ago

ok I understood

IndomieRendang•2y ago

Like this

yagrasdemondeOP•2y ago

Yes , i don't have ViewDish file (I manage meals with dishes) when I create a dish, I have a select field to choose category (starter, dessert etc) and it's for this fiels a apply suffixAction

IndomieRendang•2y ago

So remove the hidden method

yagrasdemondeOP•2y ago

But accordingly with docs, I set action view directly in modal

Dan Harrin•2y ago

what are you trying to do im kinda lost

IndomieRendang•2y ago

this @danharrin

Dan Harrin•2y ago

you can customise the action without overriding the whole thing ->createOptionAction(fn ($action) => $action->tooltip('Here?'))

IndomieRendang•2y ago

😵‍💫

Dan Harrin•2y ago

you can chain on ->icon()->modalHeading()->modalSubheading(), whatever

yagrasdemondeOP•2y ago

lol wow @danharrin

IndomieRendang•2y ago

I just gave the example from a part my action.... my action does a lot more, not about tooltip actually 😂 sorry @yagrasdemonde 😌

yagrasdemondeOP•2y ago

but if we are picky, the title still shows 'Create option' when mouse is on button, below tooltip

Dan Harrin•2y ago

thats just your browser though you can customize that as the ->label()

yagrasdemondeOP•2y ago

->label st the label for select field, not for + button set*

IndomieRendang•2y ago

I think put in here for the label() after $action->

yagrasdemondeOP•2y ago

yeah when I posted answer I thank this is the place to be so wonderful Men Thank you very much and even @danharrin said a fast way, thank you to @margarizaldi I understood the suffixAction part it will be nice to mention these possibilities in docs however 🙂

Dan Harrin•2y ago

agreed im writing the docs for v3 and this is featured

yagrasdemondeOP•2y ago

👍

Unknown User•2y ago

Message Not Public

Sign In & Join Server To View

LeandroFerreira•2y ago

page

protected static ?string $title = 'Custom Page Title';

protected static ?string $title = 'Custom Page Title';

modal

->modalHeading('Custom Modal Title')

->modalHeading('Custom Modal Title')

Unknown User•2y ago

Message Not Public

Sign In & Join Server To View

Filament is a collection of beautiful full-stack components for Laravel.You can get help using it on our Discord.

18KMembers

View on Discord

Did you find this page helpful?