Skip to content
Flexible Content & Repeater Fields for Laravel Nova
Branch: master
Clone or download
Latest commit 0d471f1 Mar 8, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Fixed Vue layout fields duplication when instanciating fresh groups Mar 7, 2019
docs Removed WIP text Mar 5, 2019
resources Fixed Vue layout fields duplication when instanciating fresh groups Mar 7, 2019
src Fixed group values persistance after group key change Mar 7, 2019
.gitignore
LICENSE
README.md
add_something_amazing.png
composer.json
example_layouts.png
package.json
presentation.gif Added presentation GIF Feb 26, 2019
title.png Updated README Feb 26, 2019
webpack.mix.js Initial commit Feb 22, 2019
yarn.lock Updated package.json (attempt to solve vulnerability alert) Feb 25, 2019

README.md

Laravel Nova Flexible Content

An easy & complete Flexible Field for Laravel Nova, perfect for repeated and flexible field groups.

Laravel Nova Flexible Content in action

Quick start

Here's a very condensed guide to get you started asap.
See the full docs at https://whitecube.github.io/nova-flexible-content

Install

composer require whitecube/nova-flexible-content

Usage

A flexible field allows easy management of repeatable and orderable groups of fields. As opposed to the few existing solutions for Laravel Nova, this one does not have constraints on which fields you are allowed to use within these groups. That means you can use all Laravel Nova field types, and also any community-made fields.

Adding layouts

A layout represents a group of fields that can be repeated inside the Flexible field. You can add as many different layouts as you wish. If only one layout is defined the field will behave like a simple Repeater and by adding more layouts you'll obtain a Flexible Content. Both concepts are similar to their cousins in Wordpress' ACF Plugin.

Layouts can be added using the following method on your Flexible fields:

 addLayout(string $title, string $name, array $fields)

The $name parameter is used to store the chosen layout in the field's value. Choose it wisely, you'll probably use it to identify the layouts in your application.

use Whitecube\NovaFlexibleContent\Flexible;

/**
 * Get the fields displayed by the resource.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function fields(Request $request)
{
    return [
        // ...

        Flexible::make('Content')
            ->addLayout('Simple content section', 'wysiwyg', [
                Text::make('Title'),
                Markdown::make('Content')
            ])
            ->addLayout('Video section', 'video', [
                Text::make('Title'),
                Image::make('Video Thumbnail', 'thumbnail'),
                Text::make('Video ID (YouTube)', 'video'),
                Text::make('Video Caption', 'caption')
            ])
    ];
}

Example of Flexible layouts

Customizing the button label

You can change the default "Add layout" button's text like so:

Flexible::make('Content')
    ->button('Add something amazing!');

Add something amazing

Custom Layout Classes

Sometimes, addLayout definitions can get quite long, or maybe you want them to be shared with other Flexible fields. The answer to this is to extract your Layout into its own class. See the docs for more infomation on this.

Predefined Preset Classes

In addition to reusable Layout classes, you can go a step further and create Preset classes for your Flexible fields. These allow you to reuse your whole Flexible field anywhere you want. They also make it easier to make your Flexible fields dynamic, for example if you want to add Layouts conditionally. And last but not least, they also have the added benefit of cleaning up your Nova Resource classes, if your Flexible field has a lot of addLayout definitions. See the docs for more infomation on this.

Custom Resolver Classes

By default, the field takes advantage of a JSON column on your model's table. In some cases, you'd really like to use this field, but for some reason a JSON attribute is just not the way to go. For example, you could want to store the values in another table (meaning you'll be using the Flexible Content field instead of a traditional BelongsToMany or HasMany field). No worries, we've got you covered!

Tell the field how to store and retrieve its content by creating your own Resolver class, which basically just contains two simple methods: get and set. See the docs for more infomation on this.

Contributing

Feel free to suggest changes, ask for new features or fix bugs yourself. We're sure there are still a lot of improvements that could be made and we would be very happy to merge useful pull requests.

Thanks!

Made with ❤️ for open source

At Whitecube we use a lot of open source software as part of our daily work. So when we have an opportunity to give something back, we're super excited!

We hope you will enjoy this small contribution from us and would love to hear from you if you find it useful in your projects. Follow us on Twitter for more updates!

You can’t perform that action at this time.