Joomla Administration für Kunden Teil 2

Im zweiten Teil dieser Serie geht es um das Erstellen einer optimierten Admin-Oberfläche für Kunden

Wir haben in Joomla 4 die Möglichkeit, die Bearbeitungsmöglichkeiten unserer Kunden vollständig zu kontrollieren, und zwar weit über das hinaus, was mit Joomla 3 möglich war.

Dies ist eine Übersetzung des Artikels «Joomla 4 for Clients, Part 2» von Crystal Dionysopoulou aus dem Joomla! Community Magazine 02/22 (Link zum Original)

In diesem Beitrag werden wir die Einrichtung von Kunden-Editor-Profilen, die Erstellung eines benutzerdefinierten Admin-Menüs und die Erstellung von benutzerdefinierten Dashboard-Seiten von Grund auf behandeln.

In diesem Beitrag wird davon ausgegangen, dass bereits die entsprechenden Benutzergruppen und Zugriffsebenen für den Anwendungsfall eingerichtet ist. Wenn du da nicht sicher bist oder dies noch nicht erledigt wurde, wird die Lektüre des Teil 1 dieser Serie dringend empfohlen. Dort erfärst du, wie eine benutzerdefinierte Benutzergruppe und Zugriffsebene für den Kunden einrichtet wird, damit du genau steuern kannst, was diese sehen können.

Erstellen eines vereinfachten Editorprofils

TInyMCE, der Standard-Joomla-Editor, ist in Joomla 4 noch besser geworden. Der Standard-Werkzeugsatz dafür, der standardmäßig Super-Usern zugewiesen ist, hat eine Menge Symbole und kann für unsere Kunden überwältigend sein. (Um ehrlich zu sein, manchmal überwältigt es auch mich!)

Standard-Werkzeugliste des TinyMCE für den Superuser

Viele Leute wissen nicht, dass TinyMCE verschiedene Werkzeugsätze für verschiedene Benutzergruppen unterstützt, was das Editieren für unsere Kunden viel entspannter macht!

Klicke Sie auf dem Home-Dashboard auf das Schnellsymbol "Plugins".

Du kannst auch zu System > Verwalten > Plugins gehen, aber das Schnellsymbol ist schneller.

Gib in der Suchleiste "TinyMCE" (oder einfach "tiny") ein und wähle "Editor - TinyMCE".

Suche die Überschrift "TinyMCE-Sets".

Du siehst dann so etwas wie das hier:

Hier kannst du Icons zu jedem Set hinzufügen oder entfernen. Ich entferne gerne die Symbole, die ich nicht benutze, aus Set 0, aber sehen wir uns erst einmal Set 1 an.

Das ist schon besser! Vielleicht entferne ich noch einige Optionen, aber im Grossen und Ganzen sieht dies für meine Kunden nützlicher aus, also fügen wir sie zu Set 1 hinzu.
Gib "Client" (bzw. den Namen der Benutzergruppe) in das Feld neben "Dieses Set zuordnen zu" ein oder wähle es aus.

Nimm alle gewünschten Änderungen an den Werkzeugen oder der Anordnung der Symbole vor, speichere und schliesse das Plugin.

[Bemerkung des Übersetzers: Wenn der JCE verwendung findet, muss sinngemäss ein profil der neu angelegten Benutzergruppe zugeordnet werden!]

Benutzerdefinierte Administratormenüs und Menüpunkte

Das Standard-Administrationsmenü ist in Ordnung, wenn es sich bei Ihrer Website nur um einen Blog handelt, aber sobald du verschiedene Kategorien für unterschiedliche Inhalte hast, kann es mühsam sein, einem Kunden zu erklären, wie er die richtigen Artikel bearbeiten kann.

Hier kann die Erstellung eines benutzerdefinierten Verwaltungsmenüs sehr hilfreich sein! Du kannst Links zu den Komponenten und Ansichten erstellen, die deine Kunden am meisten benötigen, und den Rest ausblenden.

Schritt 1: Klicke im linken Menü auf "Menüs", und wähle "Verwalten".

Schritt 2: Wähle das Dropdown-Menü "Site" und wähle "Administrator".

