F
Filament•5d ago
𝐒𝐞𝐢𝐧G⨻D

how can i render widgets manually in dashboard pag

hi I am trying to manually manage the dashboard page But how is this possible? I created the dashboard page and I am trying to render the page manually in the blade But my problem is that Filament is automatically rendering the widgets
4 Replies
𝐒𝐞𝐢𝐧G⨻D
𝐒𝐞𝐢𝐧G⨻DOP•5d ago
app/Filament/Pages/Dashboard.php 
<?php

namespace App\Filament\Pages;

use App\Filament\Widgets\OrdersStats;
use App\Filament\Widgets\UsersChart;
use App\Filament\Widgets\UsersCount;
use App\Filament\Widgets\UsersOverview;
use App\Filament\Widgets\ActiveUsers;
use App\Filament\Widgets\BlockedUsers;
use App\Filament\Widgets\AdminUsers;
use App\Filament\Widgets\TicketsStats;
use Filament\Widgets\AccountWidget;
use Filament\Pages\Page;
use Filament\Pages\Dashboard as BaseDashboard;
use App\Filament\Pages\Dashboard;
use Filament\Panel;

class Dashboard extends BaseDashboard
{
    protected static \BackedEnum|string|null $navigationIcon = 'heroicon-o-home';
    protected static ?int $navigationSort = 1;

    protected string $view = 'filament.pages.dashboard';

    public function panel(Panel $panel): Panel
    {
        return $panel
            // ...
            ->pages([
                Dashboard::class,
            ])
            ->widgets([]);
    }
    protected function shouldRenderWidgets(): bool
    {
        return false;
    }
    // ویجت‌های بالای داشبورد
    protected function getHeaderWidgets(): array
    {
        return [
            // UsersOverview::class,
            UsersChart::class,
            UsersCount::class,
            ActiveUsers::class,    // ستون دوم، پایین UsersCount
            // BlockedUsers::class,   // ستون دوم، پایین ActiveUsers
            AdminUsers::class,
            OrdersStats::class,
            TicketsStats::class,
            AccountWidget::class,

        ];
    }
    function getColumns(): int|array
    {
        // عدد 2 یعنی دو ویجت کنار هم میتونن باشن
        return 2;
    }
    // ویجت‌های پایین داشبورد (مثلاً جدول سفارشات اخیر)
    protected function getFooterWidgets(): array
    {
        return [];
    }
}
<?php

namespace App\Filament\Pages;

use App\Filament\Widgets\OrdersStats;
use App\Filament\Widgets\UsersChart;
use App\Filament\Widgets\UsersCount;
use App\Filament\Widgets\UsersOverview;
use App\Filament\Widgets\ActiveUsers;
use App\Filament\Widgets\BlockedUsers;
use App\Filament\Widgets\AdminUsers;
use App\Filament\Widgets\TicketsStats;
use Filament\Widgets\AccountWidget;
use Filament\Pages\Page;
use Filament\Pages\Dashboard as BaseDashboard;
use App\Filament\Pages\Dashboard;
use Filament\Panel;

class Dashboard extends BaseDashboard
{
    protected static \BackedEnum|string|null $navigationIcon = 'heroicon-o-home';
    protected static ?int $navigationSort = 1;

    protected string $view = 'filament.pages.dashboard';

    public function panel(Panel $panel): Panel
    {
        return $panel
            // ...
            ->pages([
                Dashboard::class,
            ])
            ->widgets([]);
    }
    protected function shouldRenderWidgets(): bool
    {
        return false;
    }
    // ویجت‌های بالای داشبورد
    protected function getHeaderWidgets(): array
    {
        return [
            // UsersOverview::class,
            UsersChart::class,
            UsersCount::class,
            ActiveUsers::class,    // ستون دوم، پایین UsersCount
            // BlockedUsers::class,   // ستون دوم، پایین ActiveUsers
            AdminUsers::class,
            OrdersStats::class,
            TicketsStats::class,
            AccountWidget::class,

        ];
    }
    function getColumns(): int|array
    {
        // عدد 2 یعنی دو ویجت کنار هم میتونن باشن
        return 2;
    }
    // ویجت‌های پایین داشبورد (مثلاً جدول سفارشات اخیر)
    protected function getFooterWidgets(): array
    {
        return [];
    }
}
resource/views/filament/pages/dashboard.blade.php 
<x-filament::page class="space-y-6">
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
        @foreach ($this->getHeaderWidgets() as $widget)
            <livewire:{{ $widget }} />
        @endforeach
    </div>

    <div class="grid grid-cols-1 gap-6">
        @foreach ($this->getFooterWidgets() as $widget)
            <livewire:{{ $widget }} />
        @endforeach
    </div>
</x-filament::page>
<x-filament::page class="space-y-6">
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
        @foreach ($this->getHeaderWidgets() as $widget)
            <livewire:{{ $widget }} />
        @endforeach
    </div>

    <div class="grid grid-cols-1 gap-6">
        @foreach ($this->getFooterWidgets() as $widget)
            <livewire:{{ $widget }} />
        @endforeach
    </div>
</x-filament::page>
The output of the blade page for widgets is <livewire:App\Filament\Widgets\UsersChart /> Is this what happens if I want to manually render a widget?
flashman
flashman•5d ago
Dont use headerWidgets, use schema with Forms/Livewire and inject widget in Livewire field. Check documentation
Jordy
Jordy•4d ago
you can do @livewire(YourWidget::class) inside of a blade view you can also add Livewire::make(YourWidget::class) to a form which is a nicer solution if you reuse your views or already have a form on the page
Félicia Eponou
Félicia Eponou•4d ago
Filament automatically renders widgets because you extend Basedashboard instead of page

Did you find this page helpful?