Template Formular-Textfields

[ways2web]

sagt mal.. auf welches template greift contao-bootstrap zurück, wenn man textfields im forumlargenerator anlegt?

[webstar]

sagt mal.. auf welches template greift contao-bootstrap zurück, wenn man textfields im forumlargenerator anlegt?

Grundsätzlich ist das abhängig von der Contao Version. In der Version < 3.3 ist es form_widget. Ab 3.3 form_textfield. In Contao-Bootstrap nutze ich jedoch die Form-Helper Erweiterung, die sehr viel mehr Flexibilität erlaubt zum Rendern der Formulare. Deswegen wird dir der Blick in die Templates erstmal ungewohnt vorkommen (z.B. https://github.com/netzmacht/contao-...m_widget.html5).

Entwickelt ist der Form-Helper wegen komplexen Anforderungen seitens Kunden an Formulare, wo die Contao-Mittel nicht ausreichten. Da damit auch die Bootstrap Funktionen gut abgebildet werden können, basiert Contao-Bootstrap darauf.

Je nach dem, was du möchtest, gibt es verschiedene Möglichkeiten auf das Rendern einzugreifen.

Die einfachste (und herkömmliche Methode) ist die Anpassung des Templates. Man kann weiterhin normale Formular-Templates schreiben. Dann muss man natürlich auch schauen, dass das Layout übernommen wird. Am besten sag mal, was du vorhast du ich geb dir eine Empfehlung, wie du es umsetzen kannst.

[ways2web]

hi webstar.

ok, dann hab ich es ja halbwegs nachverfolgen können... aber ne form_textfield_custom.html5 wird trotz auswahl im FG-Element wohl ignoriert oder?

was ich vorhabe.... ich wollte nen date-time-picker nutzen (http://tarruda.github.io/bootstrap-datetimepicker/), den man so konfigurieren kann, dass er auch nur ne uhrzeit anbietet.
ich hab das ganze zwar auch als eigenes html element einfügen können aber aus mir unbekannten Gründen versendet contao den Inhalt genau dieses Feldes nicht. Daher wollte ich es mal über contao(bootstrap)-eigene Templates versuchen.
In der hoffnung, dass der Inhalt des time-pickers dann versendet wird. Bei interesse schick ich dir die url gern per pn.. vielleicht übersehe ich ja was

viele grüße
oliver

[webstar]

hi webstar.

ok, dann hab ich es ja halbwegs nachverfolgen können... aber ne form_textfield_custom.html5 wird trotz auswahl im FG-Element wohl ignoriert oder?

was ich vorhabe.... ich wollte nen date-time-picker nutzen (http://tarruda.github.io/bootstrap-datetimepicker/), den man so konfigurieren kann, dass er auch nur ne uhrzeit anbietet.
ich hab das ganze zwar auch als eigenes html element einfügen können aber aus mir unbekannten Gründen versendet contao den Inhalt genau dieses Feldes nicht. Daher wollte ich es mal über contao(bootstrap)-eigene Templates versuchen.
In der hoffnung, dass der Inhalt des time-pickers dann versendet wird. Bei interesse schick ich dir die url gern per pn.. vielleicht übersehe ich ja was

viele grüße
oliver

Nein, wenn unter Contao das Template ausgewählt wird, wird es auch geladen. (Gerade unter Contao 3.3.3 getestet). Dass Contao manuell erstellte Formular-Elemente ignoriert, ist Teil der "Sicherheitspolitik" der Contao Formulare. Es können nur die Daten verarbeitet werden, die auch zum Formular gehören.

Ich habe dir mal ein form_textfield_custom Template erstellt, das genau die Funktion hinzufügt. Was ich dabei mache: Ich erstelle die InputGroup, wofür es eine Klasse gibt. Dann füge ich als rechtes Element das Icon hinzu (mit FontAwesome Icons umgesetzt). Die InputGroup wird nun noch als Wrapper hinzugefügt. Die Javascript Anweisung ans Ende und fertig ist alles.

<?php

$helper = \Netzmacht\FormHelper\Helper::getInstance();
$elements = $helper->generate($this);

if($elements) {
    list($label, $container, $errors) = $elements;

    $id         = $container->getElement()->getId() . '_datetimepicker';
    $inputGroup = new \Netzmacht\Bootstrap\Form\InputGroup();
    $inputGroup->setRight('<i data-time-icon="fa fa-time" data-date-icon="fa fa-calendar"></i>');
    $inputGroup->setId($id);

    $container->setWrapper($inputGroup);

    $layout = $helper->getLayout($this);
    include $layout;
}
?>
<script type="text/javascript">
    $(function() {
        $('#<?php echo $id; ?>').datetimepicker({
            language: 'pt-BR'
        });
    });
</script>

Ps: Bei dieser Umsetzung gehen, falls getätigt, die Icon und Einheit Definition über den Formulargenerator verloren.

[ways2web]

uiui.. danke für deine mühen.. toll, wenn man so viel Hilfestellung bekommt!! DANKESCHÖN!

update: ich weiß noch nicht warum, aber funktionieren tut es noch nicht mit dem picker...
ich sehe natürlich noch einige unterschiede, bzw dass zwei klassen noch nicht vorhanden sind, ob die aber ausschlaggebend sind, würde wohl nur eine analyse vm jquery ergeben.. denke ich.. aber da fehlt mir wohl das knowhow :/

gruss
ways

[webstar]

uiui.. danke für deine mühen.. toll, wenn man so viel Hilfestellung bekommt!! DANKESCHÖN!

update: ich weiß noch nicht warum, aber funktionieren tut es noch nicht mit dem picker...
ich sehe natürlich noch einige unterschiede, bzw dass zwei klassen noch nicht vorhanden sind, ob die aber ausschlaggebend sind, würde wohl nur eine analyse vm jquery ergeben.. denke ich.. aber da fehlt mir wohl das knowhow :/

gruss
ways

Gern.

Hatte die Funktionalität des Skripts nicht getestet, nur den Elementumbau. Das Script schein noch auf Bootstrap 2 ausgelegt. Die Addon-Klasse heißt anders. Außerdem ist in meiner Version das Datumsformat nicht angegeben. Hier mal die angepasste Version (ungetestet). Ich füge das Addon span beim Icon mal hinzu.

<?php 

$helper = \Netzmacht\FormHelper\Helper::getInstance(); 
$elements = $helper->generate($this); 

if($elements) { 
    list($label, $container, $errors) = $elements; 

    $element = $container->getElement();
    $id         = $element->getId() . '_datetimepicker'; 

    $element->setAttribute('data-format', 'dd.mm.YYY hh:mm:ss');

    $inputGroup = new \Netzmacht\Bootstrap\Form\InputGroup(); 
    $inputGroup->setRight('<span class="add-on"><i data-time-icon="fa fa-time" data-date-icon="fa fa-calendar"></i></span>'); 
    $inputGroup->setId($id); 

    $container->setWrapper($inputGroup); 

    $layout = $helper->getLayout($this); 
    include $layout; 
} 
?> 
<script type="text/javascript"> 
    $(function() { 
        $('#<?php echo $id; ?>').datetimepicker({ 
            language: 'pt-BR' 
        }); 
    }); 
</script>

[ways2web]

Danke webstar.

Das war es!

Hab nun noch die css-klassen für font awesome angepasst und nun funktioniert es nicht nur, sondern sieht auch noch wie gewünscht schick aus!
mit der Anpassung am js wird mir nun auch nur die Uhrzeit im datetimepicker angeboten. Echt klasse. Danke Dir für den oberliga support, der ja kaum was mit deiner Extension zu tun hat!

<?php 

$helper = \Netzmacht\FormHelper\Helper::getInstance(); 
$elements = $helper->generate($this); 

if($elements) { 
    list($label, $container, $errors) = $elements; 

    $element = $container->getElement();
    $id         = $element->getId() . '_datetimepicker'; 

    $element->setAttribute('data-format', 'hh:mm');

    $inputGroup = new \Netzmacht\Bootstrap\Form\InputGroup(); 
    $inputGroup->setRight('<span class="add-on"><i data-time-icon="fa fa-time" class="fa fa-clock-o icon-time"></i></span>'); 
    $inputGroup->setId($id); 

    $container->setWrapper($inputGroup); 

    $layout = $helper->getLayout($this); 
    include $layout; 
} 
?> 
<script type="text/javascript"> 
    $(function() { 
        $('#<?php echo $id; ?>').datetimepicker({ 
            language: 'de-DE',
            pick12HourFormat: false,
            pickSeconds: false,
            pickDate: false 
        }); 
    }); 
</script>

[webstar]

Danke webstar.

Das war es!

Hab nun noch die css-klassen für font awesome angepasst und nun funktioniert es nicht nur, sondern sieht auch noch wie gewünscht schick aus!
mit der Anpassung am js wird mir nun auch nur die Uhrzeit im datetimepicker angeboten. Echt klasse. Danke Dir für den oberliga support, der ja kaum was mit deiner Extension zu tun hat!

Gern geschehen. Da ich bei den Formularen weit vom Contao Standard abweiche und ich noch keine Zeit für die Dokumentation hatte, diente dies Dokumentationshilfe.

[webstar]

Ich habe das die Frage in einen separaten Thread ausgelagert.