Visforms 5
Beispiel Parameter-Ersetzung

Beispiel Parameter-Ersetzung

Beispiel mit Parameter-Ersetzung im Plugin-String-Parameter “fieldselect”

Hinweis: Diese Features sind Teil der Visforms Subscription und in der freien Visforms Version nicht enthalten.

Für ein besseres Verständnis empfehlen wir die Dokumentation vollständig durchzulesen und mit dem Abschnitt Einleitung zu beginnen.
Zusammenhänge, die in früheren Abschnitten der Dokumentation erklärt wurden, werden hier nicht wiederholt.

Durch die Nutzung der Platzhalter-Ersetzung im Plugin-String-Parameter 'fieldselect' wird es möglich, etwa in einem zusätzlichen Modul in der Daten-Detail-Ansicht nur die Daten anzuzeigen, die auf Informationen des aktuellen Detail-Datensatzes gefiltert sind.

Plugin im Plugin-Manager aktivieren

Hinweis: Bitte stellen Sie sicher, dass Sie Ihre Visforms Subscription installiert haben.

Sie müssen Sie das Plugin im Plugin-Manager aktivieren, bevor Sie seine Funktionen verwenden können.

Gehen Sie hierzu in der Administration Ihrer Joomla Installation auf den Menüeintrag “System” und dann auf den Eintrag “Plugins” auf der Kachel “Verwalten”.
Suchen Sie den Eintrag des Plugins mit dem Namen Content Plugin - Visforms Daten.

Hinweis: Verwenden Sie hierzu etwa den Suchfilter über der Plugin-Liste.

Das Plugin ist aktiviert, wenn Sie in der Statusspalte einen grünen Haken sehen.
Es ist deaktiviert, wenn an dieser Stelle ein grauer Kreis mit weißem X steht.
Klicken Sie in diesem Fall ein mal auf den grauen Kreis, um das Plugin zu aktivieren.

Hinweis: Wenn das Plugin nicht aktiviert ist, dann wird die Zeichenkette, mit der Sie die Daten in den Beitrag einfügen, nicht aus dem Beitrag gelöscht.

Beispiel mit Standard Tabellen-Layout

Funktionsweise

Das Beispiel basiert auf 2 Formularen Benutzer und Fahrzeuge und einem Menü-Eintrag zur Anzeige von Listen-Ansicht und Detail-Ansicht für das Formular Benutzer.
Dem Menü-Eintrag zur Daten-Ansicht für das Formular Benutzer werden 3 zusätzliche Module vom Typ Eigenes Modul zugeordnet.
Die 3 zusätzlichen Module vom Typ Eigenes Modul enthalten jeweils einen leicht unterschiedlichen Plugin-String für das Content Plugin - Visforms Daten zur Anzeige der Daten des Formulars Fahrzeuge.

  • Formular Benutzer mit der Formular-ID 39:
    • Es werden verschiedene Benutzer-Informationen abgefragt.
  • Formular Fahrzeuge mit der Formular-ID 40:
    • Es werden verschiedene Fahrzeug-Informationen abgefragt.
    • Das Pflicht-Formular-Feld Benutzer auswählen mit der Feld-ID 407 ist vom Feld-Typ Listbox SQL:
      • Es ermittelt eine Liste aller Benutzer aus der Daten-Tabelle des Formulars Benutzer.
      • Der Options-Text ist Vor-Namen und Nach-Name des Benutzers.
      • Der Options-Wert ist die ID des Datensatzes des Benutzers in der Daten-Tabelle des Formulars Benutzer.
      • Feld-Konfiguration » Reiter: Grundeinstellungen

        Gruppe: Dynamische-Einstellungen » Parameter: SQL-Select-Statement =

        select CONCAT(F395, ' ', F396) as label, id as value from #__visforms_39;
  • Daten-Ansichten
    • Listen-Ansicht und Detail-Ansicht werden über einen Menü-Eintrag vom Typ Formulardaten angezeigt.
      • Dem Menü-Eintrag sind 3 zusätzliche Module vom Typ Eigenes Modul zugeordnet:
        • Modul Registrierte Fahrzeuge des Benutzers
        • Modul Registrierte Oldtimer des Benutzers
        • Modul Registrierte Oldtimer des Benutzers (sortiert nach Baujahr)
    • Listen-Ansicht:
      • Es wird über einen Menü-Eintrag eine Daten-Liste mit ausgewählten Feldern im Frontend angezeigt.
      • Die Listen-Ansicht unterdrückt die Anzeige der 3 zusätzlichen Module durch:
        • ein kleines Stück benutzerdefiniertes CSS,
        • einen in der Modul-Konfiguration gesetzten CSS-Klassen-Namen im Parameter CSS-Klasse Modul.
    • Detail-Ansicht:
      • Die Detail-Ansicht wird auf der linken Seite der Daten-Liste durch einen Klick auf das konfigurierbare Detail-Ansicht-Icon geöffnet.
      • Die 3 zusätzliche Module vom Typ Eigenes Modul enthalten jeweils einen eigenen Plugin-String für das aktivierte Content Plugin - Visforms Daten.
