CRUDBooster's Substack

Build a Custom Input Types in CRUDBooster

Ferry Ariawan — Mon, 20 Oct 2025 23:53:29 GMT
Build a Custom Color Input Type in CRUDBooster

Sometimes you need a field that feels tailor‑made — like a color picker for brand guidelines, themes, or status indicators. CRUDBooster supports custom input types with a clean, predictable structure. In this article, we’ll build `custom-color` that’s consistent, maintainable, and production‑ready.
The goal isn’t just “it works”, but “it’s worth using”: consistent code, easy maintenance, and aligned with CRUDBooster patterns.
Prerequisites

- PHP `8.2+`
- Laravel `11.x` or `12.x`
- CRUDBooster installed and running
- Familiarity with Livewire, Blade, and Service Providers
Why this matters:
- PHP/Laravel versions affect syntax, lifecycle, and package compatibility.
- CRUDBooster must be active so the registrar and theme can discover your type.
- Livewire and Blade are the foundation for rendering and data binding in CRUDBooster forms.
Practical tip:
- Store custom types under `app/Cb/Types`. It cleanly separates types from modules, makes discovery easier, and keeps a tidy architecture.
What We’ll Build

We’ll create a color input type `custom-color` that provides:
- A form template rendering a native, lightweight color picker.
- A view template for detail/read‑only pages with a small swatch.
- An option class to manage defaults and small reusable behaviors.
- A service provider to register the type with an explicit alias.
Folder & File Structure

This structure ensures CRUDBooster can discover and render the type.
app/Cb/Types/Color
|
├── Function
│ ── Color.php
├── views
│ ── form.blade.php
│ ── view.blade.php
└── ColorServiceProvider.php
File roles:
- `Function/Color.php`: option class for reusable settings (e.g., default color, preview toggle).
- `views/form.blade.php`: the form template (with Livewire binding and minimal a11y).
- `views/view.blade.php`: the read‑only/detail template so users see a swatch and the value.
- `ColorServiceProvider.php`: registers the view alias and the type with the CRUDBooster registrar.
Best practices:
- Use a clear, consistent alias (`custom-color`) so it’s easy to reference.
- Keep options in `Function/Color.php` so Form builder usage stays clean.
Register the Type (Service Provider)

