How to trigger a custom action modal directly from a TextInputColumn updateStateUsing?

I have a TextInputColumn on a table for my resources

route_id

route_id

attribute. When this is changed to a

route_id

route_id

that does not exist, I want to prompt the user with an action modal, where they can create a new

route

route

record, which would update the

route_id

route_id

column with the id of the newly created route.
I am trying to do this:

TextInputColumn::make('route_id')
  ->rules(['numeric', 'integer', 'min:1'])
  ->extraAttributes(['style' => 'min-width:60px'])
  ->updateStateUsing(function ($state, $record) {
    if ($state > 1 || $state !== null) {
        $route = Route::find($state);

        if (!$route) {
          // Trigger the createRoute action if the route does not exist
          return Action::make('createRoute')
            ->form([
              TextInput::make('name')->required()->maxLength(255),
              ColorPicker::make('color')->required(),
            ])
            ->action(function (array $data) use ($state) {
              $data['id'] = $state;
              Route::create($data);
            })
            ->modalHeading('Create Route')
            ->modalSubmitActionLabel('Create')
            ->modalWidth('lg')
            ->visible(fn () => true);
      }
      $groupOrderUpdater = app(UpdatesGroupOrders::class);
      $groupOrderUpdater->update($record, ['route_id' => $state]);
    }
    return $record->route_id;
  }),

TextInputColumn::make('route_id')
  ->rules(['numeric', 'integer', 'min:1'])
  ->extraAttributes(['style' => 'min-width:60px'])
  ->updateStateUsing(function ($state, $record) {
    if ($state > 1 || $state !== null) {
        $route = Route::find($state);

        if (!$route) {
          // Trigger the createRoute action if the route does not exist
          return Action::make('createRoute')
            ->form([
              TextInput::make('name')->required()->maxLength(255),
              ColorPicker::make('color')->required(),
            ])
            ->action(function (array $data) use ($state) {
              $data['id'] = $state;
              Route::create($data);
            })
            ->modalHeading('Create Route')
            ->modalSubmitActionLabel('Create')
            ->modalWidth('lg')
            ->visible(fn () => true);
      }
      $groupOrderUpdater = app(UpdatesGroupOrders::class);
      $groupOrderUpdater->update($record, ['route_id' => $state]);
    }
    return $record->route_id;
  }),

But the action modal does not get triggered at all, what am I doing wrong?

Solution

We cannot register an Action here, I guess. I created a header action as a workaround. Is it elegant? No, but it might work for your case.

ListPage

protected function getHeaderActions(): array
{
    return [
        Actions\Action::make('createRoute')
            ->form([
                TextInput::make('name')->required()->maxLength(255),
                ColorPicker::make('color')->required(),
            ])
            ->action(function (array $arguments, array $data) {
                $data['id'] = $arguments['id'];
                Route::create($data);
            })
            ->modalHeading('Create Route')
            ->modalSubmitActionLabel('Create')
            ->modalWidth('lg')
            ->extraAttributes(['class' => 'hidden'])
    ];
}

protected function getHeaderActions(): array
{
    return [
        Actions\Action::make('createRoute')
            ->form([
                TextInput::make('name')->required()->maxLength(255),
                ColorPicker::make('color')->required(),
            ])
            ->action(function (array $arguments, array $data) {
                $data['id'] = $arguments['id'];
                Route::create($data);
            })
            ->modalHeading('Create Route')
            ->modalSubmitActionLabel('Create')
            ->modalWidth('lg')
            ->extraAttributes(['class' => 'hidden'])
    ];
}

TextInputColumn::make('route_id')
->updateStateUsing(function (Page $livewire, $state, Model $record) {
    if ($state > 1 || $state !== null) {
        //...
        $livewire->mountAction('createRoute', ['id' => $state]);
    }
})

TextInputColumn::make('route_id')
->updateStateUsing(function (Page $livewire, $state, Model $record) {
    if ($state > 1 || $state !== null) {
        //...
        $livewire->mountAction('createRoute', ['id' => $state]);
    }
})

Jump to solution

karpadiem•6/11/24, 11:13 PM

Im also struggling to get this working for a checkboxColumn. Were you able to figure it out @nowak ?

