Styling eigener Backendansichten

Mit der TYPO3 Version 7 haben sich die CSS Klassen im Backend gegenüber der 6.2 LTS nocheinmal kräftig geändert. Wer also eigene Listenansichten etc im Stil der normalen TYPO3 Backendansichten entwicklet hat, wird bei einem Umstieg auf 7.x enttäuscht sein.

Aber auch bei einer Neuprogrammierung unter TYPO3 7 ist es immer wieder eine Herausforderung die Standardklassen über Firebug & Co zu indentifizieren.


TER Extension: Examples

Ein Lichtblick bietet die Extension "Examples" (TER Extension Key: examples, Git: hier).

Die Extension zeigt viele Beispiele welche Klassen im Backend benötigt werden - Listenansichten, Tabs etc ...

Für jemanden der umfangreichere Backendmodule schreiben will eine erste Anlaufstelle. Nicht alles ist dort perfekt, aber zumindestens eine gute Ausgangslage für die ersten Hürden.

Hinweis: diese Extension schreibt sich in das Backenmodul "Dokumentation", was aber bei mir in der 7.x Versionen gar nicht mehr standardmäßig angezeigt wird. Nach dem Backendlogin sieht man aber alle Module auf der Übersichtsseite, dort taucht dann auch ganz am Ende die Erweiterung auf ..., die Tännchen please ;)

Eine Frage bleibt auch dort leider offen - wie erzeugt man Links aus eigenen Backendlistenansichten zu den standard TCA Formularen. Dies ist für mich das entscheidenste Feature bei eigenen Backendmodulen - Listenansichten mit komfortablen Filtermöglichkeiten gepaart mit der Funktionalität der TCA Formulare.


TCA Formulare aus eigenen Backendansichten aufrufen

In eigene Backendansichten kann man TCA Formulare (new oder edit) über folgendes Konstrukt aufrufen:

Hinweis: der Aufruf über alt_doc.php? funktioniert ab TYPO3 7.5 nicht mehr. Es muss der Pfad über die neue routes Funktion aufgebaut werden. Einen dirty hack habe ich in einer Installation integriert, bei Interesse bitte kurze Nachricht per mail. Bis ich die geänderte Funktion hier veröffentlichen kann, muss ich das noch überarbeiten ...
Folgender Code geht also nur bis TYPO3 7.5:

<a title="Datensatz bearbeiten" onclick="window.location.href = 'alt_doc.php?returnUrl=' + T3_THIS_LOCATION + '&edit[tx_myextension_domain_model_mytable][{model.uid}]=edit';
    return false;" href="#">
        {mymodel.title}
</a>

Ähnlich geht das auch mit einem neuem Datensatz hinzufügen, es muss dann nur am Ende lauten:

&edit[tx_myextension_domain_model_mymodel][{pageUid}]=new'

Innherhalb des Templates sind solche Konstrukte aber nicht wirklich übersichtlich. Ein ViewHelper muss her der uns diese Aufgabe abnimmt.

In der Example Extension ist Ansatzweise ein VH zu diesem Zweck enthalten, auf www.npostnik.de wurde der ViewHelper ergänzt, allerdings ist beides im Zusammenspiel fehlerhaft. Deshalb hier das Ganze nochmal zusammenhängend und getestet unter 7.x:

Der View Helper:

<?php

namespace Vendor\MyExtension\ViewHelpers;

/**
 * This file is part of the TYPO3 CMS project.
 *
 * It is free software; you can redistribute it and/or modify it under
 * the terms of the GNU General Public License, either version 2
 * of the License, or any later version.
 *
 * For the full copyright and license information, please read the
 * LICENSE.txt file that was distributed with this source code.
 *
 * The TYPO3 project - inspiring people to share!
 */

/**
 * Based on the tx_examples VH from Francois Suter (Cobweb) <typo3@cobweb.ch>
 * 
 * Inspired by a Blog Post from http://www.npostnik.de
 * 
 */
class BackendEditLinkViewHelper extends \TYPO3\CMS\Fluid\Core\ViewHelper\AbstractTagBasedViewHelper {

    /**
     * @var string
     */
     protected $tagName = 'a';
	
    /**
     * Initialize arguments
     *
     * @return void
     * @api
     */
     public function initializeArguments() {
         $this->registerUniversalTagAttributes();
         $this->registerTagAttribute('name', 'string', 'Specifies the name of an anchor');
         $this->registerTagAttribute('target', 'string', 'Specifies where to open the linked document');
     }
    
    /**
     * Build Links to TCA Forms
     *
     * @param string $parameters Query string parameters
     * @param string $returnUrl URL to return to
     * @return string The <a> tag
     * @see \TYPO3\CMS\Backend\Utility::editOnClick()
     */
    public function render($parameters, $returnUrl = '') {
        $uri = 'alt_doc.php?' . $parameters;
        if (!empty($returnUrl)) {
            $uri .= '&returnUrl=' . rawurlencode($returnUrl);
        } else {
            $returnUrl = 'mod.php?M=' . $_GET['M'] . '&moduleToken=' . $_GET['moduleToken'];
            $uri .= '&returnUrl=' . rawurlencode($returnUrl);
        }

        $this->tag->addAttribute('href', $uri);
        $this->tag->setContent($this->renderChildren());
        $this->tag->forceClosingTag(TRUE);
        return $this->tag->render();
    }

}

Innerhalb des Templates wird dann der ViewHelper wie folgt angesprochen:

{namespace vh = Vendor\MyExtension\ViewHelpers}

<!-- creates a link to a new entry -->
<vh:BackendEditLink parameters="edit[tx_myextension_domain_model_table][{pageUID}]=new">
	neuen Datensatz einfügen
</vh:BackendEditLink>

<!--shows TCA Form to edit an entry -->
<!--normally inside a table -->
<vh:BackendEditLink parameters="edit[tx_myextension_domain_model_table][{model.uid}]=edit">
	Datensatz bearbeiten
</vh:BackendEditLink>

Weitere Artikel zu diesem Thema:

Empfehlenswerte Lektüre:

Don't make me think!

Web Usability auf unterhaltsame Art: Das Buch gibt einen tieferen Einblick in das Surfverhalten von Nutzern und liefert praktische Beispiele und jede Menge Tipps für die Usability Verbesserung von Webseiten. Keine trockene Fachliteratur sondern unterhaltsam geschrieben.

Kommentare

keine Kommentare vorhanden


Kommentar verfassen

Die Email Adresse wird nicht veröffentlicht.