The provider ties everything together: it loads views, registers the type, and (optionally) adds assets.
// File: app/Cb/Types/Color/ColorServiceProvider.php
namespace App\Cb\Types\Color;
use Illuminate\Support\ServiceProvider;
use CrudBooster\Components\Type\CBTypeRegistrar;
class ColorServiceProvider extends ServiceProvider
{
public function boot(): void
{
// Register Blade views under the alias `custom-color`
$this->loadViewsFrom(__DIR__.’/views’, ‘custom-color’);
// Register the type with CRUDBooster (color fits the text group)
CBTypeRegistrar::addText([
‘type’ => ‘custom-color’, // type name
‘form’ => ‘custom-color::form’, // form view alias
‘view’ => ‘custom-color::view’, // read-only view alias
‘clazz’ => Function\Color::class, // option class
‘generalOption’ => true, // enable built-in general options
]);
}
Then register the provider so Laravel includes it:
// File: app/Providers/AppServiceProvider.php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use App\Cb\Types\Color\ColorServiceProvider;
class AppServiceProvider extends ServiceProvider
{
public function register(): void
{
$this->app->register(ColorServiceProvider::class);
}
Key notes:
- `loadViewsFrom` exposes a namespace alias used by the registrar in `form` and `view`.
- `CBTypeRegistrar::addText` places the type in the correct group (text‑like), which matters for UI integration and default behavior.
- `generalOption => true` unlocks CRUDBooster’s built‑in input transformations from the module builder.
`Type Groups You Can Use`

Choose the right registrar to match UI/behavior expectations:
- `addText` — text‑like inputs (we use this for color)
- `addDateTime` — date & time inputs
- `addWysiwyg` — rich text editor
- `addNumeric` — numeric (number, money, decimal) with formatting
- `addUpload` — file/image upload
- `addPassword` — password fields with safe behavior
- `addJson` — structured JSON input
- `addSelect` — choices (select, radio, checkbox)
- `addMap` — maps and coordinates
How to choose:
- Consider how the value is stored (string vs numeric vs JSON) and how built‑in UI behaves.
- Pick the group that best matches the base behavior of your type so defaults stay relevant.
`General Options (Built‑ins)`

With `’generalOption’ => true`, you can use helpful transformations from the module builder:
- `uppercase`, `lowercase`, `noSpace`, `noSpecialChar`
- `numeric`, `nonNumeric`, `numberFormat`, `phoneFormat`
Context for color:
- Colors are typically hex strings (`#RRGGBB`). Avoid `numeric/nonNumeric` for this use case.
- `noSpace` or `noSpecialChar` is irrelevant with native ``, but useful if you fall back to a manual text input.
`Form Template (Blade)`

The form template defines how the input is rendered and bound to Livewire. Keep accessibility (labels, focus) and responsiveness in mind.
{{-- File: app/Cb/Types/Color/views/form.blade.php --}}
{{-- The $column variable contains key, placeholder, label, helpText, etc. --}}
id=”{{$column[’key’]}}”
{{ $focus ? ‘autofocus’ : ‘’ }}
placeholder=”{{$column[’placeholder’] ?? ‘’}}”
@readonly($column[’readonly’] ?? false)
wire:loading.attr=”readonly”
wire:target=”formSave”
@if(isset($column[’live’]))
wire:model.live.debounce.{{$column[’live’]}}ms=”formData.{{$column[’key’]}}”
@else
wire:model=”formData.{{$column[’key’]}}”
@endif
class=”form-control”>
Binding details:
- `wire:model` binds the value to `formData[key]` so CRUDBooster manages form state.
- `wire:loading.attr=”readonly”` prevents changes while submitting.
- `autofocus` improves UX when the field is important.
Optional extras:
- Render the label and helpText from `$column` outside the input to improve accessibility.
- Use `debounce` if color changes trigger heavy preview updates.
`View Template (Blade)`

The view template shows the saved value on detail/read‑only pages. A small swatch helps with quick visual verification.
{{-- File: app/Cb/Types/Color/views/view.blade.php --}}
{{-- Available: $column, $value, $formData --}}
@php
$color = $value ?? ($column[’option’][’default’] ?? ‘#000000’);
@endphp
{{ $color }}
Display tips:
- Keep the swatch small so it doesn’t disrupt layout.
- Show the color code for easy copying.
- Provide a fallback like `#000000` when the value is missing.
`Type Option Class`

Options make configuration reusable and clean when using the Form builder.
// File: app/Cb/Types/Color/Function/Color.php
namespace App\Cb\Types\Color\Function;
use CrudBooster\Components\Type\TypeOptionAbstract;
class Color extends TypeOptionAbstract
{
/**
* Set a default color (hex), e.g., #FF6B6B
*/
public function default(string $hex): static
{
$this->option[’default’] = $hex;
return $this;
}
/**
* Show or hide the preview swatch in the form
*/
public function showPreview(bool $show): static
{
$this->option[’showPreview’] = $show;
return $this;
}
Option best practices:
- Validate hex values at the form layer if needed (e.g., Laravel rules) to keep data safe.
- Keep options chainable: `Color::option()->default(’#FF6B6B’)->showPreview(true)`.
`Adding CSS & JS Assets (Optional)`

Need richer features (palettes, sampling, alpha)? Register CSS/JS assets — they’re automatically injected into the CRUDBooster theme header.
// Inside: app/Cb/Types/Color/ColorServiceProvider.php
use CrudBooster\Themes\CbThemeAssetRegistrar;
CbThemeAssetRegistrar::addCss(’https://example.com/color-picker.css’);
CbThemeAssetRegistrar::addJs(’https://example.com/color-picker.js’);
Notes:
- Ensure assets aren’t too heavy to keep the admin panel snappy.
- Consider self‑hosting assets if CDN access is unreliable in your environment.
`Use It in a Form`

Here’s a realistic usage in a Form Component — perfect for theme or branding settings.
use CrudBooster\Livewire\FormBuilder\Form;
use App\Cb\Types\Color\Function\Color;
class ThemeForm extends \CrudBooster\Livewire\BaseFormComponent
{
public function init(): void
{
$this->makeForm([
Form::add(label: ‘Brand Color’, key: ‘brand_color’, type: ‘custom-color’)
->option(Color::option()->default(’#FF6B6B’)->showPreview(true)),
]);
}
Database suggestions:
- Store as `VARCHAR(7)` for hex `#RRGGBB`, or `VARCHAR(9)` if you support alpha `#RRGGBBAA`.
- Use a migration default if you want an initial value when records are created.
`Workflow at a Glance`

- Create the folder structure and files.
- Write lightweight, accessible form and view templates.
- Add an option class under `Function` for reusable configuration.
- Register the service provider and call `CBTypeRegistrar` for the right group.
- (Optional) Add CSS/JS assets for advanced pickers.
- Use `Form::add` with your type name and chain options.
- Test in a real module and watch UX and data consistency.
`Tips That Save Time`

- Keep `type` names, view aliases, and class names consistent.
- Use a short, clear alias with `loadViewsFrom` (e.g., `custom-color`).
- Enable `generalOption` only if it’s relevant to your input behavior.
- Keep types under `app/Cb/Types` for a clean separation from modules.
`Troubleshooting`

- Type not recognized: ensure the service provider is registered and `CBTypeRegistrar` is called.
- View not found: check your `loadViewsFrom` alias matches the registrar config.
- Options not applied: make sure your option class extends `TypeOptionAbstract` and the template uses `$column[’option’]`.
- Livewire not updating: verify `wire:model` targets `formData[key]` and there are no binding errors.
- CSS/JS not loading: verify URLs/access and ensure `CbThemeAssetRegistrar::addCss/addJs` is called.
Thanks for reading CRUDBooster's Substack! This post is public so feel free to share it.
Share


Intercepting Data Before and After Saving in CRUDBooster
Ferry Ariawan — Mon, 18 Aug 2025 08:40:30 GMT
Hey everyone! If you've ever worked with admin panels, you know that sometimes you need to run custom logic right when a user saves a form. Maybe you need to generate a unique slug, send a notification, or log an action to an audit trail. Hacking the core logic is messy and a big no-no.
Luckily, CRUDBooster gives us a super clean way to hook into the form-saving process using simple event attributes. Today, we'll dive into two of the most useful ones: #[OnFormSaving] and #[OnFormSaved]. Let's get into it!
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.
What You'll Need
Before we start, you just need one thing:
A CRUDBooster module that you've already created. We'll be working inside the Form Component file for that module (e.g., app/Cb/Modules/YourModule/Livewire/YourModuleForm.php).
That's it! No complex setup required.
Running Code Before Data Hits the Database with #[OnFormSaving]
The #[OnFormSaving] attribute is your go-to when you need to do something before the data is written to your database. This is the perfect place for last-minute data validation, modification, or preparation.
How to Use It
Inside your Form Component class, you simply create a public function and add the #[OnFormSaving] attribute right above it. CRUDBooster will automatically find it and run it at the right time.
PHP
use CrudBooster\Attributes\OnFormSaving;
// Make sure you are in your Form Component class, e.g., ProductsForm.php

class ProductsForm extends BaseFormComponent
{
    public function init() 
    {
        // Your form fields are defined here...
    }

    #[OnFormSaving]
    public function beforeSave($model, $data, $uuid = null)
    {
        // Your custom logic goes here!
        // This code will run right before the data is saved.
    }
}
CRUDBooster passes three arguments to your function:
$model: The model class for the module.
$data: An array containing all the data submitted from the form.
$uuid: The unique ID of the record (this will be null if you're creating a new record).
Use Case: Custom Validation
Imagine you want to prevent a user from creating a product if another product with a similar name already exists. This is a perfect job for #[OnFormSaving].
PHP
use App\Cb\Modules\Products\Models\Products;
use CrudBooster\Attributes\OnFormSaving;
use Illuminate\Support\Str;

//... inside your form component

#[OnFormSaving]
public function beforeSave($model, $data, $uuid = null)
{
    // Let's check for a similar product name
    $similarProduct = Products::where('name', 'like', $data['name'].'%')->first();

    // If we're creating a new product and a similar one exists...
    if (!$uuid && $similarProduct) {
        // Stop the process and throw an error!
        throw new \Exception("A product with a very similar name already exists. Please choose a different name.");
    }
}
With this simple function, the save operation will be halted if our condition is met, and the user will see an error message. Clean and effective!
Taking Action After a Successful Save with #[OnFormSaved]
Once your data is safely stored in the database, you might want to trigger a follow-up action. That's where #[OnFormSaved] comes in. It runs after the INSERT or UPDATE query has successfully completed.
How to Use It
Just like before, you define a public function in your Form Component and add the #[OnFormSaved] attribute.
PHP
use CrudBooster\Attributes\OnFormSaved;
// Make sure you are in your Form Component class

class ProductsForm extends BaseFormComponent
{
    public function init() 
    {
        // Your form fields are defined here...
    }

    #[OnFormSaved]
    public function afterSave($model, $data, $uuid = null)
    {
        // Your custom logic goes here!
        // This code will run right after the data has been successfully saved.
    }
}
The arguments are the same, giving you full context about the data that was just saved.
Use Case: Sending a Notification Email
A classic example is sending a notification when a new record is created. Let's say we want to email an admin every time a new product is added to the catalog.
PHP
use CrudBooster\Attributes\OnFormSaved;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Mail;

//... inside your form component

#[OnFormSaved]
public function afterSave($model, $data, $uuid = null)
{
    // Check if it's a new record. The $uuid is only available after saving a new entry.
    // If $data['id'] is present, it's an update, so we can also check that.
    $isCreating = empty($data['id']);

    if ($isCreating) {
        $productName = $data['name'];
        $adminEmail = 'admin@yourapp.com';
        
        // Send an email
        // Mail::to($adminEmail)->send(new NewProductNotification($productName));

        // Or just log a message for demonstration
        Log::info("A new product '{$productName}' has been added with UUID: {$uuid}");
    }
}
Now, every time a new product is created, your application can automatically fire off an email or log the event. Other great use cases include clearing a specific cache, updating a related model, or pushing data to an external API.
Wrap-Up
These two simple attributes, #[OnFormSaving] and #[OnFormSaved], give you incredible power to extend CRUDBooster's functionality. They allow you to add complex business logic directly into your modules in a way that is clean, maintainable, and upgrade-safe.
Ready to build powerful admin panels faster than ever? Download CRUDBooster and get started today!
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.



Building Master-Detail Relationships in CRUDBooster: A Complete Guide
Ferry Ariawan — Sat, 19 Jul 2025 10:09:44 GMT
Ever found yourself needing to manage related data in your admin panel? Like categories and their subcategories, or customers and their orders? If you're using CRUDBooster, you're in luck! The Master-Detail (Sub Module) feature makes this incredibly straightforward.
Let me walk you through everything you need to know about implementing master-detail relationships in CRUDBooster, from the basics to real-world examples.
What Are Master-Detail Relationships?
Think of master-detail relationships as parent-child data structures. The master (parent) contains the main record, while the detail (child) contains related records that belong to that master. Common examples include:
Categories → Subcategories
Customers → Orders
Projects → Tasks
Invoices → Invoice Items
In traditional admin panels, you'd typically navigate between separate pages to manage these relationships. With CRUDBooster's Sub Module feature, you can manage both the master and detail records from a single interface - pretty neat, right?
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.
Prerequisites
Before diving in, make sure you have:
CRUDBooster 7.x installed and running
Two related database tables with a foreign key relationship
Basic understanding of CRUDBooster module creation
Generated modules for both your master and detail tables
For this tutorial, I'll use a practical example: managing categories and their subcategories.
Setting Up the Database Structure
Let's start with a simple database structure. You'll need two tables with a foreign key relationship:
-- Categories table (Master)
CREATE TABLE categories (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(255) NOT NULL,
    description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- Subcategories table (Detail)
CREATE TABLE subcategories (
    id INT PRIMARY KEY AUTO_INCREMENT,
    category_id INT NOT NULL,
    name VARCHAR(255) NOT NULL,
    description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (category_id) REFERENCES categories(id)
);
The key here is the category_id foreign key in the subcategories table - this links each subcategory to its parent category.
Step 1: Generate Your Modules
First, you'll need to create modules for both tables. You can do this through the CRUDBooster admin panel or via command line:
# Generate category module
php artisan cb:crud categories --name=Categories

# Generate subcategory module
php artisan cb:crud subcategories --name=Subcategories
This creates all the necessary files for both modules. At this point, you have two separate modules that work independently.
Step 2: Configure the Master Module
Now comes the magic! Navigate to your master module's form component. In our case, that's the CategoryForm component located at app/Cb/Modules/Categories/Livewire/CategoriesForm.php.
Here's how to integrate the sub-module:
makeForm([
            Form::add(label: "Name", key: "name", type: "text", validation: "required"),
            Form::add(label: "Description", key: "description", type: "textarea"),
        ]);

        // Here's where the magic happens!
        $this->addSubModule([
            SubModule::create(Subcategories::class)->foreignKey('category_id'),
        ]);
    }
}
Let me break down what's happening here:
SubModule::create(): This creates a new sub-module instance
Subcategories::class: This refers to the browse component (not the form component!) of your detail module
foreignKey('category_id'): This specifies which field links the detail records to the master record
Step 3: Handle Menu Visibility (Optional)
Since your subcategories are now accessible through the categories module, you might want to hide the standalone subcategories menu. You can do this in the CRUDBooster admin panel under Menu Management, or simply leave it visible if you want both access methods.
Real-World Use Cases
Let me show you some practical examples of where master-detail relationships shine:
E-commerce Product Management
// In ProductsForm.php
$this->addSubModule([
    SubModule::create(ProductVariants::class)->foreignKey('product_id'),
    SubModule::create(ProductImages::class)->foreignKey('product_id'),
]);
This allows you to manage product variants and images directly from the product editing page.
Customer Relationship Management
// In CustomersForm.php
$this->addSubModule([
    SubModule::create(CustomerOrders::class)->foreignKey('customer_id'),
    SubModule::create(CustomerNotes::class)->foreignKey('customer_id'),
]);
Perfect for viewing all customer orders and notes in one place.
Project Management
// In ProjectsForm.php
$this->addSubModule([
    SubModule::create(ProjectTasks::class)->foreignKey('project_id'),
    SubModule::create(ProjectFiles::class)->foreignKey('project_id'),
]);
Keep all project-related data organized and easily accessible.
Advanced Configuration
Multiple Sub-Modules
You can add multiple sub-modules to a single master record:
$this->addSubModule([
    SubModule::create(Subcategories::class)->foreignKey('category_id'),
    SubModule::create(CategoryAttributes::class)->foreignKey('category_id'),
    SubModule::create(CategoryImages::class)->foreignKey('category_id'),
]);
Custom Foreign Key Names
If your foreign key doesn't follow the standard naming convention:
$this->addSubModule([
    SubModule::create(Subcategories::class)->foreignKey('parent_category_id'),
]);
What You Get Out of the Box
When you implement master-detail relationships, CRUDBooster automatically provides:
Integrated Interface: Sub-modules appear as tabs or sections within the master record's detail page
Automatic Filtering: Detail records are automatically filtered to show only those belonging to the current master record
Context Awareness: New detail records automatically inherit the master record's ID
Seamless Navigation: Users can manage related data without leaving the master record context
Best Practices
Here are some tips to get the most out of master-detail relationships:
1. Plan Your Data Structure
Before implementing, think about which relationships truly benefit from this approach. Not every related table needs to be a sub-module.
2. Consider User Experience
Ask yourself: "Would users expect to manage this data together?" If yes, it's a good candidate for master-detail.
3. Performance Considerations
While convenient, loading multiple sub-modules can impact performance. Use this feature judiciously for high-traffic applications.
4. Maintain Data Integrity
Ensure your foreign key constraints are properly set up in the database to prevent orphaned records.
Troubleshooting Common Issues
Sub-Module Not Appearing
Double-check that you're referencing the browse component class, not the form component
Verify the foreign key name matches your database column
Ensure the sub-module class exists and is properly imported
Foreign Key Errors
Confirm your database foreign key constraints are set up correctly
Check that the foreign key field name matches exactly
Permission Issues
Make sure users have appropriate permissions for both master and detail modules
The Result
Once implemented, your master-detail interface will look clean and professional. Users can view the master record details at the top, with related detail records displayed in an organized section below. It's intuitive, efficient, and significantly improves the user experience.
The beauty of CRUDBooster's master-detail feature lies in its simplicity. With just a few lines of code, you transform separate, disconnected modules into a cohesive, user-friendly interface that makes data management a breeze.
Ready to Build Better Admin Panels?
Master-detail relationships are just one of the many powerful features that make CRUDBooster a game-changer for rapid application development. Whether you're building a simple admin panel or a complex business application, CRUDBooster provides the tools you need to create professional, feature-rich interfaces in record time.
Ready to experience the power of CRUDBooster for yourself? Download CRUDBooster today and start building better admin panels in minutes, not hours. Your future self (and your users) will thank you!


Mastering CRUDBooster Column Transforms: A Complete Guide to transform, transformWhen, and transformWithRow
Ferry Ariawan — Wed, 16 Jul 2025 02:01:17 GMT
When building admin panels with CRUDBooster, you'll often need to customize how data appears in your browse tables. Maybe you want to format names, add status badges, or display complex data relationships. That's where CRUDBooster's powerful column transform features come in handy.
In this tutorial, we'll explore three essential transform methods that will take your data presentation from basic to brilliant: transform, transformWhen, and transformWithRow.
Prerequisites
Before diving into column transforms, make sure you have:
CRUDBooster v7.0+ installed and configured
Basic understanding of Laravel and PHP
A CRUDBooster module already set up
Familiarity with CRUDBooster's column system using Column::add()
If you're new to CRUDBooster columns, you should know how to create basic columns:
use CrudBooster\Livewire\ColumnBuilder\Column;

Column::add(label: 'Name', key: 'users.name')
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.
Understanding Column Transforms
Column transforms allow you to modify how data appears in your browse tables without changing the underlying database values. Think of them as presentation filters that run when displaying data to users.
1. Basic Transform: The Foundation
Imagine you're managing an e-commerce admin panel where product prices are stored as plain numbers in the database (like 29.99), but you want to display them with proper currency formatting ($29.99) in your browse table. Or perhaps you have user names stored in lowercase, but you want to display them in title case for better readability.
This is where the transform method shines. It's your go-to solution for simple data modifications that only need the raw column value to work with. Think of it as a filter that takes the raw database value and returns a beautifully formatted version for display.
Common use cases for transform:
Currency formatting (1500 → $1,500.00)
Text case conversion (john doe → John Doe)
Adding HTML styling or icons
Date formatting (2024-01-15 → Jan 15, 2024)
Truncating long text with ellipsis
Adding units to numbers (25 → 25 kg)
The transform function receives one parameter: the raw column value, and expects you to return the formatted version.
Basic Usage
use CrudBooster\Livewire\ColumnBuilder\Column;

class UsersBrowse extends BaseBrowseComponent
{
    public function init(): void
    {
        $this->makeColumns([
            Column::add(label: 'Name', key: 'users.name')
                ->transform(function ($value) {
                    return strtoupper($value);
                }),
        ]);
    }
}
Real-World Examples
Formatting Currency:
Column::add(label: 'Price', key: 'price')
    ->transform(function ($value) {
        return '$' . number_format($value, 2);
    }),
Adding HTML Styling:
Column::add(label: 'Status', key: 'status')
    ->transform(function ($value) {
        return '' . ucfirst($value) . '';
    }),
Date Formatting:
Column::add(label: 'Created', key: 'created_at')
    ->transform(function ($value) {
        return $value ? date('M j, Y', strtotime($value)) : '-';
    }),
2. Conditional Transform: transformWhen
Picture this scenario: you're building an order management system where most orders have a "standard" status that you want to display normally, but "urgent" orders need to stand out with red text and a warning icon. Or maybe you're managing a student grading system where you want to highlight A-grade students with gold stars, but leave other grades as they are.
This is exactly what transformWhen was designed for. Instead of transforming every single value in a column, it only applies your transformation when specific conditions are met. It's like having a smart filter that says "only change the appearance if this value matches my criteria."
Perfect scenarios for transformWhen:
Highlighting critical status values (urgent orders, overdue tasks)
Adding visual indicators for special conditions (VIP customers, premium accounts)
Conditional formatting based on specific values
Adding warnings or alerts for certain states
Applying different styling rules for different categories
The method works in two ways: you can check for exact value matches, or use a closure function for more complex conditions. When the condition is met, your transformation function runs. When it's not met, the original value displays unchanged.
Basic Syntax
Column::add('Status', 'status')
    ->transformWhen('active', function($value) {
        return '' . ucfirst($value) . '';
    });
Practical Examples
Highlighting Important Status:
Column::add('Order Status', 'status')
    ->transformWhen('urgent', function($value) {
        return '🚨 ' . strtoupper($value);
    });
Conditional Formatting:
Column::add('Score', 'score')
    ->transformWhen(function($value) {
        return $value >= 90;
    }, function($value) {
        return '⭐ ' . $value . '';
    });
Multiple Conditions:
// You can chain multiple transformWhen calls
Column::add('Priority', 'priority')
    ->transformWhen('high', function($value) {
        return '🔴 High Priority';
    })
    ->transformWhen('low', function($value) {
        return '⚪ Low Priority';
    });
3. Advanced Transform: transformWithRow
Now let's tackle the most powerful scenario. Imagine you're building a user management interface where you want to display a user's full profile information in a single column - their name, email, profile picture, online status, and registration date. But here's the catch: these pieces of information are stored in different columns across your database.
Or consider an e-commerce order listing where you want to show a comprehensive order summary that includes the order number, customer name, total items, order value, and shipping status - all beautifully formatted in one column. You can't do this with simple transform because you need access to multiple fields from the same row.
This is where transformWithRow becomes your secret weapon. Unlike the previous methods that only give you access to a single column value, this method provides the entire row object, giving you access to all fields in that record. It's like having a complete toolkit where you can mix and match data from different columns to create rich, informative displays.
Ideal use cases for transformWithRow:
Creating user profile cards with avatar, name, and status
Building comprehensive product listings with price, stock, and category
Generating order summaries with customer and item details
Making action buttons that need row IDs or other contextual data
Combining relationship data from joined tables
Creating complex formatted displays that need multiple data points
The function receives the entire row object, so you can access any field using $row->field_name syntax. This gives you unlimited flexibility in creating sophisticated data presentations.
Basic Usage
Column::add(label: 'User Info', key: 'name')
    ->transformWithRow(function($row) {
        return strtoupper($row->name) . "
" . $row->email . "";
    });
Complex Examples
Building User Cards:
Column::add('User Profile', 'name')
    ->transformWithRow(function($row) {
        $avatar = $row->avatar ? "avatar}' class='w-8 h-8 rounded-full inline-block mr-2'>" : '👤';
        $status = $row->is_active ? '●' : '●';
        
        return $avatar . $row->name . ' ' . $status . "
" . $row->email . "";
    });
Creating Action Links:
Column::add('Quick Actions', 'id')
    ->transformWithRow(function($row) {
        $editUrl = route('users.edit', $row->id);
        $viewUrl = route('users.show', $row->id);
        
        return "Edit" .
               "View";
    });
Relationship Data Display:
Column::add('Order Summary', 'order_number')
    ->transformWithRow(function($row) {
        $customerName = $row->customer_name ?? 'Unknown Customer';
        $totalItems = $row->items_count ?? 0;
        $orderValue = $row->total_amount ?? 0;
        
        return "#{$row->order_number}
" .
               "Customer: {$customerName}
" .
               "{$totalItems} items • $" . number_format($orderValue, 2) . "";
    });
Advanced Use Cases and Patterns
Combining Transforms with Badges
In many admin panels, you'll encounter situations where you need to display status information in a visually appealing way. Think about order statuses, user account states, or project phases - these often benefit from color-coded badges that immediately communicate the current state to users.
CRUDBooster provides built-in badge methods that work seamlessly with the transform system. However, sometimes you need more control over the badge appearance or want to add custom icons and styling. Here's how you can leverage both approaches:
// Using built-in badgeable methods
Column::add('Status', 'status')
    ->badgeable([
        'active' => 'success',
        'inactive' => 'danger',
        'pending' => 'warning',
    ]);

// Custom badge with transform
Column::add('Custom Status', 'status')
    ->transformWithRow(function($row) {
        $badges = [
            'completed' => '✅ Completed',
            'processing' => '⏳ Processing',
            'failed' => '❌ Failed',
        ];
        
        return $badges[$row->status] ?? 'Unknown';
    });
Working with Relationships
One of the most common challenges in admin panels is displaying related data efficiently. For example, in a product listing, you might want to show category information alongside each product, or in a user table, you might want to display department details.
Rather than loading relationships separately (which can cause N+1 query problems), the most efficient approach is to join the related tables and access the joined data directly in your transforms. This gives you all the relationship data you need while maintaining optimal database performance.
Column::add('Category Info', 'category_name')
    ->transformWithRow(function($row) {
        // Using joined category data
        if ($row->category_name) {
            return "{$row->category_name}
" .
                   "{$row->category_description}";
        }
        return 'No Category';
    });
Performance Considerations
When working with large datasets or complex transforms, performance becomes crucial. The key principle to remember is that transform functions run for every single row in your table, so any inefficiency gets multiplied by the number of records you're displaying.
For relationship data, always use joins in your hookQuery method rather than lazy loading relationships within transforms. This ensures all the data you need is fetched in a single, efficient query:
// In your browse component's hookQuery method
$this->hookQuery(function ($query) {
    $query->join('categories', 'products.category_id', '=', 'categories.id')
          ->select('products.*', 'categories.name as category_name', 'categories.description as category_description');
});
Error Handling in Transforms
When working with real-world data, you'll inevitably encounter unexpected values - null data, malformed JSON, missing files, or corrupt information. Since transforms run on every row of your table, a single error can break your entire page display.
The golden rule is to always anticipate what could go wrong and provide graceful fallbacks. This is especially important when working with user-generated content, external API data, or any kind of processed information that might not be in the expected format.
Column::add('Processed Data', 'raw_data')
    ->transform(function ($value) {
        try {
            $data = json_decode($value, true);
            return $data['formatted_value'] ?? 'N/A';
        } catch (Exception $e) {
            return 'Invalid Data';
        }
    });
Best Practices
Keep transforms simple: Complex logic should be in your service layer, not in transforms
Use appropriate escaping: When outputting HTML, ensure you're not creating XSS vulnerabilities
Consider performance: Avoid heavy computations in transforms as they run for every row
Be consistent: Use similar transform patterns across your application
Test edge cases: Always test with null values, empty strings, and unexpected data
Combining with Other Column Features
One of the most powerful aspects of CRUDBooster's column system is how seamlessly transforms integrate with other column features. You're not limited to just making data look pretty - you can also make it functional and interactive.
Consider a status column in an order management system. You want users to be able to filter by status (filterable), sort orders by their current state (sortable), search for specific statuses (searchable), AND display each status with appropriate visual styling (transform). With CRUDBooster, you can have all these features working together harmoniously:
Column::add('Enhanced Status', 'status')
    ->filterable()
    ->sortable()
    ->searchable()
    ->transformWhen('active', function($value) {
        return '🟢 ' . ucfirst($value);
    })
    ->transformWhen('inactive', function($value) {
        return '🔴 ' . ucfirst($value);
    });
This creates a column that's both highly functional for data management and visually appealing for users. The transforms don't interfere with the underlying data operations - filtering, sorting, and searching all work on the original database values, while the display layer shows your beautifully formatted versions.
Troubleshooting Common Issues
Transform not showing:
Ensure you're returning a value from your transform function
Check that the column key matches your database field
HTML not rendering:
CRUDBooster allows HTML in transforms, but ensure your HTML is valid
Use proper escaping for user-generated content
Performance issues:
Move complex logic to your model or service layer
Use eager loading for relationship data
Conclusion
CRUDBooster's transform features give you incredible flexibility in presenting your data. Whether you need simple formatting with transform, conditional styling with transformWhen, or complex data manipulation with transformWithRow, you now have the tools to create beautiful, functional admin interfaces.
Start with basic transforms and gradually incorporate more advanced patterns as your application grows. Remember, the goal is to make your data more readable and actionable for your users while maintaining clean, maintainable code.
Ready to transform your CRUDBooster experience? Start implementing these patterns in your next project and watch your admin panels come to life!
Get Started Today
Ready to build powerful admin panels with CRUDBooster? Download the latest version and start transforming your data presentation today.
Download CRUDBooster →
Transform your Laravel development experience with CRUDBooster's powerful features and intuitive design. Join thousands of developers who are already building better admin panels faster.


Understanding CRUDBooster's Relationship With HookQuery: A Complete Guide
Ferry Ariawan — Tue, 15 Jul 2025 10:36:48 GMT
When building complex admin panels and CRUD applications, one of the most common challenges developers face is managing relationships between different data tables. CRUDBooster provides a powerful feature called HookQuery that allows you to create sophisticated join operations and custom queries for your browse pages. This comprehensive guide will walk you through everything you need to know about using relationships with HookQuery.
What is HookQuery?
HookQuery is CRUDBooster's modern approach to handling custom queries in your browse components. Unlike traditional hook functions, HookQuery provides a clean, intuitive way to intercept and modify the base query before it's executed. This allows you to add joins, filters, and complex relationships without compromising the framework's built-in functionality.
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.
Basic HookQuery Usage
The simplest way to use HookQuery is by calling the hookQuery() method inside your init() method:
use CrudBooster\Livewire\BaseBrowseComponent;
use CrudBooster\Livewire\ColumnBuilder\Column;
use Illuminate\Database\Query\Builder;

class User extends BaseBrowseComponent
{
    public function init(): void
    {
        // Hook Query for custom filtering
        $this->hookQuery(function (Builder $query) {
            $query->where('status', 'active');
        });

        $this->makeColumns([
            Column::add(label: 'Name', key: 'name'),
            Column::add(label: 'Email', key: 'email'),
            Column::add(label: 'Status', key: 'status'),
        ]);
    }
}
Working with Simple Relationships
Let's explore how to use HookQuery for basic table relationships. Consider a scenario where you have users and categories:
class User extends BaseBrowseComponent
{
    public function init(): void
    {
        $this->hookQuery(function (Builder $query) {
            $query->join('categories', 'categories.id', '=', 'users.category_id');
        });

        $this->makeColumns([
            Column::add(label: 'Name', key: 'users.name'),
            Column::add(label: 'Email', key: 'users.email'),
            Column::add(label: 'Category', key: 'categories.name'),
        ]);
    }
}
Notice how we prefix the column keys with the table name (users.name, categories.name) to avoid conflicts.
Advanced Multi-Table Relationships
HookQuery really shines when dealing with complex multi-table relationships. Here's an example involving users, categories, and subcategories:
class User extends BaseBrowseComponent
{
    public function init(): void
    {
        $this->hookQuery(function (Builder $query) {
            $query->join('categories', function (\Illuminate\Database\Query\JoinClause $joinClause) {
                $joinClause->on('categories.id', '=', 'users.category_id')
                           ->where('categories.active', '=', 1);
            })
            ->join('subcategories', function (\Illuminate\Database\Query\JoinClause $joinClause) {
                $joinClause->on('subcategories.id', '=', 'users.subcategory_id')
                           ->where('subcategories.status', '=', 'published');
            });
        });

        $this->makeColumns([
            Column::add(label: 'Name', key: 'users.name'),
            Column::add(label: 'Email', key: 'users.email'),
            Column::add(label: 'Category', key: 'categories.name'),
            Column::add(label: 'Subcategory', key: 'subcategories.name'),
        ]);
    }
}
Common Use Cases
1. E-commerce Product Listing
class Product extends BaseBrowseComponent
{
    public function init(): void
    {
        $this->hookQuery(function (Builder $query) {
            $query->join('categories', 'categories.id', '=', 'products.category_id')
                  ->join('brands', 'brands.id', '=', 'products.brand_id')
                  ->leftJoin('product_images', function($join) {
                      $join->on('product_images.product_id', '=', 'products.id')
                           ->whereRaw('product_images.id = (SELECT MIN(id) FROM product_images WHERE product_id = products.id)');
                  })
                  ->where('products.status', 'active')
                  ->where('categories.is_visible', true);
        });

        $this->makeColumns([
            Column::add(label: 'Product Name', key: 'products.name'),
            Column::add(label: 'Category', key: 'categories.name'),
            Column::add(label: 'Brand', key: 'brands.name'),
            Column::add(label: 'Price', key: 'products.price'),
            Column::add(label: 'Stock', key: 'products.stock'),
            Column::add(label: 'Image', key: 'product_images.image_url')->image(),
        ]);
    }
}
2. Order Management with Customer Details
class Order extends BaseBrowseComponent
{
    public function init(): void
    {
        $this->hookQuery(function (Builder $query) {
            $query->join('customers', 'customers.id', '=', 'orders.customer_id')
                  ->join('order_statuses', 'order_statuses.id', '=', 'orders.status_id')
                  ->leftJoin('shipping_addresses', 'shipping_addresses.order_id', '=', 'orders.id')
                  ->selectRaw('orders.*, customers.name as customer_name, customers.email as customer_email, 
                             order_statuses.name as status_name, shipping_addresses.city as shipping_city');
        });

        $this->makeColumns([
            Column::add(label: 'Order ID', key: 'orders.id'),
            Column::add(label: 'Customer', key: 'customer_name'),
            Column::add(label: 'Email', key: 'customer_email'),
            Column::add(label: 'Status', key: 'status_name')->badgeable([
                'pending' => 'warning',
                'processing' => 'info',
                'completed' => 'success',
                'cancelled' => 'danger'
            ]),
            Column::add(label: 'Shipping City', key: 'shipping_city'),
            Column::add(label: 'Total', key: 'orders.total_amount'),
        ]);
    }
}
3. User Management with Role Information
class User extends BaseBrowseComponent
{
    public function init(): void
    {
        $this->hookQuery(function (Builder $query) {
            $query->join('user_roles', 'user_roles.user_id', '=', 'users.id')
                  ->join('roles', 'roles.id', '=', 'user_roles.role_id')
                  ->leftJoin('departments', 'departments.id', '=', 'users.department_id')
                  ->selectRaw('users.*, roles.name as role_name, departments.name as department_name')
                  ->groupBy('users.id');
        });

        $this->makeColumns([
            Column::add(label: 'Name', key: 'users.name'),
            Column::add(label: 'Email', key: 'users.email'),
            Column::add(label: 'Role', key: 'role_name'),
            Column::add(label: 'Department', key: 'department_name'),
            Column::add(label: 'Status', key: 'users.status'),
        ]);
    }
}
Advanced Filtering with HookQuery
You can combine HookQuery with advanced filtering for more sophisticated data retrieval:
class User extends BaseBrowseComponent
{
    public function init(): void
    {
        $this->hookQuery(function (Builder $query) {
            $query->join('categories', 'categories.id', '=', 'users.category_id')
                  ->join('user_profiles', 'user_profiles.user_id', '=', 'users.id')
                  ->where('users.created_at', '>=', now()->subMonths(6))
                  ->where('categories.type', 'premium')
                  ->whereNotNull('user_profiles.phone');
        });

        $this->makeColumns([
            Column::add(label: 'Name', key: 'users.name'),
            Column::add(label: 'Email', key: 'users.email'),
            Column::add(label: 'Category', key: 'categories.name'),
            Column::add(label: 'Phone', key: 'user_profiles.phone'),
            Column::add(label: 'Created', key: 'users.created_at'),
        ]);
    }
}
Performance Optimization Tips
When using HookQuery with relationships, consider these performance optimization strategies:
1. Use Proper Indexing
Ensure your database tables have appropriate indexes on columns used in joins:
CREATE INDEX idx_users_category_id ON users(category_id);
CREATE INDEX idx_categories_active ON categories(active);
2. Select Only Required Columns
Instead of selecting all columns, specify only what you need:
$this->hookQuery(function (Builder $query) {
    $query->select([
        'users.id',
        'users.name',
        'users.email',
        'categories.name as category_name'
    ])
    ->join('categories', 'categories.id', '=', 'users.category_id');
});
3. Use Eager Loading for Related Data
For complex relationships, consider using Laravel's eager loading:
$this->hookQuery(function (Builder $query) {
    $query->with(['category', 'profile', 'roles']);
});
Combining HookQuery with Other CRUDBooster Features
HookQuery works seamlessly with other CRUDBooster features:
With Advanced Filtering
public function init(): void
{
    $this->hookQuery(function (Builder $query) {
        $query->join('categories', 'categories.id', '=', 'users.category_id');
    });

    $this->makeColumns([
        Column::add(label: 'Name', key: 'users.name')->filterable(),
        Column::add(label: 'Category', key: 'categories.name')->filterSelectQuery(function() {
            return Category::query()
                ->select('id as value', 'name as label')
                ->where('active', true)
                ->orderBy('name');
        }),
    ]);
}
With Column Transformations
public function init(): void
{
    $this->hookQuery(function (Builder $query) {
        $query->join('categories', 'categories.id', '=', 'users.category_id');
    });

    $this->makeColumns([
        Column::add(label: 'User Info', key: 'users.name')->transformWithRow(function($row) {
            return "{$row->name}
{$row->category_name}";
        }),
    ]);
}
Troubleshooting Common Issues
1. Column Ambiguity
Problem: Error about ambiguous column names Solution: Always prefix column names with table names
// Wrong
Column::add(label: 'Name', key: 'name')

// Correct
Column::add(label: 'Name', key: 'users.name')
2. Missing Data
Problem: Some rows not appearing Solution: Check your join types (INNER vs LEFT JOIN)
// Use LEFT JOIN for optional relationships
$query->leftJoin('categories', 'categories.id', '=', 'users.category_id');
3. Performance Issues
Problem: Slow query execution Solution: Add proper indexes and optimize your joins
// Add indexes in your migration
Schema::table('users', function (Blueprint $table) {
    $table->index('category_id');
    $table->index(['status', 'created_at']);
});
Best Practices
Always use table prefixes in column keys when working with joins
Keep your HookQuery logic simple and focused on data retrieval
Use appropriate join types (INNER, LEFT, RIGHT) based on your requirements
Consider performance implications of complex joins
Test your queries with large datasets to ensure scalability
Use Laravel's Query Builder methods for consistency and security
Conclusion
HookQuery is a powerful feature that makes CRUDBooster incredibly flexible for handling complex database relationships. By mastering this feature, you can create sophisticated admin panels that display related data from multiple tables with ease. The key is to understand your data structure, use appropriate join types, and always consider performance implications.
Whether you're building a simple blog admin or a complex e-commerce management system, HookQuery provides the tools you need to create efficient, maintainable, and powerful browse pages that can handle any relationship complexity your application requires.
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.
Ready to build powerful admin panels with complex relationships? Download CRUDBooster now and start creating sophisticated CRUD applications with ease. Get access to HookQuery and dozens of other powerful features that will accelerate your development process.


Mastering Advanced Filtering in CRUDBooster: A Complete Guide to Streamline Your Data Management
Ferry Ariawan — Fri, 11 Jul 2025 02:04:22 GMT
Data filtering is the backbone of any robust admin panel. When you're dealing with thousands of records, the ability to quickly find exactly what you need isn't just convenient—it's essential. CRUDBooster's advanced filtering system transforms this challenge into an elegant solution, offering developers a powerful toolkit to create intuitive, user-friendly data interfaces.
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.
In this comprehensive guide, we'll explore CRUDBooster's filterable features, from basic implementation to advanced use cases that will revolutionize how your users interact with data.
Understanding CRUDBooster's Filtering Philosophy
Before diving into the technical details, it's important to understand what makes CRUDBooster's filtering system special. Unlike basic search functionality that works across all columns, CRUDBooster's filterable feature provides column-specific filtering with intelligent input types that match your data structure.
This means users can filter dates with date pickers, numbers with comparison operators, and text with smart search patterns—all automatically generated based on your column configuration.
Getting Started: Basic Filterable Implementation
The foundation of CRUDBooster's filtering system lies in the simple filterable() method. Here's how to enable basic filtering:
use CrudBooster\Livewire\ColumnBuilder\Column;

class ProductsBrowse extends BaseBrowseComponent
{
    public function init(): void
    {
        $this->makeColumns([
            Column::add('Product Name', 'name')->filterable(),
            Column::add('Price', 'price')->filterable(),
            Column::add('Category', 'category_name')->filterable(),
        ]);
    }
}
With just the filterable() method, CRUDBooster automatically provides text-based filtering for each column. But this is just the beginning—the real power lies in specialized filter types.
Advanced Filter Types: Matching Data to Interface
Text-Based Filtering with Contains
The default filter behavior uses "contains" logic, perfect for searching product names, descriptions, or any text-based content:
Column::add('Product Name', 'name')->filterContains()
// Users can search for partial matches like "Phone" to find "iPhone", "Samsung Phone", etc.
Numeric Filtering with Comparison Operators
For numerical data, CRUDBooster offers sophisticated comparison filters:
// Find products above a certain price
Column::add('Price', 'price')->filterGreaterThan()

// Find products below a price threshold
Column::add('Price', 'price')->filterLessThan()

// Find products within a specific price range
Column::add('Stock Quantity', 'stock')->filterGreaterEqual()
Column::add('Minimum Order', 'min_order')->filterLessEqual()
Real-world Example: An e-commerce admin panel where managers need to find:
Premium products (price > $100)
Low stock items (stock < 10)
Bulk order products (minimum order >= 50)
Date Range Filtering for Time-Based Data
Date filtering is crucial for any business application. CRUDBooster's date range filter provides an intuitive interface:
Column::add('Order Date', 'created_at')->filterDateRange()
This creates two date inputs (start and end date), allowing users to filter records within specific time periods—perfect for sales reports, order tracking, or any time-sensitive data analysis.
Enum-Based Filtering for Status Fields
When you have predefined status values, enum filtering provides a clean dropdown interface:
Column::add('Order Status', 'status')->filterSelectEnum([
    'pending' => 'Pending',
    'processing' => 'Processing',
    'shipped' => 'Shipped',
    'delivered' => 'Delivered',
    'cancelled' => 'Cancelled'
])
This approach is ideal for:
Order management systems
User status tracking
Project management tools
Content moderation panels
Database-Driven Filtering with Select Query
One of CRUDBooster's most powerful features is the ability to create dynamic filters from database relationships:
Column::add('Category', 'category_id')->filterSelectQuery(function() {
    return Category::query()
        ->select('id as value', 'name as label')
        ->where('is_active', true)
        ->orderBy('name');
})
Advanced Query Filtering with Custom Logic
CRUDBooster v7.9.7 introduced custom search logic for query filters, enabling complex filtering scenarios:
Column::add('Product Category', 'category_id')->filterSelectQuery(
    // Define dropdown options
    function() {
        return Category::query()
            ->select('id as value', 'name as label')
            ->where('is_active', true)
            ->orderBy('name');
    },
    // Custom search logic when filter is applied
    function($query, $filterValue, $field) {
        $query->whereHas('category', function($categoryQuery) use ($filterValue) {
            $categoryQuery->where('name', 'like', '%' . $filterValue . '%')
                        ->orWhere('description', 'like', '%' . $filterValue . '%');
        });
    }
)
This powerful combination allows you to:
Create dropdown options from one query
Apply completely different filtering logic
Implement complex relationships and subqueries
Handle edge cases with custom business logic
Real-World Use Cases: Putting It All Together
E-Commerce Admin Panel
Let's build a comprehensive product management interface:
class ProductsBrowse extends BaseBrowseComponent
{
    public function init(): void
    {
        $this->makeColumns([
            // Basic text search for product discovery
            Column::add('Product Name', 'name')
                ->filterContains(),
            
            // Price range filtering for inventory management
            Column::add('Price', 'price')
                ->filterGreaterThan(),
            
            // Stock level monitoring
            Column::add('Stock', 'stock_quantity')
                ->filterLessEqual(),
            
            // Date-based inventory tracking
            Column::add('Last Restocked', 'last_restocked_at')
                ->filterDateRange(),
            
            // Status-based product management
            Column::add('Status', 'status')
                ->filterSelectEnum([
                    'active' => 'Active',
                    'inactive' => 'Inactive',
                    'discontinued' => 'Discontinued'
                ]),
            
            // Category-based organization
            Column::add('Category', 'category_id')
                ->filterSelectQuery(function() {
                    return Category::query()
                        ->select('id as value', 'name as label')
                        ->where('is_active', true)
                        ->orderBy('name');
                }),
        ]);
    }
}
Customer Support Dashboard
For a customer support system, different filtering needs emerge:
class TicketsBrowse extends BaseBrowseComponent
{
    public function init(): void
    {
        $this->makeColumns([
            // Quick ticket identification
            Column::add('Ticket ID', 'ticket_number')
                ->filterContains(),
            
            // Priority-based filtering
            Column::add('Priority', 'priority')
                ->filterSelectEnum([
                    'low' => 'Low',
                    'medium' => 'Medium',
                    'high' => 'High',
                    'urgent' => 'Urgent'
                ]),
            
            // Time-sensitive ticket management
            Column::add('Created Date', 'created_at')
                ->filterDateRange(),
            
            // Agent assignment filtering
            Column::add('Assigned Agent', 'agent_id')
                ->filterSelectQuery(function() {
                    return User::query()
                        ->select('id as value', 'name as label')
                        ->where('role', 'support_agent')
                        ->where('is_active', true)
                        ->orderBy('name');
                }),
            
            // Customer-specific filtering with advanced search
            Column::add('Customer', 'customer_id')
                ->filterSelectQuery(
                    function() {
                        return Customer::query()
                            ->select('id as value', 'name as label')
                            ->orderBy('name');
                    },
                    function($query, $filterValue, $field) {
                        $query->whereHas('customer', function($customerQuery) use ($filterValue) {
                            $customerQuery->where('name', 'like', '%' . $filterValue . '%')
                                        ->orWhere('email', 'like', '%' . $filterValue . '%')
                                        ->orWhere('phone', 'like', '%' . $filterValue . '%');
                        });
                    }
                ),
        ]);
    }
}
Best Practices for Optimal Filtering Experience
1. Choose the Right Filter Type for Your Data
Match filter types to data characteristics:
Text data: Use filterContains() for flexible searching
Numerical data: Use comparison filters (filterGreaterThan(), filterLessEqual())
Status fields: Use filterSelectEnum() for predefined options
Relationships: Use filterSelectQuery() for dynamic options
Time-based data: Use filterDateRange() for period selection
2. Optimize Database Queries
When using filterSelectQuery(), ensure your queries are optimized:
// Good: Specific fields, proper indexing
Column::add('Category', 'category_id')->filterSelectQuery(function() {
    return Category::query()
        ->select('id as value', 'name as label')
        ->where('is_active', true)
        ->orderBy('name')
        ->limit(100); // Prevent excessive options
})

// Better: With proper indexing on is_active and name columns
3. Implement Progressive Disclosure
For complex interfaces, consider which filters are most important and enable them selectively:
class OrdersBrowse extends BaseBrowseComponent
{
    public function init(): void
    {
        $this->makeColumns([
            // Core filters - always enabled
            Column::add('Order Number', 'order_number')->filterable(),
            Column::add('Status', 'status')->filterSelectEnum([...]),
            Column::add('Order Date', 'created_at')->filterDateRange(),
            
            // Advanced filters - enabled based on user role or preference
            Column::add('Customer', 'customer_id')
                ->filterSelectQuery(...)
                ->filterable(auth()->user()->hasRole('manager')),
        ]);
    }
}
4. Handle Large Datasets Intelligently
For tables with millions of records, consider:
// Limit dropdown options to prevent performance issues
Column::add('Product', 'product_id')->filterSelectQuery(function() {
    return Product::query()
        ->select('id as value', 'name as label')
        ->where('is_active', true)
        ->orderBy('name')
        ->limit(500); // Reasonable limit for dropdown
})
Advanced Techniques: Custom Search Logic Patterns
Multi-Field Search Pattern
Search across related fields for better user experience:
Column::add('Customer', 'customer_id')->filterSelectQuery(
    function() {
        return Customer::query()
            ->select('id as value', 'name as label')
            ->orderBy('name');
    },
    function($query, $filterValue, $field) {
        $query->whereExists(function($subQuery) use ($filterValue) {
            $subQuery->select(DB::raw(1))
                    ->from('customers')
                    ->whereColumn('customers.id', '=', 'orders.customer_id')
                    ->where(function($customerQuery) use ($filterValue) {
                        $customerQuery->where('name', 'like', '%' . $filterValue . '%')
                                    ->orWhere('email', 'like', '%' . $filterValue . '%')
                                    ->orWhere('phone', 'like', '%' . $filterValue . '%')
                                    ->orWhere('company', 'like', '%' . $filterValue . '%');
                    });
        });
    }
)
Time-Based Intelligence
Implement smart date filtering with business logic:
Column::add('Orders', 'order_id')->filterSelectQuery(
    function() {
        return Order::query()
            ->select('id as value', 'order_number as label')
            ->where('status', 'completed')
            ->orderBy('created_at', 'desc')
            ->limit(200);
    },
    function($query, $filterValue, $field) {
        // Only show recent high-value orders
        $query->whereBetween('created_at', [
            now()->subDays(30),
            now()
        ])->where('total_amount', '>', 1000);
    }
)
Troubleshooting Common Filtering Issues
Performance Optimization
If your filters are slow, consider these optimizations:
Add database indexes on filtered columns
Limit dropdown options to reasonable numbers
Use eager loading for related data
Implement caching for static filter options
User Experience Improvements
Provide clear labels that match user mental models
Group related filters logically
Show filter states clearly to users
Allow easy filter clearing for quick resets
Conclusion: Building Intuitive Data Interfaces
CRUDBooster's advanced filtering system transforms raw data into actionable insights. By matching filter types to data characteristics, implementing smart search logic, and following user experience best practices, you can create admin panels that don't just display data—they empower users to find exactly what they need, when they need it.
The key to successful filtering implementation lies in understanding your users' workflows and providing the right tools for their specific tasks. Whether you're building an e-commerce dashboard, customer support system, or any data-driven application, CRUDBooster's filtering features provide the foundation for exceptional user experiences.
Start with basic filtering, then gradually add advanced features as your application grows. Your users will appreciate the thoughtful design, and you'll appreciate the robust, maintainable code that CRUDBooster enables.
Remember: great filtering isn't about having every possible option—it's about having the right options, implemented elegantly, and designed with your users' success in mind.
Ready to Transform Your Data Management?
Don't let your users struggle with overwhelming data tables. CRUDBooster's advanced filtering system is just one of the many powerful features that can revolutionize your admin panel development.
Download CRUDBooster today and start building intelligent, user-friendly data interfaces that your team will actually enjoy using. Join thousands of developers who have already discovered the power of rapid, professional admin panel development.
🚀 Get started in minutes, not months.
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.



Mastering Custom Search Logic in CRUDBooster: A Complete Guide to hookSearch
Ferry Ariawan — Thu, 10 Jul 2025 03:54:19 GMT
When building admin panels and data management systems, one of the most critical features users interact with is search functionality. While CRUDBooster provides excellent out-of-the-box search capabilities, there are times when you need more sophisticated search logic that goes beyond simple column matching. This is where the hookSearch feature comes into play.
Introduced in CRUDBooster v7.8.0+, hookSearch allows developers to implement custom search logic in Livewire modules, giving you complete control over how search queries are processed and executed. Whether you need to search across relationships, implement fuzzy matching, or create complex conditional searches, hookSearch provides the flexibility you need.
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.
Understanding hookSearch
The hookSearch feature is a powerful method that allows you to override the default search behavior in your CRUDBooster browse components. Instead of relying on the standard "LIKE" queries across defined columns, you can implement your own search logic that can be as simple or as complex as your application requires.
Basic Syntax
The basic syntax for implementing hookSearch is straightforward:
$this->hookSearch(function($query, $search) {
    // Your custom search logic here
});
The closure function receives two parameters:
$query: The current query builder instance
$search: The search term entered by the user
Getting Started: Basic Implementation
Let's start with a simple example. Suppose you have a User module and want to search across name, email, and phone fields:
makeColumns([
            Column::add(label: 'Name', key: 'name'),
            Column::add(label: 'Email', key: 'email'),
            Column::add(label: 'Phone', key: 'phone'),
        ]);
        
        $this->hookSearch(function($query, $search) {
            $query->where(function($q) use ($search) {
                $q->where('name', 'like', '%' . $search . '%')
                  ->orWhere('email', 'like', '%' . $search . '%')
                  ->orWhere('phone', 'like', '%' . $search . '%');
            });
        });
    }
}
In this example, when a user enters a search term, the system will look for matches in the name, email, or phone fields. The use of where(function($q) use ($search) ensures that the OR conditions are properly grouped.
Advanced Use Cases
1. Searching Across Relationships
One of the most powerful applications of hookSearch is searching across related tables. Let's say you have a Products module and want to search not only product names but also category names:
$this->hookSearch(function($query, $search) {
    $query->where(function($q) use ($search) {
        $q->where('products.name', 'like', '%' . $search . '%')
          ->orWhere('products.description', 'like', '%' . $search . '%')
          ->orWhereHas('category', function($categoryQuery) use ($search) {
              $categoryQuery->where('name', 'like', '%' . $search . '%');
          });
    });
});
This implementation allows users to find products by searching for category names, making the search functionality much more intuitive and powerful.
2. Smart Status-Based Search
You can implement intelligent search logic that recognizes keywords and maps them to specific database values:
$this->hookSearch(function($query, $search) {
    $searchLower = strtolower($search);
    
    // Search by status keywords
    if (str_contains($searchLower, 'active')) {
        $query->where('status', 'active');
        return;
    }
    
    if (str_contains($searchLower, 'inactive') || str_contains($searchLower, 'disabled')) {
        $query->where('status', 'inactive');
        return;
    }
    
    if (str_contains($searchLower, 'pending')) {
        $query->where('status', 'pending');
        return;
    }
    
    // Default search across multiple fields
    $query->where(function($q) use ($search) {
        $q->where('name', 'like', '%' . $search . '%')
          ->orWhere('email', 'like', '%' . $search . '%')
          ->orWhere('description', 'like', '%' . $search . '%');
    });
});
With this implementation, users can type "active users" to find all active users, or "pending" to find all pending records, while still maintaining the ability to search by name or email.
3. Multi-Table Complex Search
For more complex scenarios involving multiple related tables, you can implement sophisticated search logic:
$this->hookSearch(function($query, $search) {
    $query->where(function($q) use ($search) {
        // Search in main table
        $q->where('orders.order_number', 'like', '%' . $search . '%')
          ->orWhere('orders.notes', 'like', '%' . $search . '%')
          
          // Search in customer data
          ->orWhereHas('customer', function($customerQuery) use ($search) {
              $customerQuery->where('name', 'like', '%' . $search . '%')
                           ->orWhere('email', 'like', '%' . $search . '%')
                           ->orWhere('phone', 'like', '%' . $search . '%');
          })
          
          // Search in product data through order items
          ->orWhereHas('orderItems.product', function($productQuery) use ($search) {
              $productQuery->where('name', 'like', '%' . $search . '%')
                          ->orWhere('sku', 'like', '%' . $search . '%');
          });
    });
});
This example demonstrates searching across orders, customers, and products all in one search query, providing users with incredibly powerful search capabilities.
4. Date Range and Numeric Search
You can implement smart parsing for date ranges and numeric comparisons:
$this->hookSearch(function($query, $search) {
    // Check if search contains date patterns
    if (preg_match('/(\d{4}-\d{2}-\d{2})/', $search, $matches)) {
        $query->whereDate('created_at', $matches[1]);
        return;
    }
    
    // Check for price range searches (e.g., "price > 100")
    if (preg_match('/price\s*([><=]+)\s*(\d+)/', $search, $matches)) {
        $operator = $matches[1];
        $value = $matches[2];
        $query->where('price', $operator, $value);
        return;
    }
    
    // Check for numeric ID search
    if (is_numeric($search)) {
        $query->where('id', $search);
        return;
    }
    
    // Default text search
    $query->where(function($q) use ($search) {
        $q->where('name', 'like', '%' . $search . '%')
          ->orWhere('description', 'like', '%' . $search . '%');
    });
});
5. Geographic Search
For applications dealing with location data, you can implement geographic search:
$this->hookSearch(function($query, $search) {
    $query->where(function($q) use ($search) {
        $q->where('stores.name', 'like', '%' . $search . '%')
          ->orWhere('stores.address', 'like', '%' . $search . '%')
          ->orWhereHas('city', function($cityQuery) use ($search) {
              $cityQuery->where('name', 'like', '%' . $search . '%');
          })
          ->orWhereHas('city.province', function($provinceQuery) use ($search) {
              $provinceQuery->where('name', 'like', '%' . $search . '%');
          });
    });
});
Best Practices and Tips
1. Performance Considerations
When implementing custom search logic, always consider performance:
$this->hookSearch(function($query, $search) {
    // Use indexes - ensure your searchable columns are indexed
    $query->where(function($q) use ($search) {
        $q->where('indexed_column', 'like', '%' . $search . '%')
          ->orWhere('another_indexed_column', 'like', '%' . $search . '%');
    });
});
2. Input Sanitization
Always sanitize user input to prevent SQL injection and other security issues:
$this->hookSearch(function($query, $search) {
    // Clean the search term
    $cleanSearch = trim($search);
    $cleanSearch = preg_replace('/[^a-zA-Z0-9\s@.-]/', '', $cleanSearch);
    
    if (strlen($cleanSearch) < 2) {
        return; // Don't search for terms that are too short
    }
    
    $query->where(function($q) use ($cleanSearch) {
        $q->where('name', 'like', '%' . $cleanSearch . '%')
          ->orWhere('email', 'like', '%' . $cleanSearch . '%');
    });
});
3. Combining Multiple hookSearch Calls
You can call hookSearch() multiple times in the same init() method to add multiple search conditions:
public function init(): void
{
    // Primary search logic
    $this->hookSearch(function($query, $search) {
        $query->where('name', 'like', '%' . $search . '%');
    });
    
    // Additional search conditions
    $this->hookSearch(function($query, $search) {
        if (str_contains(strtolower($search), 'urgent')) {
            $query->where('priority', 'high');
        }
    });
}
4. Debugging Search Queries
For debugging purposes, you can log the generated SQL queries:
$this->hookSearch(function($query, $search) {
    $query->where(function($q) use ($search) {
        $q->where('name', 'like', '%' . $search . '%')
          ->orWhere('email', 'like', '%' . $search . '%');
    });
    
    // Debug: Log the SQL query
    \Log::debug('Search Query: ' . $query->toSql());
    \Log::debug('Search Bindings: ', $query->getBindings());
});
Real-World Example: E-commerce Product Search
Let's put it all together with a comprehensive e-commerce product search implementation:
makeColumns([
            Column::add(label: 'Name', key: 'name'),
            Column::add(label: 'SKU', key: 'sku'),
            Column::add(label: 'Price', key: 'price'),
            Column::add(label: 'Category', key: 'category.name'),
            Column::add(label: 'Brand', key: 'brand.name'),
        ]);
        
        $this->hookSearch(function($query, $search) {
            $searchLower = strtolower(trim($search));
            
            // Handle empty search
            if (empty($searchLower)) {
                return;
            }
            
            $query->where(function($q) use ($search, $searchLower) {
                // Basic product information
                $q->where('products.name', 'like', '%' . $search . '%')
                  ->orWhere('products.sku', 'like', '%' . $search . '%')
                  ->orWhere('products.description', 'like', '%' . $search . '%')
                  
                  // Search in category
                  ->orWhereHas('category', function($categoryQuery) use ($search) {
                      $categoryQuery->where('name', 'like', '%' . $search . '%');
                  })
                  
                  // Search in brand
                  ->orWhereHas('brand', function($brandQuery) use ($search) {
                      $brandQuery->where('name', 'like', '%' . $search . '%');
                  })
                  
                  // Search in product attributes
                  ->orWhereHas('attributes', function($attributeQuery) use ($search) {
                      $attributeQuery->where('value', 'like', '%' . $search . '%');
                  });
            });
            
            // Handle status searches
            if (str_contains($searchLower, 'in stock') || str_contains($searchLower, 'available')) {
                $query->where('stock_quantity', '>', 0);
            } elseif (str_contains($searchLower, 'out of stock') || str_contains($searchLower, 'unavailable')) {
                $query->where('stock_quantity', '<=', 0);
            }
            
            // Handle price range searches
            if (preg_match('/under\s*\$?(\d+)/', $searchLower, $matches)) {
                $query->where('price', '<', $matches[1]);
            } elseif (preg_match('/over\s*\$?(\d+)/', $searchLower, $matches)) {
                $query->where('price', '>', $matches[1]);
            }
        });
    }
}
This implementation allows users to search for products in various ways:
By product name, SKU, or description
By category or brand name
By product attributes
Using natural language like "in stock products"
Using price ranges like "under $50"
Conclusion
The hookSearch feature in CRUDBooster provides developers with unprecedented control over search functionality. By implementing custom search logic, you can create intuitive, powerful search experiences that go far beyond simple column matching.
Key takeaways:
Use hookSearch to implement complex search logic that the default search cannot handle
Always consider performance implications and use proper indexing
Sanitize user input to prevent security issues
Leverage Laravel's query builder features for complex relationships
Test your search logic thoroughly with various input scenarios
Whether you're building a simple admin panel or a complex data management system, mastering the hookSearch feature will significantly enhance your users' ability to find and work with data efficiently.
The flexibility of hookSearch means that the only limit to your search functionality is your imagination. Start with simple implementations and gradually build more sophisticated search logic as your application's needs evolve.
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.



Mastering CRUDBooster's Badgeable Feature: A Complete Developer Guide
Ferry Ariawan — Wed, 09 Jul 2025 03:44:30 GMT
Introduction
Have you ever seen admin applications that display data status with attractive colors like "Active" with green background, "Pending" with yellow, or "Inactive" with red? This visual approach not only makes data easier to read but also significantly improves user experience. In CrudBooster v7.8.0+, this feature is called Badgeable - one of the most powerful and flexible features for enhancing data visualization in your admin panels.
The badgeable feature allows you to automatically transform plain text values into visually appealing badges with customizable colors, styles, and conditions. Whether you're building an e-commerce platform, content management system, or any data-driven application, badgeable can dramatically improve how your users interact with and understand your data.
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.
What is the Badgeable Feature?
The badgeable feature in CrudBooster is an advanced column transformation system that automatically converts specific data values into styled badges. Instead of displaying plain text like "active", "pending", or "completed", badgeable renders these values as colorful, professional-looking badges that immediately convey status information to users.
This feature is built on top of TailwindCSS and provides consistent styling across your entire application. It supports multiple badge types, custom color schemes, conditional rendering, and even complex transformation logic.
Key Benefits
Enhanced Visual Communication: Status information becomes immediately recognizable
Consistent Design: All badges follow the same design system
Zero Configuration Required: Works out of the box with sensible defaults
Highly Customizable: Support for custom colors, conditions, and transformations
Performance Optimized: Minimal overhead on page load times
Mobile Responsive: Badges look great on all screen sizes
System Requirements
Before implementing badgeable features, ensure your CrudBooster installation meets these requirements:
CrudBooster v7.8.0 or higher
Laravel 11.x or 12.x
PHP 8.2+
TailwindCSS (included with CrudBooster)
You can check your CrudBooster version by running:
composer show crudbooster/crudbooster
Basic Implementation
Let's start with the simplest implementation of badgeable columns. Here's how to add a basic badgeable column to your browse component:
Step 1: Basic Badgeable Setup
makeColumns([
            Column::add('Product Name', 'name'),
            Column::add('Price', 'price'),
            Column::add('Status', 'status')->badgeable([
                'active' => 'success',
                'inactive' => 'danger',
                'pending' => 'warning',
            ]),
        ]);
    }
}
In this example, when the status column contains:
'active' → displays a green success badge
'inactive' → displays a red danger badge
'pending' → displays a yellow warning badge
Step 2: Understanding Badge Types
CrudBooster provides five predefined badge types, each with its own color scheme:
Badge Type Color Use Case success Green Active states, completed tasks, approved items danger Red Inactive states, errors, rejected items warning Yellow/Orange Pending states, warnings, items needing attention info Blue Informational states, neutral information primary Purple/Indigo Default states, primary actions
Advanced Badgeable Techniques
Individual Badge Methods
For more granular control, you can use individual badge methods:
public function init(): void
{
    $this->makeColumns([
        Column::add('Status', 'status')->badgeableSuccess('active', 'Active'),
        Column::add('Priority', 'priority')->badgeableDanger('high', 'High Priority'),
        Column::add('Category', 'category')->badgeableWarning('pending', 'Under Review'),
        Column::add('Type', 'type')->badgeableInfo('info', 'Information'),
        Column::add('Level', 'level')->badgeablePrimary('premium', 'Premium User'),
    ]);
}
Complex Mapping with Multiple Values
You can map multiple values to the same badge type:
Column::add('Order Status', 'order_status')->badgeable([
    'completed' => 'success',
    'delivered' => 'success',
    'shipped' => 'success',
    'pending' => 'warning',
    'processing' => 'warning',
    'cancelled' => 'danger',
    'refunded' => 'danger',
    'draft' => 'info',
])
Combining with Transform Functions
For advanced scenarios, you can combine badgeable with transform functions:
Column::add('Score', 'score')->transform(function($value) {
    if ($value >= 90) return 'excellent';
    if ($value >= 75) return 'good';
    if ($value >= 60) return 'average';
    return 'poor';
})->badgeable([
    'excellent' => 'success',
    'good' => 'info',
    'average' => 'warning',
    'poor' => 'danger',
])
Real-World Use Cases
E-Commerce Product Management
public function init(): void
{
    $this->makeColumns([
        Column::add('Product Name', 'name'),
        Column::add('SKU', 'sku'),
        Column::add('Stock Status', 'stock_status')->badgeable([
            'in_stock' => 'success',
            'low_stock' => 'warning',
            'out_of_stock' => 'danger',
            'backorder' => 'info',
        ]),
        Column::add('Visibility', 'visibility')->badgeable([
            'public' => 'success',
            'private' => 'danger',
            'draft' => 'warning',
        ]),
        Column::add('Featured', 'is_featured')->badgeable([
            '1' => 'primary',
            '0' => 'info',
        ]),
    ]);
}
User Management System
public function init(): void
{
    $this->makeColumns([
        Column::add('Name', 'name'),
        Column::add('Email', 'email'),
        Column::add('Account Status', 'status')->badgeable([
            'active' => 'success',
            'suspended' => 'danger',
            'pending_verification' => 'warning',
            'inactive' => 'info',
        ]),
        Column::add('Subscription', 'subscription_type')->badgeable([
            'premium' => 'primary',
            'pro' => 'success',
            'basic' => 'info',
            'trial' => 'warning',
            'expired' => 'danger',
        ]),
    ]);
}
Content Management
public function init(): void
{
    $this->makeColumns([
        Column::add('Title', 'title'),
        Column::add('Author', 'author_name'),
        Column::add('Publication Status', 'status')->badgeable([
            'published' => 'success',
            'draft' => 'warning',
            'scheduled' => 'info',
            'archived' => 'danger',
        ]),
        Column::add('Content Type', 'type')->badgeable([
            'article' => 'primary',
            'news' => 'info',
            'tutorial' => 'success',
            'announcement' => 'warning',
        ]),
    ]);
}
Project Management
public function init(): void
{
    $this->makeColumns([
        Column::add('Project Name', 'name'),
        Column::add('Status', 'status')->badgeable([
            'completed' => 'success',
            'in_progress' => 'info',
            'on_hold' => 'warning',
            'cancelled' => 'danger',
        ]),
        Column::add('Priority', 'priority')->badgeable([
            'high' => 'danger',
            'medium' => 'warning',
            'low' => 'info',
        ]),
        Column::add('Health', 'health_status')->badgeable([
            'healthy' => 'success',
            'at_risk' => 'warning',
            'critical' => 'danger',
        ]),
    ]);
}
Advanced Conditional Badging
Using transformWhen for Conditional Badges
The transformWhen method allows you to apply badges only when specific conditions are met:
Column::add('Revenue', 'monthly_revenue')
    ->transformWhen(function($value) {
        return $value > 10000;
    }, function($value) {
        return 'High Performer';
    })
Complex Conditional Logic
Column::add('Performance Score', 'score')->transformWithRow(function($row) {
    $score = $row->score;
    $department = $row->department;
    
    if ($department === 'sales' && $score >= 90) {
        return 'Star Performer';
    } elseif ($score >= 85) {
        return 'Excellent';
    } elseif ($score >= 70) {
        return 'Good';
    } elseif ($score >= 60) {
        return 'Needs Improvement';
    } else {
        return 'Critical';
    }
})
Best Practices and Tips
1. Consistent Color Coding
Maintain consistent color meanings across your application:
// Good: Consistent color usage
'active' => 'success',      // Always green for active states
'pending' => 'warning',     // Always yellow for pending states
'error' => 'danger',        // Always red for error states

// Avoid: Inconsistent color usage
'active' => 'success',      // Green for active
'enabled' => 'warning',     // Yellow for enabled (should be green)
2. Meaningful Badge Text
Use clear, descriptive text for better user experience:
// Good: Clear and descriptive
Column::add('Status', 'status')->badgeable([
    'published' => 'success',
    'under_review' => 'warning',
    'rejected' => 'danger',
])

// Better: Even more descriptive with custom labels
Column::add('Status', 'status')->transformWithRow(function($row) {
    switch($row->status) {
        case 'published':
            return '✓ Published';
        case 'under_review':
            return '⏳ Under Review';
        case 'rejected':
            return '✗ Rejected';
        default:
            return $row->status;
    }
})
3. Performance Considerations
For large datasets, consider the performance impact:
// Efficient: Direct mapping
Column::add('Status', 'status')->badgeable([
    'active' => 'success',
    'inactive' => 'danger',
])

// Less efficient: Complex transformations on large datasets
Column::add('Status', 'status')->transformWithRow(function($row) {
    // Complex database queries or heavy computations
    $relatedData = SomeModel::where('id', $row->related_id)->first();
    // ... complex logic
})
4. Accessibility Considerations
Ensure your badges are accessible:
// Include meaningful text for screen readers
Column::add('Status', 'status')->transformWithRow(function($row) {
    $statusText = ucfirst($row->status);
    return "{$statusText}";
})
Troubleshooting Common Issues
Issue 1: Badges Not Displaying
Problem: Badges appear as plain text instead of styled badges.
Solution: Ensure you're using CrudBooster v7.8.0+ and TailwindCSS is properly loaded:
// Check your CrudBooster version
composer show crudbooster/crudbooster

// Ensure proper column setup
Column::add('Status', 'status')->badgeable([
    'active' => 'success',  // Make sure the key matches your data
])
Issue 2: Wrong Colors Displayed
Problem: Badges show unexpected colors.
Solution: Verify the badge type names and data values:
// Correct badge types
'success', 'danger', 'warning', 'info', 'primary'

// Check your data values match the mapping
Column::add('Status', 'status')->badgeable([
    'active' => 'success',     // Ensure 'active' exists in your data
    'inactive' => 'danger',    // Ensure 'inactive' exists in your data
])
Issue 3: Performance Issues
Problem: Page loads slowly with many badgeable columns.
Solution: Optimize your queries and avoid complex transformations:
// Optimize with eager loading
$this->hookQuery(function($query) {
    $query->with(['category', 'status']); // Eager load relationships
});

// Use simple badgeable instead of complex transforms
Column::add('Status', 'status')->badgeable([
    'active' => 'success',
    'inactive' => 'danger',
])
Integration with Other CrudBooster Features
Combining with Filtering
public function init(): void
{
    $this->makeColumns([
        Column::add('Status', 'status')
            ->badgeable([
                'active' => 'success',
                'inactive' => 'danger',
                'pending' => 'warning',
            ])
            ->filterSelectEnum([
                'active' => 'Active',
                'inactive' => 'Inactive', 
                'pending' => 'Pending'
            ]),
    ]);
}
Working with Relationships
public function init(): void
{
    $this->makeColumns([
        Column::add('Category Status', 'category.status')
            ->relation('categories', function($join) {
                $join->on('categories.id', '=', 'products.category_id');
            }, 'status')
            ->badgeable([
                'active' => 'success',
                'inactive' => 'danger',
            ]),
    ]);
}
Export Compatibility
Badgeable columns work seamlessly with CrudBooster's export features:
public function init(): void
{
    $this->makeColumns([
        Column::add('Status', 'status')
            ->badgeable([
                'active' => 'success',
                'inactive' => 'danger',
            ])
            ->exportable(true), // Include in exports
    ]);
}
Migration from Previous Versions
If you're upgrading from an older CrudBooster version, here's how to migrate your existing badge implementations:
Old Method (Pre v7.8.0)
// Old transform-based approach
Column::add('Status', 'status')->transform(function($value) {
    if ($value === 'active') {
        return 'Active';
    }
    return '' . $value . '';
})
New Method (v7.8.0+)
// New badgeable approach
Column::add('Status', 'status')->badgeable([
    'active' => 'success',
    'inactive' => 'danger',
])
Conclusion
The badgeable feature in CrudBooster represents a significant advancement in data visualization capabilities. By implementing the techniques covered in this guide, you can create more intuitive, visually appealing, and user-friendly admin interfaces.
Key takeaways:
Start Simple: Begin with basic badgeable implementations and gradually add complexity
Stay Consistent: Use consistent color schemes across your application
Think User Experience: Choose colors and labels that immediately convey meaning
Optimize Performance: Use direct mapping over complex transformations when possible
Consider Accessibility: Ensure your badges work for all users
The badgeable feature transforms mundane data tables into engaging, informative dashboards that help users make quick decisions and understand data at a glance. As you implement these features in your projects, you'll find that they significantly improve both the aesthetic appeal and functional value of your admin panels.
Whether you're building an e-commerce platform, content management system, or any data-driven application, mastering the badgeable feature will elevate your CrudBooster implementations to professional standards that users will appreciate and enjoy using.
Ready to implement badgeable features in your project? Start with the basic examples and gradually incorporate more advanced techniques as your requirements grow. The flexibility and power of CrudBooster's badgeable system will help you create outstanding admin interfaces that stand out from the crowd.
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.



Tutorial: How to Customize the Detail Page of a Module in CRUDBooster
Ferry Ariawan — Wed, 09 Apr 2025 04:45:53 GMT
Hello developers! 👋 Yesterday I received a request from one of our members asking how to customize the detail page of a module in CRUDBooster. So, in this tutorial, I’ll walk you through the steps to do exactly that. Let’s dive in!
Prerequisites
CRUDBooster version v7.6.1 or higher
Basic knowledge of Livewire and Blade
Make sure your CRUDBooster installation is already upgraded to version v7.6.1 or above before following this tutorial.
In this guide, I’ll use a sample module called "Article", and the goal is to only customize the detail page of this module while keeping everything else unchanged.
1. Create a New Detail Template
First, create a views folder inside your target module directory:
/app/Cb/Modules/Article/views
Then, create a new file named detail.blade.php inside that folder. This will serve as the custom template for the detail page.
You can copy CRUDBooster’s default detail template and start modifying it as needed. Below is the base structure:
@php use CrudBooster\Components\Icon\Icon; @endphp

    

    @if(isset($confirmTitle))
        {!! confirmMessageTag($confirmTitle, $confirmMessage, $confirmAction, $confirmButtonText, $confirmButtonColor) !!}
    @endif

    @if(!$formDialog)
        
        
            « Go Back To List
        
    @endif

    
        
            
                Detail Data
            
            
                @if(!$formDialog)
                    @can('update', $module['key'])
                        
                            {!! Icon::PENCIL !!}
                        
                    @endcan
                @endif
            
        
        
            @cbDetailContent(['formColumns'=> $formColumns, 'formData'=> $formData])
            
                
                    Cancel
                
            
        
    

    @foreach($subModules as $subModule)
        @livewire($subModule['key'].'-browse', ['withHeader' => false, 'tableTitle' => $subModule['tableTitle'], 'formDialog'=> true, 'moduleKey'=> $subModule['key'], 'foreignKey'=> $subModule['foreignKey'], 'foreignKeyValue'=> $formId])
    @endforeach

⚠️ Please note: CRUDBooster depends on certain logic inside this template. If you wish to customize it, do so without removing the essential parts and logic required for it to work correctly.
2. Register the View in Your Service Provider
Next, register your custom view namespace in your module’s service provider located at:
/app/Cb/Modules/Article/ArticleServiceProvider.php
Inside the boot() method, add the following:
public function boot()
{
    $this->loadViewsFrom(__DIR__.'/views', 'article');
}
If you're unfamiliar with loadViewsFrom, you can check Laravel's documentation or ask ChatGPT for further clarification.
3. Override the View in Your Form Component
Now go to your form component class:
/app/Cb/Modules/Article/Livewire/ArticleForm.php
Add a new property $viewDetail to override the default CRUDBooster detail view:
class ArticleForm extends BaseFormComponent
{
    public $pageTitle = "Article";
    protected $modelService = ArticleService::class;
    protected $modelName = ArticleModel::class;

    protected string $viewDetail = 'article::detail';
    //...
}
4. Add Custom Assets (CSS & JS)
As an additional enhancement, you may also want to include your own custom CSS or JavaScript in your module. You can do this directly from the module’s service provider.
In the same boot() method, add the following lines:
\CrudBooster\Themes\CbThemeAssetRegistrar::addCss('https://path-to-your-css-file.css');
\CrudBooster\Themes\CbThemeAssetRegistrar::addJs('https://path-to-your-js-file.js');
This allows you to inject specific styles or scripts into your custom detail page (or other parts of the module) as needed.
✅ Conclusion
And that’s it! 🎉 You've now learned how to override and customize the detail page view of a CRUDBooster module. This allows you to create a richer, more tailored presentation for your data without breaking the existing system.
With this technique, you can:
Design your own UI for data detail pages
Add custom styling, layouts, or additional elements
Still keep full compatibility with CRUDBooster’s permission and routing logic
Stay tuned for more tutorials, and if you have questions, feel free to reach out or join our community on Discord!
Download CRUDBooster now and take your Laravel development to the next level! Get 10% discounted by using promo code UPGRADE10 (sshh this is limited slot…)
Happy coding! 🚀


Tutorial: Generate CRUD in Laravel with CRUDBooster
Ferry Ariawan — Mon, 17 Mar 2025 01:24:58 GMT
Have you ever thought about how much time it takes to create repetitive CRUD operations in Laravel? And let’s not forget that building a project often involves not just one or two modules, but potentially dozens of modules, all within a tight deadline. I know freelancers and software houses can relate to this a lot. But with CRUDBooster, you don’t have to worry about the boring task of creating CRUD operations. You can save up to 70% of your personal timeline and don’t have to stress about minor bugs like data saving errors or data deletion errors. CRUDBooster will take care of all that for you!
Prerequisites
CRUDBooster v7.x is already installed in your Laravel project (if you don’t have it, please download it here).
Basic knowledge of Laravel.
Installing Laravel (If doesn’t exists)
Open the terminal in the “~/crud-laravel” folder, create it first if it doesn’t.
mkdir ~/crud-laravel && cd ~/crud-laravel
Run the following command:
composer create-project laravel/laravel=”^12.0” crudbooster
Check this out this link for more information about Laravel installation 
Installing CRUDBooster
Checkout a new license at https://crudbooster.com/ (You may choose Trial if you want to try purpose)
Add this bellow composer config repository at laravel project ~/crud-laravel/crudbooster
composer config repositories.crudbooster vcs https://xxx@repo.crudbooster.com/crudbooster/crudbooster.git
> Replace “xxx” with a code your own (check your crudbooster email regarding project active email)
Run this bellow “composer require” at laravel project ~/crud-laravel/crudbooster to start install crudbooster:
composer require crudbooster/crudbooster:”^7.4” -W
Follow the install steps at terminal screen, it start with enter your license key. It’s very easy, if you have a question, I like to help, drop your comment bellow. 
Generating CRUD with Artisan CLI
Creating CRUD with the Artisan CLI is a very quick method because in general you only need to write the Artisan command, and the CRUD module will be generated immediately. Here’s how to use it:
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.
For prerequisite, please ensure you have a table with already fields inside. Or, please create it first, following this bellow structure:
table: posts
structure:
- id (bigint primary key)
- created_at (timestamp)
- updated_at (timestamp)
- deleted_at (timestamp)
- title (varchar 255)
- content (longtext)
- published_at (datetime)
Open the terminal in your Laravel project.
Run following command to create a module:
php artisan cb:crud posts
Great job! You can now access your new CRUD module called "Posts." Just log in to CRUDBooster at http://localhost:8000/cms/auth/login and click on the new menu item labeled "Posts." Enjoy exploring!
Want to know more about command crud? Check out this link: https://crudbooster.com/docs#/?id=via-command-line
Generating CRUD with GUI
For those of you who prefer not to write any code, you’re in for a treat! With CRUDBooster, you can create a CRUD module with just a click—no coding required! It even generates a table for you automatically, so you don’t have to define the table beforehand. Enjoy the simplicity!
Login to your CRUDBooster (http://localhost:8000/cms/auth/login)
Go to menu “Module Builder”
Click on “Add Module Builder” button
Please fill out the form with the following information, and then click 'Save':
Add some fields to the Database Builder. Enter the column/field name and then click the '+' button. Keep trying until all fields are added! and lastly Click “Save”.
Then, you can click “Re/Build Module” button directly, without fill out all menu (Relationship, Query Condition, Browse, etc) first. 
Click “Yes” on build module confirmation
You have done, you will see a new menu on the sidebar labeled “Posts”. Now let’s try by clicking it’s menu. 
Voila, great you have a new crud module labeled “Posts” that you have create by using GUI. 
Explore on other feature like Add data, Edit and Delete data

Add Form
Browse
Edit
Delete
Detail Data
Conclusion
By following this tutorial, you’ve learned how to efficiently create a CRUD module in Laravel using CRUDBooster. Whether using the command-line interface (CLI) or the graphical user interface (GUI), CRUDBooster streamlines the process, saving valuable development time.
With its powerful features and intuitive tools, CRUDBooster allows developers to focus more on building functionality rather than repetitive CRUD operations. Now, you’re equipped to speed up your Laravel backend development with ease. 🚀
Ready to take it further? Try building more complex modules and customize them to fit your project’s needs! Download CRUDBooster Now!
Stay tuned for an even more detailed tutorial in the next one! If you haven’t already, subscribe to this substack to get all the latest updates.
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.



Tutorial: Creating a Custom Module in CRUDBooster
Ferry Ariawan — Sat, 15 Mar 2025 00:10:10 GMT
In this tutorial, I will guide you through the process of creating a custom module in CRUDBooster. We will discuss why and when you might need to create a custom module, as well as how to integrate it with CRUDBooster's Authorization and Permission system.
By default, CRUDBooster provides a powerful CRUD generator that helps developers create admin panels quickly. However, in some cases, you may need a more customized approach that goes beyond the standard module generator. This is where custom modules come into play. With a custom module, you can design unique workflows, tailor the UI/UX to your needs, and extend CRUDBooster’s functionality while still utilizing its robust authentication and authorization features.
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.
Let’s dive into the step-by-step process of building a custom module.
This tutorial is based on the official documentation: https://crudbooster.com/docs#/?id=custom-module
Prerequisites
CRUDBooster v7.x installed on your Laravel project.
Basic knowledge of Livewire & Laravel (https://livewire.laravel.com/)
1. Understanding the Module Folder Structure
Before we start coding, let's understand the structure of a CRUDBooster module. Here’s what a module folder looks like:
/app/Cb/Modules/YourModuleName

YourModuleName
|
--- Database
------ Migrations
--------- file_name_migration.php
--- Livewire
------ Name.php
--- Models
------ Name.php
--- Services
------ NameService.php
--- views
--- ModuleServiceProvider.php
--- router.php
Modules should be placed inside /app/Cb/Modules/{moduleName}. The folder consists of:
Database: Stores migration files.
Livewire: Contains Livewire components.
Models: Houses Eloquent models.
Services: Used for advanced query handling.
Views: Contains Blade templates.
ModuleServiceProvider: Registers the module.
router.php: Defines custom routes.
Having a well-structured module ensures better maintainability and scalability in your Laravel application.
Let’s collaborate on this. Follow me as I create a folder named /app/Cb/Modules/CustomUser. Inside this folder, we’ll create another directory with the same structure as mentioned above.
2, Creating the Livewire Component
Please create a file named “CustomUser.php” in the folder “Livewire.” Then, follow the code below:
layout("cb.themes::layout-app");
    }

}
We need to extend the view with the layout from CRUDBooster, using the layout name “cb.themes::layout-app”.
3. Creating the View
Create a file view name “index.blade.php” in the views folder 

    


This is a default template provided by Livewire’s standard library.
4. Creating the Service Provider
Each module requires a Service Provider to register itself with CRUDBooster. This acts as the module's entry point, ensuring it integrates seamlessly with the system. Here’s an example:
File: /app/Cb/Modules/CustomUser/CustomUserServiceProvider.php
loadViewsFrom(__DIR__.'/views', 'cb.modules.customuser');
        $this->loadRoutesFrom(__DIR__ . '/router.php');

        Livewire::component('custom-user', CustomUser::class);
        ModuleRegistrar::registerModule(
            key: 'custom-user',
            name: 'Custom',
            browseModuleClass: CustomUser::class,
            formModuleClass: CustomUser::class,
            serviceProvider: self::class,
            additional: [
                'permissionAvailable' => [
                    RolePermission::READ,
                ],
            ]
        );
    }
}
Next, register this service provider in Laravel’s default AppServiceProvider.php:
at register method:
$this->app->register(CustomUserServiceProvider::class);
5. Defining Custom Routes
Modules often require custom routes to handle their operations. Inside router.php, define your module’s route:
This ensures that the module is accessible via the /cms/custom-user URL.
6. Initial Testing
After following the steps above, you can test your module by navigating to:
https://localhost:8000/cms/custom-user
Ensure your Laravel development server is running (php artisan serve).
If everything is set up correctly, you should see your module’s page load without issues.
7. Enhancing the View & Component Class
Now, let’s add some structure to the UI. We will create a simple table displaying user data:
Component Class (app/Cb/Modules/CustomUser/Livewire/CustomUser.php)
 User::all()
        ])
            ->layout("cb.themes::layout-app");
    }

}
View (app/Cb/Modules/CustomUser/views/index.blade.php)

    
        
    

    
        Add Data
    

    
            @foreach($users as $user)
            
            @endforeach
        
        
            
                ID
                Name
                Email
                Action
            
        
        
                {{$user->id}}
                {{$user->name}}
                {{$user->email}}
                
                    Edit
                    Delete
                
            
    