Schritt 3: Wähle "Neu", und gib die Details ein.

Wenn du eine Voreinstellung wählst, werden die Menüpunkte automatisch auf der Grundlage dieser Voreinstellung erstellt. Ich fange gerne ganz von vorne an, also lasse ich es bei "Keine". Sobald du fertig bist, speichern und schliessen.

Schritt 4: Füge die Menüpunkte hinzu, die du in dein Kundenmenü aufnehmen möchtest.

Wenn du im Menü auf "Menüs" klickst, wirst du feststellen, dass es einen neuen Abschnitt mit dem Titel "Administrator" gibt, unter dem sich das gerade erstellte Menü befindet. Klicke auf das Pluszeichen daneben, um einen neuen Menüpunkt hinzuzufügen.

Erstelle einen neuen Menüpunkt, wie du es bei einem Front-End-Menü tun würdest. Als Beispiel werden wir einen Menüpunkt erstellen, der zum Home Dashboard führt.

Wähle unter Menüelementtyp die Option Home Dashboard. Gib einen Titel für Ihr Element ein - in diesem Fall verwende ich Dashboard (Control Panel).

Wenn du möchtest, kannst du auf der zweiten Registerkarte ("Link Type") ein Feld mit der Bezeichnung "Link Icon Class" anzeigen. Du kannst hier ein Font Awesome-Symbol hinzufügen - Joomla 4 hat die kostenlosen Font Awesome 5-Symbole in das Backend geladen. Hier findest du alle Icons.

