Full page Livewire component not apply filament page layout
Hello I try creating custom view page on my resource. But I cant apply filament layout. Just there some couple of form element.
My resource file:
`
EditSalaryDetails.php
edit-salary-details.blade.php
my layout:
but my custom page seen like this:
there is no filament menu, header etc. But I think applied css and js files.
Thank you
<?php
namespace App\Filament\Client\Resources\Payroll;
use Filament\Resources\Resource;
use Filament\Forms;
use Filament\Tables;
use App\Models\Payroll\Salary;
use Filament\Forms\Form;
use Filament\Tables\Table;
use Filament\Tables\Actions\EditAction;
use Filament\Tables\Actions\DeleteAction;
use App\Filament\Client\Resources\Payroll\SalaryResource\Pages;
use App\Models\Payroll\Allowance;
use App\Models\Payroll\Commission;
use App\Models;
class SalaryResource extends Resource
{
protected static ?string $model = Salary::class;
protected static ?string $navigationIcon = "heroicon-o-currency-dollar";
protected static ?string $navigationGroup = "HR";
public static function form(Form $form): Form
{
return $form->schema([
.....
]);
}
public static function table(Table $table): Table
{
return $table
->columns([
...
])
->filters([
//
])
->actions([
Tables\Actions\EditAction::make()->url(
fn($record) => SalaryResource::getUrl(
"edit-salary-details",
["record" => $record->id]
)
),
])
->bulkActions([Tables\Actions\DeleteBulkAction::make()]);
}
public static function getRelations(): array
{
return [];
}
public static function getPages(): array
{
return [
"index" => Pages\ListSalaries::route("/"),
"create" => Pages\CreateSalary::route("/create"),
"edit" => Pages\EditSalary::route("/{record}/edit"),
"edit-salary-details" => Pages\EditSalaryDetails::route(
"/{record}/edit-salary-details"
),
];
}
}
<?php
namespace App\Filament\Client\Resources\Payroll;
use Filament\Resources\Resource;
use Filament\Forms;
use Filament\Tables;
use App\Models\Payroll\Salary;
use Filament\Forms\Form;
use Filament\Tables\Table;
use Filament\Tables\Actions\EditAction;
use Filament\Tables\Actions\DeleteAction;
use App\Filament\Client\Resources\Payroll\SalaryResource\Pages;
use App\Models\Payroll\Allowance;
use App\Models\Payroll\Commission;
use App\Models;
class SalaryResource extends Resource
{
protected static ?string $model = Salary::class;
protected static ?string $navigationIcon = "heroicon-o-currency-dollar";
protected static ?string $navigationGroup = "HR";
public static function form(Form $form): Form
{
return $form->schema([
.....
]);
}
public static function table(Table $table): Table
{
return $table
->columns([
...
])
->filters([
//
])
->actions([
Tables\Actions\EditAction::make()->url(
fn($record) => SalaryResource::getUrl(
"edit-salary-details",
["record" => $record->id]
)
),
])
->bulkActions([Tables\Actions\DeleteBulkAction::make()]);
}
public static function getRelations(): array
{
return [];
}
public static function getPages(): array
{
return [
"index" => Pages\ListSalaries::route("/"),
"create" => Pages\CreateSalary::route("/create"),
"edit" => Pages\EditSalary::route("/{record}/edit"),
"edit-salary-details" => Pages\EditSalaryDetails::route(
"/{record}/edit-salary-details"
),
];
}
}
<?php
namespace App\Filament\Client\Resources\Payroll\SalaryResource\Pages;
use App\Filament\Client\Resources\Payroll\SalaryResource;
...
class EditSalaryDetails extends Page implements HasForms
{
use InteractsWithForms;
protected static string $resource = SalaryResource::class;
public ?array $data = [];
public function form(Form $form): Form
{
return $form
->schema([TextInput::make("name")->required()])
->statePath("data");
}
public function render(): View
{
// Dönüş tipi belirtildi
$this->calculateAndUpdateSalary();
return view("payroll.salary-resource.pages.edit-salary-details");
}
public function mount(): void
{
$this->form->fill();
}
}
<?php
namespace App\Filament\Client\Resources\Payroll\SalaryResource\Pages;
use App\Filament\Client\Resources\Payroll\SalaryResource;
...
class EditSalaryDetails extends Page implements HasForms
{
use InteractsWithForms;
protected static string $resource = SalaryResource::class;
public ?array $data = [];
public function form(Form $form): Form
{
return $form
->schema([TextInput::make("name")->required()])
->statePath("data");
}
public function render(): View
{
// Dönüş tipi belirtildi
$this->calculateAndUpdateSalary();
return view("payroll.salary-resource.pages.edit-salary-details");
}
public function mount(): void
{
$this->form->fill();
}
}
<x-filament-panels::page>
<x-filament-panels::form>
{{ $this->form }}
</x-filament-panels::form>
</x-filament-panels::page>
<x-filament-panels::page>
<x-filament-panels::form>
{{ $this->form }}
</x-filament-panels::form>
</x-filament-panels::page>
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="application-name" content="{{ config('app.name') }}">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name') }}</title>
<style>
[x-cloak] {
display: none !important;
}
</style>
@livewireStyles
@FilamentStyles
@vite('resources/css/app.css')
</head>
<body class="antialiased">
{{ $slot }}
@FilamentScripts
@vite('resources/js/app.js')
@livewireScripts
</body>
</html>
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="application-name" content="{{ config('app.name') }}">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name') }}</title>
<style>
[x-cloak] {
display: none !important;
}
</style>
@livewireStyles
@FilamentStyles
@vite('resources/css/app.css')
</head>
<body class="antialiased">
{{ $slot }}
@FilamentScripts
@vite('resources/js/app.js')
@livewireScripts
</body>
</html>
5 Replies
It looks like you're trying to create this https://filamentphp.com/docs/3.x/panels/resources/custom-pages
And this page doesn't require additional layouts.
But I need using blade page layout.
May I ask why? because by looking at your
edit-salary-details file, you're not using your custom layout tho, but I may be wrongThe codes in the article are simplified. I need to show 8 tables on this page. In fact, if I create a special page action and run it with the blade page, it will be enough for me.
Okay.. about your OP I don't have any idea now..