ブルーシュ

IT技術の勉強記録

ホーム > Laravel > Tips

【Filament v3】Editページのビュー(HTML)を編集する方法

自分用メモシリーズ。
LaravelとFilamentはまだ勉強中なので、「とりあえず動く」を目標にやっています。
自分用メモシリーズの記事は参考程度にしてください。
Filamentのバージョンは3.xです。
  
Userというリソースを作成し、その編集画面でもあり詳細画面でもあるページのビューのHTMLを編集したいとき。
Filament v3の公式解説ページはこちら。
Editing records - Panel Builder - Filament #Custom views

クラス側

app\Filament\Resources\UserResource\Pages\EditUser.phpを開きます。
そして、デフォルトのビューではなく、自分でカスタムしたページを参照してくださーいと教えてあげます。

class EditUser extends EditRecord
{
	protected static string $resource = UserResource::class;

	//ここに追加
	protected static string $view = 'filament.resources.users.pages.edit-user';

	protected function getHeaderActions(): array
	{
		return [
			Actions\DeleteAction::make(),
		];
	}
}

ビュー側

上記のように宣言したからには、そのカスタムビューページを作成しなければいけません。
resources/views/filament/resources/users/pages/に、edit-user.blade.phpという名前のファイルを作成します。

そして、そのファイルの内容は公式解説ページからコピペしたものですが、下記が基本形です。これをもとに自由に内容を追加することができます。

<x-filament-panels::page>
	<x-filament-panels::form wire:submit="save">
		{{ $this->form }}

		<x-filament-panels::form.actions
			:actions="$this->getCachedFormActions()"
			:full-width="$this->hasFullWidthFormActions()"
		/>
	</x-filament-panels::form>

	@if (count($relationManagers = $this->getRelationManagers()))
		<x-filament-panels::resources.relation-managers
			:active-manager="$this->activeRelationManager"
			:managers="$relationManagers"
			:owner-record="$record"
			:page-class="static::class"
		/>
	@endif
</x-filament-panels::page>

現在表示しているデータを取得したい場合、たとえばnameというカラムなら{{$record->name}}です。

本来のファイルの内容はvendor/filament/filament/resources/views/resources/pages/edit-record.blade.phpで確認することができます。
UserResource\Pages\EditUser.phpに、$view = "~~";という一文を追加しなければ、edit-record.blade.phpの内容が表示されるということです。

【Filament v3】Editページのビュー(HTML)を編集する方法 #Tips #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #Filament

作者の似顔絵

プログラミング歴19年🌈調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。

秋田のウェブ活用をサポート

ホームページを自作してコスト削減!秋田の事業者は無料で利用できます。
ネットショップ・WordPress・SEO対策などさまざまなお悩みをサポートします。

その他、フロントエンド案件のご依頼はインフォメーション

秋田市 レンタル着物 笹パンダ堂のバナーリンク