|
| 1 | +--- |
| 2 | +title: Integration Patterns |
| 3 | +description: Three ways to integrate Flowforge into your application. |
| 4 | +navigation: |
| 5 | + icon: i-lucide-layers |
| 6 | +--- |
| 7 | + |
| 8 | +Flowforge provides three flexible integration patterns to fit different use cases and application architectures. |
| 9 | + |
| 10 | +## Pattern 1: Filament Page (Recommended) |
| 11 | + |
| 12 | +Perfect for dedicated board pages in your admin panel. |
| 13 | + |
| 14 | +```php |
| 15 | +<?php |
| 16 | + |
| 17 | +namespace App\Filament\Pages; |
| 18 | + |
| 19 | +use App\Models\Task; |
| 20 | +use Relaticle\Flowforge\Board; |
| 21 | +use Relaticle\Flowforge\BoardPage; |
| 22 | +use Relaticle\Flowforge\Column; |
| 23 | + |
| 24 | +class TaskBoard extends BoardPage |
| 25 | +{ |
| 26 | + protected static ?string $navigationIcon = 'heroicon-o-view-columns'; |
| 27 | + |
| 28 | + public function board(Board $board): Board |
| 29 | + { |
| 30 | + return $board |
| 31 | + ->query(Task::query()) |
| 32 | + ->columnIdentifier('status') |
| 33 | + ->positionIdentifier('position') |
| 34 | + ->columns([ |
| 35 | + Column::make('todo')->label('To Do')->color('gray'), |
| 36 | + Column::make('in_progress')->label('In Progress')->color('blue'), |
| 37 | + Column::make('completed')->label('Completed')->color('green'), |
| 38 | + ]); |
| 39 | + } |
| 40 | +} |
| 41 | +``` |
| 42 | + |
| 43 | +**Use when:** You want a standalone Kanban page in your admin panel |
| 44 | +**Benefits:** Full Filament integration, automatic registration, built-in actions |
| 45 | + |
| 46 | +## Pattern 2: Resource Integration |
| 47 | + |
| 48 | +Integrate with your existing Filament resources. Perfect for campaign management where teams track tasks within campaigns. |
| 49 | + |
| 50 | +```php |
| 51 | +<?php |
| 52 | + |
| 53 | +namespace App\Filament\Resources\CampaignResource\Pages; |
| 54 | + |
| 55 | +use App\Filament\Resources\CampaignResource; |
| 56 | +use Relaticle\Flowforge\Board; |
| 57 | +use Relaticle\Flowforge\BoardResourcePage; |
| 58 | +use Relaticle\Flowforge\Column; |
| 59 | + |
| 60 | +class CampaignTaskBoard extends BoardResourcePage |
| 61 | +{ |
| 62 | + protected static string $resource = CampaignResource::class; |
| 63 | + |
| 64 | + public function board(Board $board): Board |
| 65 | + { |
| 66 | + return $board |
| 67 | + ->query( |
| 68 | + // Get tasks for this specific campaign and current user's team |
| 69 | + $this->getRecord() |
| 70 | + ->tasks() |
| 71 | + ->whereHas('team', fn($q) => $q->where('id', auth()->user()->current_team_id)) |
| 72 | + ->getQuery() |
| 73 | + ) |
| 74 | + ->columnIdentifier('status') |
| 75 | + ->positionIdentifier('position') |
| 76 | + ->columns([ |
| 77 | + Column::make('backlog')->label('Backlog')->color('gray'), |
| 78 | + Column::make('in_progress')->label('In Progress')->color('blue'), |
| 79 | + Column::make('review')->label('Review')->color('amber'), |
| 80 | + Column::make('completed')->label('Completed')->color('green'), |
| 81 | + ]); |
| 82 | + } |
| 83 | +} |
| 84 | + |
| 85 | +// Register in your CampaignResource |
| 86 | +public static function getPages(): array |
| 87 | +{ |
| 88 | + return [ |
| 89 | + 'index' => Pages\ListCampaigns::route('/'), |
| 90 | + 'create' => Pages\CreateCampaign::route('/create'), |
| 91 | + 'edit' => Pages\EditCampaign::route('/{record}/edit'), |
| 92 | + 'tasks' => Pages\CampaignTaskBoard::route('/{record}/tasks'), // Add this line |
| 93 | + ]; |
| 94 | +} |
| 95 | +``` |
| 96 | + |
| 97 | +**Use when:** You want to add Kanban to existing Filament resources |
| 98 | +**Benefits:** Inherits resource permissions, policies, and global scopes |
| 99 | + |
| 100 | +## Pattern 3: Standalone Livewire |
| 101 | + |
| 102 | +Use outside of Filament or in custom applications. |
| 103 | + |
| 104 | +```php |
| 105 | +<?php |
| 106 | + |
| 107 | +namespace App\Livewire; |
| 108 | + |
| 109 | +use App\Models\Task; |
| 110 | +use Filament\Actions\Concerns\InteractsWithActions; |
| 111 | +use Filament\Actions\Contracts\HasActions; |
| 112 | +use Filament\Forms\Concerns\InteractsWithForms; |
| 113 | +use Filament\Forms\Contracts\HasForms; |
| 114 | +use Livewire\Component; |
| 115 | +use Relaticle\Flowforge\Board; |
| 116 | +use Relaticle\Flowforge\Column; |
| 117 | +use Relaticle\Flowforge\Concerns\InteractsWithBoard; |
| 118 | +use Relaticle\Flowforge\Contracts\HasBoard; |
| 119 | + |
| 120 | +class TaskBoard extends Component implements HasBoard, HasActions, HasForms |
| 121 | +{ |
| 122 | + use InteractsWithBoard; |
| 123 | + use InteractsWithActions; |
| 124 | + use InteractsWithForms; |
| 125 | + |
| 126 | + public function board(Board $board): Board |
| 127 | + { |
| 128 | + return $board |
| 129 | + ->query(Task::query()) |
| 130 | + ->columnIdentifier('status') |
| 131 | + ->positionIdentifier('position') |
| 132 | + ->columns([ |
| 133 | + Column::make('todo')->label('To Do')->color('gray'), |
| 134 | + Column::make('in_progress')->label('In Progress')->color('blue'), |
| 135 | + Column::make('completed')->label('Completed')->color('green'), |
| 136 | + ]); |
| 137 | + } |
| 138 | + |
| 139 | + public function render() |
| 140 | + { |
| 141 | + return view('livewire.task-board'); |
| 142 | + } |
| 143 | +} |
| 144 | +``` |
| 145 | + |
| 146 | +```blade |
| 147 | +{{-- resources/views/livewire/task-board.blade.php --}} |
| 148 | +<div> |
| 149 | + <h1 class="text-2xl font-bold mb-6">Task Board</h1> |
| 150 | + {{ $this->board }} |
| 151 | +</div> |
| 152 | +``` |
| 153 | + |
| 154 | +**Use when:** Building custom interfaces or non-Filament applications |
| 155 | +**Benefits:** Maximum flexibility, custom styling, independent routing |
0 commit comments