Customization mit Laravel Nova

Customization mit Laravel Nova

Du fragst dich, ob Laravel Nova die richtige Wahl für dein Adminpanel ist und ob du es an die Vorgaben deines Unternehmens anpassen kannst? In diesem Beitrag zeigen wir dir mit konkreten Beispielen, wie du Laravel Nova aufsetzt und für die Bedürfnisse deines Unternehmens individualisierst.

Was ist Laravel Nova?

Laravel Nova ist ein kostenpflichtiges Composer-Paket der Laravel LLC und Teil des Laravel-Ökosystems. Momentan befindet sich Nova in Version 4.0., die im Frühjahr 2022 released wurde. Nova gibt dir die Struktur für ein Adminpanel, du erhältst mit diesem Package ein schön designtes Interface für alle CRUD Methoden welche auf deinen Eloquent Models basieren, sodass du dich hier nicht mehr um das Frontend kümmern musst. Gebaut wurden diese mit Vue.js, Interia.js und Tailwind.css und garantieren somit eine schnelle und angenehme User Experience. 

Individualisierung

Beim Erstellen von Admin Panels mit Laravel Nova fällt schnell auf, dass hier an vieles gedacht wurde. Allerdings kann es sein, dass du im Laufe des Programmierprozesses an gewisse Punkten kommst, an denen du spezielle Funktionsumfänge nicht mit den gegebenen Möglichkeiten von Laravel Nova abdecken kannst. Für solche Fälle bietet Nova die Möglichkeit, deine App mithilfe von Custom-Vue-Komponenten an die Bedürfnisse deines Unternehmens anzupassen. In diesem Blogbeitrag zeigen wir dir zwei Möglichkeiten deine Nova-App zu individualisieren.

Aufsetzen deiner Laravel-Nova-App

Nova wird via Composer in deine Laravel-App installiert. Also setzt du zuerst ein frisches Laravel Projekt auf.

				
					laravel new nova-example
				
			

Anschließend kannst du das Laravel Nova Composer Repo über folgenden Befehl in deine composer.json Datei ziehen.

				
					composer config repositories.nova '{"type": "composer", "url": "https://nova.laravel.com"}' --file composer.json
				
			

Als Nächstes nimmst du Nova in die Liste der benötigten Pakete in der composer.json Datei auf.

				
					composer require laravel/nova
				
			

Danach updatest du Composer über die Konsole.

				
					composer update –prefere-dist
				
			

Während der Installation wirst du nach deinem Nova-Lizenz-Schlüssel gefragt. Fügst du diesen ein, muss Composer nun nur noch über die CLI installiert und migriert werden. Alternativ kannst du deine Nova Credentials auch in eine auth.json-Datei in deinem Projekt speichern.  Denk dran, dass dein Passwort in diesem Fall der von dir gekaufte Lizenz-Schlüssel ist.

				
					{
    "http-basic": {
        "nova.laravel.com": {
            "username": "my@email.com",
            "password": "my-password"
        }
    }
}
				
			
				
					php artisan nova:install
php artisan migrate
				
			

In deinem App-Ordner sollte sich nun ein Nova-Ordner befinden und unter Providers der Nova Service Provider. Du kannst nun deinen ersten User über die Konsole erstellen. Das machst du mit folgendem Befehl.

				
					php artisan nova:user
				
			

Und das war‘s schon! Jetzt kannst du deine App mit dem Pfad /nova/login aufrufen und dich einloggen.

Nova Actions

Schauen wir uns zuerst die Actions an. Actions erlauben es dir, benutzerdefinierte Aktionen an einem oder mehreren Eloquent Models auszuführen.

In diesem Beispiel zeigen wir dir, wie du eine Action schreibst, die den Status der User ändern kann. Dafür fügst du zuerst der User Migration eine status Column hinzu und lässt dir das Column dann in der Nova Ressource anzeigen. Die Action erstellst du mit folgendem Befehl.

				
					php artisan nova:action UserStatus
				
			