8. Adding Permissions and Security
For security, always check user permissions before allowing actions. You can enforce access control using Blade directives:
@can(“{permission}”,”{module-key}”)
@can('create', 'customer-user')
  Add Data
@endcan
Or, inside a controller:
use Illuminate\Support\Facades\Gate;

Gate::check(‘{permission}’, ‘{module-key}’);
Example:
if (!Gate::check('create', 'customer-user')) {
    abort(403);
}
Permission available: create, read, update, delete, is_super_admin
9. Adding a Custom CSS & JS
If you want to add a custom CSS, you can embed your CSS file in crudbooster. To do this, use the following function and send it to the service provider. In this context, the service provider is CustomUserServiceProvider, and you should call it in the boot method:
// Register custom css
CbThemeAssetRegistrar::addCss(asset('css/custom-user-style.css'));
Full version:
loadViewsFrom(__DIR__.'/views', 'cb.modules.customuser');
        $this->loadRoutesFrom(__DIR__ . '/router.php');

        Livewire::component('custom-user', CustomUser::class);
        ModuleRegistrar::registerModule(
            key: 'custom-user',
            name: 'Custom',
            browseModuleClass: CustomUser::class,
            formModuleClass: CustomUser::class,
            serviceProvider: self::class,
            additional: [
                'permissionAvailable' => [
                    RolePermission::READ,
                ],
        ]);

        // Register custom css
        CbThemeAssetRegistrar::addCss(asset('css/custom-user-style.css'));
    }
}
Now, if you want to add JavaScript, the process is similar to adding CSS, but the functions you can use are different.
// Register custom js
CbThemeAssetRegistrar::addJs(asset('js/custom-user-script.js'));
10. Add to Menu
Once you have successfully created the module, it's time to add it to the menu for easy access. Follow these steps:
Go to the Menu Management section.
Click "Add Menu Management".
Fill out the form, select CRUD Module as the type, and choose the Custom module from the list. (This is the module you just created, and it should now appear in the list.)
Click "Save" to apply the changes.
Conclusion
By following this guide, you have successfully built a custom module in CRUDBooster. This allows you to extend the core functionality while maintaining security and flexibility. You can now: 
✅ Create custom Livewire components. 
✅ Register and configure modules via a service provider. 
✅ Define custom routes and manage views. 
✅ Secure your module with CRUDBooster’s built-in permission system.
Start building your own modules today and take your Laravel admin panel to the next level! 🚀 Download CRUDBooster now!
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.



