Text Version of the Lesson
In the process of while we're building simple tables, you got already familiar with three types of actions:
- Edit/Delete buttons in a column
- Create a button on top
- Multi-checkbox Bulk Actions on top-left
In this lesson, we will look at how to create custom actions for all those cases and more.
Edit/Delete + Extra Buttons
Let's try to add another button to the Orders table, like "Mark as Complete," which would require confirmation and would change the status of the order.
Migration:
Schema::table('orders', function (Blueprint $table) { $table->boolean('is_completed')->default(false);});Also, we make it fillable:
app/Models/Order.php:
class Order extends Model{ use HasFactory; protected $fillable = [ 'user_id', 'product_id', 'price', 'is_completed', ];Now, here's what action we can add to the table:
app/Filament/Resources/OrderResource.php:
return $table ->columns([ // ... ]) ->actions([ Tables\Actions\EditAction::make(), Tables\Actions\Action::make('Mark Completed') ->requiresConfirmation() ->icon('heroicon-o-check-badge') ->hidden(fn (Order $record) => $record->is_completed) ->action(fn (Order $record) => $record->update(['is_completed' => true])), ])Here's the visual result:
Pretty sure that the code above is self-explanatory, but here are...
So, How to HIDE the default "New order" button on the top-right corner?
I get it！Comment out the line of method "getHeaderActions" in file ListOrders.php.
Yes, I cover that in the later lesson :)
How to position the New order button, from headerActions, to the left? I did exactly like in the tutorial but i get it on the right.
Hi Povilas,
I get the following error when I perform the bulk action: App\Filament\Resources\OrderResource::App\Filament\Resources{closure}(): Argument #1 ($records) must be of type App\Filament\Resources\Collection, Illuminate\Database\Eloquent\Collection given, called in /Users/tobias/Sites/filament-
even when I manually reference: App\Filament\Resources\Collection,
what could it cause ?
Without code can't help
Actually you can help without seeing the code, because the clues are right there in the exception message ;)
Look at what it says: a
Collectionof typeIlluminate\Database\Eloquent\Collectionhas been passed to the closure, but the closure's first argument is required to be a Collection of typeApp\Filament\Resources\Collection.So the most likely explanation is that you've defined the closure parameter as
Collection $recordand in your uses clause at the top of your resource,Collectionis defined asuse App\Filament\Resources\Collection;.Therefore, either change this to
use Illuminate\Database\Eloquent\Collectionor specify the fully-qualified name in the closure parameter definition:Illuminate\Database\Eloquent\Collection $record.If you choose to change the
useclause, you may find that the otherCollectiontype is used elsewhere in your resource. In that case, you can alias the Eloquent collection by:use App\Filament\Resources\Collection as EloquentCollection;then useEloquentCollection $recordas the closure parameter.I'm sure there's a perfectly good explanation for this, but if the error just said (paraphrasing) that it had been given
App\Filament\Resources\Collectionbut that it really wantedIlluminate\Database\Eloquent\Collectionthen it'd be a lot easier to debug.Perhaps it's just me, but the way that error reads, it seems like it's received
Illuminate\Database\Eloquent\Collectionbut wantsApp\Filament\Resources\CollectionPutting aside for the moment that there's actually no such thing as
App\Filament\Resources\Collectionit is still quite confusing.But as I said above, I suspect there's a very sensible explanation as to why it has to be like this. So any additional pointers you can provide about how to properly read and understand this type of error message in the future would be really useful. Perhaps there's a key point or concept that one needs to grasp first to make it obvious?
Can I make a model action load PayPal or Braintree’s (that’s all that is supported where I live) JS API to take a payment.
Or to simplify the request - can the modal load some JS which returns a response that performs the action and closes the modal?
I suppose this would be as good a place as any to ask this question: When following these instructions and making the "Mark Completed" button, why is there such a long delay between pressing the button and the confirmation dialogue appearing?
From pressing the button to seeing the confirmation dialog, I'm waiting about 1-2 seconds. Yet when the confirmation dialogue finally appears, debugbar shows just 120ms.
Debugbar actually IS the reason of slowness.
Watch this video for more details.
Ahhh.... yes, that's funny. And, also, makes perfect sense :-)