Im HTML-File der Listausgabe:

<script>
	$(document).ready(function() {
		$('#dataTables-userlist').DataTable({
			responsive : true,
			columnDefs: [
				    { "orderable": false, "targets": [6] },
				    { "responsivePriority": 1, "targets": [0,1,2,3,6]},
				    { "responsivePriority": 2, "targets": [5]}
				  ],
		    order: [[ 1, 'asc'], [2, 'asc']],
            language: {
            	"url": "js/plugins/dataTables/language/<?php echo af_engine::get_lang()?>.json"
			}
		});
	});

	$('a.alaf_func_delete')
	.click(
			function() {
				if (confirm('<?php echo afHtmlEntityDecode(af_tran("_DELREC_AREYOUSURE1")) ?>')
						&& confirm('<?php echo afHtmlEntityDecode(af_tran("_DELREC_AREYOUSURE2")) ?>')) {
					return true;
				}
				return false;
			});
	
</script>

Dieses Beispiel zeigt, wie direkt nach der Auswahl der "Suggestion" ein submit erfolgen kann:

Dabei wird der anchour in das template für die PullDown-Liste eingebaut:

	var autocomplMaterial = new Bloodhound({
		datumTokenizer : function(datum) {
							return Bloodhound.tokenizers.whitespace(datum.matnr);
						},
		queryTokenizer : Bloodhound.tokenizers.whitespace,
		//prefetch: 'modules/<?php echo $this->_module_name?>/api/post_1960.json', 
        remote : {
      	   	url : 'modules/<?php echo $this->_module_name?>/api/124_ajax_read.php?callback=?&term=%QUERY&name=<?php echo $this->_module_name?>&op=bgc&func=autocomp_mataddinfo',
			wildcard : '%QUERY',
			transform : function(reply) {
						// Map the remote source JSON array to a JavaScript object array
						return $.map(reply,	function(matinfo) {
									return {
										matnr : matinfo.matnr,
										maktx : matinfo.maktx
									};
						});
					}
			}
		});

		$('#f_matnr').typeahead({
			//hint : true,
			highlight : true,
			minLength : 1
			
		  },{
			limit : 15,
			name : 'tah_matnr',
			display : 'matnr',
			source : autocomplMaterial,
			templates : {
						empty : [ '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>' ],
						header : [ '<div class="list-group search-results-dropdown">' ],
						suggestion : function(data) {
										return '<a href="' + data.matnr + '" class="list-group-item">'
											+ data.matnr
											+ ' - '
											+ data.maktx
											+ '</a>'
									}
						}
		});

Formular-Klasse instanzieren:

$tb = load_class ( 'af_form_bt', "settings" ); /* erstmal AdminForm laden */

Der 2te Übergabeparameter ist der Formularname

Formular anlegen:

$FormHtml [] = $tb->horizontal ( [
  'left_column_class' => 'col-md-2',
  'left_column_offset_class' => 'col-md-offset-2',
  'right_column_class' => 'col-md-10',
  'action' => adminUrl ('Content', 'save' ) 
] );

Beispiel:

Input-Feld mit einem Hilfe-Text, einer Hilfe-Text-ID und eienr Text-Klasse

$FormHtml [] = $tb->input ( 'input', 'VORNAME', af_tran('Vorname'), 'Mike', [
  'helptext' => [
    'Bitte geben Sie den Vornamen ein',
    'class' => "text-danger",
    'id' => 'helptext_id'
  ]
] );

Beispiel:

Input-Feld mit einer input-group, bestehend aus einem linken Führungstext und einem rechten Ergänzungstext.

$FormHtml [] = $tb->input ( 'input', 'AUSS_KG2', af_tran('Ausschuss'), '1250', [ 
  'input-group' => [ 
    'input-group-addon-left' => [ 
      'text' => 'Kilo',
      'class' => '',
      'iconclass' => '' 
    ],
    'input-group-addon-right' => [ 
      'text' => '.00',
      'class' => '' 
    ] 
  ],
  'helptext' => af_tran('Ausschuss in KG'),
  'size' => '10',
  'maxlength' => '10',
  'title' => af_tran('Ausschuss in KG') 
] );

Beispiel:

Mehrere Eingabefelder nebeneinander im horizontalen Formular.

/*
 * Beispiel für mehrere Felder in einem horizontalen Formular:
 * 
 * Erreicht wird dies über die Option 'form-group' => ['form-group' => 'no-form-group'] für 
 * jede Label|Field-Gruppe
 */