Danach befindet sich unter Nova nun ein Action-Ordner mit einer UserStatus-Klasse. Diese Klasse besitzt zwei Methoden. Zuerst definierst du in der fields-Methode ein Select-Input-Feld und gibst die auszuwählenden Werte an. Nachfolgend definierst du die anzuführende Aktion in der handle-Methode. Hier updaten wir das Model und geben eine Erfolgsmeldung zurück.

				
					class UserStatus extends Action
{
    use InteractsWithQueue, Queueable;
    
    /**
    * Perform the action on the given models.
    *
    * @param  \Laravel\Nova\Fields\ActionFields  $fields
    * @param  \Illuminate\Support\Collection  $models
    * @return mixed
    */
    public function handle(ActionFields $fields, Collection $models)
    {
        foreach ($models as $model) {
            $model->status = $fields->status;
            $model->save();
        }
            
        return Action::message('User status updated');
    }
    
    /**
    * Get the fields available on the action.
    *
    * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
    * @return array
    */
    public function fields(NovaRequest $request)
    {
        return [
            Select::make('Status', 'status')->options([
                'accepted' => 'Accept user',
                'blocked' => 'Block user'
            ])
        ];
    }
}
				
			

Um diese Action nun in einer Ressource anzeigen zu lassen, in diesem Fall die User Ressource, registrierst du diese in der Actions-Methode der Ressource.

				
					public function actions(NovaRequest $request)
{
    return [
        new UserStatus()
    ];
}
				
			

Hinweis: Das Hauptfeature von Laravel Nova ist die Möglichkeit, seine Datenbank-Einträge mit Eloquent zu verwalten. Das geschieht über Ressourcen. Beim Erstellen der App wird automatisch eine User Ressource erstellt. Beim Programmieren deiner App kannst du dann eine Ressource für jedes deiner Eloquent Models erstellen.

Im Table sollte dir nun links im User Table eine Checkbox angezeigt werden. Über diese Checkbox kannst du Einträge markieren. Sind Einträge markiert, kannst du über das Actions-Dropdown eine Action auswählen und so für alle Einträge gleichzeitig ausführen. Das Dropdown erscheint, nachdem Einträge ausgewählt wurden neben dem Button zum Erstellen von neuen Einträgen.

Custom Field

Schauen wir uns als Nächstes das Erstellen eines Custom Fields an. In diesem Beispiel zeigen wir dir ein Textfeld, das dem User das Zeichenlimit dynamisch anzeigt. Wir haben dafür in der User Migration ein Text Column mit dem Namen Info hinzugefügt. Hierfür muss zuerst das Field über die CLI erstellt werden. Der Name für ein Custom field erfolgt im Format eines Composer-Packets.

				
					php artisan nova:field lean-ocean/string-limit

				
			

Nach der Generierung solltest du einen Nova-Components-Ordner sehen. Darin befindet sich nun dein StringLimit-Ordner. Dieser besteht aus alle nötigen Dateien, die für dein Feld gebraucht werden. Die Wichtigsten sind hierbei die drei Vue-Komponenten die für die verschiedenen Ansichten verantwortlich sind, sowie die PHP-Klasse, die den Namen deines Feld hat, also in diesem Fall StringLimit. Du wirst auch sehen, das jeder Feld-Ordner seine eigene composer.json-Datei hat.

Hinweis: Per Default sind die Vue-Devtools in Laravel Nova ausgestellt. Um diese zu aktivieren, kannst du folgendes bash-Skript ausführen.

				
					#!/bin/sh
cd ./vendor/laravel/nova
mv webpack.mix.js.dist webpack.mix.js
npm i
npm run dev
rm -rf node_modules
cd -
php artisan nova:publish
				
			

Zunächst schreibst du in deine StringLimit-Klasse eine Methode, die die maximale Anzahl an Zeichen (characters) entgegennimmt.

				
					public function max($characterLimit)
{
    return $this->withMeta(['characterLimit' => $characterLimit]);
}

				
			

Jetzt kann unsere Komponente mit der max-Methode in unsere Ressource eingefügt werden.

				
					StringLimit::make('Info')->max(250),
				
			

