Introduction

Flatpack is probably the quickest and simplest solution to create fast multi-purpose administration panels for your Laravel app.

Out of the box, it provides a rich stack of crafted components, ready to assemble.

With Flatpack you can:

• Quickly create CRUD (Create, Read, Update, Delete) interfaces for your Eloquent models.
• Customise UI and components with simple and declarative YAML files.
• Build a complete administration panel for your site in seconds.

Requirements

• PHP 8.x
• Composer
• Laravel 9.x

Installation

Install the package via composer:

composer require flatpack/flatpack

Publish the configuration file and the compiled assets.

php artisan vendor:publish --tag="flatpack"

Flatpack is now ready.

Start by generating the template files for an Eloquent model. See how

Usage

Generating Flatpack files

In this example, we are going to generate the templates for App\Models\Post model.

php artisan make:flatpack Post

This command generates two files into the /flatpack directory:

• A form template /flatpack/posts/form.yaml, that defines the composition of your posts form.
• A list template /flatpack/posts/list.yaml, that defines the layout composition of your posts table with pagination.

Let's check the result: /backend/posts

Customizing form and list views

Now that Flatpack is up and running, we can start the assembling. The generated form.yaml and list.yaml can be customized by defining fields or columns of your views.

Each one will map your Eloquent model attribute (if present) to a pre-made component with different options and capabilities (text editors, date pickers, handling relations, etc.).

Learn more about all the different types of Form fields and List columns and their options.

Examples

The following examples illustrate a form.yaml and list.yaml for a hypothetical Post model.

Form composition

This form has different input types (e.g. text, textarea and date pickers) with individual options and validation rules.

# /flatpack/posts/form.yaml

fields:
  title:
    type: text
    label: Title
    placeholder: Post Title
    rules: required|string

  description:
    type: textarea
    label: Description

  created_at:
    type: datetimepicker
    label: Created
    readonly: true
    span: 1

  updated_at:
    type: datetimepicker
    label: Updated
    readonly: true
    span: 1

Learn more: Form reference

List composition

The paginated table rendered has some searchable and sortable columns.

# /flatpack/posts/list.yaml

columns:
  id:
    label: ID
    sortable: true
    searchable: true

  title:
    label: Post Title
    sortable: true
    searchable: true

  created_at:
    label: Created
    type: datetime
    format: "Y-m-d H:i:s"
    sortable: true

  updated_at:
    label: Updated
    type: datetime
    format: "Y-m-d H:i:s"
    sortable: true

Learn more: List reference