F
Filament•2mo ago
Tomato

because renderhook on sidebar modal shows in navbar, how to make it normal?

i try to call the CreateAppointmentAction, customize action, but it render oh sidebar, how to make it show in body? 
<?php
namespace App\Livewire;

use App\Filament\Resources\Appointments\Actions\CreateAppointmentAction;
use Filament\Actions\Action;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Schemas\Components\Html;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Contracts\HasSchemas;
use Filament\Support\Enums\Size;
use Livewire\Component;

class ActionShortcuts extends Component implements HasActions, HasSchemas
{
    use InteractsWithActions;
    use InteractsWithSchemas;

    public function mount(): void
    {
        $this->scheduleAction()->mount([]);
    }

    public function scheduleAction(): Action
    {
        return CreateAppointmentAction::make('schedule')
            ->label(Html::make(<<<'HTML'
                <span x-show="$store.sidebar.isOpen">
                    New Appointment
                </span>
            HTML))
            ->color('info')
            ->keyBindings(['command+1', 'ctrl+1'])
            ->icon('heroicon-m-calendar')
            ->extraAttributes(['class' => 'w-full'])
            ->size(Size::Large)
            ->action(fn () => dd('meet'));
    }

    public function render(): string
    {
        return <<<'HTML'
            <div class="space-y-2 x-data">
                {{ $this->schedule }}
                <x-filament-actions::modals />
            </div>
        HTML;
    }
}
<?php
namespace App\Livewire;

use App\Filament\Resources\Appointments\Actions\CreateAppointmentAction;
use Filament\Actions\Action;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Schemas\Components\Html;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Contracts\HasSchemas;
use Filament\Support\Enums\Size;
use Livewire\Component;

class ActionShortcuts extends Component implements HasActions, HasSchemas
{
    use InteractsWithActions;
    use InteractsWithSchemas;

    public function mount(): void
    {
        $this->scheduleAction()->mount([]);
    }

    public function scheduleAction(): Action
    {
        return CreateAppointmentAction::make('schedule')
            ->label(Html::make(<<<'HTML'
                <span x-show="$store.sidebar.isOpen">
                    New Appointment
                </span>
            HTML))
            ->color('info')
            ->keyBindings(['command+1', 'ctrl+1'])
            ->icon('heroicon-m-calendar')
            ->extraAttributes(['class' => 'w-full'])
            ->size(Size::Large)
            ->action(fn () => dd('meet'));
    }

    public function render(): string
    {
        return <<<'HTML'
            <div class="space-y-2 x-data">
                {{ $this->schedule }}
                <x-filament-actions::modals />
            </div>
        HTML;
    }
}
 
AppServiceProvider.php

public function boot(): void
    {
        FilamentView::registerRenderHook(
            PanelsRenderHook::SIDEBAR_NAV_START,
            fn (): string => Blade::render('@livewire(\'action-shortcuts\')'),
        );
 
AppServiceProvider.php

public function boot(): void
    {
        FilamentView::registerRenderHook(
            PanelsRenderHook::SIDEBAR_NAV_START,
            fn (): string => Blade::render('@livewire(\'action-shortcuts\')'),
        );
}```
2 Replies
Clay Bitner
Clay Bitner•16h ago
We're running into the same issue. We have a livewire component that renders another component, which has an action, but it's rendering the action's modal only within that component, when the modal should be global. Let me know if you figured out how to solve the issue. 
<div>
    @teleport('body')
        <x-filament-actions::modals/>
    @endteleport
</div>
<div>
    @teleport('body')
        <x-filament-actions::modals/>
    @endteleport
</div>
Wast told this would work, but then the modal doesn't pop up at all.
LeandroFerreira
LeandroFerreira•15h ago
why not registering it in BODY_END? https://wiremodel.com/blog/registering-a-global-action-in-filament
Registering a global action in Filament
Registering a global action in Filament

Did you find this page helpful?