Wiki source code of Formular

Show last authors
1 {{content/}}
2
3 {{figure image="designer_workspace_en.png" width="600" clear="h2"}}
4 The workspace of the {{designer case="gen"/}}. It is broken up into several sections you can see in the figure above. The main area in the middle is the main design area that lets you edit your form.
5 {{/figure}}
6
7 The {{designer/}} provides you with a simple user interface for creating forms via drag&drop. Take a form element from the element bar on the left and drag it with the mouse to the form preview in the middle. Click on an existing form element to select it. View or edit its properties in the properties panel on the right.
8
9 Use the action bar on the top save the form. It also offers you several more advanced settings, such as setting up the workflow or creating a new datasource for the form.
10
11 The following is a short overview of the main sections of the workspace.
12
13 == Selecting an element ==
14
15 {{figure image="designer_element_list_en.png" width="250"}}
16 The list of all avaiable form elements. Add them to the form via drag&drop. Click on an element with the mouse and drag it into the form.
17 {{/figure}}
18
19 To the left hand side of the {{designer/}} you can find the elements bar with all available form elements. To add a form element to the form, click on the element you would like to add and move it with mouse to the form preview in the middle. Place the form element on the position where you wish to insert it. There are several tabs to the top of the element bar:
20
21 ; Elements
22 : The standard form elements provided by {{formcycle/}}. These are always available. See also the [[list of form elements>>doc:.FormElements.WebHome]].
23 ; Templates
24 : Here you can find form templates. Do a right click on a form element to save it as a template that is then available to all forms. See [[templates>>doc:ElementTemplates]] for further information.
25 ; More elements
26 : When a catalogue plugin was installed: This tab offers you more pre-configured form elements provided by the plugin.
27
28 More tabs may also show up in case a widget plugin was installed.
29
30 == Action bar ==
31
32 {{figure image="designer_topbar_en.png" width="300"}}
33 The action bar at the top contains actions for saving the form or displaying a preview. More advanced actions are available via the //More// button, such as creating a database source.
34 {{/figure}}
35
36 The action bar at the top contains actions related to the form:
37
38 ; {{ficon name="content-save-all"/}} Save
39 : This button can be used to save the current state of the form. The formula will be updated so that the saved state appears when the form is opened. It can also be saved directly using the keyboard shortcut //Ctrl+S//.
40 ; {{ficon name="properties"/}} Elements
41 : This displays an overview of all form elements in tabular form. Hereby an overview of all elements and their properties can be gained quickly. It is also possible to export this element overview as a CSV or Excel file.
42 ; {{ficon name="share-variant"/}} Publish
43 : This button provides various options for integrating the form. This ranges from a simple link to call the form, to integration into a web page, to integration into Typo3 and WordPress. See [[the Publish form menu>>doc:Formcycle.UserInterface.MyForms.Publish.WebHome]] for more information on this.
44 ; {{ficon name="undo"/}} Undo
45 : This button is used to undo the last change made to the form.
46 ; {{ficon name="refresh"/}} Redo
47 : This button is used to reapply the last change that was undone.
48 ; {{ficon name="play-circle-outline1"/}} Open
49 : Opens the form in a new tab, unlike the preview mode, the saved form will be opened, i.e. unsaved changes will not be available.
50 ; {{ficon name="play1"/}} Preview
51 : This button can be used to open a preview of the form. In the preview the form can be tried out. This is especially useful if the form has been designed dynamically, for example by showing and hiding elements under certain conditions.
52
53 There are also more advanced settings under the //More// button. Most of these settings can also be made in the [[the form overview>>doc:Formcycle.UserInterface.MyForms.WebHome]]. There are the following menu items:
54
55 ; {{ficon name="formycle-form"/}} Form
56 : This opens the form tab in the designer and the form can be configured.
57 ; {{ficon name="workflow-fill"/}} Workflow
58 : This opens the workflow tab in the designer and the workflow of the form can be configured. The workflow controls what happens after the form has been submitted. For example, emails can be sent or PDF form can be generated here. See [[Workflow>>doc:Formcycle.Designer.Workflow.WebHome]] for more information.
59 ; {{ficon name="content-save-settings"/}} Files
60 : Here files can be uploaded, which are only needed for this form. See also [[Files>>doc:Formcycle.UserInterface.MyForms.Files]]
61 ; {{ficon name="user"/}} Access
62 : This menu item contains various settings for form permissions. For example, you can set whether the form should only be accessible with a password or which user groups are allowed to edit the form. See also [[Access Settings>>doc:Formcycle.UserInterface.MyForms.Access]].
63 ; {{ficon name="inbox"/}} Mailbox
64 : Here you can set in which mailbox sent forms are to be found in the [[Inbox>>doc:Formcycle.Inbox.WebHome]]. Furthermore, it is also possible to specify which values of form elements are displayed in the mailbox. See also [[Inbox settings>>doc:Formcycle.UserInterface.MyForms.Inbox]].
65 ; {{ficon name="table-large"/}} Data table
66 : The data table is an advanced facility and allows you to create your own database tables for form data. See also [[DataTable>>doc:Formcycle.UserInterface.MyForms.DataTables]].
67 ; {{ficon name="clock-outline"/}} Versions
68 : All versions of the form can be viewed and managed here. It is also possible to create a new version or export existing ones. See also [[Form versions>>doc:Formcycle.UserInterface.MyForms.Versions]].
69 ; {{ficon name="information-outline"/}} Info
70 : Short overview of some technical information about the form, like its ID or creation date.
71
72 ; {{ficon name="date"/}} Schedules
73 : Here schedules can be created and edited. See also [[Appointment Management>>doc:Formcycle.UserInterface.Appointments.WebHome]]
74
75 ; {{ficon name="file-blank"/}} Templates
76 : {{html}} {{/html}}
77 :; {{ficon name="file-css-blank"/}} CSS templates
78 :: CSS templates can be set up here, which provide the ability to define global //CSS// rules that can be used by all forms. See also [[CSS-Templates>>doc:Formcycle.UserInterface.FilesAndTemplates.Design.WebHome]]
79 :; {{ficon name="file-html-blank"/}} HTML templates
80 :: HTML templates can be created and edited here, for example for [[Closing Pages>>doc:Formcycle.Designer.Workflow.Actions.HtmlResponsePage]], [[Privacy Statement>>doc:Formcycle.Designer.Form.FormElements.Footer||anchor="HDrpfschutzerklE4rung"]] or the [[Imprint>>doc:Formcycle.Designer.Form.FormElements.Footer||anchor="HImpressum"]]. See also [[HTML templates>>doc:Formcycle.UserInterface.FilesAndTemplates.HTML.WebHome]]
81
82 ; {{ficon name="database"/}} Sources
83 : {{html}} {{/html}}
84 :; {{ficon name="database-search"/}} Database queries
85 :: New queries to SQL databases can be set up here. See also [[database-queries>>doc:Formcycle.UserInterface.Data.DBQueries]].
86 :; {{ficon name="account-search"/}} LDAP queries
87 :: New queries can be set up here using LDAP. See also [[LDAP queries>>doc:Formcycle.UserInterface.Data.LDAPQueries]].
88 :; {{ficon name="table-large"/}} Data sources
89 :: Static data sources can be stored here, such as lists of cities or postal codes. These lists can then also be used in the form, for example as selection options of [[selection fields>>doc:Formcycle.Designer.Form.FormElements.Selection]]. See also [[source>>doc:Formcycle.UserInterface.Data.Sources]]
90
91 ; {{ficon name="lan-connect"/}} Connections
92 : {{html}} {{/html}}
93 :; {{ficon name="database-gear"/}} DB connections
94 :: Before database queries can be set up, a connection to the corresponding database must be established. This can be done via this menu item. See also [[DB Connections>>doc:Formcycle.UserInterface.Data.DBConnections]].
95 :; {{ficon name="user"/}} LDAP connections.
96 :: Before LDAP queries can be set up, a connection to the appropriate LDAP server or AD must be set up. This can be done via this menu item. See also [[LDAP Connections>>doc:Formcycle.UserInterface.Data.LDAPConnections]]
97
98 ; {{icon name="plus"/}} Counter
99 : Here [[Counter>>Formcycle.UserInterface.Data.Counter]] can be created and configured. These can be used, for example, by the [[Modify Counter>>doc:Formcycle.Designer.Workflow.Actions.ModifyCounter]] action in the workflow.
100
101 ; {{icon name="download"/}} Export
102 : {{html}} {{/html}}
103 :; {{ficon name="shredder"/}} Form Export
104 :: Here you can export a web form or workflow as a JSON file.
105 :; {{ficon name="shredder"/}} Word / PDF export
106 :: Here the form can be exported as a static Word or PDF document. See also [[Word / PDF export>>doc:Formcycle.UserInterface.MyForms.Export.Blank]]
107 :; {{ficon name="shredder"/}} Form summary
108 :: Here you can create a profile with an overview of the most important properties of a form. See also [[form summary>>doc:Formcycle.UserInterface.MyForms.Export.Summary]]
109
110 ; {{icon name="upload"/}} Import
111 : Here a web form or workflow can be imported as a JSON file.
112
113 == Form preview ==
114
115 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.
116
117 === Move form elements ===
118
119 To move an existing form element to a different position, you have got two options:
120
121 * Click on the element and drag it with the mouse to the desired position
122 * Do a double click on the element, scroll if necessary, and click on the new position. This comes in handy for longer forms as it does not required you to hold down the left mouse button while scrolling.
123
124 === Copy and delete form elements ===
125
126 To delete or copy (duplicate) a form element, do a right click on the form element. This opens a context menu with several options, such as deleting or duplicating it. Keyboard shortcuts are supported as well: //del// for deleting an element, ctrl+c and ctrl+v for copying an element.
127
128 === Search for elements ===
129
130 {{figure image="designer_element_search_en.png"}}
131 The search bar for finding form elements. Open it by clicking on the search button {{icon name="search"/}} at the bottom right; or press ctrl+f.
132 {{/figure}}
133
134 As a form grows larger, finding a certain element becomes increasingly more difficult. Use the element search to locate the element. To open the search bar, either
135
136 * click the search button {{icon name="search"/}} to the bottom right
137 * or press ctrl+f
138
139 Enter the name of the element you are looking for. The search bar shows you how many elements were found. Press enter or click on the left and right arrows to jump to the element. This searches for the name of the element, that is, the name you enter in the base settings section of the properties panel. It it also possible to search for other properties of elements: For example, when you want to search for all options of a select field that contain the word //Website//, enter //options:Website// in the search bar.
140
141 == Properties panel ==
142
143 The properties panel lets you edit both some general settings of the form, as well as the properties of the selected form element. You can switch between different sets of properties by clicking on the tabs at the top:
144
145 ; Properties
146 : Available only when a form element is selected: Contains the most common properties of form elements, such as its name, a help text or its constraints. See also the [[element properties>>doc:.ElementProperties.WebHome]] and [[the list of form elements>>doc:.FormElements.WebHome]].
147 ; Advanced
148 : Available only when a form element is selected: Contains some less common properties, such as user group and state-based restrictions or HTML attributes. See also the [[element properties>>doc:.ElementProperties.WebHome]] and [[the list of form elements>>doc:.FormElements.WebHome]].
149 ; Form
150 : This tab is always and lets you edit the settings of the current form, such as its name, width, or layout. See also [[form properties>>doc:Formcycle.Designer.Form.FormProperties]].
151 ; Default
152 : Available only when a form element is selected: Contains the default settings for each element type. When you place a new element in the form, the new elements gets these properties. For example, you could change the default settings so that all input fields are required fields by default.
153
154 == Navigation ==
155
156 [[image:designer_element_navigation_en.png]]
157
158 You can place input fields and other form fields inside [[fieldsets>>doc:.FormElements.Fieldset]] or [[containers>>doc:.FormElements.Container]]. And you can also put containers or fieldsets inside containers or fieldsets. To get a quick overview of which containers and fieldsets and element is inside of, look the navigation bar to the bottom left of the {{designer/}}. By clicking on a container or fieldset in the navigation bar, you can also quickly select that container or fieldset.
159
160 == Script and CSS section ==
161
162 This is an advanced section that lets you customize your form even further. Click on the arrow [[image:designer_south_pane_expander.png]] to the bottom of the {{designer/}} to open it. This section consists of four different tabs:
163
164 ; JavaScript tab
165 : Write your own custom JavaScript logic to make the form work the way you want. The JavaScript you write in this tab is run automatically once the form is done loading, ie. [[when the document is ready>>url:https://api.jquery.com/ready/||target="_blank"]]. All JavaScript files uploaded as a [[form resource >>doc:Formcycle.UserInterface.MyForms.Files]] are included automatically in the form (but are run as soon as possible, if necessary, wait for the document to finish loading). Depending on your use case, you may want to extract some parts of your JavaScript into a separate files, especially utility functions and libraries that do not need the DOM to be loaded fully. This cleans up your JavaScript code and makes it easier to understand. For more in-depth details, see the [[JavaScript tab>>doc:Formcycle.Designer.Form.CodingPanel.WebHome]].
166 ; CSS tab
167 : Customize the layout and look of your form by adding your own hand-crafted CSS. As with JavaScript, you can also upload CSS files as a form resource, these are loaded automatically as well. See also the help page on the [[CSS tab>>doc:Formcycle.Designer.Form.CodingPanel.CSSTab.WebHome]].
168 ; Metadata
169 : The text you enter in this tab is included in the HTML header of the form. This lets you, among other things, add your own meta attributes for search engine optimization. Or you can include some additional script, CSS or font files. See also the [[meta tab>>doc:Formcycle.Designer.Form.CodingPanel.MetaTab]].
170 ; Variables
171 : Variables are hidden input fields added to the form. Often they are used with JavaScript to store the result of certain computations and make these available for further processing. See also the [[variables tab>>doc:Formcycle.Designer.Form.CodingPanel.VariablesTab]].
172
173 == Language and version ==
174
175 [[image:designer_language_version_select_en.png]]
176
177 You can find the language and version settings to the bottom right of the {{designer/}}:
178
179 * The default language of the form is what you enter when you first create the form. Form elements have got many properties, some of which are functional, such as whether it is a required field. Some properties are language-dependent, such as the label text or the placeholder. You can translate these language-dependent properties into different languages to make your form international. To do so, click on the language in the toolbar at the bottom and switch to the language you would like to edit. This hides all functional properties and only shows those properties that need to be translated. see also [[internationalization>>doc:Formcycle.Designer.Form.Internationalization]].
180 * Each time you save the form, the system creates a backup automatically. Click on the version in the toolbar at the bottom to switch to an older backup version of the form.