WBCE CMS Add-Ons

Informationen zu wbProfiles

Eigene Felder

 

On this page... (hide)

wbProfiles kann sehr flexibel auf Ihre Bedürfnisse eingehen. Hierzu verwendet es den wbFormBuilder, der es Ihnen ermöglicht, beliebige eigene Eingabefelder hinzuzufügen und diese auch gleich mit Konsistenzchecks zu versehen, ohne daß Sie dafür selbst programmieren müssen.

 

Feld dem Registrierungsformular hinzufügen

Die Konfiguration der Formularfelder erfolgt über die Datei inc/inc.forms.php. Diese beinhaltet ein mehrdimensionales Array, welches die verschiedenen Formulare definiert, die wbProfiles verwendet.

Der für das Registrierungsformular zuständige Eintrag im Array hat den Schlüssel 'regform'. Hier ist bereits ein Block mit Zusatzfeldern vorgesehen, der in der Standardversion folgendermaßen aussieht:

 
// additional options (not stored in items table)
            array(
                'type'     => 'legend',
                'name'     => 'additional_options',
                'text'     => 'Additional options',
            ),
            array(
                'type'     => 'select',
                'name'     => 'additional_item_bookings_section',
                'label'    => 'Connect with Bookings section',
            ),
            array(
                'type'     => 'text',
                'name'     => 'additional_item_tel',
                'allow'    => 'tel_de',
                'label'    => 'Phone',
                'infotext' => 'Format: (0123) 123 456',
            ),
            array(
                'type'     => 'textarea',
                'name'     => 'additional_item_info',
                'allow'    => 'plain',
                'label'    => 'Description',
                'editor'   => true,
                'required' => true,
                'encode'   => false,
                'missing'  => 'Please insert a brief description',
            ),
Get Code

Nehmen wir nun an, Sie möchten zusätzlich zu der Telefonnummer auch eine Mobilfunknummer abfragen. Fügen Sie hierzu folgendes Subarray ein:

 
// additional options (not stored in items table)
            array(
                'type'     => 'legend',
                'name'     => 'additional_options',
                'text'     => 'Additional options',
            ),
            array(
                'type'     => 'select',
                'name'     => 'additional_item_bookings_section',
                'label'    => 'Connect with Bookings section',
            ),
            array(
                'type'     => 'text',
                'name'     => 'additional_item_tel',
                'allow'    => 'tel_de',
                'label'    => 'Phone',
                'infotext' => 'Format: (0123) 123 456',
            ),
            array(
                'type'     => 'text',
                'name'     => 'additional_item_mobil',
                'allow'    => 'string',
                'label'    => 'Mobile'
            ),
            array(
                'type'     => 'textarea',
                'name'     => 'additional_item_info',
                'allow'    => 'plain',
                'label'    => 'Description',
                'editor'   => true,
                'required' => true,
                'encode'   => false,
                'missing'  => 'Please insert a brief description',
            ),
Get Code

Wenn Sie nun das Registrierungsformular für neue Einträge aufrufen, sehen Sie dort bereits das neue Eingabefeld:

 

Wenn Sie das Formular nun ausfüllen und absenden, wird dieses neue Feld auch schon in der Datenbank gespeichert!

 

Feldbeschriftung übersetzen

Als nächstes wollen wir den Text (das Label) auf Deutsch anzeigen. Hierzu öffnen Sie die Datei languages/DE.php und fügen dort folgenden Eintrag hinzu:

 
// ----- Registrierungs-Formular -----
    'Mobile'                  => 'Mobil',
Get Code

Schon erscheint das Label auch im Frontend auf Deutsch:

 
 

Das neue Feld in der Ausgabe

Zuguterletzt müssen wir noch dafür sorgen, daß das neue Feld bei der Ansicht eines Eintrags auch angezeigt wird. Hierzu muß das Ausgabetemplate entsprechend erweitert werden. Für die Detailansicht eines Eintrags ist dies die Datei templates/default/item_details.tpl. Diese beinhaltet das notwendige HTML sowie Platzhalter an den Stellen, an denen die Daten des Eintrags eingefügt werden sollen.

Im Original sieht das so aus:

 
<div id="icons">
          {{ :if additional_item_tel }}{{ :lang Phone }}: {{ additional_item_tel }} <img src="{{ PG_URL }}/templates/default/images/telephone.png" alt="{{ :lang Phone }}" /><br />{{ :ifend }}
          {{ :if icons }}{{ icons }}{{ :ifend }}{{ :if pdf_link }}<div id="pdflink" style="display:inline-block;">{{ pdf_link }}</div>{{ :ifend }}<br />
          {{ :if files }}
          <div id="item_files">
            {{ :loop files }}{{ :if __first__ }} [[ {{ :ifend }}
            <a href="{{ PG_URL }}/ajax/download.php?section_id={{ section_id }}&amp;dl={{ file_id }}">{{ :lang Download file }} #{{ __current__ }}</a>
            {{ :if __last__ }} ]] {{ :else }} | {{ :ifend }}{{ :loopend }}
          </div>
          {{ :ifend }}
          </span>
        </div>
