Wiki-Quellcode von Schaltflächen

Zeige letzte Bearbeiter
1 {{panel float="right"}}
2 (% class="block text-align-center%){{ficon name="XButtonList" size="4em"/}}
3
4 (% class="block%)Das Symbol für Formularelemente vom Typ //Schaltfläche//.
5 {{/panel}}
6
7 == Funktionsweise ==
8
9 Formularelemente vom Typ //Schaltfläche// fügen Schaltflächen in das aktuelle Formular ein. Wird das Formularelement in das Formular gezogem, sind zuerst zwei Schaltflächen vorhanden. Sie können aber beliebig viele Schaltflächen hinzufügen oder löschen, in dem Sie im Bereich //Werte// Einträge hinzufügen oder löschen
10
11 Für jede Schaltfläche kann zudem eine Aktion festgelegt werden, um das Formular zwischenzuspeichern, abzusenden oder auf eine andere Seite zu wechseln. Dies ist genauer im Abschnitt //Werte// beschrieben.
12
13 {{figure image="designer_element_buttons_base_de.png"}}
14 Unter den Grundeinstellungen kann für Schaltflächen etwa noch festgelegt werden, wie diese ausgerichtet werden sollen.
15 {{/figure}}
16
17 {{internBaseOptionsElement page="base"}}
18 {{table dataTypeAlpha="0" colWidth="-500"}}
19 |=Name|=Beschreibung
20 |Ausrichtung|Ändert die Ausrichtung (links, rechts, mitte) der Schaltflächen.
21 {{/table}}
22 {{/internBaseOptionsElement}}
23
24 {{figure image="designer_element_buttons_values_de.png"}}
25 Für jede Schaltfläche kann ein Text eingegeben werden, der im Formular anzeigt wird, sowie und der Name, der intern im HTML verwendet wird. Zudem kann noch festgelegt werden, was passieren soll, wenn die Schaltfläche betätigt wird.
26 {{/figure}}
27
28 {{internBaseOptionsElement page="val"}}
29 {{table dataTypeAlpha="0" colWidth="-500"}}
30 |=Name|=Beschreibung
31 |Text|Die Beschriftung der Schaltfläche, die im Formular angezeigt wird.
32 |Name|Der Wert des HTML-Attributs //name//, welches das //input//-Element im HTML erhalten soll. Dieser Name auch genutzt werden, um im JavaScript oder CSS auf die Schaltfläche zuzugreifen. Beispielsweise sorgt das CSS {{code language="css"}}[name=btnSenden] { width:100%;}{{/code}} dafür, dass die Schaltfläche mit dem Namen //btnSenden// die volle Breite einnimmt.
33 |Aktion|Die Aktion, die ausgeführt werden soll, wenn die Schaltfläche betätigt wird.
34 {{/table}}
35
36 === Hinzufügen und Löschen von Schaltflächen
37
38 Eine Schalftäche kann durch Drücken von {{icon name="trash"/}} gelöscht werden. Sobald die letzte leere Zeilen ausgefüllt wurde, wird automatisch eine neue leere Zeile angelegt, um weitere Schalftlächen hinzuzufügen. Weiterhin kann die Reihenfolge der Schaltflächen verändert werden, indem eine Schaltfläche mittels Drag&Drop von {{icon name="trash"/}} an eine andere Stelle gezogen wird.
39
40 === Vorhandene Aktionen
41
42 Jeder Schaltfläche kann eine Aktion zugeordnet werden. Jede Aktion kann mit oder ohne Prüfung des Formulars erfolgen. Bei der Prüfung des Formular wird sichergestellt, ob etwa alle Mussfelder ausgefüllt wurden und keine Formularfelder mit fehlerhaften Eingaben (Validierung der Datentypen) vorliegen.
43
44 Es stehen die folgenden Aktionen zur Verfügung.
45
46 {{table dataTypeAlpha="0" colWidth="-500"}}
47 |=Name|=Beschreibung
48 |keine Aktion|Es wird keine Aktion bei Klick auf die Schaltfläche ausgeführt. Diese Option kann verwendet werden, wenn eine eigene Aktionen mittels JavaScript implementiert werden soll. Das folgende Beispiel gibt eine kurze Nachricht aus, wenn die Schaltfläche mit dem Namen //btnNachricht// gedrückt wird.
49 {{code language="javascript"}}
50 $("[name='btnNachricht']").click(() => alert("Der Knopf wurde gedrückt."));
51 {{/code}}
52 |Seite <NAME>|Wechselt auf die Seite mit dem angegebenen Namen. Jede im Formular angelegte Seite erscheint mit Namen in der Auswahlliste.
53 |Seite >NAME> + prüfen|Wechselt nur auf die Seite mit dem angegebenen Namen, wenn die derzeitige Seite keine fehlerhaften Eingaben enthält.
54 |absenden|Sendet das Formular an den Server und legt dort einen Vorgang an. Das Formular wird auch abgesendet, egal ob es noch fehlerhafte Formularfelder gibt oder nicht.
55 |absenden + prüfen|Sendet das Formular nur an den Server, wenn das Formular keine fehlerhaften Eingaben mehr enthält.
56 |absenden o. speichern|Sendet das Formular an den Server, legt aber keinen Vorgang an. Diese Aktion sollte verwendet werden, wenn Sie die Formulardaten zwar mit einem [[Workflow>>doc:Formcycle.Designer.Workflow.WebHome]] verarbeiten möchten, aber keinen dauerhaften Vorgang anlegen wollen.
57 |absenden popup o. speichern|Sendet das Formular an den Server und öffnet die Antwortseite als //Pop-Up//, legt aber keinen Vorgang an. Diese Aktion sollte verwendet werden, wenn Sie die Formulardaten zwar mit einem [[Workflow>>doc:Formcycle.Designer.Workflow.WebHome]] verarbeiten, aber keinen dauerhaften Vorgang anlegen möchten. Über das //Pop-Up-Fenster// wird in der Regel eine Datei zum Download angeboten. Siehe [[Datei ausliefern>>doc:Formcycle.Designer.Workflow.Actions.FileDownload]].
58 |speichern|Speichert den Formularinhalt zur späteren Weiterverarbeitung auf dem Server. Das Formular wird auch abgesendet, egal ob es noch fehlerhafte Formularfelder gibt oder nicht. Hierbei wird der Vorgang in einen gesperrten Zustand versetzt, da noch keine endgültiges Absenden erfolgt ist und sollte daher bei initialen Ausfüllprozess verwendet werden. Für eine spätere Zwischenspeicherung ist ein Absenden Button empfehlenswert, da dann auch die Daten überschrieben werden.
59 |speichern + prüfen|Speichert den Formularinhalt zur späteren Weiterverarbeitung auf dem Server nur dann, wenn das Formular keine fehlerhaften Eingaben mehr enthält. Hierbei wird der Vorgang in einen gesperrten Zustand versetzt, da noch keine endgültiges Absenden erfolgt ist und sollte daher bei initialen Ausfüllprozess verwendet werden. Für eine spätere Zwischenspeicherung ist ein Absenden Button empfehlenswert, da dann auch die Daten überschrieben werden.
60 {{/table}}
61 {{/internBaseOptionsElement}}
62
63 {{internBaseOptionsElement page="cond"/}}
64
65 {{internBaseOptionsElement page="css"/}}
66
67 {{internBaseOptionsElement page="attr"/}}
68
69 {{internBaseOptionsElement page="avail"/}}
70
71 {{internBaseOptionsElement page="misc"/}}
72
73 {{content moveToTop="true"/}}