Tutorial: Creating Charts with CRUDBooster Page Builder
Ferry Ariawan — Wed, 12 Mar 2025 12:37:05 GMT
In this tutorial, we’ll explore how to create charts in CRUDBooster using the Page Builder feature.
Page Builder is a powerful feature in CRUDBooster that allows you to create custom module pages effortlessly. You can design your own layout, add various elements, and include charts—all with a simple drag-and-drop interface.
Let’s dive into the step-by-step process of building a chart using Page Builder in CRUDBooster.
Case Study: Visualizing Member Growth Data (2024)
In this example, we’ll create a chart to display monthly member growth data for 2024.
Prerequisites
CRUDBooster v7 installed on your Laravel project.
Member data for the year 2024 (adjust according to your dataset). (Click here download dummy member data).
Step 1: Accessing Page Builder
Open the Page Builder and enter the page name.
Click the pencil icon at the bottom right to enter the workspace.
(Embed image: Edit Button)
Step 2: Setting Up the Layout
This is where we add elements to the page.
First, drag a Layout Column element into the workspace.
Step 3: Adding the Chart Element
Select the Chart.js element from the sidebar.

Drag it into the workspace.
Click the Edit (pencil) button on the chart element to open the settings window.
Step 4: Configuring Chart Settings
Follow these settings for a consistent test setup.
Basic Information Section
Title: "Member Growth 2024"
Icon: Select a chart icon. 
Chart Type: Select Line Chart. 
Chart X Axis: Select Monthly to group data by months. 
Min X Axis & Max X Axis: Set range from 1 (January) to 12 (December). 
Year: Set to 2024. 
Step 5: Configuring the Dataset
Dataset Title: "Member Growth"
Data Query: Select the data source using Query Builder.
Click "+" to create a new query.
Name: "Query Chart Member 2024"
Builder Mode: Select Raw Query.
Raw Query:
SELECT COUNT(id) AS total, MONTH(created_at) AS month, YEAR(created_at) AS year 
FROM members 
WHERE YEAR(created_at) = 2024
GROUP BY month, year
Click "Test Query" to verify output.
Click "Save" to store the query.
Return to the Page Builder tab, refresh the Data Query, and select the query created earlier. 
Comparator Field: Enter "month" (used to group data on the X-axis).
Year Field: Enter "year" (used for filtering year-based data).
Point Field: Enter "total" (the count of new members per month).
Background, border, and stack settings can be adjusted as needed.
If you need multiple datasets, click "Add Dataset" to include more data series in the chart.
Click "Save", and your chart element will be successfully stored.
Step 6: Previewing the Chart
Click "Preview" to open a new page displaying the chart you created.
Page Builder automatically generates a unique URL for previewing the page.
Conclusion
With CRUDBooster’s Page Builder, creating interactive charts is effortless. You can visualize data dynamically, making your admin panel more insightful.
🚀 Next Steps:
Try different chart types (bar, pie, area).
Customize the color scheme and labels.
Integrate real-time data updates.
Start building your own analytics dashboard today! 🎉 Download CRUDBooster Now!