In diesem Fall möchte ich ein Home-Symbol haben, da dies das Home-Dashboard ist. Ich werde also fas fa-home als Icon-Klasse verwenden. (Beachte, dass du die Füllsymbolklasse einschließen musst, damit Joomla weiss, dass es nach einem Font Awesome-Symbol sucht.

Sobald du fertig bist, klickest du auf Speichern & Schliessen.

Füge so viele Menüpunkte hinzu, wie du benötigst, und gehe dann zum nächsten Schritt über.

Schritt 5: Erstelle ein neues Menümodul.

Sobald du bereit bist, klickst du im Menü auf "Inhalt" und dann auf "Administratoren-Module".

Bevor wir ein neues Menümodul hinzufügen, müssen wir das Standardmodul vor unseren Kunden verbergen.

Klicke auf "Filter-Optionen" und dann auf das Dropdown-Menü "Position auswählen" und wähle "menu".

Du wirst feststellen, dass der Zugriff derzeit "Spezial" ist. Aus Teil 1 wissen wir, dass das bedeutet, dass sowohl Superuser als auch Kunden das Menü sehen können, aber wir wollen ja ein spezielles Kundenmenü erstellen, also müssen wir das ändern.

Klicke auf "Admin Menu", um es zu bearbeiten. Suche das Dropdown-Menü "Zugriffsebene" (eventuell musst du nach unten scrollen) und wähle dann "Super Users". Dann speichern und schließen.

Jetzt können wir ein neues Menümodul erstellen. Klicke dazu in der Symbolleiste auf "Neu".

 Wähle auf dem Bildschirm "Modultyp auswählen" die Option "Administratormenü".

Benenne das Menümodul.

Wähle in der Dropdown-Liste "Anzuzeigendes Menü" das soeben erstellte Menü aus. Vergewissere dich, dass die Option "Menü prüfen" auf "Nein" gesetzt ist, da deine Kunden sonst eine Meldung erhalten, dass sie zum Standardmenü zurückkehren sollen.

Scrolle ein Stück nach unten, um das Dropdown-Menü "Zugriff" zu sehen, und wähle die Zugriffsebene "Client", die wir im ersten Teil erstellt haben.
Da wir die Administratorenmodule bereits nach der Menüposition gefiltert haben, ist diese bereits vorausgefüllt, aber überprüfe das trotzdem noch einmal.
Der Bildschirm sollte in etwa so aussehen:

Wenn du fertig bist, klickst du auf Speichern & Schliessen.

Das war's! Jetzt ist es an der Zeit, sich in einem privaten Fenster mit deinem Testbenutzer anzumelden.

Der Testkunde sieht das jetzt:

Hurra! jetzt kannst du beliebig Links, Überschriften (mit verschachtelten Menüpunkten) und vieles mehr hinzufügen, um das für dich ein perfekte, übersichtliche Menü für deine Kunden zu erstellen.

Erstellen (und verwenden) neuer Dashboard-Seiten

Dashboard-Seiten sind völlig neu in Joomla 4, und sie machen Gebrauch von einer neuen Komponente namens com_cpanel. Sie sind das, was du siehst, wenn du auf die kleinen "Fenster"-Symbole im Standard-Administrationsmenü klickst:

Es gibt 7 zentrale Dashboard-Seiten (soweit ich weiss):

Startseite Dashboard
Inhalt
Menüs
Komponenten
Benutzer
System
Hilfe

Erweiterungen von Drittanbietern können sich auch in com_cpanel integrieren und ihre eigenen Dashboardseiten anzeigen.

Was nicht unbedingt offensichtlich ist, ist die Tatsache, dass du, wenn du dein eigenes Admin-Menü erstellst, auch deine eigenen Dashboard-Seiten hinzufügen kannst, auch ausserhalb der standardmässigen 7, die Joomla mitbringt... und das erfordert überhaupt kein Coden.

Das ist sehr nützlich, weil die Dashboards von Joomla nach Funktion oder Komponente geordnet sind; das macht für uns als Websiten-Ersteller Sinn, weil wir Joomla verstehen. Unsere Kunden haben jedoch ein anderes mentales Modell ihrer Website, und es hängt wahrscheinlich davon ab, wie der Inhalt auf der Website kategorisiert ist (und nicht von der Art des Inhalts).
Für viele meiner Kunden brauchen Nachrichtenartikel und Seiten zwar beides "Beiträge", aber die Kunden denken anders darüber, so dass es für sie nicht unbedingt intuitiv ist, auf diese Beiträge auf dieselbe Weise zuzugreifen.

Um dieses hypothetische Szenario zu beheben, lass uns ein Dashboard für den News-Bereich unserer Test-Site erstellen (wir arbeiten jetzt wieder als Super-User).

Klicke auf Menüs, und öffne das soeben erstellte Client-Menü.

Wähle "Neu", um einen neuen Menüpunkt zu erstellen.

Fülle den Menütitel aus. (Ich habe "News" verwendet.)

Wähle den Typ des Menüpunkts: Scrolle nach unten zu Systemlinks und wähle Menüüberschrift.

Dadurch wird ein Dropdown-Menü für den Abschnitt erstellt, neben dem das Symbol "Fenster" angezeigt wird.

Gehe zur zweiten Registerkarte. Wenn du möchtest fülle eine Icon-Klasse aus.

Scrolle auf der zweiten Registerkarte ganz nach unten und suche das Feld für Dashboard.

Aha! Hier beginnt nun die Magie. Der Hilfetext lautet hier: Wenn eine Kennung angegeben wird, wird ein Dashboard für diesen Menüpunkt erstellt.

Wähle diese Kennung sorgfältig aus - sie sollte nicht mit der einer Komponente identisch sein. Sie darf auch keine Leer- oder Sonderzeichen (ausser Unterstrichen oder Bindestrichen) enthalten. Verzichte auch auf Umlaute. Um auf Nummer sicher zu gehen, stelle ich dem Bezeichner ein "client-" voran. In diesem Fall verwenden wir also "client-news".

Speichere und schliesse den Menüpunkt.
Füge mindestens noch einen verschachtelten Menüpunkt hinzu. Dies ist notwendig, da sonst die Menü-Überschrift nicht angezeigt wird. In meinem Beispiel werde ich "Alle Artikel auflisten" in der Kategorie "News" verwenden. Vergewissere dich, dass du die soeben erstellte Menü-Überschrift als "übergeordnetes Element" auswählst, etwa so:

Speichere und schliesse den Menüpunkt.

Wenn wir uns nun mit unserem Test-Client einloggen, sehen wir folgendes:

Super! Wir haben es geschafft!

Wenn du auf das Dashboard-Symbol klickest, siehst du das folgende Bild:

Das Kunden-Dashboard sieht jetzt so aus

Jetzt können wir also Module hinzufügen und unsere eigenen Dashboards erstellen, richtig?

Nun...nicht ganz. Wenn du die Kopfzeile genau ansiehst, siehst du dort immer noch das Home-Symbol und "Dashboard".

Eigentlich keine grosse Sache, aber wenn wir schon dabei sind, sollten wir es richtig machen.

Klicke in deinem Superuser-Konto auf System und dann auf "Sprachen Overrides".

Wähle in der Dropdown-Liste "Sprache & Bereich wählen" die Option "[GEWÜNSCHTE SPRACHE] - Administrator".

In meinem Fall erstelle ich ein Dashboard auf Deutsch, also wähle ich "German (Germany) - Administrator". Denke daran, dass du dies für jede Sprache tun musst, in der du benutzerdefinierte Dashboards erstellen möchtest.

Klicke auf "Neu", um eine neuen Override zu erstellen.

Das Symbol und der Titel werden separat bereitgestellt.

Um ein Icon zu definieren, lautet Ihre Sprachkonstante:

COM_[BEZEICHNER]_DASHBOARD_ICON

Ersetze [IDENTIFIER] durch den Bezeichner, den wir oben erstellt haben. In diesem Fall verwende ich die Sprachkonstante COM_CLIENT-NEWS_DASHBOARD_ICON.

Gibe in "Text" die Font Awesome-Klassen des zu verwendenden Symbols ein. Ich möchte das gleiche Zeitungssymbol verwenden, also verwende ich far fa-newspaper. Speichern und schliessen.

Um den Titel zu definieren, ist die Sprachkonstante:

COM_CPANEL_DASHBOARD_[IDENTIFIER]_TITLE

Wie oben, ersetze [IDENTIFIER] mit dem Bezeichner, den wir erstellt haben. Meine Sprachkonstante lautet also COM_CPANEL_DASHBOARD_CLIENT-NEWS_TITLE.

Gib in "Text" den Titel ein, den du verwenden möchtest. Ich verwende "News Beiträge". Speichern und schliessen.
Sobald du beides hinzugefügt hast, solltest du so etwas sehen:

Gehen wir zu unserem Testkundenkonto und sehen wir uns an, was jetzt angezeigt wird:

Juhu! Wir haben es geschafft!

Fügen wir nun einige Module zu unserem neuen Dashboard hinzu.

Du solltest dies nicht vom Testkundenkonto aus tun, da wir Module erstellen wollen, die unsere Kunden nicht versehentlich bearbeiten können. Wechseln wir also zurück zu unserem Superuser-Konto.

Klicke im Menü auf "Inhalt" und dann auf das Plus-Symbol neben "Administratormodule", um ein neues Modul hinzuzufügen.

Wähle einen Modultyp aus. In diesem Beispiel werde ich ein benutzerdefiniertes HTML-Modul erstellen.

Konfiguriere das Modul so, wie du es wünschst. Achte darauf, dass es die Position cpanel-[Bezeichner] hat.

Du musst die Position manuell eingeben und dann auf "Enter" drücken, um sie hinzuzufügen. In diesem Beispiel lautet die Position cpanel-client-news.

Speichere das Modul, aber schliesse es noch nicht.

Gehe nach dem Speichern auf die Registerkarte "Berechtigungen" und klicke auf "client".

Vergewissere dich, dass der Kunde das Modul nicht bearbeiten oder die Veröffentlichung aufheben kann. (Wenn er die Berechtigung hat, Front-End-Module zu bearbeiten, hat er auch die Berechtigung, Back-End-Module zu bearbeiten).

Jetzt Speichern und schliessen.

Kehren wir zu unserem Testkunden-Login zurück und sehen wir uns an, was jetzt angezeigt wird...

Schön!!!

Du kannst die obigen Schritte bei Bedarf wiederholen, um weitere Module zu diesem Dashboard hinzuzufügen, weitere Dashboards hinzuzufügen und die Verwaltung so anzupassen, wie es deine Kunden benötigen.