Get Code

Hier fügen wir nun eine weitere Zeile ein:

 
<div id="icons">
          {{ :if additional_item_tel }}{{ :lang Phone }}: {{ additional_item_tel }} <img src="{{ PG_URL }}/templates/default/images/telephone.png" alt="{{ :lang Phone }}" /><br />{{ :ifend }}
          {{ :if additional_item_mobil }}{{ :lang Mobile }}: {{ :loop additional_item_mobil }}{{ value }}{{ :loopend }} <img src="{{ PG_URL }}/templates/default/images/telephone.png" alt="{{ :lang Mobile }}" /><br />{{ :ifend }}
          {{ :if icons }}{{ icons }}{{ :ifend }}{{ :if pdf_link }}<div id="pdflink" style="display:inline-block;">{{ pdf_link }}</div>{{ :ifend }}<br />
          {{ :if files }}
          <div id="item_files">
            {{ :loop files }}{{ :if __first__ }} [[ {{ :ifend }}
            <a href="{{ PG_URL }}/ajax/download.php?section_id={{ section_id }}&amp;dl={{ file_id }}">{{ :lang Download file }} #{{ __current__ }}</a>
            {{ :if __last__ }} ]] {{ :else }} | {{ :ifend }}{{ :loopend }}
          </div>
          {{ :ifend }}
          </span>
        </div>
Get Code

Die Anweisung {{ :lang Mobile }} weist die Template Engine an, den Text Mobile zu übersetzen, sofern eine Übersetzung vorhanden ist. Da wir bereits eine in die Sprachdatei languages/DE.php aufgenommen haben, wird also auch hier Mobil angezeigt werden.

Durch das Kapseln in die Anweisung {{ :if additional_item_mobil }}...{{ :ifend }} wird erreicht, daß die komplette Tabellenzeile gestrichen wird, wenn das Feld additional_item_mobil nicht gefüllt ist.

Schauen wir uns nun einen solchen Eintrag im Frontend an:

 
 

Pimp my form: Hinweistexte

Eine weitere nützliche Funktionalität des wbFormBuilders ist die Anzeige eines Hilfetextes, wenn sich der Cursor im entsprechenden Eingabefeld befindet. Auch diese können wir uns zu Nutze machen, ohne dafür selbst etwas programmieren zu müssen.

Das einzige, was zu tun ist, ist das Hinzufügen des anzuzeigenden Textes zur inc/inc.forms.php sowie der Übersetzung zur languages/DE.php:

inc.forms.php

array(
                'type'     => 'text',
                'name'     => 'additional_item_tel',
                'allow'    => 'string',
                'label'    => 'Phone'
                'infotext' => 'Format: (0123) 123 456',
            ),
Get Code

DE.php

// ----- Registrierungs-Formular -----
    'Format: (0123) 123 456' => 'Format der Telefonnummer: (0123) 123 456',
Get Code

Das Ergebnis:

 
 

Namenskonventionen

Wenn man sich obiges Beispiel genau ansieht, erkennt man gleich, daß es offensichtlich festgelegte Namenskonventionen gibt. Das ist notwendig, damit die Zusatzfelder richtig erkannt und in die richtige Datenbanktabelle geschrieben werden können. Diese Konventionen sind:

 
  • Der Feldname beginnt immer mit additional_item_
 

Parameter für den wbFormBuilder

type
Typ des Eingabefeldes. Mögliche Werte: text, file, password, textarea, select, radio, checkbox, legend, infotext
name
Name des Eingabefeldes. Für eigene Felder in wbProfiles beginnt dieser immer mit item_
label
Beschriftung des Feldes. Wird automatisch übersetzt, wenn in der Sprachdatei ein entsprechender Eintrag vorhanden ist.
allow (optional)
Ermöglicht die automatische Prüfung der Eingabe auf Validität. Die wichtigsten Werte: number, string, plain, uri, password
required (optional)
Definiert ein Feld als Pflichtfeld. Leere Werte sind dann nicht zulässig. Mögliche Werte: true, false
missing
Nur wenn required = true. Meldung bei fehlender Eingabe. Wird automatisch übersetzt, wenn in der Sprachdatei ein entsprechender Eintrag vorhanden ist.
invalid
Nur in Kombination mit allow sinnvoll. Meldung bei ungültiger Eingabe. Wird automatisch übersetzt, wenn in der Sprachdatei ein entsprechender Eintrag vorhanden ist.
infotext
Erscheint als Popup, wenn der Cursor im entsprechenden Eingabefeld steht. Wird automatisch übersetzt, wenn in der Sprachdatei ein entsprechender Eintrag vorhanden ist. Erfordert JavaScript.
editor
Nur für Felder vom Typ 'textarea'. Schaltet einen WYSIWYG-Editor hinzu. Möglicher Wert: true; Default: false
calendar
Nur für Felder vom Typ 'text'. Schaltet ein Kalender-Popup hinzu. Möglicher Wert: true; Default: false
Zurück zur Übersicht

© BlackBird Webprogrammierung

addons.wbce.org is a part of wbce.org | Imprint (Impressum) at wbce.org