🚀 Coming Soon: Powerful API Builder by CRUDBooster
Ferry Ariawan — Mon, 17 Feb 2025 01:16:11 GMT
Building APIs should be easy, fast, and hassle-free. That's why we're introducing the Powerful API Builder, a game-changing feature coming soon to CRUDBooster! Whether you're a solo developer or working on enterprise-grade applications, this new tool will supercharge your workflow.
🔥 What Makes It So Powerful?
✅ Easy API Builder – Just Click and Click
No more manually coding repetitive API endpoints. With our intuitive UI, you can build APIs with just a few clicks—effortless, smooth, and developer-friendly.
⚡ Pipeline-Driven
Our pipeline-driven approach allows you to define API processes step by step. From data transformation to authentication handling, every action is structured for maximum flexibility and control.
📄 Auto-Generated Documentation
Forget about writing API docs manually. Our API Builder automatically generates documentation so your team (or future self) always has clear and up-to-date API references.
🎉 FREE for Premium Members!!
If you're a Premium CRUDBooster member, you get full access to the API Builder at no extra cost. Just another reason to upgrade and take your development to the next level!
🔜 Stay Tuned!
We’re in the final stages of development, and we can't wait for you to try it. Keep an eye out for the official release!
💡 Want to be the first to experience it? Join our Premium plan today and get early access.
Start build your admin panel with no code now at crudbooster.com
#CRUDBooster #APIBuilder #NoCodeAPI #DevTools #WebDevelopment