Anschließend schreiben wir in die Vue-FormField-Komponente die Logik für das Anzeigen der verbleibenden Zeichen. Das Zeichenlimit, das wir über die max-Methode definiert haben, können wir in der Komponente als prop entgegen nehmen.

				
					<template>
    <DefaultField :field="field" :errors="errors" :show-help-text="showHelpText">
        <template #field>
            <textarea
                :id="field.attribute"
                type="text"
                class="w-full form-control form-input form-input-bordered"
                :class="errorClasses"
                :placeholder="field.name"
                @keyup="countdown"
                v-model="inputValue"
            ></textarea>
            <p class="mt-2">{{remainingCharacters}} characters remaining</p>
        </template>
    </DefaultField>
</template>
                      
<script>
import { FormField, HandlesValidationErrors } from 'laravel-nova'
import { ref } from 'vue'

export default {
      mixins: [FormField, HandlesValidationErrors],
      props: ['resourceName', 'resourceId', 'field'],
  
  setup(props){
      let inputValue = ref('')
      let characterLimit = ref(props.field.characterLimit)
      let remainingCharacters = ref(props.field.characterLimit)
  
    function countdown(){
        remainingCharacters.value = characterLimit.value - inputValue.value.length
    }
    
    return {
        characterLimit, remainingCharacters, countdown, inputValue
    }
    },
    methods: {
        /**
        * Fill the given FormData object with the field's internal value.
        */
        fill(formData) {
        formData.append(this.field.attribute, this.inputValue || '')
        },
    },
}
</script>

				
			

Et voilà! Hiernach kannst du das Feld normal nutzen und es in beliebig vielen Ressourcen einsetzen.

Fazit

Laravel Nova bietet dir eine coole Möglichkeit, deine App an deine eigenen Bedürfnisse anzupassen. Die benutzerdefinierten Komponenten können einfach über die CLI erstellt werden und geben dir einen guten Rahmen, um direkt mit der Programmierung deiner Komponenten loszulegen.

Das hört nicht beim Erstellen von Actions und Fields auf: Mit den Custom Tools, kannst du auch eine komplett benutzerdefinierte Seite erstellen oder ganz eigene Cards und Filter bauen. Durch die Generierung dieser Tools im Composer-Format und der enthaltenen composer.json-Datei, steht dir nichts im Weg, um deine eigenen Kreationen mit der Welt zu teilen.

Wobei können wir dich sonst noch unterstützen?

Neues Projekt

Du hast eine Idee für eine digitale Lösung und suchst einen Partner, der dich begleitet?

Verstärkung für dein Projekt

Du hast bereits eine Anwendung und suchst Verstärkung in der Entwicklung?

Artikel teilen

Mehr aus unserem Blog

5 Jahre Lean Ocean – Das Interview

Vor 5 Jahren ist Lean Ocean in einem WG-Zimmer gestartet. Und heute hat das Unternehmen nichts von seinem Startup Flair verloren – nur die Büros sind schicker geworden.
Im Video-Interview werfen unsere Geschäftsführer Oliver und Stephan zusammen einen Blick auf die Entwicklung von Lean Ocean, gemeinsame Meilensteine und was die Arbeit bei Lean Ocean prägt.

Ein Tag als Softwareentwickler bei Lean Ocean

Was macht eigentlich ein Softwareentwickler bei Lean Ocean und wie sieht ein üblicher Arbeitstag aus? Das erzählt dir Norbert im folgenden Blogartikel! Wir haben Norbert, einen unserer Developer, einen Tag lang begleitet und über die Schulter geschaut. Vom ersten Kaffee zum wohlverdienten Feierabend– hier erhältst du spannende Einblicke in einen abwechslungsreichen Arbeitstag.

Von der Idee zum Feature

Wie sieht es eigentlich bei Lean Ocean hinter dem Code aus? Wie läuft so ein Projekt ab und wie wird aus einer Idee dann ein richtiges Feature? In diesem Artikel beantworten dir Oliver und Tom die wichtigsten Fragen zu unserem brandneuen Format #behindthecode. Als erstes geht Oliver als CTO von Lean Ocean auf den Entwicklungsprozess von Features ein und dann gibt uns unser Projektmanager Tom noch ein paar Antworten.

Picture of Oliver Holz

Oliver Holz

holz@lean-ocean.com