Die Detail-Ansicht wird auf der linken Seite der Daten-Liste durch einen Klick auf das konfigurierbare Detail-Ansicht-Icon geöffnet

Basis-Konfiguration

Listen-Ansicht und Detail-Ansicht werden über einen Menü-Eintrag mit folgender Konfiguration angezeigt:

  • Menü-Konfiguration » Reiter: Formular-Daten Darstellung

    Gruppe: Formular-Daten Darstellung » Parameter: Datensätze pro Seite = 5
    Gruppe: Formular-Daten Darstellung » Parameter: Spaltenköpfe zeigen = “anzeigen”
    Gruppe: Formular-Daten Darstellung » Parameter: Tabellenrahmen zeigen = “anzeigen”
    Gruppe: Formular-Daten Darstellung » Parameter: Suchleiste zeigen = “Nein”

Die Formular-Felder Vorname, Nachname und Stadt werden mit folgender Konfiguration angezeigt:

  • Feld-Konfiguration » Reiter: Datennutzung im Frontend

    Gruppe: Frontend-Datenanzeige-Einstellungen » Parameter: Datenanzeige im Frontend = “Liste und Details”

Das Formular-Feld Firma wird mit folgender Konfiguration angezeigt:

  • Feld-Konfiguration » Reiter: Datennutzung im Frontend

    Gruppe: Frontend-Datenanzeige-Einstellungen » Parameter: Datenanzeige im Frontend = “Nur Liste”

Alle anderen Formular-Felder werden mit folgender Konfiguration angezeigt:

  • Feld-Konfiguration » Reiter: Datennutzung im Frontend

    Gruppe: Frontend-Datenanzeige-Einstellungen » Parameter: Datenanzeige im Frontend = “Nicht anzeigen”

Für den Menü-Eintrag zur Anzeige von Listen-Ansicht und Detail-Ansicht werden drei Module vom Typ Eigenes Modul mit folgender Konfiguration angezeigt:

  • Modul-Konfiguration » Reiter Optionen » Parameter Inhalte vorbereiten = “Ja”
  • Modul-Konfiguration » Reiter Erweitert » Parameter CSS-Klasse Modul = user-and-cars-modul
  • Modul Registrierte Fahrzeuge des Benutzers: Modul-Konfiguration » Reiter Modul 
    Liste angemeldeter Fahrzeuge des Benutzers:
{vfdataview}{
"formid":"40",
"fieldlist":"403,404,674,675,676",
"show_page_heading":"false",
"showlabel":"true",
"fieldselect":{"407":"${id}"},
"replace_parameter":"true"
}{/vfdataview}
  • Modul Registrierte Oldtimer des Benutzers: Modul-Konfiguration » Reiter Modul 
    Liste angemeldeter Oldtimer des Benutzers:
{vfdataview}{
"formid":"40",
"fieldlist":"403,404,674,675",
"show_page_heading":"false",
"showlabel":"true",
"fieldselect":{"407":"${id}","676":"1"},
"replace_parameter":"true"
}{/vfdataview}
  • Modul Registrierte Oldtimer des Benutzers (sortiert nach Baujahr): Modul-Konfiguration » Reiter Modul 
    Liste angemeldeter Oldtimer des Benutzers:
{vfdataview}{
"formid":"40",
"fieldlist":"403,404,674,675",
"show_page_heading":"false",
"showlabel":"true",
"sortorder":"674",
"fieldselect":{"407":"${id}","676":"1"},
"replace_parameter":"true"
}{/vfdataview}

Hinweis: Es handelt sich um die Daten-Detail-Ansicht des Formulars Benutzer mit der Formular-ID 39 und die darin zusätzlich enthaltene Anzeige von Daten des Formulars Fahrzeuge mit der Formular-ID 40.
Daher das "formid":"40".

Hinweis: Die Verbindung der beiden Daten-Tabellen erfolgt über
das Formular-Feld Benutzer auswählen mit der Feld-ID 407 vom Feld-Typ Listbox SQL des Formulars Fahrzeuge und
das Overhead-Feld id mit dem Tabellen-Feld-Namen id des Formulars Benutzer.
Daher das "407":"${id}".

Parameter-Ersetzung

