Beispiele JavaScript und CSS
Auf dieser Seite und den Unterseiten werden diverse Beispiele und Formular zu vielen verschiedenen Themen angeboten.
Alle Beispiele können auch direkt auf der Demo-Plattform eingesehen werden.
- URL der Demo-Plattform: https://demo7.formcycle.eu/formcycle
- Benutzername: demo@demo
- Passwort: pa55w0rd@demo
Im folgenden Teil finden Sie eine Auflistung der vorhandenen Beispielformulare auf dem Demo-Server.
Inhalt
[
Verbergen
]
Berechnung
- Formularbespiele für Berechnungselement (im Formular-Store verfügbar)
- Beispiele für Subtraktion, Summenbildung und String-Verkettung
Zähler
- Beispiel für die Verwendung eines Zählers
- Es wird demonstriert wie der aktuelle Zählerstand im Formular ausgegeben werden kann, Termine welche ausgebucht sind zu sperren und im Workflow den Zähler zu verwenden
Datenquellen und Abfragen
- Autocomplete Funktionen
- Beispiel für die Verwendung von Autocomplete mit CSV oder Datenbank als Quelle.
- Filterung einer Auswahl anhand eines Wertes
- Wenn die Auswahl erfolgt ist, soll in einer weiteren Auswahlliste die Werte anhand der Eingabe gefiltert werden. Dabei kann nur eine Datenbank als Quelle verwendet werden.
- Vorbelegung von Daten aus einer Datenquelle
- Daten aus einer Datenquelle Feldern im Formular zuweisen.
- Übertragung von Werten einer Auswahlliste (im Formular-Store verfügbar)
- Demo um den Wert einer beliebigen Spalte einer Datenquelle in ein anderes Feld zu übertragen.
- Datenbankabfrage (im Formular-Store verfügbar)
- Abfrage von Daten aus einer Datenbank mit festen Werten.
- LDAP-Abfrage über Auswahl-Feld und Autocomplete
- Auswahlfeld mit Werten aus einer LDAP-Abfrage befüllen und mittels Autocomplete LDAP-Daten abfragen.
Datum und Zeit
- Kalender Funktionen (im Formular-Store verfügbar)
- Demo für verfügbare Funktionen zur Konfiguration des Kalender Widgets.
- Datum und Zeit initialisieren (im Formular-Store verfügbar)
- Sobald das Formular geöffnet ist, erfolgt die initiale Belegung des Datum und Zeit Wertes.
- Datumsdifferenz in Tagen (im Formular-Store verfügbar)
- Differenz in Tagen von Datepicker
- Datumsauswahlbereich einschränken und Validierung (im Formular-Store verfügbar)
- Erleichtert die Eingabe von Datumsbereichen und ermöglicht entsprechende Validierung.
- Formatierung Geburtstagsfeld (im Formular-Store verfügbar)
- Konfiguration des Kalenders
- Alter berechnen (im Formular-Store verfügbar)
- Demo zur Berechnung des Alters anhand des Geburtstagsdatums.
- Zeitunterschied berechnen
- Differenz und Summe von Uhrzeiten
- Zeitvalidierung
- Vergleich einer Zeitauswahl
Terminverwaltung
- Vorbelegung Terminauswahl
- Demo wie es möglich ist ein Datum in Terminverwaltung vorzubelegen innerhalb des Formulars.
Aussehen
- Änderung der Textposition
- Demonstration Text anders zu positionieren.
- Ändern des Ladesymbols
- Individualisieren des Ladesymbols beim Formularaufruf.
- Anpassen von wiederholenden Elementen
- Nutzen Sie Ihre eigenen Knöpfe für wiederholende Elemente.
- Nummerierung wiederholbarer Elemente mit CSS
- Wiederholende Formularelemente werden fortlaufend nummeriert mittels CSS.
- Nummerierung wiederholbarer Elemente mit JavaScript
- Wiederholende Formularelemente werden fortlaufend nummeriert mittels JavaScript.
- Eigene Schriftart im Formular verwenden
- Eigene Schriftart über CSS einbinden und anwenden.
Allgemein
- Übertragung von Eingaben in andere Elemente
- Felder mit Werten vorbelegen, die in einem anderen Feld eingegeben wurden.
- Löschen von Formulardaten
- Zeigt, wie einzelne oder alle Eingabefelder in einem Formular gelöscht werden können, wenn ein Button gedrückt wird.
- Sprachauswahl
- Um eine Auswahlmöglichkeit für die Sprache zu ermöglichen, sollte das Widget Sprachauswahlelement verwendet werden.
- Lokaler Import und Export von Formdaten
- Formularinhalte lokal als XML zwischenspeichern und wieder laden.
- Werte vor dem Senden setzen
- Vor dem Versenden eines Formulars das Formular prüfen und Werte setzen.
- Seriennummer erzeugen
- Seriennummern mithilfe des Datenbank-Zählers erzeugen.
Formatierung
- Formatierung von Zahlen (Autonumeric Konfiguration) (im Formular-Store verfügbar)
- Automatische Formatierung eines Textfeldes in ein konfiguriertes Format und Einheit (autonumeric)
- Formatierung unterschiedlicher Eingabetypen
- Demo für Zeit- und benutzerdefinierte Formatierung anhand der Bibliothek cleave.js
Validierung
- Bedingungen für Mehrfachauswahlwerte
- Demo, wie es möglich ist, die Sichtbarkeit eines Elements in Abhängigkeit von mehreren Werten einer Auswahl zu ändern.
- Beispiele für Validationsregeln
- Verschiedene Beispiele für reguläre Ausdrücke bei benutzerdefinierten Datentypen.
- IBAN Validierung
- Beispiel für clientseitigen IBAN-Validator
- Mussfeld in Abhängigkeit eines Status
- Demo wie es möglich ist, ein erforderliches Feld in Abhängigkeit von einem Status zu setzen.
- Benutzerdefinierte Bedingung
- Demo-Formular um eigene Bedingungen an Eingabefeldern zu definieren.
Word (Fill) Beispiel
- Word (Fill) - Checkboxen und Radiobuttons
- Demonstriert Beispiele für die Funktion cb()
- Word (Fill) - Word (Fill) - Zählen, Enthält, Ersetzen
- Demonstriert Beispiele für die Funktion cnt(), con(), rep()
- Word (Fill) - Bilder und URL
- Demonstriert Beispiele für die Funktion image(), b64img() und url()
- Word (Fill) - Merge Field
- Demonstriert Beispiele für ein Merge Field, welches in der Fusszeile verwendet werden kann
- Word (Fill) - Funktionen zum Entfernen
- Demonstriert Beispiele für die Funktion rmp(), rmr(), rmt(), rmtp()
- Word (Fill) - Wiederholende Elemente
- Beispiele für die Verwendung wiederholender Elemente in einem Word-Dokument.
- Word (Fill) - Auswahl-Funktionen
- Demonstriert Beispiele für die Funktion lsttxt(), lsttitle(), lst()
- Word (Fill) - Bild aus Uploadfeld übertragen
- Wandelt einen Upload in Bild um
Workflow
- Temporäre Zwischenspeichern von Formulardaten
- Speichern des aktuellen Formularzustands, damit dieses später zu Ende ausgefüllt werden kann.
Weitere Demos
Demo-Beispiele
- Autocomplete mit AJAX
- Beispiel für die Anbindung an ein ALVA9 Fachverfahren
- Beispiele für Anpassungen bei Erscheinungsbild / CSS
- Formular per AJAX einbinden
- Formular über externen Kontext einbinden
- Formular per IFrame einbinden
- Nummerierung wiederholbarer Elemente
- Seitenumbrüche bei wiederholbaren Elementen
- Seiten-Administration
- Word-Fill Demo