Benutzer und Fahrzeuge

Einleitung

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

Das Beispiel besteht aus 2 Formularen:

  • Formular 1: Benutzer
    Mit diesem Formular werden zuerst Benutzer-Daten erhoben:
    (Text-Felder “First Name”, “Last Name” und “Company”).
  • Formular 2: Fahrzeuge
    Dieses Formular wird anschließend genutzt, um
    • einen bestehenden Benutzer auszuw√§hlen
      (SQL-Listbox-Feld “Select User”),
    • die zugeh√∂rigen Benutzer-Daten werden automatisch in die korrespondierenden schreibgesch√ľtzten Formular-Felder kopiert
      (SQL-Listbox-Felder “First Name”, “Last Name” und “Company”),
    • zus√§tzlich weitere Fahrzeug-Daten zu erheben
      (Text-Felder “Car Name” und “Car Model”),
    • alle 6 Felder in der Daten-Tabelle des Formulars zu speichern.

Ansicht Formular 1: Benutzer

Das leere Formular

Mit diesem Formular werden zuerst reine Benutzer-Daten erhoben.

Ansicht Formular 2: Fahrzeuge

Das leere Formular

Mit diesem Formular werden bestehende Benutzer-Daten ausgewählt und weitere Fahrzeug-Daten erhoben.

Auswahl eines Benutzers

Im Formular wird mit der SQL-Listbox-Feld “Select User” ein bestehender Benutzer aus dem Daten-Bestand von Formular 1 “Benutzer” ausgew√§hlt.
Die ausgew√§hlten Benutzer-Daten werden dadurch automatisch in die korrespondierenden schreibgesch√ľtzten Formular-Felder von Formular 2 “Fahrzeuge” eingetragen.

Angaben zum Fahrzeug

Im Formular kann der Benutzer weitere Angaben zu seinem Fahrzeug machen.

Konfiguration Formular 1: Benutzer

Layout

Die Konfigurations-Einstellungen (falls abweichend von der Default-Einstellung):

  • Reiter “Erweitert”, Gruppe “Layout”, “UI-Framework” = “Boostrap 5”
  • Reiter “Erweitert”, Gruppe “Layout”, “Sublayout” = “Horizontal”

Die Felder

Die Feld-IDs von Formular 1 “Benutzer” sind wichtig.
Sie werden in den SQL-Statements der SQL-Listbox-Felder von Formular 2 “Fahrzeuge” ben√∂tigt.

Konfiguration Formular 2: Fahrzeuge

Layout

Die Konfigurations-Einstellungen (falls abweichend von der Default-Einstellung):

  • Reiter “Erweitert”, “UI-Framework” = “Boostrap 5”
  • Reiter “Erweitert”, “Sublayout” = “Horizontal”

Die Felder

Benutzerdefiniertes CSS

SQL-Felder gibt es f√ľr die 3 Select-Typen “Checkbox Group”, “Listbox” oder “Radio Button”.
Damit die SQL-Listbox-Felder “First Name”, “Last Name” und “Company” aus Formular 2 “Fahrzeuge” schreibgesch√ľtzt und √§hnlich einem Text-Eingabe-Feld aussehen, ist etwas zus√§tzliches benutzerdefiniertes CSS notwendig.
Die direkte Eingabe sowie das effektive Laden des zus√§tzlichen benutzerdefinierten CSS erfolgt am besten mit den “Frontend Webassets” in der Formular-Konfiguration. \

Hinweis: Das hierzu notwendige benutzerdefinierte CSS kann unter Umständen von dem gewählten UI-Framework sowie dem gewählten Template abhängen.

Die Frontend Webassets

Der CSS-Code f√ľr die Formular-Ansicht

Der folgende CSS-Code:

  • verhindert alle Maus-Aktionen,
  • macht die Listbox schreibgesch√ľtzt und
  • l√§sst die Listbox schlicht aussehen wie einfache Text-Felder.
