Using RelationManager as a livewire component (without admin panel)

[heruprambadi]

Package

Panel builder

Package Version

v3.2.132

How can we help you?

Hello. I've been using filament without panels for some time. But i can't use relationManager without panels. Can you tell me how to use relationManager without using panels ?

[e2d2-dev]

just use a livewire component with a table

[heruprambadi]

Yeah, i try this, but doesn't work.

[leandrocfe]

RelationManager is a Livewire Component. I have this example rendering the RelationManager in Form tabs. Maybe this can help you.

https://x.com/leandrocfe/status/1864854632272420864

[heruprambadi]

that's great ! But, what if i want to render it withut using tab (under the form) ?

[leandrocfe]

sorry for the delay.. you can render the RelationManger LW component into that view, like

<div>
@livewire(App\Filament\Resources\YourResource\RelationManagers\YourRelationManager::class, [
'ownerRecord' => $theOwnerRecord,
'pageClass' => 'App\Filament\Resources\YourResource\Pages\EditPage'
])
</div>

[e2d2-dev]

depends on what you want to achieve. just post the code of the livewire components for further intel.

[heruprambadi]

Here is my code :

<?php

namespace App\Livewire\Pegawai\Pengaturan;

use App\Models\Hari;
use App\Filament\Resources\PegawaiResource\RelationManagers;
use App\Models\JamKerja;
use Filament\Tables\Actions\DeleteAction;
use Filament\Tables\Actions\CreateAction;
use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\FileUpload;
use Filament\Forms\Components\Grid;
use Filament\Forms\Components\Hidden;
use Filament\Forms\Components\Repeater;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables;
use Filament\Tables\Actions\EditAction;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Filament\Resources\RelationManagers\RelationManager;
use Filament\Notifications\Notification;
use Livewire\Component;
use Illuminate\Contracts\View\View;
use Illuminate\Database\Eloquent\Builder;

class ListHari extends Component implements HasForms, HasTable
{
    public $judul = 'Hari';
    public $subjudul = 'Data Hari';
    use InteractsWithForms;
    use InteractsWithTable;

    protected function getFormSchema(): array
    {
        return [
            Grid::make(2)->schema([
                TextInput::make('hari_id')->required(),
                TextInput::make('nama')->required(),
                Repeater::make('hari_kerja')->columnSpan(2)
                    ->schema([
                        //Select::make('hari_id')->options(ShiftKerja::all()->pluck('nama', 'id')->toArray())->searchable()->native(false),
                        Select::make('jam_kerja_id')->options(JamKerja::all()->pluck('nama', 'id')->toArray())->searchable()->native(false),
                        Hidden::make('created_by')->default(1/*auth()->id()*/)->visibleOn('create'),
                        Hidden::make('created_time')->default(now())->visibleOn('create'),
                    ]),
                Hidden::make('created_by')->default(1/*auth()->id()*/)->visibleOn('create'),
                Hidden::make('created_time')->default(now())->visibleOn('create'),
                Hidden::make('updated_by')->default(1/*auth()->id()*/)->visibleOn('edit'),
                Hidden::make('updated_time')->default(now())->visibleOn('edit')
            ])
        ];
    }

    public function table(Table $table): Table
    {
        return $table
            ->query(Hari::query())
            ->emptyStateHeading('Tidak ada data')
            ->emptyStateDescription('Silakan tambahkan data untuk memulai.')
            ->columns([
                TextColumn::make('hari_id')->label('Kode Hari')->searchable(),
                TextColumn::make('nama')->searchable(),
            ])
            ->headerActions([
                CreateAction::make('create')->label('Tambah')->slideOver()->model(Hari::class)->form(fn() => $this->getFormSchema()),
            ])
            ->filters([
                //
            ])
            ->actions([
                EditAction::make('edit')->modal()->model(Hari::class)->form(fn() => $this->getFormSchema()),
                //DeleteAction::make('delete'),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    //
                ]),
            ]);
    }

    public static function getRelations(): array
    {
        return [
            HariKerjaRelationManager::class,
        ];
    }

    public function render(): View
    {
        return view('livewire.pegawai.pengaturan.list');
    }
}

The result should be like this :

But when i run it, the relationManager doesn't show up :

[e2d2-dev]

relationmanagers are not built for that purpose, but...

https://filamentphp.com/plugins/guava-modal-relation-managers

[heruprambadi]

Thanks, but i think i will use repeater instead

[heruprambadi]

i just found that we can't use repeater without panels. What am i gonna do now 😅