🚀 CRUDBooster v7.0.27 Update – Bug Fixes & Installation Guide!
Ferry Ariawan — Fri, 14 Feb 2025 16:28:41 GMT
Hey CRUDBooster Devs!
We’ve just rolled out CRUDBooster v7.0.27, bringing essential bug fixes to enhance your experience:
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.
✅ Fixed installation stuck on Windows 
✅ Resolved $slot error on the dashboard
If you’ve faced any of these issues, make sure to update to the latest version.
💡 Need help with installation?
I’ve recently put together a step-by-step installation guide to help you get CRUDBooster up and running smoothly. Watch it here:
👉 How to Install CRUDBooster v7
📖 Read the Documentation
For a complete guide on using CRUDBooster, check out the official docs:
👉 CRUDBooster Documentation
👉 Update Guide
As always, your feedback is invaluable! Let us know if you run into any issues submit on CB Issue Tracker Here
Happy coding!
— CRUDBooster 🚀
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.



🚀 CRUDBooster is Officially LIVE – AI-Powered CRUD Generator is Here!
Ferry Ariawan — Sat, 08 Feb 2025 07:05:45 GMT
Hey developers, CRUDBooster is officially LIVE! 🎉 this is the real deal with powerful new features to speed up your Laravel development.
We’ve taken CRUD automation to the next level with AI-powered generation, a smooth SPA-like experience, and a drag & drop Page Builder.
What’s New in the Live Version?
🔥 1. New CRUD Generator (With AI Support)
💡 Just type a prompt, and AI will generate the entire CRUD module!
💡 Advanced CRUD Generator User Interface
🔥 2. Page Builder (Drag & Drop)
💡 No coding needed—design custom admin pages in seconds!
🔥 3. Easy Code, Fast Code
💡 Simple, optimized syntax so you can build faster than ever!
🔥 4. Better Performance (Smooth SPA-like Experience)
💡 CRUDBooster feels snappy & seamless, just like a modern web app.
🔥 5. RBAC Built-in (Role-Based Access Control)
💡 Secure user access with a built-in role management system!
Free for Students & Non-Profit Projects
💡 Are you a student or working on a non-profit project?
✅ You can use CRUDBooster for FREE!
✅ We want to support education & meaningful projects.
💰 Building a commercial project? Go PREMIUM!
✅ More AI credits for automation
✅ Priority support for your projects
✅ No Contract! No Subscription!
CRUDBooster is now production-ready and fully optimized for your Laravel applications.
Get Started Today
🛒 Available now! Check out the demo here: www.crudbooster.com
⚡ Upgrade your Laravel Project today!
💬 Have questions? We’re here to help! Drop your thoughts in the comments or reach out to us anytime.
Let’s build faster, smarter, and better with CRUDBooster! 🚀


 🚀 Join the CRUDBooster Beta Program!
