Warning!!!!

This repository is archived and no longer supported. It doesn't work with Nova 4. Just have a look at the form from https://github.com/shuvroroy/nova-dynamic-views

Nova dynamic views

This package is meant to be used INSTEAD of overwriting the custom-index-header, custom-index-toolbar, custom-detail-header, custom-detail-toolbar, etc. by yourself. It provides a much easier API for it and it allows you to use these "placeholder" components multiple times without overwriting each other.

Installation

Require the package with composer

composer require bernhardh/nova-dynamic-views

Register the tool in the tools method in your \App\Providers\NovaServiceProvider:

use Bernhardh\NovaDynamicViews\NovaDynamicViews;

...

public function tools() {
    return [
        new NovaDynamicViews()
    ];
}

Usage

Let's say you want to add a custom button to the toolbar of all index views. Just create a vue component for it, as you would do if you use the custom-index-header (see section "Create custom component" if you don't know how to). Let's call it my-index-toolbar-btn. Now the only thing you have to do is register it to your \App\Ņova\Resource class, within a new method called customIndexToolbarComponents, which returns a \Bernhardh\NovaDynamicViews\CustomComponents object:

public function customIndexToolbarComponents()
{
    return CustomComponents::make()
       ->addItem('my-index-toolbar-btn');
}

Thats it. Now you should see the content of your component in the toolbar.

Provide extra data

If you want to add extra data (for example a label) to your component (without extra request), just add it to the addItem method as second parameter (as array):

public function customIndexToolbarComponents()
{
    return CustomComponents::make()
       ->addItem('my-index-toolbar-btn', [
           'label' => 'My label'
       ]); 
}

Access resource data

You have access to the ressource class in all methods by using $this. On detail and edit components, you have access to the ID of the current model with request('id'). So if you need the model itself in your customDetailhHeaderComponents, customDetailToolbarComponents or your customUpdateHeaderComponents, you can query for it like so:

public function customDetailToolbarComponents() 
{
    $model = $this->model()->query()->where('id', request('id'))->first();

    //...
}

Add (tailwind) class to the container

If you want to add additional CSS classes to the container div of a section (for example add flex w-full justify-end items-center mx-3 to the customIndexToolbarComponents section), add the class in the make function (or use the setClass method):

public function customIndexToolbarComponents()
{
    return CustomComponents::make('flex w-full justify-end items-center mx-3')
       ->addItem('my-index-toolbar-btn'); 
}

Full usage example

class Resource extends \Laravel\Nova\Resource {
    ...

    /**
     * Using the `custom-index-toolbar` placeholder component
     * 
     * @return array[]
     */
    public function customIndexToolbarComponents()
    {
        return CustomComponents::make('flex w-full justify-end items-center mx-3')
            ->addItem('my-index-toolbar-btn', [
                'title' => 'My first btn'
            ])
            ->addItem('my-index-toolbar-btn', [
                'title' => 'My second btn'
            ]);
    }

    /**
     * Using the `custom-detail-header` placeholder component
     * 
     * @return array[]
     */
    public function customDetailHeaderComponents()
    {
        $model = $this->model()->query()->where('id', request('id'))->first();
        
        return CustomComponents::make()
           ->addItem('my-other-component', [
                'id' => $model->id,
                'name' => $model->name    
           ]);
    }
}

Use only on specific resources

If you want to show this button only on a specific resource, for example only for Users, just add this method to the \App\Nova\User class.

Available methods and areas

All custom-*-* nova placeholders (except custom-dashboard-header) are available as camel case methods postfixed with Components:

• customAttachHeaderComponents
• customCreateHeaderComponents
• customDetailhHeaderComponents
• customDetailToolbarComponents
• customIndexHeaderComponents
• customIndexToolbarComponents
• customLensHeaderComponents
• customUpdateAttachHeaderComponents
• customUpdateHeaderComponents

Create custom component

This is just a kick start documentation for this. For more info, see https://nova.laravel.com/docs/3.0/customization/resource-tools.html

Create a new resource tool with artisan:

php artisan nova:resource-tool acme/my-index-toolbar-btn

and say yes to all questions of the prompt. Now you can use this component (located ad nova-components/my-index-toolbar-btn) inside your customXXXComponents (f.e. customIndexToolbarComponents)