Tutorial: How to Customize the Detail Page of a Module in CRUDBooster

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
<div x-data="{openThumbnail: false, thumbnailSrc: ''}">
    <livewire:alert-message :type="session('message_type') ?? $__alertType" :message="session('message') ?? $__alertMessage" :position="session('message_position') ?? $__alertPosition" />

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

    @if(!$formDialog)
        <x-header :pageTitle="$pageTitle"/>
        <div class="my-4">
            <a href="{{getCmsUrl($redirectBackPath)}}" wire:navigate class="text-sm text-gray-500 hover:text-sky-600">&laquo; Go Back To List</a>
        </div>
    @endif

    <div class="panel mb-4">
        <div class="panel-header">
            <div class="panel-header-title">
                <h2>Detail Data</h2>
            </div>
            <div class="panel-header-action">
                @if(!$formDialog)
                    @can('update', $module['key'])
                        <a title="Edit Data" href="{{getCmsUrl($module['key'])}}/{{$formId}}/edit?ref={{urlencode(url()->current())}}" wire:navigate>
                            {!! Icon::PENCIL !!}
                        </a>
                    @endcan
                @endif
            </div>
        </div>
        <div class="panel-content">
            @cbDetailContent(['formColumns'=> $formColumns, 'formData'=> $formData])
            <div class="w-full">
                <div class="flex justify-end space-x-2">
                    <a href="{{!$formDialog ? getCmsUrl($redirectBackPath) : "javascript:"}}" @if(!$formDialog) wire:navigate @else wire:click="$dispatch('closeFormDialog')" @endif class="btn btn-default">Cancel</a>
                </div>
            </div>
        </div>
    </div>

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

⚠️ 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! 🚀