Die Parameter-Ersetzung im Plugin-String führt in der Detail-Ansicht eines Benutzers innerhalb der drei zusätzlichen Module zur Anzeige der Fahrzeuge, die diesem Benutzer zugeordnet wurden.

  • Die Zuordnung erfolgt durch das Pflicht-Formular-Feld Benutzer auswählen des Formulars Fahrzeuge mit der Feld-ID 407 vom Feld-Typ Listbox SQL.
  • Die Filterung innerhalb der drei zusätzlichen Modulen der Detail-Ansicht auf die Anzeige der Fahrzeuge, die dem ausgewählten Benutzer zugeordnet wurden, erfolgt:
    • Mit dem Platzhalter ${id} für den Wert der Spalte id aus der Datentabelle des Formulars Benutzer für den ausgewählten Benutzer.
    • Mit dem Plugin-String Parameter fieldselect und der Filterung auf Datensätze der Datentabelle des Formulars Fahrzeuge, die im Formular-Feld Benutzer auswählen mit der Feld-ID 407 den gleichen Wert haben. 
      "fieldselect":{"407":"${id}"}

Listen-Ansicht

Die Listen-Ansicht unterdrückt die Anzeige der 3 zusätzlichen Module.
Die Listen-Ansicht wird ohne Module durch folgende Konfiguration angezeigt:

  • Formular-Konfiguration » Reiter: Frontend Webassets

    Gruppe: Grundeinstellungen » Unter-Reiter Daten-Liste. Parameter: CSS =

    /* do not show moduls on data list view (only on data detail view) */
.layout-data .user-and-cars-modul {
    display: none;
}
Daten-Listen-Ansicht

Detail-Ansicht

Die Detail-Ansicht hat folgende 4 Bereiche von oben nach unten:

  • Bereich 1:
    Darstellung der Formular-Felder Vorname, Nachname und Stadt des ausgewählten Detail-Datensatzes des Formulars Benutzer.
  • Bereich 2:
    Darstellung der gefilterten und konfigurierten Daten-Liste des Formulars Fahrzeug
    über das Modul Registrierte Fahrzeuge des Benutzers mithilfe des Plugin-Strings des Content Plugin - Visforms Daten.
  • Bereich 3:
    Darstellung der gefilterten und konfigurierten Daten-Liste des Formulars Fahrzeug
    über das Modul Registrierte Oldtimer des Benutzers mithilfe des Plugin-Strings des Content Plugin - Visforms Daten.
  • Bereich 4:
    Darstellung der gefilterten und konfigurierten Daten-Liste des Formulars Fahrzeug
    über das Modul Registrierte Oldtimer des Benutzers (sortiert nach Baujahr) mithilfe des Plugin-Strings des Content Plugin - Visforms Daten.
Daten-Detail-Ansicht

Unterdrückung der Module

Die Unterdrückung der 3 zusätzlichen Module in der Listen-Ansicht wird allein mit folgendem sehr kurzen CSS erreicht (siehe oben):

/* do not show moduls on data list view (only on data detail view) */
.layout-data .user-and-cars-modul {
    display: none;
}

Obiges CSS unterdrückt in der Listen-Ansicht die Module aufgrund der folgenden HTML-Struktur und der darin verteilten CSS-Klassen.
HTML der Listen-Ansicht:

<body class="site com_visforms view-visformsdata layout-data itemid-264">
...
<div class="main-bottom card user-and-cars-modul">
... Modul-HTML ...
</div>

Obiges CSS zeigt in der Detail-Ansicht die Module aufgrund der folgenden HTML-Struktur und der darin verteilten CSS-Klassen.
HTML der Detail-Ansicht:

<body class="site com_visforms view-visformsdata layout-detail itemid-264">
...
<div class="main-bottom card user-and-cars-modul">
... Modul-HTML ...
</div>

Erläuterungen zu den CSS-Klassen und zu dem verwendeten CSS-Selector .layout-data .user-and-cars-modul {…}:

  • layout-data:
    Ist spezifisch für das Cassiopeia-Template für die Listen-Ansicht und muss an andere Frontend-Templates eventuell angepasst werden.
    Spezifisch für das Cassiopeia-Template ist erwartbar, da es um die Anzeige von Modulen in Positionen des Frontend-Templates geht.
  • layout-detail:
    Ist spezifisch für das Cassiopeia-Template für die Detail-Ansicht und muss an andere Frontend-Templates eventuell angepasst werden.
    Spezifisch für das Cassiopeia-Template ist erwartbar, da es um die Anzeige von Modulen in Positionen des Frontend-Templates geht.
  • user-and-cars-modul
    Ist ein in der Konfiguration individuell vergebener CSS-Klassen-Name (siehe oben):
    • Modul-Konfiguration » Reiter Erweitert » Parameter CSS-Klasse Modul = user-and-cars-modul
  • com_visforms und view-visformsdata:
    Diese CSS-Klassen werden durch das Cassiopeia-Template den URL-Parametern der Aufruf-URL entnommen und als dezidierte CSS-Klassen automatisch in das class-Attribute des -Elements geschrieben.
    Diese CSS-Klassen sind spezifisch für das Cassiopeia-Template müssen an andere Frontend-Templates eventuell angepasst werden.

