Layout snippets

Layout snippets let you place your own components into the existing administration interface.

Creating a layout

A layout is made of two files — a PHP configuration file and the component template assigned to it. Both are created with an artisan command.

php artisan admin:layout MyCustomLayout

The command asks which kind of component you want, Vue or Blade.

With Vue, the component MyCustomLayout.vue is created in resources/views/admin/components/layouts. With Blade, the file MyCustomLayout.blade.php is created in resources/views/admin.

Configuring the layout

The first file is the PHP class holding the settings of the component.

app/Admin/Layouts/MyExampleLayout.php

class MyExampleLayout extends Layout
{
    public $position = 'form-top';

    /*
     * On build blade layout
     */
    public function build()
    {
        return view('admin.MyExampleLayout');
    }
}

Position

The $position property decides where the generated component is placed.

public $position = 'form-top';

Position	Placement
`top`	Before the module panel
`bottom`	After the module panel
`form-top`	Top of the form
`form-bottom`	Bottom of the form
`form-header`	Form header
`form-footer`	Form footer
`table-header`	Header of the record table
`table-footer`	Footer of the record table

Supplying the component

public function build()
{
    $articles = Article::get();

    return view('admin.MyTestLayout', compact('articles'));
}

public function build()
{
    return $this->component('MyTestLayout.vue');
}

A Vue component can also be created on its own, without the PHP configuration file, with php artisan admin:component MyTestLayout. Answer layout when asked for the component type.

Components are loaded recursively from resources/views/admin/components. The directory is configurable in the administration configuration.

Registering the layout

Assign the PHP configuration file to the admin model through the $layouts property.

app/Article.php

class Article extends AdminModel
{
    protected $layouts = [
        \App\Admin\Layouts\MyExampleLayout::class,
    ];
}

A Vue component needs no PHP configuration file — register it directly, where the array key is the position.

app/Article.php

class Article extends AdminModel
{
    protected $layouts = [
        'form-top' => 'MyTopLayout.vue',
        'form-bottom' => 'MyBottomLayout.vue',
    ];
}

In this case, create the standalone Vue component with php artisan admin:component MyTestLayout and answer layout when asked for the component type.

The Vue component

Through the props attribute the component receives the record being edited, the newly created record and other information you can work with.

resources/views/admin/components/layouts/MyCustomLayout.vue

<template>
    <div>
        <h2 v-if="!row.id">Please open any row.</h2>
        <h2 v-else>You are editing row number {{ row.id }}</h2>
    </div>
</template>

<script type="text/javascript">
export default {
    props : ['model', 'row', 'rows'],
}
</script>

Getting started

Admin interface

Validation

Frontend

Creating a layout

Configuring the layout

Position

Supplying the component

Registering the layout

The Vue component

​Creating a layout

​Configuring the layout

​Position

​Supplying the component

​Registering the layout

​The Vue component

Creating a layout

Configuring the layout

Position

Supplying the component

Registering the layout

The Vue component