dm_formhandler

Entwickler

Dieses Paket bietet ein paar vordefinierte Formulare und ein Framework für das Markup.

Installation

Einfach die Extension dm_formhandler installieren.

Beispiele

Alle Formulare erben von dem vordefinierten Formular basic.

Kontaktformular

Einbindung eines Captchas

Registrierung

Login

Der Login ist derzeit nicht mit formhandler möglich, dafür nutzen wir die Extbase Extension hairu, um die Templates komfortabel austauschen zu können.

FE User Daten ändern - change user data/change core data

Dazu erben wir von unserem Registrierungsformular, schmeißen die Sachen raus, die wir nicht brauchen (mails und identifier und deren Validierung) und laden die erforderlichen Felder aus der Session vom eingeloggten Benutzer.

Newsletter Registrierung - Double Opt In

Newsletter Abmeldung - Double Opt Out

Eigenes Formular erstellen

Um ein eigenes Formular zu erstellen erben wir vom Basic. Wenn wir von einem anderen Formular erben kann es sinnvoll sein, es danach zu leeren, um im Backend beispielsweise nur ein Registrierungsformular zu haben.

<INCLUDE_TYPOSCRIPT: source="FILE:EXT:dm_formhandler/Resources/Private/TypoScript/Setup/Basic.ts">

plugin.Tx_Formhandler.settings.predef.kunde_formular < plugin.Tx_Formhandler.settings.predef.basic
plugin.Tx_Formhandler.settings.predef.kunde_formular {
    formValuesPrefix = kunde_formular
    templateFile {
        file = EXT:kunde_sitepackage/Resources/Private/Templates/KundeFormular.html
        variables {
            formValuesPrefix = TEXT
            formValuesPrefix.value < plugin.Tx_Formhandler.settings.predef.kunde_formular.formValuesPrefix
        }
    }
}

In dem eigenen Template kann man einige Partials benutzen um ein sauberes Markup zu erhalten. Mit diesem Markup funktionieren auch die SASS Snippets. Mehr zu den Partials im Abschnitt Anpassen des Markups.

Libs

Libs sind TypoScript Snippets, die man nur noch in sein Formular kopieren muss.

Länder aus Static Info Tables als Options

Wenn man die static_info_table countries als options im Dropdown benötigt kann man sie wie folgt einbinden.

<INCLUDE_TYPOSCRIPT: source="FILE:EXT:dm_formhandler/Resources/Private/TypoScript/Setup/Libs.ts">

plugin.Tx_Formhandler.settings.predef.kunde_formular {
    markers.countries < lib.dm_formhandler.markers.countries
}

Lokalisieren kann man sie wie folgt

# EN
[globalVar = GP:L = 1]
plugin.Tx_Formhandler.settings.predef.kunde_formular {
    markers.countries {
        select {
            orderBy = cn_short_en
            selectFields = cn_short_en,cn_iso_3
        }
        renderObj.30.field = cn_short_en
    }
}
[global]

Sass Includes

Label über dem Input

TODO

Label nebem dem Input

TODO

Mehrspaltig ab gewisser Größe

TODO

Anpassen des Markups

Wir rendern das Template mit Fluid. Um ein konsistentes Markup zu erhalten benutzen wir für den Zeilentypen (abhängig vom Typ des Inputs) ein eigenes Partial.

• CheckboxRow
• PasswordRow
• ReadOnlyRow
• SelectRow
• TextRow

<f:alias map="{name: 'username'}"> <f:render partial="TextRow" arguments=" " /> </f:alias>

Durch den f:alias Viewhelper setzen wir Variablen im allgemeinen Context, diese werden in den Partials benutzt. Das Row Partial nutzt die Variable name für das Feld. Man kann auch die Variable {label} setzen um den Inhalt des Labels zu definieren. Nutzt man diese nicht wird versucht das Label aus der Locallang zu holen. (Mit dem Marker ###LLL:label.{name}###)

Das Label ist auch in einem eigenen Partial, um es typübergreifend gleich zu rendern.

Anpassen des CSS

Formhandler bietet die Möglichkeit CSS über TS einzubinden. Das sollten wir lassen, weil es nicht die API nutzt und so von scriptmerger etc nicht erkannt wird. Das CSS gehört meist eh ins Sitepackage.

Anpassen der Lokalisierung

Bei der Lokalisierung muss man aufpassen. Es gibt zwei Möglichkeiten die Lokalisierung zu nutzen.

In Fluid

Wir benutzen Fluid um das Formhandler-Markup mit seinen Markern zu rendern (abgefahren oder?). Wenn wir in Fluid f:translate benutzen machen wir das wie folgt:

<f:alias map="{name: 'privacyPolicy', label: '{f:translate(key: \'LLL:{langFile}:label.privacyPolicy\', arguments: \'{0: \\\'{f:uri.page(pageUid: \"{privacyPolicyPid}\")}\\\'}\')}'}">
    <f:render partial="CheckboxRow" arguments=" " />
</f:alias>

In der Variablen befindet sich der Pfad zur Locallang Datei. Wir benutzen also ausschließlich die Übersetzungen, die in der Variablen stecken. Meistens ist das also die schlechtere Option, wenn wir aber Argumente ersetzen wollen kann es von Vorteil sein.

Durch LLL Marker

Formhandler nutzt Übersetzungen wie folgt.

###LLL:registration.requiredAdvice###

Dabei werden die Locallang Dateien, die für dieses Formular definiert sind, genutzt. Spätere überschreiben vorhergehende.

plugin.Tx_Formhandler.settings.predef.basic {
    langFile {
        10 = TEXT
        10.value = EXT:dm_formhandler/Resources/Private/Language/locallang.xlf
    }
}

Im Basic-Template definieren wir die Locallang von dm_formhandler. Das ist also unser Fallback. Wenn wir neue Werte setzen wollen oder alte überschreiben können wir einzelne Marker überschreiben indem wir eine Locallang definieren, die danach eingebunden wird.

plugin.Tx_Formhandler.settings.predef.kunde_formular {
    langFile.20 = TEXT
    langFile.20 = EXT:pflitsch_club/Resources/Private/Language/locallang.xml
}