Ein individuelles farbiges Statusfeld einrichten
Visforms bietet deutlich mehr als eine reine Formularkomponente. Es wird daher häufig dazu verwendet, individuelle Web-Applikationen für Joomla zu erstellen. Diese Web-Applikationen setzen maßgeschneiderte Prozesse um, die im Rahmen der jeweiligen Webseite benötigt werden.
Die Erfassung von Daten und deren sukzessive Bearbeitung mit unterschiedlichem Status ist ein typischer Use-Case. Benötigte Status-Zustände könnten etwa solche wie “Neu”, “Vollständig”, “Geprüft”, “In Bearbeitung” und “Abgeschlossen” sein. Es erleichtert den Überblick und ist häufig erwünscht, wenn der aktuelle Prozess-Status im Frontend leicht erkennbar ist und farblich markiert dargestellt wird.
Selbst wenn Visforms keinen speziellen Feld-Typ “Status” kennt, ist es trotzdem mit etwas JavaScript leicht möglich. Sie können etwa ein Feld vom Typ “Radio Button” für diesen Zweck nutzen.
Ein typischer Use-Case
- Ein Erstbenutzer füllt das Formular aus, etwa einen Urlaubsantrag.
Seine Eingaben werden in der Datenbank gespeichert. - Das Formular verfügt über ein Edit Only Feld vom Typ Radio Button.
Mit ihm kann ein Administrator später den aktuellen Prozess-Status einstellen. - Ein Administrator nimmt den Antrag entgegen, überprüft die übermittelten Informationen, veröffentlicht den Datensatz und setzt den initialen Status des Antrags, etwa auf “Neu” oder auf “In Bearbeitung”.
Hierzu wird das Feature Daten im Frontend Editieren verwendet. - Nun wird der Antrag weiter bearbeitet.
Die Administratoren vervollständigen eventuell fehlende Informationen und setzen den jeweils passenden Status der Bearbeitung. - In der Listenansicht der Datenansicht im Frontend sollen unterschiedliche Status in unterschiedlichen Farben dargestellt werden, damit diese leichter optisch erkennbar sind.
Den Status in der Datenansicht im Frontend farblich markieren
Feld vom Typ “Radio Button”
Für die Umsetzung wird an erster Stelle im Formular ein zusätzliches Feld vom Typ Radio Button eingefügt. Alle benötigten Status-Werte werden als Optionen angelegt. Optional kann die Feld-Option Edit Only auf dem Reiter “Erweitert” auf “ja” gesetzt werden. Damit wird sichergestellt, dass der Status nur durch die Administratoren geändert werden kann.
Achtung: Bitte notieren Sie sich die ID dieses Feldes, die wir für die Implementierung der farblichen Markierung später noch benötigen.
Mit ACL die Sichtbarkeit steuern
Übermittelte Datensätze werden im Frontend durch einen Menüeintrag vom Typ Visforms » Datenansicht mit Edit Link zur Anzeige gebracht.
Verwenden Sie Joomla ACL um zu steuern
- wer die Einträge sehen darf,
- wer Datensätze veröffentlichen darf und
- wer welche Daten bearbeiten darf.
Farblich markieren durch JavaScript
Wir verwenden individuelles JavaScript, um die Werte des Status-Feld farblich zu markieren. JavaScript kann auf unterschiedliche Weisen in die Webseite eingebunden werden. Die hängt auch stark davon ab, welche Möglichkeiten Ihr Template bietet, um zusätzliches JavaScript einzufügen. Viele Templates bieten hierzu etwa die Möglichkeit, eigenes JavaScript entweder “Inline” oder in einer speziellen Datei einfach einzubinden.
Beispielcode
Der folgende Beispielcode geht davon aus, dass das entsprechende Status-Feld die ID 89 sowie die Optionen “Abgelehnt”, “Abgeschlossen” und “Daten erfasst” hat. Die entsprechenden Werte des Beispielcodes müssen an Ihre konkreten Bedingungen angepasst werden.
function setStatusColors () {
//adapt 89 in data-f89 to your field id
var elements = jQuery(".vfdvvalue.data-f89");
if (elements) {
jQuery.each(elements, function (index, element) {
var status = jQuery(element).text();
switch (status) {
case 'Abgelehnt' :
jQuery(element).css('color', 'red');
break;
case 'Abgeschlossen' :
jQuery(element).css('color', 'green');
break;
case 'Daten erfasst' :
jQuery(element).css('color', 'blue');
break;
default:
//"Neu" does not have a special color
break;
}
});
}
}
jQuery(document).ready(function () {setStatusColors()});
Fügen Sie einen weiteren Block für jeden zusätzlich benötigten Status ein:
case 'StatusName' :
jQuery(element).css('color', 'StatusFarbe');
break;
Haben Sie weniger Status-Wrte, müssen Sie entsprechend Blöcke aus dem Code entfernen. Haben Sie größere Erfahrung in der Programmierung mit JavaScript und CSS, dann können Sie den Code auch beliebig erweitern. Denkbar wäre etwa, dass an Stelle der farbig markierten Statuswerte unterschiedliche “Ampeln” als Hintergrundbild angezeigt werden.
Einige der verwendeten Features, sind nur in der Visforms Subscription Features enthalten. Dazu gehören die Features “Edit Only” Feld und “Datenansicht mit Edit Link”.