nowakOP•6/11/24, 11:14 PM

Not yet, no :/

karpadiem•6/11/24, 11:15 PM

I even added a log::info to the function and it looks like it doesn’t get hit at all.

Nnowak Not yet, no :/

LeandroFerreira•6/11/24, 11:18 PM

Hum.. maybe registering a custom action in a widget and dispatching with arguments

awcodes•6/11/24, 11:22 PM

You can’t ‘make’ the action on demand. It’s too late in the lifecycle. It has to be registered during component creation. Then you can dispatch a mountAction(), mountTableAction() or mountFormComponentAction() via livewire with the action name and arguments.

awcodes•6/11/24, 11:23 PM

Will probably need a custom column that extends TextColumn to register the action during setUp()

karpadiem•6/11/24, 11:24 PM

From what I’ve been reading, it seems like ->updateStateUsing() should be the way to modify how the state is stored right?

Kkarpadiem From what I’ve been reading, it seems like ->updateStateUsing() should be the wa...

awcodes•6/11/24, 11:24 PM

Yes, but actions and state are 2 very different things.

karpadiem•6/11/24, 11:26 PM

I see that. In the code sample above you can see @nowak is using updateStateUsing(). I’ve also been calling it action in all of my googling today till about an hour ago when I figured out the difference.

awcodes•6/11/24, 11:26 PM

Also, only form input columns have the concept of updating state

karpadiem•6/11/24, 11:27 PM

I’m currently trying to also get ->updateStateUsing() to work on a form input column (i’ve tried checkbox, and toggle)

awcodes•6/11/24, 11:27 PM

Normal columns are essentially readonly. Vs something like a textInputColumn which does interact with state.

karpadiem•6/11/24, 11:30 PM

This is my particular column. ->getStateUsing() works great, but can not get ->updateStateUsing() to work to save my life. CheckboxColumn should be one of the form input columns right?

awcodes•6/11/24, 11:30 PM

Also, where are you getting updateStateUsing() ?

awcodes•6/11/24, 11:32 PM

These are the two lifecycle hooks for checkbox columns. https://filamentphp.com/docs/3.x/tables/columns/checkbox#lifecycle-hooks

Checkbox column - Table Builder - Filament

Aawcodes Also, where are you getting updateStateUsing() ?

karpadiem•6/11/24, 11:37 PM

Not sure what you mean here. Are you asking where i am finding I should use it?

Kkarpadiem Not sure what you mean here. Are you asking where i am finding I should use it?

awcodes•6/11/24, 11:38 PM

I’m asking why you are using that method when it is not part of the lifecycle for that component.

awcodes•6/11/24, 11:39 PM

It should be afterStateUpdated()

awcodes•6/11/24, 11:40 PM

Just feels like you are trying to augment the state out of order for the lifecycle

karpadiem•6/11/24, 11:43 PM

Because im struggling to figure out and find documentation that I can understand that explains how i would translate a checkbox being checked, to a column being updated with the value of “completed”.

From digging around im seeing examples of form input columns using updateStateUsing() to get this done. I started digging into the code to figure it out and CheckboxColumn.php uses Concerns\CanUpdateState so i thought I was on the right track.

awcodes•6/11/24, 11:44 PM

Keep in mind that form input columns are not the same thing as a form input.

karpadiem•6/11/24, 11:45 PM

I understand that.

This github issue in particular i was referencing. https://github.com/filamentphp/filament/issues/6662#issuecomment-1574574466

GitHub

updateStateUsing() makes table select go back to first value · Issu...

Package filament/filament Package Version v2.17.44 Laravel Version v10.13.0 Livewire Version No response PHP Version PHP 8.1.10 Problem description After changing the value for the select "Shi...

awcodes•6/11/24, 11:45 PM

Column inputs are limited in what they can do compared to actual form input fields.

awcodes•6/11/24, 11:47 PM

Ah, that’s v2. That’s where it’s coming from. Are you on filament v2?

karpadiem•6/11/24, 11:48 PM

No, im on v3.

awcodes•6/11/24, 11:48 PM

Ok, so that method isn’t the same on v3.

