Visforms 5
Abhängige versteckte Felder

Abhängige versteckte Felder

Einleitung

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

Es wird gezeigt bedingte Formular-Felder komplett zu verstecken. Das wird notwendig, da für versteckte Feldern keine Steuer-Felder der bedingten Anzeige konfiguriert werden können.

Das Ziel ist Folgendes:

  • Bei einer bestimmten Auswahl in Listbox-Feld option-1 soll ein bedingtes Listbox-Feld option-2 angezeigt werden.
  • In diesem bedingten Listbox-Feld option-2 wird der Benutzer eine Auswahl treffen.
  • Passend zu der Auswahl in Listbox-Feld option-2 wird ein im Formular nicht angezeigter Text in die Formular-Daten übernommen.
  • Der im Formular nicht angezeigte Text wird in E-Mails und angehängten PDF-Dokumenten sichtbar versendet.
  • Der in E-Mails und angehängten PDF-Dokumenten sichtbar versendete Text ist dadurch abhängig von der Benutzer-Auswahl.

Formular

Bedingte Text-Felder unsichtbar

Erst bei Auswahl von Option label2 in Listbox-Feld option-1 soll das bedingte Feld option-2 angezeigt werden. Erst bei einer bestimmten Auswahl im Listbox-Feld 'option-1', soll ein bedingtes Listbox-Feld 'option-2' angezeigt werden.

Bei Auswahl von Option label2 in Listbox-Feld option-1 wird das bedingte Feld option-2 angezeigt.
Im bedingten Listbox-Feld option-2 wird der Benutzer eine Auswahl treffen. Im bedingten Listbox-Feld 'option-2' wird der Benutzer eine Auswahl treffen.

Passend zu der Auswahl in Listbox-Feld option-2 werden im Formular nicht angezeigte Texte in die Formular-Daten übernommen. Passend zu der Auswahl in Listbox-Feld 'option-2' wird ein im Formular nicht angezeigter Text in die Formular-Daten übernommen.

Bedingte Text-Felder sichtbar

Die im Formular nicht angezeigten Text-Felder text-1, text-2, text-3 und hidden-1 sind hier rein zur Veranschaulichung zu sehen.
Das Versteckt-Feld hidden-1 ist weiterhin unsichtbar.

Im Falle von Text-Feld text-3 muss die dauerhafte Unterdrückung der Anzeige im Formular durch eine eigene CSS-Klasse erfolgen.
Im Falle von Versteckt-Feld hidden-1 erfolgt die dauerhafte Unterdrückung der Anzeige im Formular automatisch.

Hier ist der im Formular nicht angezeigte Text zur Veranschaulichung zu sehen.

Daten-Ansicht

Die übertragen Daten passen zur Anforderung. Je nach Benutzer-Auswahl stehen nur die entsprechend passenden Texte im Formular-Datensatz.

Im Falle von Text-Feldern text-1 und text-2 ist jeweils der eigene Start-Text gesetzt, wenn die Auswahl die richtige ist.

  • Ansonsten ist der Feld-Wert leer.
  • Hier sind also 2 Text-Felder notwendig.

Im Falle von Text-Feld text-3 und Versteckt-Feld hidden-1 ist jeweils der zur Auswahl passende Text gesetzt.

  • Bei keiner passenden Auswahl bleibt das Feld-Wert leer.
  • Hier ist also 1 Feld ausreichend.
    Damit erleichtert sich der Aufbau des E-Mail-Templates und des PDF-Templates.
    Auch in der automatisch erzeugten Daten-Liste in der E-Mail wird es einfacher lesbar.
Die übertragen Daten passen zur Anforderung.

Die CSS-Eigenschaft display: none hat keinen Einfluss auf die Übertragung der Feld-Werte beim Absenden des Formulars.
Das HTML-Attribut disabled verhindert die Übermittlung von Feld-Werten beim Absenden des Formulars.

Formular-Konfiguration:

