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

namespace App\Admin\Layouts;

use Admin\Layouts\Layout;

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 component is placed. A layout without $position is placed on top.

public $position = 'form-top';

Position	Placement
`top`	Before the module panel
`bottom`	After the module panel
`mutators`	Invisible component for scripts reacting to form changes
`form-before` / `form-after`	Before / after the form
`form-top` / `form-bottom`	Top / bottom inside the form
`form-header`	Form header
`form-header-left` / `form-header-right`	Left / right part of the form action bar
`form-footer`	Form footer
`table-before` / `table-after`	Before / after the record table
`table-header` / `table-footer`	Header / footer of the record table
`table-header-actions`	Action bar of the table
`actions-grid-before` / `actions-grid` / `actions-grid-after`	Around the grid size switcher
`model-builder`	Replaces the whole module view, e.g. dashboards or calendars

The exact placement of every position is drawn in Slots.

Supplying the component

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

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

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

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

Registering the layout

Assign layout classes to the admin model through the $layouts property.

app/Models/Article.php

use App\Admin\Layouts\ArticleStatsLayout;

class Article extends AdminModel
{
    protected $layouts = [
        ArticleStatsLayout::class,
    ];
}

A Vue component needs no PHP class. Use the position as the key, one position can hold more components.

app/Models/Order.php

class Order extends AdminModel
{
    protected $layouts = [
        'table-before' => 'OrdersCalendar',
        'form-top' => ['RecalculateVatPrices', 'SetPricesFromProduct'],
        'form-header-right' => 'orders.DeleteInHeader',
    ];
}

Create a standalone component with php artisan admin:component OrdersCalendar and answer layout when asked for the component type. A module without a table can replace the whole module view:

app/Models/Dashboard.php

class Dashboard extends AdminModel
{
    protected $skipMigration = true;

    protected $settings = [
        'icon' => 'fa-chart-line',
    ];

    protected $layouts = [
        'model-builder' => 'Dashboard',
    ];
}

build() returning null skips the layout, so a layout can decide at runtime not to render.
Unknown positions are ignored.
When the component file is not found, the Vue app uses a globally registered component with that name.
Layouts can be resolved at runtime with a layouts() method, and extended with setLayoutsProperty($layouts).

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>
export default {
    props: ['model', 'row', 'rows'],
};
</script>

Getting started

Upgrade guide

Admin interface

Validation

Frontend

Website

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