select.readonly {
    pointer-events: none;
    background-position: unset;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

Feld-Konfiguration Formular 2: Fahrzeuge

Die Felder

Feld “Select User”

Die Konfigurations-Einstellungen (falls abweichend von der Default-Einstellung):

  • Reiter “Allgemein”, “Typ” = “Listbox Sql”
  • Reiter “Allgemein”, “SQL-Select-Statement” = “select CONCAT(F395, ' ‘, F396) as label, id as value from #__visforms_39;”
select CONCAT(F395, ' ', F396) as label, id as value from #__visforms_39;

Hinweis: Der Teil F395 bezieht sich auf das Feld "First Name" mit der Feld-ID 396.

Hinweis: Der Teil _39 bezieht sich auf die Daten-Tabelle des Formulars "Benutzer" mit der Formular-ID 39.

Hinweis: In der Listbox "Select User" wird eine Zusammensetzung aus den Feldern "First Name" und "Last Name" als Options-Text zur Auswahl angezeigt (as label). Der in der Daten-Tabelle f√ľr das Feld "Select User" gespeicherte Wert ist die ID des ausgew√§hlten Datensatzes (as value). Die ID des ausgew√§hlten Datensatzes spielt dar√ľber hinaus keine weitere Rolle.

Hinweis: Der Tabellen-Name einer Tabelle in einer Joomla Datenbank besitzt immer einen sogenannten Tabellen-Namen-Prefix, der allen Joomla Tabellen-Namen innerhalb einer Joomla-Instanz gleicherma√üen vorangestellt ist. Sie m√ľssen den Tabellen-Namen-Prefix weder kennen noch explizit schreiben. Verwenden Sie anstelle dessen den Joomla eigenen Platzhalter f√ľr den Tabellen-Namen-Prefix: #__.

Feld “First Name”

Die Konfigurations-Einstellungen (falls abweichend von der Default-Einstellung):

  • Reiter “Allgemein”, “Typ” = “Listbox Sql”
  • Reiter “Allgemein”, “Reload erlauben” = “Ja”
  • Reiter “Allgemein”, “Einzige Option vorausw√§hlen” = “Ja”
  • Reiter “Allgemein”, “Bei √Ąnderungen von nachladen” = “Select User”
  • Reiter “Allgemein”, “SQL-Select-Statement” = “select F395 as label, F395 as value from #__visforms_39 where id = ${input:select-user};”
  • Reiter “Erweitert”, Gruppe “Layout”, “CSS Klasse des Feldes” = “readonly”
select F395 as label, F395 as value from #__visforms_39 where id = ${input:select-user};

Hinweis: F√ľr dieses Feld ist auf dem Reiter "Erweitert" die CSS-Klasse readonly festzulegen, damit das zus√§tzliche benutzerdefinierte CSS aus den "Frontend Webassets" mit dem Selektor select.readonly f√ľr dieses Feld angewendet wird.

Hinweis: Der Platzhalter ${input:select-user} bezieht sich auf den aktuellen Wert des Feldes "Select User". Das Feld hat den Titel "Select User" und den Alias "select-user".

Hinweis: Der Teil ${input:} des Platzhalters bezieht sich auf das Input-Objekt im PHP-Backend. In diesem Objekt stehen alle aktuellen Feld-Werte zur Verf√ľgung.

Feld “Last Name”

Die Konfiguration dieses Feldes stimmt im Wesentlichen mit der von Feld “First Name” √ľberein.
Der einzige Unterschied besteht in der abweichenden Feld-ID innerhalb des SQL-Statements.

Die Konfigurations-Einstellungen (falls abweichend von der Default-Einstellung):

  • Reiter “Allgemein”, “Typ” = “Listbox Sql”
  • Reiter “Allgemein”, “Reload erlauben” = “Ja”
  • Reiter “Allgemein”, “Einzige Option vorausw√§hlen” = “Ja”
  • Reiter “Allgemein”, “Bei √Ąnderungen von nachladen” = “Select User”
  • Reiter “Allgemein”, “SQL-Select-Statement” = “select F396 as label, F396 as value from #__visforms_39 where id = ${input:select-user};”
  • Reiter “Erweitert”, Gruppe “Layout”, “CSS Klasse des Feldes” = “readonly”
select F396 as label, F396 as value from #__visforms_39 where id = ${input:select-user};

Feld “Company”

Die Konfiguration dieses Feldes stimmt im Wesentlichen mit der von Feld “First Name” √ľberein.
Der einzige Unterschied besteht in der abweichenden Feld-ID innerhalb des SQL-Statements.

Die Konfigurations-Einstellungen (falls abweichend von der Default-Einstellung):

  • Reiter “Allgemein”, “Typ” = “Listbox Sql”
  • Reiter “Allgemein”, “Reload erlauben” = “Ja”
  • Reiter “Allgemein”, “Einzige Option vorausw√§hlen” = “Ja”
  • Reiter “Allgemein”, “Bei √Ąnderungen von nachladen” = “Select User”
  • Reiter “Allgemein”, “SQL-Select-Statement” = “select F397 as label, F397 as value from #__visforms_39 where id = ${input:select-user};”
  • Reiter “Erweitert”, Gruppe “Layout”, “CSS Klasse des Feldes” = “readonly”
select F397 as label, F397 as value from #__visforms_39 where id = ${input:select-user};