Contao Dashboard für Kunden erweitern

Jeder Entwickler kennt das Problem. Wie bringe ich meinem Endkunden das Backend effektiv bei? Die Meisten geben Kurse, in denen sie das Backend von Contao erklären. Doch egal wie gut das Backend erklärt wurde, vieles wird schnell wieder vergessen und in der eigenen Dokumentation will man nicht jede Kleinigkeit aufführen müssen. Besonders, da der Inhalt steig angepasst werden müsste.

Lösung: Das Contao Dashboard erweitern

In den Grundeinstellungen werden im Backend Hinweise, Tastenkürzel und die letzten Bearbeitungen anzeigt. Für gewöhnlich ersetze ich die Tastenkürzel mit meinem eigenen Inhalt, da diese zwar nützlich sind, aber in der Praxis kaum genutzt werden.

Be_welcome.html5 anpassen

Um das Template anzupassen wird keine Erweiterung benötigt. Es muss lediglich die be_welcome.html5 im Templates Ordner kopiert werden. Achtung: Das Template darf in keinem Theme Unterordner liegen. Es muss in der Ordnerstruktur ganz oben liegen.

Ab Zeile 10 ersetze ich nun die tl_shortcuts mit meinem eigenen Content.

<div id="tl_shortcuts">
	<h2><?= $this->shortcuts ?></h2>
	<p><?= $this->shortcutsLink ?></p>
</div>

Je nach Projekt kann der Bereich unterschiedliche Links erhalten. Ich suche mir hierfür in der offiziellen Contao Dokumentation die für den Kunden wichtigen Links raus und liste sie im Dashboard auf.

Mein Quellcode für diese Website sieht ist etwas einfacher gehalten, da fast ausschließlich erfahrene Contao Nutzer damit arbeiten und eine Erklärung nicht benötigt wird.

<ul class="contao-dashboard">
	<li>
		<a href="https://www.scaion.de" title="www.scaion.de" target="_blank">
			<span>Entwickler <br>Kontakt</span>
		</a>
	</li>
	<li>
		<a href="https://docs.contao.org/" title="docs.contao.org" target="_blank">
			<span>Contao <br>Dokumentation</span>
		</a>
	</li>
	<li>
		<a href="https://docs.contao.org/manual/de/formulargenerator/formulare/" title="docs.contao.org" target="_blank">
			<span>Formulare <br>verwalten</span>
		</a>
	</li>
	<li>
		<a href="/dokumentation" title="Backend Dokumentation" target="_blank">
			<span>Backend <br>Informationen</span>
		</a>
	</li>
</ul>

Das Contao Dashboard stylen

Nun, ich wäre kein Webdesigner, wenn ich mich mit einer simplen Linkliste zufriedengeben würde. Dafür kopiere ich die be_main.html5 und füge in Zeile 25 folgende Zeile hinzu:

$objCombiner->add('Pfad/zur/style.css');

Nun können über die angegebene Stylesheet-Datei Listen gestyled, oder Background-Images hinzugefügt werden. Das Endergebnis könnte dann wie folgt aussehen.

Contao Dashboard erweitert
ul.contao-dashboard {
	list-style: none;
	padding: 2rem 0;
	@media (min-width: 50em) {
		display: grid;
		grid-auto-flow: column;
		grid-gap: 28px;
		justify-self: right;
		align-items: center;
	}
	li {
		position: relative;
		a {
			display: block;
			text-align: center;
			text-decoration: none;
			color: #0f1c26;
			padding-top: 64px;
			&::before {
				content: "";
				width: 64px;
				height: 64px;
				background-size: contain;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
		&:nth-child(1) > a::before {
			background: url(/files/scaion/theme/img/backend/scaion-backend-icons1.svg) 0% no-repeat;
		}
		&:nth-child(2) > a::before {
			background: url(/files/scaion/theme/img/backend/scaion-backend-icons2.svg) 0% no-repeat;
		}
		&:nth-child(3) > a::before {
			background: url(/files/scaion/theme/img/backend/scaion-backend-icons3.svg) 0% no-repeat;
		}
		&:nth-child(4) > a::before {
			background: url(/files/scaion/theme/img/backend/scaion-backend-icons4.svg) 0% no-repeat;
		}
	}
}

Online Dokumentation

Was ich auch gerne mache, ist eine Art Dokumentation für individuelle Lösungen. Auch wenn wir alle mit demselben CMS arbeiten, so unterscheidet sich unsere Vorgehensweise oft grundlegend, da es nicht nur einen Weg gibt, ein Ziel zu erreichen.

Beispielsweise habe ich hier die Template-Dateien angepasst. Eine andere Person hätte eventuell eine Erweiterung erstellt. Da Kunden auch mal ihren Ansprechpartner wechseln, oder ich erst nach Jahren zu einem Projekt zurückkehre, an das ich mich fast gar nicht mehr erinnern kann, benötige ich eine Gedankenstütze.

Daher erstelle ich grundsätzlich eine nicht indexierte Seite, auf der ich alle individuellen Anpassungen dokumentiere. Diese ist grundsätzlich im Dashboard unübersehbar verlinkt, sodass jeder Entwickler, welcher sich nachträglich mit dem Projekt beschäftigt diese finden kann.

Zurück