Open Link in new tab — Laravel Filament

In Laravel Filament, you can add an action button that opens a link in a new page. Filament provides a flexible way to create custom action buttons within its tables and forms. To achieve this, you can create a custom action button that uses JavaScript to open a link in a new tab.

Here is a step-by-step guide on how to create such an action button in a Filament table or form:

Step 1: Install Filament

First, ensure you have Filament installed in your Laravel project. If you haven’t installed it yet, you can do so by following the

Documentation - Filament

Step 2: Create a Custom Action Button

You will need to define a custom action button in your Filament resource. Here’s an example for a Filament table resource:

use Filament\Tables;
use Filament\Tables\Actions\Action;

class YourResource extends Resource
{
    // Other resource methods...

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                // Define your table columns here...
            ])
            ->actions([
                Action::make('openLink')
                    ->label('Open Link')
                    ->icon('heroicon-o-external-link')
                    ->action(fn ($record) => null) // No server-side action needed
                    ->color('primary')
                    ->url(fn ($record) => route('your.route.name', ['id' => $record->id]))
                    ->openUrlInNewTab(), // This method will open the link in a new tab
            ])
            ->filters([
                // Define your filters here...
            ]);
    }
}

Step 3: Define the Route (Optional)

Ensure you have the route defined in your web.php or relevant routes file:

Route::get('/your-route/{id}', [YourController::class, 'yourMethod'])->name('your.route.name');

Explanation

• Action::make(‘openLink’): This creates a new action button named openLink.
• label(‘Open Link’): This sets the label for the action button.
• icon(‘heroicon-o-external-link’): This sets an icon for the button.
• action(fn ($record) => null): No server-side action is needed; the URL will handle the navigation.
• url(fn ($record) => route(‘your.route.name’, [‘id’ => $record->id])): This defines the URL the button will open.
• openUrlInNewTab(): This ensures the link opens in a new tab.

This setup creates a custom action button in your Filament table that opens a specified URL in a new browser tab when clicked.

If you need this action button within a form, the approach is similar, but you will define the button within the form actions.

Thank You…..