Diese JQuery-Instanz zum Verketten von Befehlen.
Initializes a date and time picker for selecting an appointment. Appointments can be configured in the backend. Lets the user select a date (year, month, day) and a time (hour and minute).
this for chaining.
Retrieves the currently selected slot for the first element in the current selection.
The method to invoke on the appointment picker.
The currently selected slot, or undefined when no slot is selected. The promise is rejected when the current selection is empty.
Fetches all available slots of a given month and year for the first element in the selection.
The method to invoke on the appointment picker.
The month and year for which to fetch the slots. When a property is not given, it defaults to the currently selected month and year.
All available slots for the given month and year. The promise is rejected when the slots could not be fetched from the server.
Finds the currently selected month and the corresponding year of the first element in the current selection.
The method to invoke on the appointment picker.
The currently selected month and year, or undefined when no
month or year is selected. The promise is rejected when the current
selection is empty
Selects a particular month in a given year and shows all days for the month for all elements in the current selection. When the date picker is closeable, you should open it first.
The method to invoke on the appointment picker.
The month and year to select, relative to the
currently selected month and year. The month defaults to 1 and the year
to 0 (e.g. move to the next month). Can be negative.
All available slots for the selected month in the given year. The array contains one entry for each element in the current selection. The promise resolves when all month and years were set (or rejects when one could not be set).
Selects a particular month in a given year and shows all days for the month for all elements in the current selection. When the date picker is closeable, you should open it first.
The method to invoke on the appointment picker.
Day to select. When a property is not given, it defaults to the currently selected month or year.
All available slots for the selected month in the given year. The array contains one entry for each element in the current selection. The promise resolves when all month and years were set (or rejects when one could not be set).
Selects a particular day and shows the available slots of that day for all elements in the current selection.
The method to invoke on the appointment picker.
Day to select. When a property is not given, it defaults to the currently selected date.
All available slots for the selected day. The array contains one entry for each element in the current selection. The promise resolves when all dates were set (and rejects when a date could not be set).
Changes the currently selected slot to the given slot or clears the selected slot, for all elements in the current selection.
// Selects the first slot of the current month, if any
async function selectFirstSlot(app) {
const {slots} = await app.appointmentPicker("getSlots");
const firstSlot = Object.values(slots)?.[0]?.slots?.[0]?.slot;
if (firstSlot) {
await app.appointmentPicker("setSlot", firstSlot);
}
}
selectFirstSlot($("[name='app1']"));The method to invoke on the appointment picker.
The slot to set, or undefined to clear the selected slot.
A promise that resolves when the slots were set, or rejects when the slots could not be set.
Closes or opens the appointment picker for all elements in the current selection.
The method to invoke on the appointment picker.
true to open the picker, false to close it, undefined
to open it when closed and vice versa.
Whether the picker is now opened. The array contains one entry for each element in the current selection. The promise is resolved when the picker was toggled, and rejected when either the selection is empty or the appointment picker is not closable.
Checks whether the appointment picker is opened or closed, for the first element in the current selection.
The method to invoke on the appointment picker.
true when the picker is open, or false otherwise. Always
returns true when the picker is not closable. The promise is rejected
when either the selection is empty.
Initialisiert autoNumeric. Muss aufgerufen werden, bevor die anderen Methoden genutzt werden können. Diese Funktion sollte mit Texteingabefeldern genutzt werden.
autoNumeric ist eine JavaScript-Bibliothek zur Eingabe von Zahlen in länderspezifischen Formaten. Diese Bibliothek ist bereits in FORMCYCLE eingebunden, sodass sie in Formularen direkt genutzt werden kann. Auf der offiziellen Webseite findet sich eine ausführliche Erklärung.
Zuerst wird ein Eingabefeld mit jQuery selektiert, dann werden die Optionen an autoNumeric wie folgt übergeben:
$("[name=tfGewicht]").autoNumeric("init", {
aDec: ',', //Komma als Dezimalseparator
aSep: '', // kein Trennzeichen für Tausender
aSign: ' kg', // Einheit kg
pSign: 's', // Einheit nach der Zahl
vMin: 1, // Mindestwert 1
vMax: 100, // Höchstwert 100
mDec: 3, // Maximal 3 Dezimalstellen
aPad: false // Es können auch weniger als 3 Dezimalstellen sein.
// weitere Optionen...
});Im Textfeld tfGewicht kann der Nutzer nun z.B. 3,99 eingeben, dies wird als 3,99 kg angezeigt. autoNumeric
stellt sicher, dass es sich um eine gültige Zahl ist.
Einige oft verwendete Einstellungen sind:
EUR oder ¥.s) oder am Anfang (Wert p) stehtEs sei angemerkt, dass die Optionen statt per JavaScript auch als HTML-Data-Attribute an dem Eingabefeld übergeben werden können:
<input id="money-field"
data-a-dec=","
data-a-sign="kg"
data-v-min="1"
data-v-max="100"
data-m-dec="3"
>Optionale Einstellungen zur Konfiguration von autoNumeric.
Diese JQuery-Instanz zum Verketten von Befehlen.
Beendet die Formattierung durch autoNumeric.
Diese JQuery-Instanz zum Verketten von Befehlen.
Methode, um den eigentlichen Zahlenwert eines Eingabefeldes zu erhalten, unabhängig der derzeitigen Formattierungseinstellungen.
Der aktuelle Wert, im Format nnnn.nn mit einem Punkt als Dezimatrennzeichen.
Nutzt die Methode serializeArray von jQuery, welche ein Feld mit Objekten zurückliefert und als JSON-String
enkodiert werden kann.
Die Werte, im Format nnnn.nn mit einem Punkt als Dezimatrennzeichen.
Die aktuellen Einstellungen von autoNumeric. Kann für die Entwicklung nützlich sein.
Nutzt die Methode serialize von jQuery, welche aus einer Menge von Formularelementen eine URL-enkodierte
Zeichenkette erzeugt, die abgesendet werden kann. Diese Methode sorgt dafür, dass nicht die formattieren Werte
genutzt werden, sondern die formatunabhängigen.
Die Werte, im Format nnnn.nn mit einem Punkt als Dezimatrennzeichen.
Initialisiert autoNumeric. Muss aufgerufen werden, bevor die anderen Methoden genutzt werden können.
Optionale Einstellungen für autoNumeric.
Diese JQuery-Instanz zum Verketten von Befehlen.
Setzt den Wert des Eingabefelds auf den gegebenen Wert. Der Wert wird anhand der aktuellen Formattierungseinstellungen entsprechend formattiert angezeigt.
Die neue Zahl oder der neue Wert für das Eingabefeld.
Diese JQuery-Instanz zum Verketten von Befehlen.
Aktualisiert eine oder mehrere Formattierungseinstellungen.
Neue zu setzende Formattierungseinstellungen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Sollte nur auf Texteingabefelder angewendet werden.
Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus einer Datenbankabfrage genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.
Die Datenbankabfrage wird asynchron über AJAX ausgeführt. Datenbankabfragen können im Backend von XIMA FORMCYCLE konfiguriert werden.
Der gegebene Datenbankspaltenname wird als Anzeigetext der Option genommen; und auch als der Wert, der beim Absenden des Formulars mitgesendet wird. Diese Funktion beschränkt die Datenbankabfrage auf diese Spalte. Somit wird die Menge der zu übertragenden Daten reduziert. Dies beschleunigt den Vorgang bei großen Datenbanktabellen.
Die Datenbankabfrage muss genau einen Parameter in Form eines Fragezeichens (?) besitzen. Dieser Parameter wird
mit dem Text ersetzt, den der Nutzer bisher in das Eingabefeld eingegeben hat. Es müssen hierbei keine
Anführungszeichen oder Maskierungszeichen verwendet werden. Die Datenbankabfrage wird als vorbereitete Anweisung
ausgeführt.
Beispiel Länder
Angenommen, es wurde im Backend eine Datenbankabfrage mit dem Namen LandNamen angelegt. Die Abfrage
könnte etwa wie folgt aussehen:
SELECT code, de FROM demo.countries where de like concat('%',?,'%');Um nun diese Abfrage mit dem Eingabefeld namens tfLand zu nutzen:
$('[name="tfLand"]').autocompleteDB("LandNamen", "de");Wenn der Nutzer nun den Text An eingibt, liefert die Datenbankabfrage alle Länder zurück, die mit An
beginnen. Diese werden dem Nutzer als mögliche Vorschläge angezeigt: Andorra, Angola, Anguilla,
Antarktika, Antigua und Barbuda.
Beispiel mit Rückruffunktion
function codeSetzen(event, ui){
$('[name=tfLandercode]').val(ui.item.code)
}
$('[name=tfLander]').autocompleteDB("LandNamen", "de", codeSetzen);Wie im oberen Beispiel wird die Autovervollständigung initialisert. Zusätzlich wird noch bei Auswahl einer Option
aus der Länderliste aber noch eine weitere Funktion ausgeführt werden. In dieser Funktion wird nun auf das
ausgewählte Element zugegriffen (ui.item) und der Wert der Spalte code ausgelesen (ui.item.code). Dieser
Wert entspricht dem Wert aus der Spalte code aus der Datenbankabfrage der Länder. Schließlich wird dieser
Ländercode in ein Textfeld mit dem Namen tfLandercode für die weitere Verarbeitung geschrieben.
Name der Datenbankabfrage. Datenbankabfragen können im Backend von XIMA FORMCYCLE angelegt werden.
Name der Datenbankspalte. Rückfallwert is label. Diese wird sowohl zum Anzeigen genutzt als auch
als der Wert, der beim Absenden des Formulars übertragen wird.
Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.
Diese JQuery-Instanz zum Verketten von Befehlen.
Sollte nur auf Texteingabefelder angewendet werden.
Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus einer Datenbankabfrage genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.
Die Datenbankabfrage wird asynchron über AJAX ausgeführt. Datenbankabfragen können im Backend von XIMA FORMCYCLE konfiguriert werden.
Es können zwei Datenbankspaltennamen angegeben werden. Die eine Spalte wird als Anzeigetext der Option genommen. Die andere Spalte wird verwendet als der Wert, der beim Absenden des Formulars mitgesendet wird. Diese Funktion beschränkt die Datenbankabfrage auf diese beiden Spalten. Somit wird die Menge der zu übertragenden Daten reduziert. Dies beschleunigt den Vorgang bei großen Datenbanktabellen.
Die Datenbankabfrage muss wenigstens einen Parameter in Form eines Fragezeichens (?) besitzen. Dieser Parameter
wird mit dem Text ersetzt, den der Nutzer bisher in das Eingabefeld eingegeben hat. Es müssen hierbei keine
Anführungszeichen oder Maskierungszeichen verwendet werden. Die Datenbankabfrage wird als vorbereitete Anweisung
ausgeführt. Enthält die Abfrage weitere Parameter, müssen für diese Werte an diese Funktion übergeben werden.
Andernfalls schlägt die Abfrage fehl.
Beispiel Länder
Angenommen, es wurde im Backend eine Datenbankabfrage mit dem Namen LandNamen angelegt. Die Abfrage
könnte etwa wie folgt aussehen:
SELECT code, de FROM demo.countries where de like concat('%',?,'%');Um nun diese Abfrage mit dem Eingabefeld namens tfLand zu nutzen:
$('[name="tfLand"]').autocompleteDB("LandNamen", "de");Wenn der Nutzer nun den Text An eingibt, liefert die Datenbankabfrage alle Länder zurück, die mit An
beginnen. Diese werden dem Nutzer als mögliche Vorschläge angezeigt: Andorra, Angola, Anguilla,
Antarktika, Antigua und Barbuda.
Beispiel mit Rückruffunktion
function codeSetzen(event, ui){
$('[name=tfLandercode]').val(ui.item.code)
}
$('[name=tfLander]').autocompleteDB("LandNamen", "de", codeSetzen);Wie im oberen Beispiel wird die Autovervollständigung initialisert. Zusätzlich wird noch bei Auswahl einer Option
aus der Länderliste aber noch eine weitere Funktion ausgeführt werden. In dieser Funktion wird nun auf das
ausgewählte Element zugegriffen (ui.item) und der Wert der Spalte code ausgelesen (ui.item.code). Dieser
Wert entspricht dem Wert aus der Spalte code aus der Datenbankabfrage der Länder. Schließlich wird dieser
Ländercode in ein Textfeld mit dem Namen tfLandercode für die weitere Verarbeitung geschrieben.
Name der Datenbankabfrage. Datenbankabfragen können im Backend von XIMA FORMCYCLE angelegt werden.
Name der Datenbankspalte, die als Text genutzt wird, der dem Nutzer angezeigt wird.
Name der Datenbankspalte, die als Wert genutzt wird, der beim Absenden des Formulars übertragen wird.
Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.
Weitere Parameter für die Datenbankabfrage. Kann ein einzelner Wert oder ein
Feld von Werten sein, es werden alle angegebenen Wert als Parameter übertragen. Bei undefined wird
ein leerer Wert übertragen. Bei einem String wird der String selbst übertragen. Bei Zahlen und
Wahrheitswerden wird die String-Repräsentation der Zahl beziehungsweise des Wahrheitswerts übertragen.
Bei einer JQuery-Instanz werden die Werte aller HTML-Elemente in der JQuery-Selektion übertragen. Bei einem
HTMLElement: (1) wenn es ein Checkbox- oder Radio-Input-Element ist, wird der Wert der Checkbox oder des Radiobuttons
übertragen, falls selektiert, (2) wenn es ein File-Input-Element ist, werden die Namen aller Dateien übertragen oder
der leere String, falls keine Datei ausgewählt ist, (3) bei anderen Input-Elementen wird der Wert des Input-Elements übertragen,
(4) wenn es ein Select- oder Textarea-Element ist, wird der Wert via $.fn.val ermittelt und übertragen, (5) bei anderen
Elementen wird nach Kinderelementen vom Type input, textarea und select gesucht und deren Werte übertragen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Sollte nur auf Texteingabefelder angewendet werden.
Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus einem LDAP
(Lightweight Directory Access Protocol) genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage
kommenden Optionen angezeigt.
Die LDAP-Abfrage wird asynchron über AJAX ausgeführt. LDAP-Abfrage können im Backend von XIMA FORMCYCLE konfiguriert werden.
Die gegebene LDAP-Eigenschaft wird als Anzeigetext der Option genommen; und auch als der Wert, der beim Absenden des Formulars mitgesendet wird. Diese Funktion beschränkt die LDAP-Abfrage auf diese Eigenschaft. Somit wird die Menge der zu übertragenden Daten reduziert und der Vorgang beschleunigt.
Die LDAP-Abfrage muss genau einen Parameter in Form eines Fragezeichens (?) besitzen. Dieser Parameter wird
mit dem Text ersetzt, den der Nutzer bisher in das Eingabefeld eingegeben hat.
Beispiel
Angenommen, es wurde im Backend eine LDAP-Abfrage mit dem Namen Angestellte angelegt. Die Abfrage
könnte etwa wie folgt aussehen:
BaseDN: ou="employees", ou="company", dc="company", dc="com"
Query : (userPrincipalName=*?*)Um nun diese Abfrage mit dem Eingabefeld namens tfAngestellte zu nutzen:
$('[name="tfAngestellte"]').autocompleteLDAP("Angestellte", "name.full");Wenn der Nutzer nun den Text Peter eingibt, liefert die LDAP-Abfrage alle Angestellten zurück, deren Name
Peter enthält. Diese werden dem Nutzer als mögliche Vorschläge angezeigt: Peter Müller, Peter Schmidt,
Peter Fischer, Peter Weber.
Name der LDAP-Abfrage. LDAP-Abfragen können im Backend von XIMA FORMCYCLE angelegt werden.
Name eines LDAP-Attributs. Rückfallwert is label. Dieses wird sowohl zum Anzeigen genutzt als auch
als der Wert, der beim Absenden des Formulars übertragen wird. Um eine verschachtelte Eigenschaft anzugeben,
werden die Bestandteile mit einem Punkt getrennt, z.B.: name.full oder location.city.
Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.
Diese JQuery-Instanz zum Verketten von Befehlen.
Sollte nur auf Texteingabefelder angewendet werden.
Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus einem LDAP
(Lightweight Directory Access Protocol) genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage
kommenden Optionen angezeigt.
Die LDAP-Abfrage wird asynchron über AJAX ausgeführt. LDAP-Abfrage können im Backend von XIMA FORMCYCLE konfiguriert werden.
Es können zwei LDAP-Eigenschaften angegeben werden. Die eine Eigenschaft wird als Anzeigetext der Option genommen. Die andere Eigenschaft wird verwendet als der Wert, der beim Absenden des Formulars mitgesendet wird. Diese Funktion beschränkt die Datenbankabfrage auf diese beiden Eigenschaften. Somit wird die Menge der zu übertragenden Daten reduziert. Dies beschleunigt den Vorgang bei großen Datenbanktabellen.
Die LDAP-Abfrage muss wenigstens einen Parameter in Form eines Fragezeichens (?) besitzen. Dieser Parameter
wird mit dem Text ersetzt, den der Nutzer bisher in das Eingabefeld eingegeben hat. Enthält die Abfrage weitere
Parameter, müssen für diese Werte an diese Funktion übergeben werden. Andernfalls schlägt die Abfrage fehl.
Beispiel
Angenommen, es wurde im Backend eine LDAP-Abfrage mit dem Namen Angestellte angelegt. Die Abfrage
könnte etwa wie folgt aussehen:
BaseDN: ou="employees", ou="company", dc="company", dc="com"
Query : (userPrincipalName=*?*)Um nun diese Abfrage mit dem Eingabefeld namens tfAngestellte zu nutzen:
$('[name="tfAngestellte"]').autocompleteLDAP("Angestellte", "name.full", "accountName");Wenn der Nutzer nun den Text Peter eingibt, liefert die LDAP-Abfrage alle Angestellten zurück, deren Name
Peter enthält. Diese werden dem Nutzer als mögliche Vorschläge angezeigt: Peter Müller, Peter Schmidt,
Peter Fischer, Peter Weber. Angezeigt werden dem Nutzer Vor- und Nachname der Angestellten, beim Absenden
wird der Name des jeweiligen Nutzerkontos übertragen.
Name der LDAP-Abfrage. LDAP-Abfragen können im Backend von XIMA FORMCYCLE angelegt werden.
Name eines LDAP-Attributs, dessen Wert dem Nutzer angezeigt wird. Um eine verschachtelte Eigenschaft
anzugeben, werden die Bestandteile mit einem Punkt getrennt, z.B.: name.full oder location.city.
Name eines LDAP-Attributs, dessen Wert beim Absenden des Formulars übertragen wird. Um eine
verschachtelte Eigenschaft anzugeben, werden die Bestandteile mit einem Punkt getrennt, z.B.: name.full oder
location.city.
Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.
Weitere Parameter für die LDAP-Abfrage. Kann ein einzelner Wert oder ein
Feld von Werten sein, es werden alle angegebenen Wert als Parameter übertragen. Bei undefined wird
ein leerer Wert übertragen. Bei einem String wird der String selbst übertragen. Bei Zahlen und
Wahrheitswerden wird die String-Repräsentation der Zahl beziehungsweise des Wahrheitswerts übertragen.
Bei einer JQuery-Instanz werden die Werte aller HTML-Elemente in der JQuery-Selektion übertragen. Bei einem
HTMLElement: (1) wenn es ein Checkbox- oder Radio-Input-Element ist, wird der Wert der Checkbox oder des Radiobuttons
übertragen, falls selektiert, (2) wenn es ein File-Input-Element ist, werden die Namen aller Dateien übertragen oder
der leere String, falls keine Datei ausgewählt ist, (3) bei anderen Input-Elementen wird der Wert des Input-Elements übertragen,
(4) wenn es ein Select- oder Textarea-Element ist, wird der Wert via $.fn.val ermittelt und übertragen, (5) bei anderen
Elementen wird nach Kinderelementen vom Type input, textarea und select gesucht und deren Werte übertragen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Sollte nur auf Texteingabefelder angewendet werden.
Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus dem Resultat einer HTTP-Abfrage genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.
Dieser Methode erlaubt es, eine eigene URL anzugeben. Zum Ausführen von Datenbank- und LDAP-Abfragen, die im Backend von XIMA FORMCYCLE erstellt wurden, sollte JQuery.autocompleteDB beziehungsweise JQuery.autocompleteLDAP verwendet werden.
URL, die für die Abfrage verwendet werden soll. Normalerweise sollten hierfür die URLs aus
XFC_METADATA.urls verwendet werden, beispielsweise XFC_METADATA.urls.dataquery_ldap oder
XFC_METADATA.urls.dataquery_db.
Name der Abfrage. LDAP und Datenbankabfrage können im Backend von XIMA FORMCYCLE erstellt werden.
Name eines Felds für das Label und den Wert, wie etwa eine Datenbankspalte oder ein LDAP-Attribut.
Rückfallwert is label. Dieses wird sowohl zum Anzeigen genutzt als als der Wert, der beim Absenden des Formulars
übertragen wird.
Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.
Sollte nur auf Texteingabefelder angewendet werden.
Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus dem Resultat einer HTTP-Abfrage genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.
Dieser Methode erlaubt es, eine eigene URL anzugeben. Zum Ausführen von Datenbank- und LDAP-Abfragen, die im Backend von XIMA FORMCYCLE erstellt wurden, sollte JQuery.autocompleteDB beziehungsweise JQuery.autocompleteLDAP verwendet werden.
URL, die für die Abfrage verwendet werden soll. Normalerweise sollten hierfür die URLs aus
XFC_METADATA.urls verwendet werden, beispielsweise XFC_METADATA.urls.dataquery_ldap oder
XFC_METADATA.urls.dataquery_db.
Name der Abfrage. LDAP und Datenbankabfrage können im Backend von XIMA FORMCYCLE erstellt werden.
Name des Felds für den Anzeigetext, wie etwa eine Datenbankspalte oder ein LDAP-Attribut. Dieser Wert wird dem Nutzer als Auswahloption angezeigt.
Name des Felds für den Wert, wie etwa eine Datenbankspalte oder ein LDAP-Attribut. Der Wert wird beim Absenden des Formulars übertragen.
Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.
Weitere Parameter für die Abfrage. Kann ein einzelner Wert oder ein
Feld von Werten sein, es werden alle angegebenen Wert als Parameter übertragen. Bei undefined wird
ein leerer Wert übertragen. Bei einem String wird der String selbst übertragen. Bei Zahlen und
Wahrheitswerden wird die String-Repräsentation der Zahl beziehungsweise des Wahrheitswerts übertragen.
Bei einer JQuery-Instanz werden die Werte aller HTML-Elemente in der JQuery-Selektion übertragen. Bei einem
HTMLElement: (1) wenn es ein Checkbox- oder Radio-Input-Element ist, wird der Wert der Checkbox oder des Radiobuttons
übertragen, falls selektiert, (2) wenn es ein File-Input-Element ist, werden die Namen aller Dateien übertragen oder
der leere String, falls keine Datei ausgewählt ist, (3) bei anderen Input-Elementen wird der Wert des Input-Elements übertragen,
(4) wenn es ein Select- oder Textarea-Element ist, wird der Wert via $.fn.val ermittelt und übertragen, (5) bei anderen
Elementen wird nach Kinderelementen vom Type input, textarea und select gesucht und deren Werte übertragen.
Löscht den Wert dieses Formularfeldes. Bei Texteingabefeldern wird der Text geleert, bei Auswahlfeldern alle ausgewählten Optionen deselektiert.
Das Formularfeld wird nach dem Leeren nicht validiert. Falls es sich um ein Mussfeld handelt, wird daher keine
Fehlermeldung angzeigt. Die Validierung kann mittels der Funktion validate angestoßen werden.
// Setzt den Wert des Eingabefelds "tf1" auf "Hallo Welt!"
// Dies geschieht normalerweise durch den Nutzer
$('[name="tf1"').val("Hallo Welt!") ;
// Löscht den eingebenen Text
$('[name="tf1"').clear();
// Validiert das Textfeld. Falls es ein Mussfeld ist, wird nun eine Fehlernachricht angezeigt.
$('[name="tf1"').validate();Diese JQuery-Instanz zum Verketten von Befehlen.
Diese Funktion kann verwendet werden mit Auswahlfeldern, die als Combobox dargestellt werden.
Im Designer kann die Autovervollständigung für Auswahlfelder auch direkt über die Oberfläche aktiviert werden. Rechts im Eigenschaftsbereich unter Grundeinstellungen kann dazu die entsprechende Checkbox aktiviert werden.
Das Auswahlfeld wird in ein Texteingabefeld umgewandelt. Während der Nutzer nun Text eingibt, wird ihm
automatisch eine Liste mit in Frage kommenden Möglichkeiten angezeigt. Derzeit wird für diese Funktionalität das
jQueryUI-Widget autocomplete verwendet.
// Wandelt das Auswahlfeld "sel1" in ein Eingabefeld mit Autovervollständigung um.
$('[name="sel1"]').cob2auto();Optional Einstellungen für die Autovervollständigung.
Diese JQuery-Instanz zum Verketten von Befehlen.
Initializes the jQuery counter plugin on an element.
This jQuery Word and character counter plug-in allows you to count characters or words, up or down. You can set a minimum or maximum goal for the counter to reach.
Optional settings for the plugin.
Diese JQuery-Instanz zum Verketten von Befehlen.
Schaltet ein Formularelement wiederholbar, sodass der Nutzer nun eine beliebige Anzahl an Kopien anlegen kann. Etwa kann ein E-Mail-Feld wiederholbar geschaltet werden, sodass der Nutzer eine oder mehrere E-Mail-Adressen eingeben kann.
Um wiederholte erzeugte Elemente zu selektieren, sollte das Attribut org_name statt name verwendet werden.
// Schaltet Formularfeld "tfMail" wiederholbar
$("[name="tfMail"").dynamic();
// Zugriff auf den Wert des ersten wiederholten Elements.
$("[org_name="tfMail"").first().val();Jedes einzelne wiederholbare Element befindet sich in einem DIV-Container mit der Klasse dynamic-row. Dieser
Container wird an die Rückruffunktionen afterAdd, afterDel, beforeAdd, beforeDel und changeRowSize
übergeben.
Falls Formularfelder über JavaScript initialisiert werden sollen, z.B. mit der Funktion cob2auto oder
errorFunc, kann die Initialisierung erst erfolgen, nachdem das Formularfeld wiederholbar erzeugt wurde. Dies
kann wie folgt geschehen:
// Auswahl mit allen Personen wiederholbar schalten
$('[name="selPersonen"]').dynamic({
// Rückrüffunktion, wenn ein neues Element erzeugt wurde
afterAdd: function(_, item) {
// Das eigentliche Formularelement im DIV-Container selektieren
var element = item.find('.XItem');
// Nun kann das Element initialisiert werden, z.B.
element.cob2auto();
}
});Elemente können auch direkt im Designer wiederholbar geschaltet werden. Dies geschieht unter den Grundeigeschaften des Eigenschaftsbereichs eines Elements. Dort können auch die Mindestzahl und Höchstzahl wiederholbarer Elemente sowie ein Auslösungselement (trigger) eingestellt werden. Für fortgeschrittene Anwendungsfälle können Elemente über JavaScript mit dieser Method wiederholbar geschaltet werden.
Optionen für das wiederholbare Formularfeld, z.B. um zu steuern, wieviele wiederholte erzeugte Elemente erlaubt sind oder um Rückruffunktionen zu definieren.
Diese JQuery-Instanz zum Verketten von Befehlen.
Für ein wiederholbares Element: Erhöht die Anzahl wiederholter Element um eins, erzeugt ein neues Formularelement. Dieses wird am Ende der bereits existierenden wiederholten Elemente hinzugefügt. Das Aufrufen dieser Methode hat die gleiche Auswirkung wie das Betätigen des Plus-Knopfs.
// Formularelement "tfMail" wiederholbar schalten
$("[data-name='tfMail']").dynamic();
// ...
// Ein weiteres E-Mail-Eingabefeld erzeugen
$("[data-name='tfMail']").dynamic("addRow");Diese JQuery-Instanz zum Verketten von Befehlen.
Für ein wiederholbares Element: Entfernt ein wiederholtes Element. Gleiches Resultat wie das Betätigen des Minus-Knopfs am jeweiligen wiederholten Element.
// Formularelement "tfMail" dynamisch schalten
$("[data-name='tfMail']").dynamic();
// ...
// Das letzte E-Mail-Eingabefeld entfernen
$("[data-name='tfMail']").dynamic("removeRow");0-basierter Index des zu löschenden Elements. Wenn nicht übergeben, wird das letzte Element gelöscht.
Diese JQuery-Instanz zum Verketten von Befehlen.
Für ein wiederholbares Element: Ermittelt, wieviele wiederholte Elemente es aktuell gibt.
// Formularelement "tfMail" wiederholbar schalten
$("[data-name='tfMail']").dynamic({minSize: 3});
// Anzahl der Wiederholung ist initial 3
var repetitions = $("[data-name='tfMail']").dynamic("getRowSize");Die aktuelle Anzahl an wiederholten erzeugten Elementen.
Für ein wiederholbares Element: Erzeugt Formularelemente oder entfernt welche, sodass nun die übergebene Anzahl an wiederholten Formularelementen existiert.
// Schalte Formularfeld "tfMail" wiederholbar
$("[data-name='tfMail']").dynamic();
// Setze die Anzahl an wiederholten Formularelementen auf 5.
$("[data-name='tfMail']").dynamic("setRowSize", 5);Die neu zu setzende Anzahl an wiederholten Formularfeldern.
Diese JQuery-Instanz zum Verketten von Befehlen.
Markiert das Formularfeld als ungültig (wie die Funktion setError) und zeigt eine Fehlermeldung an (wie die
Funktion validate).
Die Funktion setError markiert ein Formularfeld nur als ungültig, zeigt aber nicht sofort eine Fehlermeldung
an. Die Fehlermeldung wird erst angezeigt, wenn der Nutzer mit dem Formularfeld interagiert (blur oder
change) beziehungsweise versucht, das Formular abzuschicken. Um die Fehlermeldung sofort anzuzeigen, kann die
Funktion validate benutzt werden. Diese Funktion erleichert dieses Vorgehen und zeigt sofort eine Fehlermeldung
an.
// Schreibt die Fehlermeldung "Ungültiger Wert" an das Element "tfIdNummer"
$('[data-name=tfIdNummer').error("Ungültiger Wert");Die Fehlermeldung, die angzeigt werden soll. Darf nicht der leere String sein.
Diese JQuery-Instanz zum Verketten von Befehlen.
Markiert das Formularfeld als gültig und entfernt die Fehlermeldung. Marks the form field as valid and removes the error message.
Die Funktion setError markiert ein Formularfeld nur als gültig, entfernt aber nicht sofort die Fehlermeldung.
Die Fehlermeldung wird erst entfernt, wenn der Nutzer mit dem Formularfeld interagiert (blur oder
change) beziehungsweise versucht, das Formular abzuschicken. Um die Fehlermeldung sofort zu entfernen, kann die
Funktion validate benutzt werden. Diese Funktion erleichert dieses Vorgehen und entfernt sofort die
Fehlermeldung an.
// Entfernt die Fehlermeldung vom Element "tfIdNummer"
$('[name=tfIdNummer').error();Diese JQuery-Instanz zum Verketten von Befehlen.
Fügt diesem Formularfeld eine Validierungsfunktion hinzu. Die Validierungsfunktion kann benutzt werden, um eigene Logik für die Validierung zu implementieren.
Die Validierungsfunktion wird jedesmal aufgerufen, wenn sich der Wert des Formularfelds geändert hat oder eine Validierung erforderlich ist, etwa beim Absenden des Formulars.
Sind mehere Validierungsfunktionen festgelegt, so werden alle Validierungsfunktionen bei der Validierung aufgerufen und alle Fehlermeldungen angezeigt.
Es ist zu beachten, dass zwischen Mussfelder und Datenvalidierung unterschieden wird. Hat ein Mussfeld keinen Wert, ist das Formularfeld ungültig. Erst wenn in einem Mussfeld ein Wert eingetragen wurde, wird die Datenvalidierung gestartet und geprüft, ob die eingegebenen Daten gültig sind. Die Validierungsfunktion wird erst während der Datenvalidierung aufgerufen. Hat ein Mussfeld also keinen Wert, wird immer eine Fehlermeldung angezeigt, unabhängig der festgelegten Validierungsfunktionen.
// Der Datentyp des Felds 'tfEmail' wurde auf 'E-Mail' gesetzt.
// Wir fügen eine zusätzliche Bedingung hinzu: Der Host muss entweder 'example.com' oder 'example.de' lauten.
$('[name="tfEmail"]').errorFunc(function() {
var value = String(this.val() || "");
var hostIndex = value.indexOf("@");
var host = hostIndex >= 0 ? value.substr(hostIndex + 1) : "";
if (host === "example.com" || host === "example.de") return "";
return "Der Host muss entweder example.de oder example.com lauten!";
});Validierungsfunktion, welche während der Validierung aufgerufen wird. Ist das Formularfeld ungültig, muss diese Validierungsfunktion eine nichtleere Zeichenkette mit der Fehlermeldung zurückgegben. Ist das Formularfeld gültig, muss diese Validierungsfunktion die leere Zeichnkette zurückgeben.
Diese JQuery-Instanz zum Verketten von Befehlen.
Jedes Formularfeld besteht aus mehreren Elementen, etwa Leittexten (label), Eingabefeldern und Fehlertexten.
Diese befinden sich alle in einem Container-Element. Diese Funktion liefert dieses Container-Element zurück.
Container-Elemente sind DIV-Elemente mit der CSS-Klasse xm-item-div. Zudem hat ein Container-Element das
Attribute xn mit dem Namen des Formularelements.
Für ein Texteingabeld namens tfName liefert $("[data-name='tfName']") etwa das folgende HTML-Element zurück
<input id="xi-tf-16" name="tfName" class="XItem XTextField" title type="text">Und das Suchen des Containers mittels $("[data-name='tfName']").getContainer() liefert etwa folgendes HTML-Element:
<div class="xm-item-div label-top CXTextField ctfName" cn="XTextField" data-xi="xi-tf-8" data-xn="tfName">
...
<input id="xi-tf-16" name="tfName" class="XItem XTextField" title type="text">
...
</div>Verhalten für wiederholte Elemente
Ein wiederholtes Formularelement ist ein Element, von dem ein Nutzer eine oder mehrere Kopien erstellen kann.
Wiederholte Felder werden für die Eingabe von dynamischen Datensätzen verwendet, etwa für die Adressdaten
mehrerer Personen. Das Element mit der Klasse xm-item-div ist der Container, welcher alle dynamisch erzeugten
Elemente enthält. Jedes erzeugte dynamische Element wiederum befindet sich in einem Container mit der Klasse
dynamic-row. Standardmäßig liefert diese Methode immer diesen xm-item-div Container zurück. Ist das
optional boolesche Flag returnRepetitionContainer auf true gesetzt, wird stattdessen die dynamic-row
zurückgegeben. Falls beispielsweise das Textfeld mit dem Namen tfMail wiederholt ist, dann selektiert
$("[data-org-name='tfMail']).eq(1) das zweite dynamisch erzeugte Textfeld und
$("[data-org-name='tfMail']).eq(1).getContainer() dementsprechend die zweite dynamic-row innerhalb des
xm-item-div.
<div class="xm-item-div label-top CXTextField ctfMail" data-cn="XTextField"
data-xi="xi-tf-2" data-xn="tfMail" id="xi-tf-2-xc" data-name="tfMail">
<div data-dynamic-row="0" class="dynamic-row" id="xi-tf-8-xc_c_0">
<input id="xi-tf-8" name="tfMail_dyn_tfMail_0" class="XItem XTextField" type="text">
</div>
<div data-dynamic-row="1" class="dynamic-row" id="xi-tf-8-xc_c_1">
<input id="xi-tf-8" name="tfMail_dyn_tfMail_1" class="XItem XTextField" type="text">
</div>
<!-- ... -->
</div>true um den Container einer Elementwiederholung zurückzugeben (falls das
selektierte Element ein wiederholtes Element ist), false um immer den Hauptcontainer mit der Klasse
xm-item-div zurückzugeben. Wenn nicht angegeben, ist der Standardwert false.
Das Container-Element des Formularfelds. Wenn es sich nicht um ein Formularfeld handelt und somit kein Container gefunden werden kann, eine leere JQuery-Instanz.
Jedes Formularfeld besteht aus mehreren Elementen, etwa Leittexten (label), Eingabefeldern und Fehlertexten.
Formularfelder zum Eingeben von Daten wie Texteingabefelder oder Auswahlfelder haben einen Leittext. Diese
Funktion liefert dieses Leittext-Element zurück.
// Liefert vom Eingabefeld "tfMail" den Text des Labels zurück, z.B. "Ihre E-Mail-Addresse"
$("[data-name='tfMail']").getLabel().text();
// Liefert von einem wiederholten Element "tfAngestellte" den Text des
// zweiten Labels zurück, z.B. "Name des 2. Angestellten"
$($('[data-org-name=tfAngestellte]').get(1)).getLabel().text();Ein Feld mit allen Leittext-Elementen (label) der Formularfelder. Wenn ein Formuarfeld keine Leittext
hat, wird kein Eintrag in das Feld geschrieben.
Prüft, ob an dem Element ein HTML-Attribut mit dem gegebenen Namen existiert.
Falls etwa folgendes HTML vorliegt:
<input name="tfMail" placeholder></input>Dann verhält sich diese Funktion wie folgt:
$("[data-name='tfMail']").hasAttr("name"); // true
$("[data-name='tfMail']").hasAttr("placeholder"); // true
$("[data-name='tfMail']").hasAttr("id"); // falseNames des zu prüfenden HTML-Attributs.
Ob das Element ein Attribut mit dem gegebenen Name hat.
Wandelt ein Eingabefeld (input oder textarea) in ein jSignature-Feld um. Hier kann der Nutzer dann eine
handschriftliche Unterschrift mit der Maus oder einem Stift auf einem berührungsempfindlichen Bildschirm
eingeben.
Optionale Einstellungen für jSignature, etwa Strichfarbe oder Strichbreite.
Diese JQuery-Instanz zum Verketten von Befehlen.
Wandelt ein Eingabefeld (input oder textarea) in ein jSignature-Feld um. Hier kann der Nutzer dann eine
handschriftliche Unterschrift mit der Maus oder einem Stift auf einem berührungsempfindlichen Bildschirm
eingeben.
Optionale Einstellungen für jSignature, etwa Strichfarbe oder Strichbreite.
Diese JQuery-Instanz zum Verketten von Befehlen.
Leert das Unterschriftenfeld und den Datenspeicher. Stellt auch die Unterschriftenlinie und andere Dekorelemente wieder her.
Diese JQuery-Instanz zum Verketten von Befehlen.
Zerstört diese jSignature-Instanz und stellt das ursprüngliche Eingabefeld wieder her.
Diese JQuery-Instanz zum Verketten von Befehlen.
Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.
Das Datenformat ist hierbei das von Canvas nativ genutzte Format - eine Daten-URL mit Base64-enkodierten
PNG-Bitmap-Informationen und sieht wie folgt aus: data:image/png;base64,i1234lkj123;k4;l1j34l1kj3j....
Die aktuelle Signatur als Daten-URL.
Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.
Das Datenformat ist hierbei das von jSignature verwendete Format zum Zeichnen von mehrere Strichen, also einem
Feld aus Objekten mit den Eigenschaften x und y, welche beide ein Feld aus Zahlen sind. Diese Datenstruktur
wurde mit dem Ziel gewählt, Geschwindigkeit und Effzienz beim Sammeln von Strichdatenpunkten zu erreichen. Auch
wenn es sich um eine weniger intuitive Datenstruktur handelt, so erlaubt sie (a) schnell neue Koordinaten
einzufügen, ohne für jede Koordinate ein neues Objekt erzeugen zu müssen und (b) eine einfache Iteration über die
Daten mittels Schleifen. Diese Datenstruktur könnte in einen JSON-String umgewandelt werden und zum Speichern
verwendet werden, allerdings wird davon abgeraten, da es sich um ein internes Format handelt, welche sich in
künftigen Versionen ändern kann. Für ein direktes, kompaktes Format, welches ähnlich zu JSON ist, wird base30
empfohlen. Dieses native Datenformat ist gut zum Ermitteln von statistischen Informatioen (Strichanzahl, Position
der Unterschrift auf dem Canvas) und um Striche zu editieren (wie etwa zum Rückgängigmachen des letzten
gezeichneten Strichs).
Die aktuelle Signatur.
Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.
Dieses Datenformat ist ein an Base64 orientiertes komprimiertes Format mit dem Ziele hoher Kompaktheit und
nativer URL-Kompatibilität. Es handelt sich um eine native Datenstruktur aller Vektoren, welche in eine kompakte
Zeichenkettendarstellung umgewandelt wird. Eine mögliche Weise zum Übertragen der Daten auf den Server besteht
im Format JSONP, welches in der Praxis eine URL-Längenbeschränkung von 2000 Zeichen aufweist (falls IE
unterstützt wird). Dieses Kompressionsformat ist nativ URL-kompatibel und benötigt keine zusätzliche Maskierung
von Sonderzeichen und benötigt zugleich auf für komplexe Unterschriften nicht mehr als 2000 Zeichen.
Die aktuelle Signatur.
Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.
Dieses Datenformat erzeugt aus der aktuellen Signatur ein SVG-Bild (SVG XML text). Alle Striche werden von Rauschen befreit und geglättet. Dieses Format stellt einen Kompromiss zwischen "einfach zum Anschauen" und "hochgradig skalierbar" dar. Die meisten aktuellen Browser unterstützen direkt das Anschauen von SVG-Bildern und zudem kann dieses Format grenzenlos skaliert und für den Druck aufbereitet werden. Die Daten liegen als schlichter Text (plain text) vor und können daher einfach übertragen und gespeichert werden.
Die aktuelle Signatur.
Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.
Ahnliche Funktionalität wie das Datenformat "svg", mit dem Unterschied, dass der SVG XML text als Base64
komprimiert wird. Obwohl die meisten Browser nun über native Base64-Enkodierer verfügen (btoa()), gibt es
einige Browser wie den Internet Explorer, welche dies darüber nicht verfügen. Für solche Browser wird daher
eine eigene software-seitige Implementierung von btoa() benutzt, falls diese Funktion nicht zur Verfügung
steht.
Die aktuelle Signatur.
Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.
Dieses Format ist ähnlich dem Format native, aber in seine Bestandteile zerlegt, sodass der Mime-Type und
die Daten separate Einträge in einer Feldstruktur sind, ähnlich wie beim Format svg.
Das Datenformat sieht beispielsweise wie folgt aus:
["image/png;base64","i123i412i341jijalsdfjijl234123i..."]Da der Bildexport vom Browser-Support abhängt und mehr Daten als notwendig zurückliefert, wird dieses Format nur zum Testen und zur Entwicklung empfohlen.
Die aktuelle Signatur.
Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.
Datenformat, in dem die zurückgelieferten Daten formatiert sein sollen.
Die aktuelle Signatur.
Daten der Unterschrift, die gesetzt werden soll.
Diese JQuery-Instanz zum Verketten von Befehlen.
Daten der Unterschrift, die gesetzt werden soll.
Diese JQuery-Instanz zum Verketten von Befehlen.
Daten der Unterschrift, die gesetzt werden soll. Das Datenformat wird aus dem ersten Element des Felds genommen. Das zweite Element stellt die eigentlichen Daten dar.
Optional. Wenn gegeben, muss es mit dem ersten Eintrag des Felds des Parameters dataObject
übereinstimmen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Daten der Unterschrift, die gesetzt werden soll. Muss in dem angegebenen Format formattiert sein.
Datenformat der Daten.
Diese JQuery-Instanz zum Verketten von Befehlen.
Listet alle Plugin auf, die zum Exportieren beziehungszweise zum Importieren der Unterschriftsdaten zur Verfügung stehen.
Kategorie der zurückzulieferenden Plugins, entweder import oder export.
Eine Liste mit allen Plugins der gegebenen Kategorie.
Markiert das Canvas als schreibgeschützt und deaktiviert die jSignature-Schalftflächen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Hebt den Schreibschutzt des Canvas auf und aktiviert die jSignature-Schalftflächen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Prüft, ob seit der Initialisierung eine Eingabe am Unterschriftenfeld getätigt wurden.
true, falls die Unterschrift geändert wurde, andernfalls false.
Die derzeitigen Einstellungen der jSignature-Instanz.
Setzt einen anderen Wert für die gegebene Einstellungen.
Dies ermöglicht es etwa, Einstellungen wie die Strichbreite oder die Linienfarbe zu ändern. Das dritte Argument legt fest, ob die Unterschrift sofort mit der Einstellungen aktualisiert werden soll. Das sofortige Anwenden der Einstellungen funktioniert derzeit nur mit einigen Einstellungen wie derFarbe.
Name der zu änderenden Einstellung.
Neuer Wert der Einstellung.
Wenn true, wird die geänderte Einstellungen sofort auf die aktuelle Unterschrift
angewendet. Wenn false, wird der neue Wert der Einstellung nur auf künftigen Striche angewendet.
Der neue Wert der Einstellung.
Muss direkt auf das Formularelement (FORM.xm-form) aufgerufen werden.
Erlaubt die Registrierung einer globalen Rückruffunktion, wenn ein neues wiederholbares Element erzeugt wurde. Ein wiederholbares Element erlaubt dem Nutzer, eine oder mehrere Kopien zu erzeugen, etwa zur Eingabe von mehreren E-Mail-Adressen.
Im Gegensatz zur Rückruffuntkion, die mittels dynamic registriert werden kann, wird diese Rückruffunktion
global für jedes dynamische Formularfeld im Formular aufgerufen. Das ist etwa nützlich, wenn ein Element über
den Designer wiederholbar geschaltet wird und nicht direkt mittels JavaScript.
// Neu hinzugefügte Formularfelder mit cob2auto initialisieren (Autovervollständigung)
$('FORM.xm-form').on("addRow", function(_, data) {
data.container.find(".XSelect").cob2auto();
});Der Name des Ereignisses, also addRow.
Rückruffunktion für das Ereignis beim Hinzufügen eines Elements. Sie erhält als Parameter das
auslösende Ereignis (meistens click) und den Container mit dem dynamisch erzeugten Element.
Diese JQuery-Instanz zum Verketten von Befehlen.
Muss direkt auf das Formularelement (FORM.xm-form) aufgerufen werden.
Erlaubt die Registrierung einer globalen Rückruffunktion, wenn ein wiederholbares Element entfernt wurde. Ein wiederholbares Element erlaubt dem Nutzer, eine oder mehrere Kopien zu erzeugen, etwa zur Eingabe von mehreren E-Mail-Adressen.
Im Gegensatz zur Rückruffuntkion, die mittels dynamic registriert werden kann, wird diese Rückruffunktion
global für jedes wiederholbare Formularfeld im Formular aufgerufen. Das ist etwa nützlich, wenn ein Element über
den Designer wiederholbar geschaltet wird und nicht direkt mittels JavaScript.
// Beim Entfernen eines Elements die Versandkosten neu berechnen
$('FORM.xm-form').on("delRow", function(_, data) {
recalculateVersandkosten();
});Der Name des Ereignisses, also delRow.
Rückruffunktion, wenn ein dynamisches Element entfernt wurde. Sie erhält als Parameter das
auslösende Ereigniss (meist click) und den (nicht mehr im DOM eingehängten) Container mit dem entfernten
dynamischen Element.
Diese JQuery-Instanz zum Verketten von Befehlen.
Erlaubt es, eine Rückruffunktion zu registrieren, welche aufgerufen wird, sobald dass Formular vollständig dargestellt und initialisiert wurde.
Der Name des Ereignisses, also ready.
Rückruffunktion, welche aufgerufen wird, sobald dass Formular vollständig dargestellt und initialisiert wurde.
Entfernt das kleine rote Sternchen neben dem Leittext eines Formularfelds, welches angibt, ob es sich bei dem Formularfeld um ein Mussfeld handelt.
Derzeit ist dieses Sternchen mittels eines SPAN-Elements mit der Klasse required-star umgesetzt, dies kann
sich allerdings ändern.
<span class="required-star">*</span>Beispiel:
// Entfernt das Sternchen vom Leittext des Formularfelds "tfName".
$('input[name=tfName]').removeStar();Diese Funktion beeinflusst nur das Aussehen, ändert aber nicht, ob das Formularfeld ein Mussfeld ist. Ist das
Eingabefeld leer, werden daher weiter Fehlermeldungen angezigt. Um zu ändern, ob das Feld ein Mussfeld ist, sollte
die Funktion setRequired benutzt werden.
Diese JQuery-Instanz zum Verketten von Befehlen.
Diese Methode ist veraltet und sollte nicht mehr benutzt werden, dass sie Formular anfällig für XSS-Angriffe (cross-site scripting) macht.
Es können etwa $.xutil.getFormParam und JQuery-Methoden wie $.fn.text genutzt werden, um Daten aus URL-Parametern in das Formular einzufügen.
Ersetzt im HTML eines Formularelement (innerHTML) Ausdrücke einer bestimmten Form mit Werten aus den
URL-Parametern der aktuellen URL, über die das Formular aufgerufen wurde.
Ausdrücke der folgenden Form, wobei KEY für den Namen des URL-Parameters steht, werden ersetzt:
{KEY}Für jeden URL-Parameter wird das erste Auftreten obigen Ausdrucks durch den Wert des URL-Parameters KEY
ersetzt. Angenommen, ein Formular wird aufgerufen über die URL
http://localhost/formcycle/form/provide/1?name=WeltIm Formular gibt es ein Textfeld mit dem Namen tfGruss und dem Label Hello, {name}!:
// Ersetzt im innerHTML-String des div-Container-Elements "{name}" durch "{world}".
$("[xn='tfGruss']").replaceParams();Somit lautet das Label des Eingabefelds nun Hallo, Welt!.
Diese JQuery-Instanz zum Verketten von Befehlen.
Ändert den Datentypen eines Texteingabefelds (einzeiliges Eingabefeld oder mehrzeiliges Eingabefeld). Die folgenden Datentypen stehen zur Verfügung:
22.05.1990.3, 0 oder -21.127.0.0.1 oder 10.42.42.13.2,00, -3,95, 0,00 oder 897345,38.0.03, -99.2 oder 42.0234995483 oder +49 351 4459654.02349. Prüft nicht, ob es solch eine Postleitzahl tatsächlich in Deutschland gibt.0, 3 oder 123.0,00 oder 2,34.0,00, 0, 3,4 oder 3.hh:mm, z.B. 22:05 or 03:42.http://example.com oder https://www.james.org.Beispiel:
// Prüft nun, ob eine gültige E-Mail-Adresse eingegeben wurde.
$('[name="tfMail"').setDataType("email")Beim Datentyp date wird ein Kalender zur Auswahl des Datums angezeigt. Wenn der Datentyp auf ein Datum gesetzt
wurde und nun der Datentyp per JavaScript geändert wird, erscheint immer noch ein Kalender. Wenn der Datentyp im
Designer auf einen anderen Wert gesetzt wurde und nun per JavaScript auf ein Datum geändert wird, erscheint kein
Kalender. Falls notwendig, muss hier direkt jQuery.fn.datepicker gerufen werden.
Der Datentyp kann auch direkt im XIMA FORMCYCLE-Designer eingestellt werden.
Derzeit werden die HTML-Attribute type und vdt genutzt, dies wird sich allerdings ändern.
Der neue Datentyp für das Eingabefeld.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt den Datentypen eines Texteingabefelds (einzeiliges Eingabefeld oder mehrzeiliges Eingabefeld). Es kann nun ein beliebiger Wert eingegeben werden. Es wird nicht mehr validiert, ob es sich um einge gültige E-Mail-Adresse, Postleitzahl etc. handelt.
Beispiel:
// Prüft nun nicht mehr, ob eine gültige E-Mail-Adresse eingegeben wurde.
$('[name="tfMail"').setDataType()Diese JQuery-Instanz zum Verketten von Befehlen.
Markiert ein Formularfeld als ungültig und setzt die Fehlermeldung.
Die Fehlermeldung erscheint nicht sofort. Erst, wenn der Nutzer mit dem Formularfeld interagiert, wird die
Fehlermeldung angezeigt, etwa bei einem blur- oder change-Ereignis; oder wenn das Formular wie beim Absenden
validiert wird. Mittels der Funktion validate kann die Validierung angestoßen werden, um die Fehlermeldung
sofort anzuzeigen.
// Markiert das Eingabefeld als ungültig und setzt die Fehlermeldung.
$('[name="tfName"').setError("Ungültiger Name.");
// Validiert das Eingabefeld und zeigt die Fehlermeldung an.
$('[name="tfName"').validate();Derzeit wird das HTML-Attribut error genutzt, dies kann sich aber ändern.
Die Fehlernachricht, die am Element angezeigt werden soll.
Diese JQuery-Instanz zum Verketten von Befehlen.
Markiert das Formularfeld als gültig und entfernt die Fehlermeldung.
Die Fehlermeldung verschwindet nicht sofort. Erst, wenn der Nutzer mit dem Formularfeld interagiert, wird die
Fehlermeldung entfernt, etwa bei einem blur- oder change-Ereignis; oder wenn das Formular wie beim Absenden
validiert wird. Mittels der Funktionvalidate` kann die Validierung angestoßen werden, um die Fehlermeldung
sofort zu entfernen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Setzt oder ändert die Mussfeldgruppe des Formularelements. Es können sich mehrere Formularelemente in einer Mussfeldgruppe befinden. Ein Formularelement ist nur dann gültig, wenn wenigstens ein Element aus der Mussfeldgruppe ausgefüllt wurde und einen Wert hat.
Diese Funktion ändert nicht, ob das Formularelement selbst ein Mussfeld ist, zum Beispiel:
Das Formularfeld tf1 wurde bereits im Designer als Mussfeld markiert, das Feld tf2 nicht. Nun wird diese
Funktion benutzt, um die Mussfeldgruppe beider Felder auf "Gruppe1" zu setzen. Ist das Feld tf1 noch leer, so
wird eine Fehlermeldung angezeigt, auch wenn im Feld tf2 ein Wert eingetragen wurden. Daher sollte im Designer
das Feld tf1 nicht als Mussfeld markiert werden. Sonst muss dies nachträglich mittels der Funktion
setRequired nachgeholt werden:
// Fügt Textfeld "tf1" der Mussfeldgruppe "gruppe1" hinzu.
$('[name=tf1]').setGroupReq("gruppe1");
// Fügt Textfeld "tf2" der Mussfeldgruppe "gruppe1" hinzu.
$('[name=tf2]').setGroupReq("gruppe1");
// Entfernt die Markierung von Textfeld "tf1" als Mussfeld.
$('[name=tf1]').setRequired(false);Die Mussfeldgruppe kann auch direkt im XIMA FORMCYCLE-Designer gesetzt werden.
Derzeit nutzen Mussfeldgruppen das HTML-Attribut vgr, dies wird sich allerdings ändern.
Name der Mussfeldgruppe, die auf das Element gesetzt werden soll.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt die Mussfeldgruppen an dem Formularfeld.
Falls das Formularfeld zudem als Mussfeld markiert werden soll, kann die Funktion setRequired genutzt werden.
Diese JQuery-Instanz zum Verketten von Befehlen.
Setzt oder ändert die Höchstanzahl an erlaubten ausgewählten Optionen eines Mehrfachauswahlelements.
Dieses Grenze kann auch direkt im XIMA FORMCYCLE-Designer gesetzt werden.
// Es können nun höchstens drei Checkboxen am Feld "selTermine" angehakt werden.
$('[name=selTermine').setMaxCheckBox(3)Derzeit wird das HTML-Attribut `vcmx genutzt, dies wird sich allerdings ändern.
Die Höchstzahl an Optione, die ausgewählt werden darf.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt die Einschränkung an die Höchstzahl an auswählbaren Optionen eines Mehrfachauswahlfelds.
Diese JQuery-Instanz zum Verketten von Befehlen.
Setzt oder ändert die Höchstlänge eines Eingabefelds, also die maximale Anzahl an Zeichen), die eingegeben werden dürfen.
// Der Nutzer darf nicht mehr als neun Zeichen im Feld "tfId" eingeben.
$('[name="tfId"').setMaxLength(9)Die Höchstlänge kann auch direkt im XIMA FORMCYCLE-Designer geändert werden.
Derzeit wird das HTML-Attribut vmxl genutzt, dies wird sich allerdings ändern.
Höchtzahl (inklusiv) an erlaubten Zeichen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt die Einschränkung an die Höchstlänge eines Eingabefelds, also die maximale Anzahl an Zeichen, die eingegeben werden dürfen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Setzt oder ändert an einem nummerischen Eingabefeld die höchste erlaubte Zahl, die eingegeben werden darf.
// Im Feld "tfAnzahl" muss eine Zahl kleiner oder gleich 9 eingegeben werden.
$('[name="tfAnzahl"').setMaxValue(9);Der Höchstwert kann auch direkt XIMA FORMCYCLE-Designer gesetzt werden.
Derzeit wird das HTML-Attribut vmx genutzt, dies kann sich aber ändern.
Der Höchstwert (inklusive), der für das Eingabefeld erlaubt ist.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt an einem nummerischen Eingabefeld die Einschänkung an die höchste erlaubte Zahl, die eingegeben werden darf.
Diese JQuery-Instanz zum Verketten von Befehlen.
Setzt oder ändert die Mindestanzahl an erlaubten ausgewählten Optionen eines Mehrfachauswahlelements.
// Wenigstens eine Checkbox muss am Auswahlfeld "selTermine" ausgewählt werden.
$('[name=selTermine').setMinCheckBox(1);Die Mindestanzahl kann auch direkt im XIMA FORMCYCLE-Designer gesetzt werden.
Derzeit wird das HTML-Attribut vcmn genutzt, dies wird sich allerdings ändern.
Die geringste Anzahl (inklusiv) an Optione, die am Auswahlfeld ausgewählt werden müssen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt die Einschränkung der Mindestanzahl an erlaubten ausgewählten Optionen eines Mehrfachauswahlelements.
Diese JQuery-Instanz zum Verketten von Befehlen.
Setzt oder ändert die Höchstlänge eines Eingabefelds, also die minimale Anzahl an Zeichen, die eingegeben werden müssen.
// Der Nutzer muss wenigstens zwei Zeichen in das Eingabefeld "tfId" eingeben.
$('[name="tfId"').setMinLength(2);Die Höchstlänge kann auch direkt im XIMA FORMCYCLE-Designer geändert werden.
Derzeit wird das HTML-Attribut vmnl genutzt, dies wird sich allerdings ändern.
Mindestanzahl (inklusiv) an erlaubten Zeichen, die eingegeben werden müssen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt die Einschränkung an die Mindestlänge eines Eingabefelds, also die minimale Anzahl an Zeichen, die eingegeben werden müssen.
Diese JQuery-Instanz zum Verketten von Befehlen.
Setzt oder ändert an einem nummerischen Eingabefeld die geringste erlaubte Zahl, die eingegeben werden darf.
// Im Feld "tfAnzahl" muss ein Wert größer oder gleich zwei eingegeben werden.
$('[name="tfAnzahl"').setMinValue(2);Diese Untergrenze kann auch direkt im XIMA FORMCYCLE-Designer eingestellt werden.
Derzeit wird das HTML-Attribut vmn genutzt, dies wird sich allerdings ändern.
Der geringste Wert (inklusiv), der für das Eingabefeld erlaubt ist.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt an einem nummerischen Eingabefeld die Einschänkung an die geringste erlaubte Zahl, die eingegeben werden darf.
Diese JQuery-Instanz zum Verketten von Befehlen.
Setzt den Namen des Formularfelds, mit dem der Wert dieses Formularfelds übereinstimmen muss.
Gibt es beispielsweise die beiden Formularfeld "tfNutzername" und "tfNutzernameWiederholung", so wird ein Fehler angezeigt, wenn im Feld "tfNutzernameWiederholung" ein anderer Wert eingegeben wird als im Feld "tfNutzername".
// Wiederholung der E-Mail muss gleich der eingegebenen E-Mail sein
$('[data-name=tfMailWdh]').setMustEqual("tfMail");Die Anwendung dieser Funktion ist nur für Textfelder und Textareas gedacht und könnte deshalb bei der Benutzung mit anderen Formularelement-Typen zu Fehlern führen.
Diese Einstellung kann auch direkt im XIMA FORMCYCLE-Designer festgelegt werden.
Derzeit wird das HTML-Attribut veq verwendet, dies wird sich allerdings ändern.
Name des refernzierten Formularfelds, mit dem der Wert dieses Felds übereinstimmen muss.
Diese JQuery-Instanz zum Verketten von Befehlen.
Entfernt die Einschränkung, dass der Wert dieses Formularfelds mit einem anderen Formularfeld übereinstimmen muss.
Diese JQuery-Instanz zum Verketten von Befehlen.
Stellt ein, ob das Formularfeld ein Mussfeld ist. Ein Mussfeld ist ungültig, wenn kein Wert eingeben wurde.
// Der Nutzer muss im Feld "tfMail" eine (gültige) E-Mail-Adresse eingeben.
$('[data-name=tfMail').setRequired(true);Die Markierung als Mussfeld kann auch direkt im XIMA FORMCYCLE-Designer vorgenommen werden.
Derzeit wird das Attribut vr genutzt, dies wird sich allerdings ändern.
Wenn true, wird das Formularfeld als Mussfeld markiert. Wenn false, ist es kein Mussfeld mehr.
Diese JQuery-Instanz zum Verketten von Befehlen.
Ein Formularfeld kann so eingestellt werden, dass es nur dann ein Mussfeld ist, wenn ein anderes Formularfeld einen bestimmten Wert hat. Diese Funktion erlaubt es, diese Abhängigkeit zu ändern.
Um beispielsweise ein Eingabefeld für den Straßennamen nur dann als Mussfeld zu schalten, wenn im Feld "selAdressart" die Option "Anschrift" (und nicht "Postfach") ausgewählt ist:
// Mussfeld nur, wenn "Anschrift" und nicht "Postfach" ausgewählt ist
$('[data-name="tfStrasse"]').setRequiredIf("selAdressart", 1, "Anschrift");Diese Einstellung kann auch direkt im XIMA FORMCYCLE-Designer vorgenommen werden.
Derzeit werden die HTML-Attribute vrif_c und vrif_v genutzt, dies wird sich allerdings ändern.
Die folgenden Werte sind für die Art der Überprüfung erlaubt:
value nicht relevant).value den regulären Ausdruck als Zeichenkette).value das Format x-y, also z.B. 1-23).Der Name des Formularfelds, von dessen Wert es abhängen soll, ob dieses Feld ein Mussfeld ist.
Die Art des Vergleichs, wie der Wert des anderen Formularfelds geprüft wird. Siehe oben für Details.
Wenn nicht gegeben, ist der Standardwert 0.
Wert für den Vergleich, mit dem das andere Formularfeld verglichen wird. Standardwert ist die leere Zeichenkette.
Diese JQuery-Instanz zum Verketten von Befehlen.
Ein Formularfeld kann so eingestellt werden, dass es nur dann ein Mussfeld ist, wenn ein anderes Formularfeld einen bestimmten Wert hat. Diese Funktion entfernt diese Abhängigkeit.
Diese JQuery-Instanz zum Verketten von Befehlen.
Fügt das kleine rote Sternchen neben dem Leittext eines Formularfelds hinzu oder entfernt es. Dieses Sternchen gibt an, ob es sich bei dem Formularfeld um ein Mussfeld handelt.
Derzeit ist dieses Sternchen mittels eines SPAN-Elements mit der Klasse required-star umgesetzt, dies kann
sich allerdings ändern.
<span class="required-star">*</span>Beispiel:
// Entfernt das Sternchen vom Leittext des Formularfelds "tfName".
$('input[name=tfName]').showStar(false);
// Fügt das Sternchen dem Leittext des Formularfelds "tfName" hinzu.
$('input[name=tfName]').showStar(true);Diese Funktion beeinflusst nur das Aussehen, ändert aber nicht, ob das Formularfeld ein Mussfeld ist. Ist das
Eingabefeld leer, werden daher weiter Fehlermeldungen angezigt. Um zu ändern, ob das Feld ein Mussfeld ist, sollte
die Funktion setRequired benutzt werden.
Diese JQuery-Instanz zum Verketten von Befehlen.
Bildet die Summe aller Formularfelder, wobei versucht wird, den Wert jedes Formularfelds als Zahl zu
interpretieren. Diese Methode sollte nur auf Textfelder und Textareas angewendet werden. Besonders nützlich ist
diese Methode für wiederholte Elemente, wenn die Werte aller dynamisch erzeugten Felder addiert werden sollen.
Es sollte beachtet werden, dass bei wiederholten Formularfeldern die einzelnen Eingabefelder über das Attribut
org_name und nicht über name selektiert werden sollten.
// Bildet die Summe aller dynamisch erstellten Kopien des Textfelds mit dem Namen "tfZahlungsbetrag".
var sum = $("[org_name='tfPayment']").sum();Die (nummerische) Summe der Werte aller selektieren Formularfelder.
Validiert das Formularfeld und alle in ihm enthaltenen Formularfelder (wenn es sich um einen Container, ein Fieldset oder eine Seite handelt).
Eine Fehlernachricht wird an allen Elementen angezeigt, die ungültig sind. Ungültig sind Mussfelder, die nicht ausgefüllt wurden, sowie Felder, welche falsch ausgefüllt wurden (z.B. ungültige E-Mail-Adresse).
Standardmäßig wird die Validierung nur ausgeführt, wenn der Nutzer den Wert des Formularfelds ändert und es
wieder verlässt (blur bei Eingabefeldern beziehungsweise. change bei Checkboxen). Zudem wird auch beim
Versuch, das Formular abzusenden, validiert.
Ein Anwendungsfall für diese Funktion beseteht darin, ein Eingabefeld jedesmal zu validieren, wenn der Nutzer ein Buchstaben eingibt oder eine Taste auf der Tastatur drückt. Dies sollte mit Bedacht eingesetzt werden, da es bei großen Formularen auf aufwendigen Validierungen zu Performanzproblemen kommen kann.
// Validiert das Eingabefeld "tfId" bei jedem Tastendruck
$("[data-name='tfId']").on("keydown", function(event) { $(event.target).validate(); });
// Überprüft das gesamte Formular
var isFormValid = $(".xm-form").validate();Optional, Standardwert false. Wenn true, wird keine Fehlernachricht an invalide Elemente
angefügt. Kann etwa nützlich sein, wenn nur geprüft werden soll, ob ein Element valide ist, ohne den Nutzer davon
in Kenntnis zu setzen.
true, wenn alle validierten Formularfelder gültig sind, false otherwise.
Entfernt das gegeebene Validationsattribut von dem Formularfeld. Dies ist eine Low-Level-Methode, es sollte eine der spezifischeren Methoden für Validationsattribute genutzt werden, wie etwa setRequired.
Name des zu entfernenden Validationsattributs.
Diese JQuery-Instanz zum Verketten von Befehlen.
Setzt das Validationsattribut für das Formularfeld auf den gegebenen Wert. Dies ist eine Low-Level-Methode, es sollte eine der spezifischeren Methoden für Validationsattribute genutzt werden, wie etwa setRequired.
Name des zu ändernden Validationsattributs.
Neuer Wert für das Validationsattribut. Wenn undefined, wird das Validationsattribut entfernt.
Diese JQuery-Instanz zum Verketten von Befehlen.
Zeigt das Formularfeld an oder versteckt es. Diese Funktion sollte statt den JQuery-Funktionen hide und show
verwendet werden, da sie auch einige XIMA FORMCYCLE-spezifische Attribute aktualisiert.
Ist ein Formularfeld versteckt, so ist es nie ungültig und kann somit auch nie das Absenden eines Formulars verhindern.
Achtung: Diese Methode ändert nur den Sichtbarkeitszustand von genau dem Element, auf das sie gerufen wird. Soll etwa nicht nur das Eingabefeld, sondern auch das dazugehörige Label mit ausgeblendet werden, kann wie folgt vorgegangen werden:
// Macht das Eingabefeld "tfNachname" unsichtbar.
$("[data-name='tfNachname']").getContainer().visible(false);If true, shows the form field. If false, hides the form field.
Diese JQuery-Instanz zum Verketten von Befehlen.
Fügt einen (standardmäßig kleinen roten) Stern an den Leittext eines Formularfelds. Dieser Stern gibt an, ob das Formularfeld ein Mussfeld is.
Derzeit wird hierzu ein
SPAN-Element mit der Klasserequired-starerzeugt, dies kann sich ändern:<span class="required-star">*</span>Zum Beispiel:
// Adds a star to the label of the form field tf1. $('input[name="tf1"]').addStar();Diese Funktion ändert nur das das Aussehen, aber nicht, ob das Formularfeld ein Mussfeld ist. Um festzulegen, ob ein Feld Mussfeld ist, kann die Funktion
setRequiredverwendet werden.