Wiki-Quellcode von Formular

Verstecke letzte Bearbeiter
gru 1.1 1 {{content/}}
2
3 {{figure image="designer_workspace_de.png" width="600" clear="h2"}}
4 Der Arbeitsbereich des {{designer case="gen"/}}. Abgebildet sind die einzelnen Unterbereiche. Im Hauptbereich in der Mitte sieht man das aktuelle Formular.
5 {{/figure}}
6
jdr 26.10 7 Der {{designer/}} bietet eine Oberfläche zum einfachen Erstellen von Formularen mittels Drag&Drop. Die Formularelemente aus der Liste links können mit der Maus in die Formularvorschau in der Mitte gezogen und positioniert werden. Durch Klick auf ein Formularelement kann dies ausgewählt werden. Im Eigenschaftsbereich rechts sind dann alle Einstellungen dieses Formularelements bearbeitbar. Über die Aktionsleiste ganz oben können weitere Einstellungen zum Formular vorgenommen werden, wie das Konfigurieren des Workflows oder dem Anlegen von Datenbankabfragen für das Formular.
gru 1.1 8
9 Im Folgenden werden die wesentlichen Komponenten des Arbeitsbereichs kurz vorgestellt.
10
11 == Elementauswahl ==
12
13 {{figure image="designer_element_list_de.png" width="200"}}
14 Die Liste aller vorhandenen Formularelemente. Durch Drag&Drop können Sie mit der Maus in das Formular gezogen und positioniert werden.
15 {{/figure}}
16
jdr 20.2 17 In der linken Leiste befindet sich die Liste aller Formularelemente, die zur Verfügung stehen. Um ein Formularelement in das Formular einzufügen, wird das Element mit der Maus per Drag&Drop an die gewünschte Stelle im Formular gezogen. Über die Tabs rechts an der Leiste kann zwischen verschiedenen Elementbibliotheken gewechselt werden. Dabei gibt es die folgenden Tabs:
gru 1.1 18
19 ; Elemente
gru 13.1 20 : Das sind die Standard-Elemente wie Eingabefelder oder Schaltflächen. Diese stehen immer zur Verfügung. Siehe hierzu auch die [[Liste der Formularelemente>>doc:Formcycle.Designer.Form.FormElements.WebHome]].
gru 1.1 21 ; Vorlagen
gru 8.1 22 : Hier finden sich alle Vorlagen, die durch Nutzer erstellt wurden. Ein Element kann im Designer per Rechtsklick als Vorlage gespeichert werden, mehr hierzu unter [[Vorlagen>>doc:Formcycle.Designer.Form.ElementTemplates]].
gru 1.1 23 ; Mehr Elemente
24 : Falls ein entsprechendes Katalog-Plugin installiert ist, finden sich hier weitere durch das Plugin bereitgestellte Elemente.
25
26 Zudem kann es auch noch weitere Tabs mit Elementen geben, falls bestimmte Plugins installiert sind.
27
28 == Aktionsleiste ==
29
jdr 25.2 30 {{figure image="designer_topbar_de.png" width="300"}}
gru 1.1 31 In der Aktionsleiste oben finden sich Aktionen zum Speichern des Formulars oder zum Anzeigen einer Vorschau. Über die Schaltfläche //Mehr// sind weitere fortgeschrittene Aktionen verfügbar, etwa zum Anlegen einer Datenbankquelle.
32 {{/figure}}
33
34 In der Aktionsleiste oben finden sich Aktionen zum Formular:
35
36 ; {{ficon name="content-save-all"/}} Speichern
37 : Über diese Schaltfläche kann der aktuelle Stand des Formular abgespeichert werden. Das Formula wird dabei aktualisiert, sodass der gespeicherte Stand erscheint, wenn das Formular geöffnet wird. Es kann auch direkt über das Tastaturkürzel //Strg+S// gespeichert werden.
jdr 26.1 38 ; {{ficon name="properties"/}} Elemente
39 : Hiermit wird eine Übersicht aller Formularelemente in Tabellenform angezeigt. Hiermit kann schnell ein Überblick über alle Elemente und deren Eigenschaften gewonnen werden. Zudem ist es möglich, diese Elementübersicht auch als CSV- oder Excel-Datei zu exportieren.
gru 1.1 40 ; {{ficon name="share-variant"/}} Veröffentlichen
41 : Über diese Schaltfläche stehen verschiedene Möglichkeiten zur Einbindung des Formulars bereit. Dies reicht von einem einfach Link zum aufrufen des Formulars über die Einbindung in eine Webseite bis hin zur Integration in Typo3 und WordPress. Siehe [[das Formularmenü Veröffentlichen>>doc:Formcycle.UserInterface.MyForms.Publish.WebHome]] für weitere Informationen hierzu.
jdr 26.6 42 ; {{ficon name="undo"/}} Rückgängig
jdr 26.12 43 : Über diese Schaltfläche wird die letzte Änderung im Formular rückgängig gemacht.
jdr 26.6 44 ; {{ficon name="refresh"/}} Wiederholen
jdr 26.12 45 : Über diese Schaltfläche kann die zuletzt rückgängig gemachte Änderung erneut angewendet werden.
jdr 26.5 46 ; {{ficon name="play-circle-outline1"/}} Öffnen
jdr 26.2 47 : Öffnet das Formular in einem neuen Tab. Im Gegensatz zum Vorschaumodus, wird das gespeicherte Formular geöffnet, d.h. ungespeicherte Änderungen werden nicht verfügbar sein.
gru 1.1 48 ; {{ficon name="play1"/}} Vorschau
49 : Über diese Schaltfläche kann eine Vorschau des Formulars geöffnet werden. In der Vorschau kann das Formular ausprobiert werden. Dies ist besonders dann nützlich, wenn das Formular dynamisch gestaltet wurde, etwa durch Ein- und Ausblenden von Elementen unter bestimmten Bedingungen.
50
51 Unter der Schaltfläche //Mehr// finden sich zudem noch weitere fortgeschrittene Einstellungen. Die meisten dieser Einstellungen können auch in der [[das Formübersicht>>doc:Formcycle.UserInterface.MyForms.WebHome]] vorgenommen werden. Es gibt die folgenden Menüpunkte:
52
jdr 26.4 53 ; {{ficon name="formycle-form"/}} Formular
jdr 26.10 54 : Dadurch öffnet sich der Formular-Tab im Designer und das Formular kann konfiguriert werden.
jdr 26.7 55 ; {{ficon name="workflow-fill"/}} Workflow
jdr 26.10 56 : Dadurch öffnet sich der Workflow-Tab im Designer und der Workflow des Formulars kann konfiguriert werden. Der Workflow steuert, was passiert, nachdem das Formular abgesendet wurde. Etwa können hier E-Mails versendet oder PDF-Formular erzeugt werden. Siehe [[Workflow>>doc:Formcycle.Designer.Workflow.WebHome]] für weitere Informationen.
jdr 26.7 57 ; {{ficon name="content-save-settings"/}} Dateien
gru 1.1 58 : Hier können Dateien hochgeladen werden, welche nur für dieses Formular benötigt werden. Siehe hierzu auch [[Dateien>>doc:Formcycle.UserInterface.MyForms.Files]]
59 ; {{ficon name="user"/}} Zugriff
60 : Unter diesem Menüpunkt finden sich verschiedenen Einstellungen zu Formularberechtigungen. Etwa kann eingestellt werden, ob das Formular nur mit einem Passwort aufrufbar sein soll oder welche Nutzergruppen das Formular bearbeiten dürfen. Siehe hierzu auch [[Zugriffseinstellungen>>doc:Formcycle.UserInterface.MyForms.Access]].
61 ; {{ficon name="inbox"/}} Postfach
62 : Hier kann eingestellt werden, in welchem Postfach abgesendete Formulare im [[Posteingang>>doc:Formcycle.Inbox.WebHome]] zu finden sind. Weiterhin kann auch festgelegt werden, welche Werte von Formularelementen im Postfach angezeigt werden. Siehe hierzu auch [[Postfacheinstellungen>>doc:Formcycle.UserInterface.MyForms.Inbox]].
63 ; {{ficon name="table-large"/}} Datentabelle
64 : Die Datentabelle ist ein fortgeschrittene Möglichkeit und erlaubt das Anlegen eigener Datenbanktabellen für Formulardaten. Siehe hierzu auch [[Datentabelle>>doc:Formcycle.UserInterface.MyForms.DataTables]].
65 ; {{ficon name="clock-outline"/}} Versionen
66 : Hier können alle Versionen des Formular eingesehen und verwaltet werden. Auch ist es möglich, eine neue Version anzulegen oder bereits existierende zu exportieren. Siehe hierzu auch [[Formularversionen>>doc:Formcycle.UserInterface.MyForms.Versions]].
67 ; {{ficon name="information-outline"/}} Info
68 : Kurzübersicht über einige technische Informationen zum Formular, wie seiner ID oder dem Erstellungsdatum.
69
jdr 17.2 70 ; {{ficon name="date"/}} Terminpläne
gru 1.1 71 : Hier können Terminpläne angelegt und editiert werden. Siehe auch [[Terminverwaltung>>doc:Formcycle.UserInterface.Appointments.WebHome]].
72
jdr 17.2 73 ; {{ficon name="file-blank"/}} Templates
gru 1.1 74 : {{html}} {{/html}}
jdr 26.1 75 :; {{ficon name="file-css-blank"/}} CSS-Templates
gru 1.1 76 :: Hier können CSS-Templates eingerichtet werden, welche die Möglichkeit bieten, globale //CSS//-Regeln zu definieren, die von allen Formularen verwendet werden können. Siehe auch [[CSS-Templates>>doc:Formcycle.UserInterface.FilesAndTemplates.Design.WebHome]].
jdr 26.1 77 :; {{ficon name="file-html-blank"/}} HTML-Templates
fse 18.1 78 :: Hier können HTML-Templates zum Beipiel für [[Abschlussseiten>>doc:Formcycle.Designer.Workflow.Actions.HtmlResponsePage]], [[Datenschutzerklärungen>>doc:Formcycle.Designer.Form.FormElements.Footer||anchor="HDatenschutzerklE4rung"]] oder das [[Impressum>>doc:Formcycle.Designer.Form.FormElements.Footer||anchor="HImpressum"]] angelegt und editiert werden. Siehe auch [[HTML-Templates>>doc:Formcycle.UserInterface.FilesAndTemplates.HTML.WebHome]].
gru 1.1 79
jdr 26.1 80 ; {{ficon name="database"/}} Quellen
gru 1.1 81 : {{html}} {{/html}}
82 :; {{ficon name="database-search"/}} Datenbankabfragen
83 :: Hier können neue Abfragen an SQL-Datenbanken eingerichtet werden. Siehe auch [[Datenbankabfragen>>doc:Formcycle.UserInterface.Data.DBQueries]].
84 :; {{ficon name="account-search"/}} LDAP-Abfrage
85 :: Hier können neue Abfragen über LDAP eingerichtet werden. Siehe auch [[LDAP-Abfragen>>doc:Formcycle.UserInterface.Data.LDAPQueries]].
jdr 26.1 86 :; {{ficon name="table-large"/}} Datenquellen
gru 12.1 87 :: Hier können statische Datenquellen hinterlegt werden, etwa Listen von Orten oder Postleitzahlen. Diese Listen können dann auch im Formular verwendet werden, etwa als Auswahlmöglichkeiten von [[Auswahlfeldern>>doc:Formcycle.Designer.Form.FormElements.Selection]]. Siehe auch [[Quelle>>doc:Formcycle.UserInterface.Data.Sources]].
gru 1.1 88
89 ; {{ficon name="lan-connect"/}} Verbindungen
90 : {{html}} {{/html}}
91 :; {{ficon name="database-gear"/}} DB-Verbindungen
92 :: Bevor Datenbankabfragen eingerichtet werden können, muss eine Verbindung zu der entsprechenden Datenbank eingerichtet werden. Dies kann über diesen Menüpunkt vorgenommen werden. Siehe auch [[DB-Verbindungen>>doc:Formcycle.UserInterface.Data.DBConnections]].
93 :; {{ficon name="user"/}} LDAP-Verbindungen
94 :: Bevor LDAP-Abfragen eingerichtet werden können, muss eine Verbindung zu dem entsprechenden LDAP-Server bzw. AD eingerichtet werden. Dies kann über diesen Menüpunkt vorgenommen werden. Siehe auch [[LDAP-Verbindungen>>doc:Formcycle.UserInterface.Data.LDAPConnections]].
95
jdr 26.2 96 ; {{icon name="plus"/}} Zähler
jdr 26.12 97 : Hier können [[Zähler>>Formcycle.UserInterface.Data.Counter]] erstellt und konfiguriert werden. Diese können bspw. durch die Aktion [[Zähler ändern>>doc:Formcycle.Designer.Workflow.Actions.ModifyCounter]] im Workflow zum Einsatz kommen.
jdr 26.1 98
99 ; {{icon name="download"/}} Exportieren
gru 1.1 100 : {{html}} {{/html}}
jdr 26.1 101 :; {{ficon name="shredder"/}} Formularexport
jdr 26.12 102 :: Hier kann ein Webformular oder Workflow als JSON-Datei exportiert werden.
jdr 26.1 103 :; {{ficon name="shredder"/}} Word- / PDF-Export
104 :: Hier kann das Formular als statisches Word- oder PDF-Dokument exportiert werden. Siehe auch [[Word- / PDF-Export>>doc:Formcycle.UserInterface.MyForms.Export.Blank]].
105 :; {{ficon name="shredder"/}} Steckbrief
106 :: Hier kann ein Steckbrief mit einer Übersicht über die wichtigsten Eigenschaften eines Formulars erstellt werden. Siehe auch [[Steckbrief>>doc:Formcycle.UserInterface.MyForms.Export.Summary]].
gru 1.1 107
jdr 26.1 108 ; {{icon name="upload"/}} Importieren
jdr 26.12 109 : Hier kann ein Webformular oder Workflow als JSON-Datei importiert werden.
jdr 26.1 110
gru 1.1 111 == Formularvorschau ==
112
113 Die Formularvorschau in der Mitte ist der Hauptteil des {{designer case="gen"/}}. Hier ist das Formular immer so zu sehen, wie es auch später aussieht. Formularelemente können direkt von der Elementleiste links in das Formular gezogen werden. Alle Änderungen an den Eigenschaften des Formulars im Eigenschaftsbereich rechts haben sofort Auswirkung auf die Formularvorschau.
114
115 === Verschieben von Elementen ===
116
117 Um ein schon vorhandenes Elemente an eine andere Stelle zu verschieben, gibt es zwei Möglichkeiten:
118
119 * Das Element mit der Maus anklicken, gedrückt halten und an die gewünschte Stelle.
120 * Auf das Element doppelklicken, dann zur gewünschten Stelle scrollen und auf die Stelle einmal klicken. Dies ist etwa sinnvoll, wenn ein Elemente von oben ganz nach unten verschoben werden soll und das Formular sehr lang ist.
121
122 === Kopieren und Löschen von Elementen ===
123
124 Um ein Element zu löschen oder zu kopieren, wird das Element erst durch einen Mausklick selektiert. Durch einen Rechtsklick öffnet sich nun ein Menü mit Optionen zum Löschen oder Kopieren (Duplizieren) des ausgewählten Elements. Alternativ können auch die Tasten //Entf// bzw. die Tasturkürzel //Strg+C// und //Strg+V// verwendet werden.
125
126 === Suchen nach Elementen ===
127
128 {{figure image="designer_element_search_de.png"}}
129 Die Suchleiste zum Auffinden von Formularelementen. Sie wird geöffnet durch Klick auf den Suchknopf {{icon name="search"/}} rechts unten oder durch Drücken von //Strg+F//.
130 {{/figure}}
131
132 Wird ein Formular länger, gestaltet sich das Finden bestimmter Elemente schwierig. Um Elemente einfacher findet zu können, kann die Elementsuchleiste verwendet werden. Diese öffnet sich entweder
133
134 * durch Betätigten des Suchknopfs {{icon name="search"/}} rechts unten
135 * oder durch Drücken von der Tastenkombination //Strg+F//
136
137 Im Suchfeld wird ein Name eingegeben, nachdem gesucht werden soll. Durch Betätigen der Enter-Taste oder durch Drücken der Pfeile rechts neben dem Suchfeld kann dann zu den gefundenen Formularelementen gesprungen werden. Es wird hierbei nach den Namen der Formularelemente gesucht. Weiterhin ist es auch möglich, nach Eigenschaften von Formularelementen zu suchen. Falls etwa nach allen Auswahlelementen mit der Auswahloption //Website// gesucht werden soll, wird im Suchfeld //optionen:Website// eingegeben.
138
139 == Eigenschaftsbereich ==
140
141 Im Eigeschaftsbereich können die Einstellungen des Formulars und die Eigenschaften der einzelnen Formularelemente bearbeitet werden. Oben im Eigenschaftsbereich finden sich mehrere Tabs für verschiedenen Einstellungen:
142
143 ; Eigenschaften
gru 13.1 144 : Nur verfügbar, falls ein Formularelement durch Mausklick ausgewählt wurde. Hier finden sich die am häufigsten benötigten Eigenschaften, wie Name, Hilfetext oder Bedingungen. Siehe auch [[Elementeigenschaften>>doc:Formcycle.Designer.Form.ElementProperties.WebHome]] sowie [[Liste der Formularelemente>>doc:Formcycle.Designer.Form.FormElements.WebHome]].
gru 1.1 145 ; Erweitert
gru 13.1 146 : Nur verfügbar, falls ein Formularelement durch Mausklick ausgewählt wurde. Hier finden sich weniger oft verwendete Eigenschaften, wie Nutzergruppenbeschränkungen oder HTML-Attribute. Siehe auch [[Elementeigenschaften>>doc:Formcycle.Designer.Form.ElementProperties.WebHome]] sowie [[Liste der Formularelemente>>doc:Formcycle.Designer.Form.FormElements.WebHome]].
gru 1.1 147 ; Formular
gru 14.1 148 : Einstellungen, die das Formular betreffen, etwa Breite oder Name. Siehe hierzu [[Formulareigenschaften>>doc:Formcycle.Designer.Form.FormProperties]].
gru 1.1 149 ; Default
150 : Nur verfügbar, falls ein Formularelement durch Mausklick ausgewählt wurde. Hier können die Standardeinstellungen der verschiedenen Elemente geändert werden. Wird ein neues Elemente von der Elementauswahl links in das Formular gezogen, hat das neue Element diese Eigenschaften.
151
152 == Navigation ==
153
154 [[image:designer_element_navigation_de.png]]
155
gru 10.1 156 Eingabefelder und andere Formularelemente können sich innerhalb von [[Fieldsets>>doc:Formcycle.Designer.Form.FormElements.Fieldset]] oder [[Containern>>doc:Formcycle.Designer.Form.FormElements.Container]] befinden. Diese können sich ebenfalls in anderen Fieldsets oder Containern befinden. Die Navigationsleiste links unten bietet eine schnelle Übersicht, wo sich das derzeit markierte Formularelement befindet.
gru 1.1 157
158 == Script- und CSS-Bereich ==
159
160 Beim diesem Bereich handelt es sich um einen fortgeschrittenen Bereich. Er wird durch Drücken auf den Pfeil [[image:designer_south_pane_expander.png]] unten im {{designer/}} geöffnet. Dieser Bereich besteht aus vier Unterbereichen:
161
162 ; Script-Bereich
gru 6.1 163 : Hier ist es möglich, die Formularlogik mit selber geschriebenen JavaScript zu beeinflussen. Dieses JavaScript wird erst ausgeführt, [[sobald das Formular fertig geladen ist>>url:https://api.jquery.com/ready/||target="_blank"]]. Alle JavaScript-Dateien, die [[als Formulardatei am Formular hochgeladen wurden>>doc:Formcycle.UserInterface.MyForms.Files]], werden beim Aufruf des Formulars automatisch geladen (und sofort ausgeführt). Je nach Anwendungszweck kann es sinnvoll sein, JavaScript nicht direkt im Script-Tab einzugeben, sondern als Datei hochzuladen. Dies bietet sich besonders am, um Funktionen auszulagern um Bibliotheken von Drittanbietern einzubinden, damit diese den JavaScript-Code im Script-Tab nicht unnötig groß machen. Weitere Informationen finden sich unter [[Script-Bereich>>doc:Formcycle.Designer.Form.CodingPanel.WebHome]].
gru 1.1 164 ; CSS-Bereich
gru 5.1 165 : In diesem Bereich kann das Aussehen des Formular durch selber geschriebenes CSS angepasst werden. Wie auch bei JavaScript werden alle CSS-Dateien, die am Formular hochgeladen wurden, automatisch mit eingebunden. Weitere Informationen finden sich unter [[CSS-Bereich>>doc:Formcycle.Designer.Form.CodingPanel.CSSTab.WebHome]].
gru 1.1 166 ; Metadaten
167 : Der hier eingegebene Text wird direkt im HTML-Header des Formulars mit eingebunden. Hier können etwa eigene meta-Attribute definiert werden oder zusätzliche CSS beziehungsweise JavaScript-Dateien eingebunden werden.
168 ; Variablen
169 : Bei Variablen handelt es sich um versteckte Eingabefelder. Diese werden oft in Verbindung mit JavaScript genutzt, um etwa bestimmte Werte im Voraus zu berechnen und für die spätere Verarbeitung auf dem Server verfügbar zu machen.
170
171 == Sprache & Version ==
172
173 [[image:designer_language_version_select_de.png]]
174
175 Rechts unten können weitere Sprachversionen des Formulars angelegt und zu anderen Versionen des Formulars gewechselt werden:
176
gru 15.1 177 * Das Formular, so wie es angelegt wird, ist erstmal in allen Sprachen so zu sehen. Um für eine bestimmte Sprache eine übersetzte Version des Formulars anzulegen, kann in die entsprechende Sprache gewechselt werden. Hier sind dann nur die Beschriftungstexte änderbar, jedoch nicht die Formularlogik. Siehe auch [[Internationalisierung>>doc:Formcycle.Designer.Form.Internationalization]].
gru 1.1 178 * Jedesmal, wenn das Formular gespeichert wird, erstellt das System automatisch ein Backup. Durch Klick rechts unten auf die Version kann bei Bedarf auf eine älteres Backup des Formular gewechselt werden.