Farbiges Statusfeld anlegen

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 wir 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 enthalten. Dazu gehören die Features “Edit Only” Feld und “Datenansicht mit Edit Link”.