Ferry Ariawan — Sun, 26 Jan 2025 03:20:02 GMT
Are you ready to experience the future of CRUD development? CRUDBooster is evolving, and we're excited to invite you to join our exclusive Beta Program! This is your chance to get early access to new features, cutting-edge AI-powered tools, and a more powerful development experience—all while helping us shape the future of CRUDBooster.
🧩 What’s New in the Beta Version?
Enhanced AI Module Generator: Generate modules and dummy data in seconds.
Customizable Input Types: Easily extend and integrate with packages or your custom input types.
Page Builder: Build dashboards and pages faster than ever before.
Streamlined Performance: Optimized speed and functionality for better development flow.
📝 What You Need to Know
The beta version is not for production use; it’s for testing purposes only.
You may encounter some bugs, incomplete features, or areas that need improvement. Your feedback will help us address these issues before the official release.
Limited Slots: Not all submissions will be approved due to limited capacity. If you don’t receive an email from us, don’t worry—your interest is still greatly appreciated, and you’ll be notified of future opportunities.
Beta Period: This program is available only until February 10, 2025, so make sure to apply before the deadline!
🌟 Why Join?
Be the first to explore our latest tools and features.
Influence the development of CRUDBooster with your feedback.
Gain insider access to upcoming updates.
🚪 How to Join
Joining is simple! Click the link below and submit your application:
Join the CRUDBooster Beta Program
*Note: If you don’t receive a confirmation email, don’t be discouraged. We’re keeping the beta exclusive, and there may be more opportunities in the future.


