Ein einfaches & vollständiges Flexible Field für Laravel Nova, perfekt für wiederholte und flexible Feldgruppen.

Schnellstart

Hier ist eine sehr kompakte Anleitung, um sofort loszulegen. Die vollständige Dokumentation findest du unter https://whitecube.github.io/nova-flexible-content

Installation

composer require whitecube/nova-flexible-content

Verwendung

Ein Flexible Field ermöglicht die einfache Verwaltung von wiederholbaren und sortierbaren Feldgruppen. Im Gegensatz zu den wenigen bestehenden Lösungen für Laravel Nova gibt es hier keine Einschränkungen, welche Felder du innerhalb dieser Gruppen verwenden darfst. Das bedeutet, dass du alle Laravel-Nova-Feldtypen sowie alle von der Community erstellten Felder verwenden kannst.

Layouts hinzufügen

Ein Layout repräsentiert eine Gruppe von Feldern, die innerhalb des Flexible-Fields wiederholt werden kann. Du kannst so viele Layouts hinzufügen, wie du möchtest. Wenn nur ein Layout definiert ist, verhält sich das Feld wie ein einfacher Repeater, und durch das Hinzufügen weiterer Layouts erhältst du einen Flexible Content. Beide Konzepte ähneln ihren Verwandten im ACF-Plugin von Wordpress.

Layouts können mit der folgenden Methode zu deinen Flexible-Fields hinzugefügt werden:

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

Der Parameter $name wird verwendet, um das gewählte Layout im Wert des Feldes zu speichern. Wähle ihn weise, denn du wirst ihn wahrscheinlich verwenden, um die Layouts in deiner Anwendung zu identifizieren.

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')
            ])
    ];
}

Die Beschriftung des Buttons anpassen

Du kannst den Text des standardmäßigen „Add layout"-Buttons wie folgt ändern:

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

Flexible-Werte in Views verwenden

Wenn du Laravel 6 oder älter verwendest oder keine Casts nutzen möchtest, verwende bitte einen Accessor auf deinem Model mit dem HasFlexible-Trait.

Laravel 7 bringt Custom Casts ins Spiel, und Flexible-Content-Felder sind der perfekte Anwendungsfall dafür. Das Feld speichert seine Werte als einzelnen JSON-String, was bedeutet, dass dieser String geparst werden muss, bevor er in deiner Anwendung verwendet werden kann. Das lässt sich problemlos mit der FlexibleCast-Klasse aus diesem Paket bewerkstelligen:

namespace App;

use Illuminate\Database\Eloquent\Model;
use Whitecube\NovaFlexibleContent\Value\FlexibleCast;

class MyModel extends Model
{
    protected $casts = [
        'flexible-content' => FlexibleCast::class
    ];
}

Standardmäßig sammelt die FlexibleCast-Klasse einfache Layout-Instanzen. Wenn du die Layouts in benutzerdefinierte Layout-Instanzen abbilden möchtest, ist auch das möglich. Erstelle zuerst einen benutzerdefinierten Flexible-Cast, indem du php artisan flexible:cast MyFlexibleCast ausführst. Dadurch wird die Datei im Verzeichnis App\Casts erstellt.

Anschließend kannst du deine benutzerdefinierten Layout-Klassen einfach den passenden Schlüsseln zuordnen:

namespace App\Casts;

class MyFlexibleCast extends FlexibleCast
{
    protected $layouts = [
        'wysiwyg' => \App\Nova\Flexible\Layouts\WysiwygLayout::class,
        'video' => \App\Nova\Flexible\Layouts\VideoLayout::class,
    ]
}

Wenn du mehr Kontrolle benötigst, kannst du stattdessen die Methode getLayoutMappings überschreiben.

Die Layouts Collection

Collections, die vom FlexibleCast-Cast und vom HasFlexible-Trait zurückgegeben werden, erweitern die ursprüngliche Illuminate\Support\Collection. Diese benutzerdefinierten Layout-Collections bieten eine Methode find(string $name), die das erste Layout mit dem angegebenen Layout-$name zurückgibt.

Die Layout-Instanz

Layouts sind eine Art Pseudo-Models. Sie verwenden den HasAttributes-Trait von Laravel, was bedeutet, dass du Accessors & Mutators für die Attribute des Layouts definieren kannst. Darüber hinaus ist es auch möglich, auf die Eigenschaften des Layouts mit den folgenden Methoden zuzugreifen:

name()

Gibt den Namen des Layouts zurück.

title()

Gibt den Titel des Layouts zurück (wie er in Nova angezeigt wird).

key()

Gibt den eindeutigen Schlüssel des Layouts zurück (die eindeutige Kennung des Layouts).

Weiterführendes

Bei der Verwendung des Flexible-Content-Feldes wirst du schnell auf Anwendungsfälle stoßen, für die die oben beschriebenen Grundlagen nicht ausreichen. Deshalb haben wir das Paket erweiterbar entwickelt, sodass du problemlos benutzerdefinierte Verhaltensweisen und/oder Fähigkeiten zum Field und seiner Ausgabe hinzufügen kannst.

Benutzerdefinierte Layout-Klassen

Manchmal können addLayout-Definitionen ziemlich lang werden, oder du möchtest sie mit anderen Flexible-Feldern teilen. Die Lösung dafür ist, dein Layout in eine eigene Klasse auszulagern. Weitere Informationen dazu findest du in der Dokumentation.

Vordefinierte Preset-Klassen

Zusätzlich zu wiederverwendbaren Layout-Klassen kannst du noch einen Schritt weiter gehen und Preset-Klassen für deine Flexible-Felder erstellen. Diese ermöglichen es dir, dein gesamtes Flexible-Feld überall dort wiederzuverwenden, wo du es möchtest. Sie erleichtern es auch, deine Flexible-Felder dynamisch zu gestalten, zum Beispiel wenn du Layouts bedingt hinzufügen möchtest. Und nicht zuletzt haben sie den zusätzlichen Vorteil, dass sie deine Nova-Ressourcenklassen aufräumen, wenn dein Flexible-Feld viele addLayout-Definitionen enthält. Weitere Informationen dazu findest du in der Dokumentation.

Benutzerdefinierte Resolver-Klassen