Beispiel mit eigenem Tabellen-Layout

Hinweis: Dieses um ein individuelles Tabellen-Layout erweiterte Beispiel hat alle Einstellungen wie das obige Beispiel mit dem Standard-Tabellen-Layout.
Es kommen lediglich einige Einstellungen hinzu, die im Folgenden aufgeführt sind.
Einstellungen des obigen Beispiels mit dem Standard-Tabellen-Layout werden im Folgenden nicht wiederholt.

Listen-Ansicht und Detail-Ansicht werden über einen Menü-Eintrag mit folgender zusätzlicher Konfiguration angezeigt.
Die Konfiguration stellt sicher, dass das benutzerdefinierte CSS mit seinem CSS-Pfad table-layout-round-striped auf die Daten-Tabelle dieses Menü-Eintrags angewendet wird:

  • Menü-Konfiguration » Reiter: Formular-Daten Darstellung

    Gruppe: Formular-Daten Darstellung » Parameter: Datentabellenklasse = table-layout-round-striped

Listen-Ansicht und Detail-Ansicht werden mit folgender zusätzlicher Konfiguration angezeigt.
Die Konfiguration stellt sicher, dass das benutzerdefinierte CSS zur Formatierung der Tabellen in Listen-Ansicht und Detail-Ansicht geladen wird und zur Verfügung steht.

  • Formular-Konfiguration » Reiter: Frontend Webassets

    Unter-Reiter Daten-Liste » Parameter: CSS =

    /* do not show moduls on data list view (only on data detail view) */
.layout-data .user-and-cars-modul {
    display: none;
}

/*  ***** table-layout-round-striped ***** */
:root {
    --main-bg-color: #2157c1;
    --header-color: #ececec;
}
  
.table-layout-round-striped {
    background-color: var(--main-bg-color);
    border-collapse: collapse;
    border-radius: .8rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.table-layout-round-striped, .table-layout-round-striped th, .table-layout-round-striped td {
    border: 0;
}
.table-layout-round-striped thead tr {
    text-align: left;
}
.table-layout-round-striped th,
.table-layout-round-striped th a {
    color: var(--header-color);
    font-variant: small-caps;
}
.table-layout-round-striped th,
.table-layout-round-striped td {
    padding: 6px 4px;
}
.table-layout-round-striped tbody tr {
    border-bottom: 1px solid #dddddd;
}
.table-layout-round-striped tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}
.table-layout-round-striped tbody tr:nth-of-type(odd) {
    background-color: #ffffff;
}
.table-layout-round-striped tbody tr:last-of-type {
    border-bottom: 6px solid var(--main-bg-color);
}

Listen-Ansicht

Die Listen-Ansicht unterdrückt die Anzeige der 3 zusätzlichen Module.

Daten-Listen-Ansicht

Detail-Ansicht

Für den Menü-Eintrag zur Anzeige von Listen-Ansicht und Detail-Ansicht werden drei Module vom Typ Eigenes Modul mit folgender zusätzlicher Konfiguration angezeigt.
Die folgende Konfiguration des Plugin-Strings stellt sicher, dass das benutzerdefinierte CSS der Formular-Konfiguration » Reiter “Frontend Webassets” mit seinem CSS-Pfad table-layout-round-striped auf die jeweilige Daten-Tabelle innerhalb der 3 zusätzlichen Module angewendet wird:

  • Modul Registrierte Fahrzeuge des Benutzers: Modul-Konfiguration » Reiter Modul 
    Liste angemeldeter Fahrzeuge des Benutzers:
{vfdataview}{
...,
...,
"viewclass":"table-layout-round-striped"
}{/vfdataview}
  • Modul Registrierte Oldtimer des Benutzers: Modul-Konfiguration » Reiter Modul 
    Liste angemeldeter Oldtimer des Benutzers:
{vfdataview}{
...,
...,
"viewclass":"table-layout-round-striped"
}{/vfdataview}
  • Modul Registrierte Oldtimer des Benutzers (sortiert nach Baujahr): Modul-Konfiguration » Reiter Modul 
    Liste angemeldeter Oldtimer des Benutzers:
{vfdataview}{
...,
...,
"viewclass":"table-layout-round-striped"
}{/vfdataview}
Daten-Detail-Ansicht
Was steht auf dieser Seite