Hinweis: Ab der Visforms Version 5.5.0 kann auf die Definition einer eigenen CSS-Klasse zur vollständigen Unterdrückung der Anzeige von Feldern verzichtet werden. Ab dieser Version reicht die Angabe der vordefinierten CSS-Klasse visinvisible in der Feld-Konfiguration. Mehr dazu in Unsichtbares Feld.

  • Formular-Konfiguration » Reiter: Frontend Webassets, Unter-Reiter Formular

    Parameter: CSS =

    .hide-me {
    display: none;
}

Feld-Konfigurationen

option-1

  • Feld-Typ: Listbox, Steuerfeld
  • Steuert die Anzeige von bedingtem Feld option-2:
    option-1 = ‘label2’ –> option-2 ist sichtbar

option-2

  • Feld-Typ: Listbox, bedingtes Feld und Steuerfeld
  • Ist ein bedingtes Feld:
    • Feld-Konfiguration » Reiter: Grundeinstellungen

      Gruppe: Dynamische-Einstellungen » Parameter: Bedingte Anzeige = ‘option-1 || label2’.

  • Steuert die Anzeige von bedingten Feldern text-1, text-2:
    option-2 = ‘label1’ –> text-1 ist sichtbar
    option-2 = ‘label2’ –> text-2 ist sichtbar

text-1

  • Feld-Typ: Text, bedingtes Feld, versteckt
  • Ist ein bedingtes Feld:
    • Feld-Konfiguration » Reiter: Grundeinstellungen

      Gruppe: Dynamische-Einstellungen » Parameter: Bedingte Anzeige = ‘option-2 || label1’.

  • Wird versteckt durch eigene CSS-Klasse:
    • Feld-Konfiguration » Reiter Layout

      Gruppe CSS-Klassen-Einstellungen » Parameter CSS Klasse Control-Gruppe = ‘hide-me’

  • Enthält einen Startwert:
    • Feld-Konfiguration, Reiter ‘Grundeinstellungen’

      Gruppe ‘Startwert-Einstellungen’ » Parameter Feld füllen mit = Startwert
      Gruppe ‘Startwert-Einstellungen’ » Parameter Startwert = ‘fix initial value text-1’

text-2

  • Feld-Typ: Text, bedingtes Feld, versteckt
  • Ist ein bedingtes Feld:
    • Feld-Konfiguration » Reiter Grundeinstellungen

      Gruppe: Dynamische-Einstellungen » Parameter: Bedingte Anzeige = ‘option-2 || label2’.

  • Wird versteckt durch eigene CSS-Klasse:
    • Feld-Konfiguration » Reiter Layout

      Gruppe CSS-Klassen-Einstellungen » Parameter CSS Klasse Control-Gruppe = ‘hide-me’

  • Enthält einen Startwert:
    • Feld-Konfiguration, Reiter ‘Grundeinstellungen’

      Gruppe ‘Startwert-Einstellungen’ » Parameter Feld füllen mit = Startwert
      Gruppe ‘Startwert-Einstellungen’ » Parameter Startwert = ‘fix initial value text-2’

text-3

  • Feld-Typ: Text, versteckt
  • Wird versteckt durch eigene CSS-Klasse:
    • Feld-Konfiguration » Reiter Layout

      Gruppe CSS-Klassen-Einstellungen » Parameter CSS Klasse Control-Gruppe = ‘hide-me’

  • Ist ein SQL-Feld:
    • Feld-Konfiguration » Reiter Grundeinstellungen » Gruppe Dynamische-Einstellungen

      Parameter SQL-Feld = Ja
      Parameter Bei Änderung von nachladen = ‘option-2’
      Parameter Feldwert SQL-Statement =

      select CASE
WHEN 'value1' in ${input:option-2} THEN 'sql-text-value1'
WHEN 'value2' in ${input:option-2} THEN 'sql-text-value2'
ELSE ''
END;

hidden-1

  • Feld-Typ: Versteckt
  • Ist ein SQL-Feld:
    • Feld-Konfiguration » Reiter Grundeinstellungen » Gruppe Dynamische-Einstellungen

      Parameter SQL-Feld = Ja
      Parameter Bei Änderung von nachladen = ‘option-2’
      Parameter Feldwert SQL-Statement =

      select CASE
