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 
		] 
] );

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!

Last updated