> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Rendering an action in a Livewire component
export const EditOnGitHub = ({version, path}) => {
const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`;
return
;
};
Before proceeding, make sure `filament/actions` is installed in your project. You can check by running:
```bash theme={"theme":"gruvbox-dark-hard"}
composer show filament/actions
```
If it's not installed, consult the [installation guide](../introduction/installation#installing-the-individual-components) and configure the **individual components** according to the instructions.
## Setting up the Livewire component
First, generate a new Livewire component:
```bash theme={"theme":"gruvbox-dark-hard"}
php artisan make:livewire ManagePost
```
Then, render your Livewire component on the page:
```blade theme={"theme":"gruvbox-dark-hard"}
@livewire('manage-post')
```
Alternatively, you can use a full-page Livewire component:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Livewire\ManagePost;
use Illuminate\Support\Facades\Route;
Route::get('posts/{post}/manage', ManagePost::class);
```
You must use the `InteractsWithActions` and `InteractsWithSchemas` traits, and implement the `HasActions` and `HasSchemas` interfaces on your Livewire component class:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Concerns\RestrictsFileUploadsToSchemaComponents;
use Filament\Schemas\Contracts\HasSchemas;
use Livewire\Component;
class ManagePost extends Component implements HasActions, HasSchemas
{
use InteractsWithActions;
use InteractsWithSchemas;
use RestrictsFileUploadsToSchemaComponents;
// ...
}
```
## Adding the action
Add a method that returns your action. The method must share the exact same name as the action, or the name followed by `Action`:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Models\Post;
use Filament\Actions\Action;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Concerns\RestrictsFileUploadsToSchemaComponents;
use Filament\Schemas\Contracts\HasSchemas;
use Livewire\Component;
class ManagePost extends Component implements HasActions, HasSchemas
{
use InteractsWithActions;
use InteractsWithSchemas;
use RestrictsFileUploadsToSchemaComponents;
public Post $post;
public function deleteAction(): Action
{
return Action::make('delete')
->color('danger')
->requiresConfirmation()
->action(fn () => $this->post->delete());
}
// This method name also works, since the action name is `delete`:
// public function delete(): Action
// This method name does not work, since the action name is `delete`, not `deletePost`:
// public function deletePost(): Action
// ...
}
```
Finally, you need to render the action in your view. To do this, you can use `{{ $this->deleteAction }}`, where you replace `deleteAction` with the name of your action method:
```blade theme={"theme":"gruvbox-dark-hard"}
{{ $this->deleteAction }}
```
You also need `` which injects the HTML required to render action modals. This only needs to be included within the Livewire component once, regardless of how many actions you have for that component.
`filament/actions` also includes the following packages:
* `filament/forms`
* `filament/infolists`
* `filament/notifications`
* `filament/support`
These packages allow you to use their components within Livewire components.
For example, if your action uses [Notifications](./notifications), remember to include `@livewire('notifications')` in your layout and add `@import '../../vendor/filament/notifications/resources/css/index.css'` to your CSS file.
If you are using any other [Filament components](./overview#package-components) in your action, make sure to install and integrate the corresponding package as well.
## Passing action arguments
Sometimes, you may wish to pass arguments to your action. For example, if you're rendering the same action multiple times in the same view, but each time for a different model, you could pass the model ID as an argument, and then retrieve it later. To do this, you can invoke the action in your view and pass in the arguments as an array:
```php theme={"theme":"gruvbox-dark-hard"}
```
Now, you can access the post ID in your action method:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Models\Post;
use Filament\Actions\Action;
public function deleteAction(): Action
{
return Action::make('delete')
->color('danger')
->requiresConfirmation()
->action(function (array $arguments) {
$post = Post::find($arguments['post']);
$post?->delete();
});
}
```
## Hiding actions in a Livewire view
If you use `hidden()` or `visible()` to control if an action is rendered, you should wrap the action in an `@if` check for `isVisible()`:
```blade theme={"theme":"gruvbox-dark-hard"}
```
The `hidden()` and `visible()` methods also control if the action is `disabled()`, so they are still useful to protect the action from being run if the user does not have permission. Encapsulating this logic in the `hidden()` or `visible()` of the action itself is good practice otherwise you need to define the condition in the view and in `disabled()`.
You can also take advantage of this to hide any wrapping elements that may not need to be rendered if the action is hidden:
```blade theme={"theme":"gruvbox-dark-hard"}
@if ($this->deleteAction->isVisible())
{{ $this->deleteAction }}
@endif
```
## Grouping actions in a Livewire view
You may [group actions together into a dropdown menu](../actions/grouping-actions) by using the `` Blade component, passing in the `actions` array as an attribute:
```blade theme={"theme":"gruvbox-dark-hard"}
```
You can also pass in any attributes to customize the appearance of the trigger button and dropdown:
```blade theme={"theme":"gruvbox-dark-hard"}
```
## Chaining actions
You can chain multiple actions together, by calling the `replaceMountedAction()` method to replace the current action with another when it has finished:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Models\Post;
use Filament\Actions\Action;
public function editAction(): Action
{
return Action::make('edit')
->schema([
// ...
])
// ...
->action(function (array $arguments) {
$post = Post::find($arguments['post']);
// ...
$this->replaceMountedAction('publish', $arguments);
});
}
public function publishAction(): Action
{
return Action::make('publish')
->requiresConfirmation()
// ...
->action(function (array $arguments) {
$post = Post::find($arguments['post']);
$post->publish();
});
}
```
Now, when the first action is submitted, the second action will open in its place. The [arguments](#passing-action-arguments) that were originally passed to the first action get passed to the second action, so you can use them to persist data between requests.
If the first action is canceled, the second one is not opened. If the second action is canceled, the first one has already run and cannot be cancelled.
## Programmatically triggering actions
Sometimes you may need to trigger an action without the user clicking on the built-in trigger button, especially from JavaScript. Here is an example action which could be registered on a Livewire component:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Actions\Action;
public function testAction(): Action
{
return Action::make('test')
->requiresConfirmation()
->action(function (array $arguments) {
dd('Test action called', $arguments);
});
}
```
You can trigger that action from a click in your HTML using the `wire:click` attribute, calling the `mountAction()` method and optionally passing in any arguments that you want to be available:
```blade theme={"theme":"gruvbox-dark-hard"}
```
To trigger that action from JavaScript, you can use the [`$wire` utility](https://livewire.laravel.com/docs/alpine#controlling-livewire-from-alpine-using-wire), passing in the same arguments:
```js theme={"theme":"gruvbox-dark-hard"}
$wire.mountAction('test', { id: 12345 })
```
)}
Your logo here