WHEN 'value1' in ${input:option-2} THEN 'sql-hidden-value1'
WHEN 'value2' in ${input:option-2} THEN 'sql-hidden-value2'
ELSE ''
END;

PDF Template

Das HTML für das Dokument

Mit den Formatierungen für Farbe und Text:

<h1><span style="font-size: 12px;"><strong>Auswahl (ID = ${id})</strong></span></h1>
<p><span style="font-size: 12px;">Gesendet: ${created}</span></p>
<p><span style="font-size: 12px;">Von: ${created_by|NAME}</span></p>
<p class="${option-1|DIE}"><span style="font-size: 12px;">option-1 = ${option-1}</span></p>
<p class="${option-2|DIE}"><span style="font-size: 12px;">option-2 = ${option-2}</span></p>
<p class="${text-1|DIE}"><strong><span style="font-size: 12px; color: rgb(53, 152, 219);">${text-1}</span></strong></p>
<p class="${text-2|DIE}"><strong><span style="font-size: 12px; color: rgb(53, 152, 219);">${text-2}</span></strong></p>
<p class="${text-3|DIE}"><strong><span style="font-size: 12px; color: rgb(53, 152, 219);">${text-3}</span></strong></p>
<p class="${hidden-1|DIE}"><strong><span style="font-size: 12px; color: rgb(53, 152, 219);">${hidden-1}</span></strong></p>

Ohne die Formatierungen für Farbe und Text:

<h1><span><strong>Auswahl (ID = ${id})</strong></span></h1>
<p><span>Gesendet: ${created}</span></p>
<p><span>Von: ${created_by|NAME}</span></p>
<p class="${option-1|DIE}"><span>option-1 = ${option-1}</span></p>
<p class="${option-2|DIE}"><span>option-2 = ${option-2}</span></p>
<p class="${text-1|DIE}"><strong><span>${text-1}</span></strong></p>
<p class="${text-2|DIE}"><strong><span>${text-2}</span></strong></p>
<p class="${text-3|DIE}"><strong><span>${text-3}</span></strong></p>
<p class="${hidden-1|DIE}"><strong><span>${hidden-1}</span></strong></p>

Overhead-Felder im PDF-Template

Oberhalb der eigentlichen Werte der Formular-Felder sind einige Overhead-Felder eingefügt:

  • In der Überschrift wir die Datensatz-ID mit ausgegeben: ${id}.
  • In der erste Zeile steht das Sende-Datum des Formulars: ${created}.
  • In der zweiten Zeile steht der Name des registrierten Absenders des Formulars: ${created_by|NAME}.
    Ohne die Platzhalter-Option NAME würde die Benutzer-ID des registrierten Absenders angezeigt werden: ${created_by}.
    Mehr darüber in dem Abschnitt Verwaltungs-Informationen der übermittelten Daten.

Vorschau

Seite 1 mit Übertragung ID 28

  • Nur für Listbox-Feld option-1 existiert ein Feld-Wert.
  • Durch leere Feld-Werte entstehen keine Leerzeilen.
Vorschau: Seite 1 mit Übertragung ID 28

Seite 1 mit Übertragung ID 29

  • Für beide Listbox-Felder option-1 und option-2 existiert ein Feld-Wert.
  • Für Listbox-Feld option-2 ist die Option label3 ausgewählt, für die es keinen festgelegten Zusatz gibt.
Vorschau: Seite 2 mit Übertragung ID 29

Seite 1 mit Übertragung ID 30

  • Für beide Listbox-Felder option-1 und option-2 existiert ein Feld-Wert.
  • Für Listbox-Feld option-2 ist die Option label1 ausgewählt, für die es jeweils den spezifischen Zusatz gibt.
Vorschau: Seite 3 mit Übertragung ID 30

Seite 1 mit Übertragung ID 31

  • Für beide Listbox-Felder option-1 und option-2 existiert ein Feld-Wert.
  • Für Listbox-Feld option-2 ist die Option label2 ausgewählt, für die es jeweils den spezifischen Zusatz gibt.
Vorschau: Seite 4 mit Übertragung ID 31
Was steht auf dieser Seite