// 1. Input in eine neue "Zeilen"-Variable
//    form-group muss 'no-form-group' option enthalten!
$FormRow = $tb->input ( 'input', 'MeinInputFeld2', 'Auch mit helptext', 'Inhalt', [ 
	'helptext' => 'Hinweis zum Eingabefeld...',
	'left_column_class' => $tb->getLeftColumnClass (), // Standard-Linke Spalte vom Formular!
	'right_column_class' => $tb->column_class [3],
	'form-group' => [ 
			'form-group' => 'no-form-group' 
	] 
] );
// 2. nächste Label|Spaltenkombi mit jeweiligen Spaltenbreiten in "Zeilen"-Variablen anhängen
$FormRow .= $tb->number ( 'MeinInputFeld99', 'Gewicht', '150', [ 
	'helptext' => 'Bitte Gewicht eingeben',
	'input-group' => [ 
		'input-group-addon-left' => [ 
			'text' => 'KG',
			'class' => '',
			'iconclass' => '' 
		],
		'input-group-addon-right' => [ 
			'text' => '.00',
			'class' => '' 
		] 
	],
	'left_column_class' => $tb->column_class [1],
	'right_column_class' => $tb->column_class [2],
	'form-group' => [ 
		'form-group' => 'no-form-group' 
	] 
] );
// 2b nächste Label|Spaltenkombi mit jeweiligen Spaltenbreiten in "Zeilen"-Variablen anhängen
$FormRow .= $tb->email ( 'eMail-Adresse', 'eMail:', 'ich@123.de', [ 
	'required' => 'required',
	'helptext' => 'please enter your eMail...',
	'left_column_class' => $tb->column_class [1],
	'right_column_class' => $tb->column_class [3],
	'form-group' => [ 
		'form-group' => 'no-form-group' 
	] 
] );
// 3. die Zeile um die Form-Group ergänzen 
$FormRow = $tb->getFormGroup ( null, $FormRow, [ ] );
// 4. die "Zeilen"-Variable an das Formular-Array übergeben:
$FormHtml [] = $FormRow;

Beispiel:

Date Input-Feld mit einem Hilfe-Text und einem onMouseOver-titel

$FormHtml [] = $tb->date ( 'TS_START', af_tran ( 'Ereignis-Beginn' ), $data ['TS_START'], [ 
	'dateformat' => 'datetime',
	'helptext' => af_tran ( 'Wann soll das Ereignis beginnen?' ),
	'title' => af_tran ( 'Ereignis-Beginn' ) 
] );

['text'=>" < i > < / i > "]

Beispiel:

Input-Feld als Colorpicker einer input-group, bestehend aus einer rechten Schaltfläche zur Darstellung der Farbe / Aktivierung des Farbauswahldialogs.

$FormHtml [] = $tb->colorpicker ( 
  'config[FILL_COLOR_ROW_1]', 
  'Bingokartenfarbe-1, 
  $this->_config ['FILL_COLOR_ROW_1'], 
  [
     'input-group' => [
       'input-group-addon-right' => [ 
         'text' => " < i > < / i > "
       ] 
     ] 
  ]
);

Beispiel:

Form Button-Element mit Einfärbung "Success", Icon, und einer einfachen Bestätigung

// Freigabe beantragen
$FormHtml [] = $tb->button ( 'frm_save', af_tran ( 'Freigabe beantragen'), 'user/save_send', 'submit', [
	'class' => 'btn btn-success',
	'iconclass' => 'glyphicon 	glyphicon-send',
	'title' => af_tran ( 'Hiermit beantragen Sie die Freigaben...' ),
	'confirm' => [ 
		'confirm_1' => af_tran ( 'Soll der Auftrag freigegeben werden?' ) 
		     ] 
] );

Beispiel:

  include_once (ALAF_MODULES_DIR . DS . 'DecisionTree' . DS . 'includes' . DS . 'class.DecisionTree.php');
  $ObjSelOpt = new DecisionTree ();
  $inputname = 'SAP_MATAUSWAHL';
  $FormHtml [] = $ObjSelOpt->Build_FormSelect ( $FrmObj, 2, [ 
				'label' => 'Materialauswahl...',
				'title' => 'Titel der Materialauswahl',
				'helptext' => 'Zur korrekten Materialfindung bitte die Schaltfläche neben dem Eingabefeld klicken...',
				'iconclass' => 'fa fa-search'
    ], $inputname );

Farbe des Schreibstiftes, der für die Unterschrift verwendet werden soll:

Beispiel:

Input-Feld als Signature-Pad (Unterschriftenbereich).

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

Die Ablaufsteuerung umfasst grundsätzlich 2 Bereiche:

Frontend

Aufruf über das Skript index.php

Backend

Aufruf über das Skript admin.php

Das Backend wird aufgerufen, indem in der URL der Skriptaufruf admin.php enthalten ist: