Essentials

API Reference

Complete reference for Flowforge configuration methods.

Board Configuration

Method	Description	Required
`query(Builder)`	Set the Eloquent query as data source	Yes
`columnIdentifier(string)`	Field name for column status	Yes
`positionIdentifier(string)`	Field name for drag-drop ordering	Yes
`columns(array)`	Define board columns	Yes
`recordTitleAttribute(string)`	Field name for card titles
`cardSchema(Closure)`	Rich card content using Schema
`cardActions(array)`	Actions available on each card
`columnActions(array)`	Actions available on column headers
`searchable(array)`	Enable search on specified fields
`filters(array)`	Add filtering capabilities
`cardAction(string)`	Make cards clickable with action

Board Methods

Essential Configuration

public function board(Board $board): Board
{
    return $board
        ->query(Task::query())                    // Required: Data source
        ->columnIdentifier('status')              // Required: Column field
        ->positionIdentifier('position')          // Required: Position field
        ->columns([                               // Required: Column definitions
            Column::make('todo')->label('To Do')->color('gray'),
            Column::make('done')->label('Done')->color('green'),
        ]);
}

Content Configuration

->recordTitleAttribute('title')                   // Card title field
->cardSchema(fn(Schema $schema) => $schema        // Rich card content
    ->components([
        TextEntry::make('description'),
        TextEntry::make('due_date')->date(),
    ])
)

Actions Configuration

->cardActions([                                   // Card-level actions
    EditAction::make()->model(Task::class),
    DeleteAction::make()->model(Task::class),
])
->columnActions([                                 // Column-level actions
    CreateAction::make()->model(Task::class),
])
->cardAction('edit')                              // Make cards clickable

Search & Filtering

->searchable(['title', 'description'])            // Enable search
->filters([                                       // Add filters
    SelectFilter::make('priority'),
    Filter::make('overdue')->query(fn($q) => 
        $q->where('due_date', '<', now())
    ),
])

Column Configuration

Column::make('identifier')
    ->label('Display Name')                       // Column header text
    ->color('blue')                              // Column color theme
    ->icon('heroicon-o-flag')                    // Column header icon

Available Colors

gray - Neutral/default
blue - Primary/in-progress
green - Success/completed
red - Error/urgent
amber - Warning/review
purple - Custom status
pink - Custom status

Livewire Methods

These methods are available in your board components for programmatic control:

Card Management

// Move card between columns
$this->moveCard(string $cardId, string $targetColumnId, ?string $afterCardId = null, ?string $beforeCardId = null)

// Get single record
$this->getBoardRecord(int|string $recordId)

// Get column records (respects pagination)
$this->getBoardColumnRecords(string $columnId)

// Get total count for column
$this->getBoardColumnRecordCount(string $columnId)

Pagination Control

// Load more cards for pagination
$this->loadMoreItems(string $columnId, ?int $count = null)

// Load all cards to enable reordering
$this->loadAllItems(string $columnId)

// Check if all cards are loaded
$this->isColumnFullyLoaded(string $columnId): bool

// Get position for new card in column
$this->getBoardPositionInColumn(string $columnId): string

Performance Features

Intelligent Pagination: Efficiently handles 100+ cards per column
Infinite Scroll: Smooth loading with 80% scroll threshold
Optimistic UI: Immediate feedback with rollback on errors
Fractional Ranking: Prevents database locks during reordering
Query Optimization: Cursor-based pagination with eager loading

Edit this pageorReport an issue

Database Schema

Set up your database for drag-and-drop Kanban functionality.

Troubleshooting

Common issues and solutions for Flowforge implementation.