POV Developer: Building Dashboards Without Coding, Just Drag & Drop! 
Ferry Ariawan — Thu, 19 Dec 2024 04:19:33 GMT
Well, with the upcoming release of CRUDBooster, this dream is becoming a reality.
Introducing the Page Builder by CRUDBooster
The next version of CRUDBooster will feature an intuitive Page Builder. Whether you need to craft a professional report, an interactive admin panel, or a custom dashboard, the process will be as simple as selecting elements, arranging layouts, and clicking "save." Here’s what you can expect:
Flexible Layouts: Choose from various column styles to create the structure you need.
Dynamic Elements: Add data tables, counters, charts, maps, headings, paragraphs, and images effortlessly.
Versatile Usage: Set your customized dashboard as a default homepage, a detailed report page, or anything else you envision.
It’s the ultimate tool for developers who want to save time and focus on what really matters. Whether you’re working on a client’s project or just need to visualize data quickly, CRUDBooster’s Page Builder saves you time and effort while delivering impressive results. 
But here’s the kicker: it’ll include both free and premium options.
Watch the Demo
I recently shared a sneak peek on TikTok, showcasing how easy it is to build a dashboard with CRUDBooster. Check out how the Page Builder works:  here.
Coming Soon
We’re in the final stages of development, and we can’t wait to share it with you. Follow us on Substack and TikTok (@bapakngoding) for more sneak peeks and updates. Trust us, you won’t want to miss this release.
Let’s build faster, smarter, and with less effort. CRUDBooster is here to transform how you create CRUD applications and beyond.
Stay tuned! 🚀


What If You Could Generate Modules with AI? We're Making It Happen!
Ferry Ariawan — Fri, 13 Dec 2024 08:05:35 GMT
Imagine this: you're sipping your coffee, and instead of spending hours coding, you simply tell an AI what you need—a module for your project—and in minutes, it's ready for you. Sounds futuristic? Well, we’re bringing that future closer to reality.
For developers, generating modules with tools like CRUD Booster has already been a time-saver. Just by clicking through its intuitive interface, you can create powerful modules in no time. Now, imagine combining that efficiency with AI! Not only does CRUD Booster help you quickly set up modules, but with AI assisting in the initial setup—defining entities, columns, and relationships—you’ll get things done even faster.
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.
The Vision
We’re in the process of building an AI-powered tool that integrates seamlessly with CRUD Booster to take module generation to the next level. Think of it as your personal coding assistant, trained to understand your needs and deliver clean, efficient code that integrates seamlessly into your projects.
How It Works (Soon!)
While the tool is still under development, the idea is simple:
Input Your Requirements: Describe what you need in plain language or a pre-defined format.
AI Does the Heavy Lifting: Our AI analyzes your input and generates the module code.
Review and Tweak: You get a fully functional module, with the ability to tweak and refine it further.
Why This Matters
Save Time: Let the AI handle repetitive coding tasks while you focus on innovation.
Great for Starters: You don’t have to worry about defining entities or columns—our AI will provide smart defaults to get you started.
Reduce Complexity: Simplifies the initial setup, making development faster and easier.
Where We Are Now
Development is in full swing, and while we’re not ready to launch just yet, we’re excited to share our progress with you. This tool has the potential to revolutionize how modules are created, and we’re committed to getting it just right before it reaches your hands.
Stay Tuned
If this sounds like something you’d want to use, make sure you’re subscribed! In early 2025, I’ll be sharing more updates, behind-the-scenes insights, and even sneak peeks of the tool in action.
Let’s shape the future of coding together!
Start build your admin panel with no code now at crudbooster.com
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.



Quick Poll: What's Your Go-To WYSIWYG Editor?
Ferry Ariawan — Thu, 21 Nov 2024 04:25:36 GMT
Let's talk about the elephant in the room: WYSIWYG editors all have their quirks.
TinyMCE: ➕ Feature-rich, great docs ➖ Legacy issues, can be heavy, licensing concerns
CKEditor: ➕ Reliable, good community ➖ Complex configuration, steeper learning curve
Summernote: ➕ Lightweight, easy to implement ➖ Limited features, Bootstrap dependency
Quill: ➕ Modern, clean API ➖ Fewer plugins, limited table support
Trix (by Basecamp): ➕ Simple, focused on content-first ➕ Great for basic formatting ➖ Limited customization ➖ No tables or advanced features
As we rebuild CRUDBooster, I'm curious:
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.
Share your experiences in the comment below. Which quirks drive you crazy? What features can't you live without?
Your input will shape newest version of CRUDBooster's WYSIWYG integration.
P.S. Know a developer with strong WYSIWYG opinions? Share this poll with them!
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.



Exciting Updates: CRUDBooster's Next Version is on the Way!
Ferry Ariawan — Thu, 17 Oct 2024 01:13:10 GMT
Hi CRUDBooster Community,
First of all, thank you so much for the overwhelming support and enthusiasm you’ve shown for CRUDBooster. Your contributions, feedback, and continuous use of the platform mean the world to me and keep the project moving forward.
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.
I’m excited to share that the development of the new CRUDBooster version is in full swing! My target is to release the beta version around January ~ February 2025. This upcoming version will bring exciting features and improvements, making it easier and more powerful for everyone to use.
If you have any feedback, suggestions, or features you’d love to see included, feel free to share them in the comments below! Your input is invaluable in shaping CRUDBooster's future.
For those of you who want to support the development of CRUDBooster, you can now help through donations. If you'd like to contribute, here’s the link: https://paypal.me/ferryariawan. Every bit of support helps me dedicate more time and resources to making CRUDBooster the best it can be.
Thank you once again, and I can't wait to share the new CRUDBooster with all of you soon!
Best,  
Ferry Ariwan  
Founder of CRUDBooster
Thanks for reading CRUDBooster's Substack! Subscribe for free to receive new posts and support my work.