signpad input-Feld

Das input-Feld vom Type "signpad" dient der Erfassung von Unterschriften in einem Formular.

Das signpad - Input-Feld benötigt die Formular-Option "onSubmit"

/**
 * Create a Bootstrap form field to enter a signature
 *
 * Creates the input and canvas group for an element with the correct classes for errors.
 *
 * ATTENTION: This function uses the form-open-option: 'onSubmit' => 'submitForm()'
 *
 * @param string $name        	
 * @param string $label        	
 * @param string $value        	
 * @param array $options        	
 * @return string
 */
public function signpad($name, $label = null, $value = null, array $options = []) {
  // ...
}

Parameter für das "signpad" Input-Feld

Name		Beschreibung
$name		Name des Input-Feldes. Dieser wird beim Senden des Formulars in $_GET übergeben.
$label	optional	Feldüberschrift für das Eingabefeld. Wird kein $label übergeben, so wird $name als Label übernommen.
$value	optional	Wert des Input-Feldes. Der übergebene Wert wird im Formular zur Bearbeitung ausgegeben. (z.B. eine bestehende Unterschrift)
$options	optional	Array mit Optionen / Attributen zu einem input-Feld. Hier sind grundsätzlich alle HTML-Attribute erlaubt. Weiterhin können interne Optionen eingetragen werden, welche die Darstellung des Input-Feldes beeinflussen. Optionale Parameter für input-Felder

Optionale Parameter für das "signpad" Input-Feld

Die folgenden Optionen sind speziell für das "signpad" Input-Feld und somit gruppiert unter dem Index "signpad"

ID	Wert(e)	Beschreibung
uid	optional	In einem Formular können mehrere "signpad" Felder verwendet werden. Dabei werden diese mit dem HTML-Tag "id='xyz'" unterschieden. Hier kann die unique-ID extern vergeben werden. Falls nicht gesetzt, wird vom Formulargenerator eine unique-ID erstellt.
height	optional	Höhe des Unterschriftenfeldes inPixeln
penColor	optional	Farbe, in der auf der Zeichnungsfläche geschrieben wird. z.B. '#111111'; // Schwarz
backgroundcolor	optional	Hintergrundfarbe der Zeichnungsfläche. z.B. '#FFFFFF'; // Weiß
btnChangeColor	optional	true|false Soll die Schaltfläche zur Auswahl der Schriftfarbe eingeblendet werden? Default: false
btnResize	optional	true|false Soll die Schaltfläche zur Größenänderung der Zeichnungsfläche eingeblendet werden? Default: false

Signature-Pad

Das "signpad" Input-Feld nutzt die Funktionen des "Signature Pad": https://github.com/szimek/signature_pad

Dort ist auch eine vollständige Dokumentation verfügbar!

Beispiele

Unterschriftenfeld

// Das signpad benötigt die Formular-Option "onSubmit"

// Formular öffnen
$FormHtml [] = $FrmObj->horizontal ( [ 
				'onSubmit' => 'submitForm()',
				'left_column_class' => 'col-md-2',
				'left_column_offset_class' => 'col-md-offset-2',
				'right_column_class' => 'col-md-10',
				'action' => moduleUrl ( $this->_module_name, 'ANTRAG/save' ),
				'files' => 'files',
				'id' => 'DetailForm' 
] );

// Hier der Test mit dem Signature-Pad
$FormHtml [] = $FrmObj->signpad ( 'MeinSignaturePad', 'Unterschrift', null, [ 
		'helptext' => 'Bitte unterzeichnen sie hier:',
		'height' => 250,
		'title' => 'Bereich für die Unterschrift',
		'right_column_class' => $FrmObj->column_class [8],
		'signpad' => [ 
				'height' => 250,
				'penColor' => '#82cb27',
				'btnChangeColor' => true,
				'btnResize' => true 
		] 
] );

Signpad mit Farbauswahl und Größenänderung

Hinweise

bootstrap - Hinweis

• Bei der Verwendung von "bootstrap"-tabs oder "hidden"-Elementen wird das signpad nicht korrekt dargestellt, sodass die Eingabe nicht möglich ist! Ein Aufruf der Funktion resizeCanvas(); schafft hier Abhilfe!