Ein individuelles Statusfeld anlegen

Da Visforms deutlich mehr als eine reine Formularkomponente ist wird es häufig dazu verwendet individuelle Webapplikationen für Joomla! zu erstellen. Diese Applikationen bilden Prozesse ab, die im Rahmen der jeweiligen Webseite benötigt werden. Die Erfassung von Daten und deren sukzessive Bearbeitung mit unterschiedlichen Status (z.B. Neu, In Bearbeitung, Abgeschlossen) ist hierbei ein typischer Usecase und es ist häufig erwünscht, dass der aktuelle Prozess-Status im Frontend farblich markiert dargestellt wird.

Auch wenn Visforms keinen Feldtyp "Status" kennt, ist es mit etwas Javascript leicht möglich, z.B. ein Feld vom Typ "Radio Button" für diesen Zweck zu nutzen.

Ein typischer Usecase

• Ein Erstbenutzer füllt das Formular (z.B. einen Urlaubsantrag) an. Seine Eingaben werden in der Datenbank gespeichert.
• Das Formular verfügt über ein Edit Only Feld vom Typ Radio Button, in dem ein Administrator den jeweiligen Prozessstatus einstellen kann.
• Ein Administrator nimmt den Antrag entgegen, überprüft die übermittelten Informationen, veröffentlicht den Datensatz und setzt den initialen Status den Antrags (z.B. auf "Neu" oder auf "In Bearbeitung"). Hierzu wird das Feature "Daten im Frontend Editieren" verwendet.
• Abhängig davon, wie der Antrag weiter bearbeitet wird, vervollständigt der Administrator fehlende Informationen und setzt den jeweils korrekten Status des Antrags.
• In der Listenansicht der Datenansicht im Frontend sollen unterschiedliche Status in unterschiedlichen Farben dargestellt werden, damit diese für jedermann leichter optisch einzuordnen sind.

Den Status in der Datenansicht im Frontend farblich markieren

Für die Umsetzung wird an erster Stelle im Formular ein zusätzliche Feld vom Typ Radio Button eingefügt. Alle benötigten Status werden als Optionen angelegt. Weiterhin kann optional die Feld-Option "Edit Only" auf dem Reiter "Erweitert" auf "ja" gesetzt werden, wenn Sie sicherstellen wollen, dass der Status nur durch Administratoren gesetzt werden kann.

Bitte notieren Sie sich die Id dieses Feldes, die wir für die Implementierung der farblichen Markierung benötigen.

Ü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.

Um die Werte des Status-Feld farblich zu markieren verwenden wir individuelles Javascript welches in unterschiedlicher Weise in die Webseite eingebunden werden kann, je nachdem welche Möglichkeiten beispielsweise Ihr Template bietet um individuelle Javascript einzufügen (Viele Templates bieten z.B. die Möglichkeit eigenes Javascript inline oder in einer speziellen Datei einfach einzubinden.) Der folgende Beispielcode geht davon aus, dass das entsprechende Status-Feld die Id 89 und die Optionen "Neu", "In Bearbeitung", "Abgeschlossen" und "Abgelehnt" 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 erfass' :
                  jQuery(element).css('color', 'blue');
                  break;
              default:
                  //"Neu" does not have a special color
                  break;
          }
      });
  }
}

jQuery(document).ready(function () {setStatusColors()});

Für jeden zusätzlichen Status, den Sie benötigen fügen Sie einen Block

 case 'StatusName' :
    jQuery(element).css('color', 'StatusFarbe');
     break;

ein. Haben Sie weniger Status, müssen Sie entsprechend Blöcke aus dem Code entfernen. Haben Sie größere Erfahrung in der Progammierung mit Javascript und CSS können Sie den Code auch entsprechend anpassen, so dass statt der farbig markierten Statuswerte z.B. unterschiedliche "Ampeln" als Hintergrundbild angezeigt werden.

Einige der verwendeten Feature (Edit Only Feld und Datenansicht mit Edit Link) sind nur in der Visforms Subscription enthalten.

Zur Beitragsliste