karpadiem•6/11/24, 11:51 PM

I thought that could be a risk of old info, but again, with the CheckboxColumn class using CanUpdateState i assumed that was correct.

So, should my code look more like this:

awcodes•6/11/24, 11:53 PM

Should probably be after state updated, but you still need to return the state.

awcodes•6/11/24, 11:54 PM

So in the callback, do what you need to with the state, but return what the modified state should be for the column.

karpadiem•6/11/24, 11:54 PM

Ok, that worked.

karpadiem•6/11/24, 11:55 PM

I was confused by the documentation saying “ // Runs after the state is saved to the database.” as if it was already stored in the database.

awcodes•6/11/24, 11:56 PM

Well it is after, but the stored state can be different than the displayed state. If that makes sense.

karpadiem•6/12/24, 12:04 AM

I do get that, but I think im still struggling with the wording.

I have it working now so im happy. Thanks for your help and patience as i wrap my brain around it.

Solution

Nnowak I have a TextInputColumn on a table for my resources `route_id` attribute. When ...

LeandroFerreira•6/12/24, 7:14 AM

We cannot register an Action here, I guess. I created a header action as a workaround. Is it elegant? No, but it might work for your case.

ListPage

protected function getHeaderActions(): array
{
    return [
        Actions\Action::make('createRoute')
            ->form([
                TextInput::make('name')->required()->maxLength(255),
                ColorPicker::make('color')->required(),
            ])
            ->action(function (array $arguments, array $data) {
                $data['id'] = $arguments['id'];
                Route::create($data);
            })
            ->modalHeading('Create Route')
            ->modalSubmitActionLabel('Create')
            ->modalWidth('lg')
            ->extraAttributes(['class' => 'hidden'])
    ];
}

protected function getHeaderActions(): array
{
    return [
        Actions\Action::make('createRoute')
            ->form([
                TextInput::make('name')->required()->maxLength(255),
                ColorPicker::make('color')->required(),
            ])
            ->action(function (array $arguments, array $data) {
                $data['id'] = $arguments['id'];
                Route::create($data);
            })
            ->modalHeading('Create Route')
            ->modalSubmitActionLabel('Create')
            ->modalWidth('lg')
            ->extraAttributes(['class' => 'hidden'])
    ];
}

TextInputColumn::make('route_id')
->updateStateUsing(function (Page $livewire, $state, Model $record) {
    if ($state > 1 || $state !== null) {
        //...
        $livewire->mountAction('createRoute', ['id' => $state]);
    }
})

TextInputColumn::make('route_id')
->updateStateUsing(function (Page $livewire, $state, Model $record) {
    if ($state > 1 || $state !== null) {
        //...
        $livewire->mountAction('createRoute', ['id' => $state]);
    }
})

LLeandroFerreira We cannot register an Action here, I guess. I created a header action as a worka...

nowakOP•6/12/24, 7:18 AM

Wow! thank you! It seems like this is the only way, and this solves the issue.

Nnowak Wow! thank you! It seems like this is the only way, and this solves the issue.

LeandroFerreira•6/12/24, 7:20 AM

ugly, but it should work

nowakOP•6/12/24, 7:21 AM

We can't have it all

Nnowak We can't have it all 🙂

LeandroFerreira•6/12/24, 7:21 AM

agree

LLeandroFerreira We cannot register an Action here, I guess. I created a header action as a worka...

Willy•8/1/24, 1:00 PM

I did this in a form. But how do I return the form state if the user cancels the action?
For example, I have a toggle set to false, the user clicks it, changes it to true and displays the confirmation modal. If he cancels, my toggle persists as true.

WWilly I did this in a form. But how do I return the form state if the user cancels the...

Dennis Koch•8/1/24, 3:50 PM

In this case you probably need to revert the state to again on cancel

DDennis Koch In this case you probably need to revert the state to again on cancel

Willy•8/1/24, 3:57 PM

Could you give me an example? I tried a few ways, like changing the modalCancelAction but without success.

WWilly Could you give me an example? I tried a few ways, like changing the modalCancelA...

Dennis Koch•8/1/24, 4:13 PM

That's what I would have tried. Probably you can register your own action though.