Changes for page Formulardesigner

From version < 3.1 >

edited by awa
on 06.03.2019, 13:06

To version < 7.16

edited by gru
on 13.11.2020, 11:08

Change comment: There is no comment for this version

Raw
Rendered

Summary

Page properties (2 modified, 0 added, 0 removed)

Details

Page properties

Author

@@ -1,1
          +1,1 @@
--XWiki.awa
++XWiki.gru

Content

@@ -1,96
          +1,183 @@
--== Quick Start Guide ==
++{{content/}}
--{{panel inline="false" initial="hidden" triggerable="true" title="drag and position elements in the design area"}}
++{{figure image="designer_workspace_en.png" width="600" clear="h2"}}
++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.
++{{/figure}}
--{{figure image="move_element_en.png" width="300"}} {{/figure}}
++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.
--Move the mouse over the item, click on it and drag it to the workspace.
++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.
++The following is a short overview of the main sections of the workspace.
--To move an item to a specific location, position it above, below or next to the existing element. Would you like to add an item to a container (e.g. DIV or fieldset ), so moving it over this. [[Position elements in the designer>>Elemente]]
--{{/panel}}
++== Selecting an element ==
--{{panel inline="false" triggerable="true" initial="hidden" title="align label of a element"}}
++{{figure image="designer_element_list_en.png" width="250"}}
++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.
++{{/figure}}
--{{figure image="element_label_align_en.png" width="300"}} {{/figure}}
++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:
--{{figure image="element_label_width_en.png" width="300"}} {{/figure}}
++; Elements
++: The standard form elements provided by {{formcycle/}}. These are always available. See also the [[list of form elements>>doc:.FormElements.WebHome]].
++; Templates
++: 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.
++; More elements
++: When a catalogue plugin was installed: This tab offers you more pre-configured form elements provided by the plugin.
--Most form elements (text fields, checkboxes, lists, upload ...) already integrate a label (caption), so that this does not have to be defined separately. The position of the label is determined by the properties of the element. The distance between label and item will also be determined by the properties (attribute //width//).
++More tabs may also show up in case a widget plugin was installed.
--{{/panel}}
++== Action bar ==
--{{panel initial="hidden" inline="false" triggerable="true" title="defining required"}}
++{{figure image="designer_topbar_en_62.png" width="300"}}
++The action bar on the top lets you save the form or see a preview of the current form. Click on more to access advanced options such as creating a database query.
++{{/figure}}
--{{figure image="element_required_en.png" width="300"}} {{/figure}}
++You can find the action bar at the top of the {{designer/}}:
--Input and selection elements can be defined to required. If the option //required// is selected, the user must fill in the appropriate item or select a value, it does not, an error message is displayed. Changing the error style will be described below on this page.
++; {{ficon name="content-save-all"/}}Save
++: Save the current version of the form. This also updates the form immediately: all user who open the form link from now on will see the form as you saved it. You can also use the keyboard shortcut ctrl + s.
++; {{ficon name="workflow-fill"/}}Workflow
++: View or edit the workflow of the form. The workflow controls what happens after a form was submitted. For example, you can send emails or create PDF documents. See also [[workflow processing>>doc:Formcycle.UserInterface.MyForms.WorkflowProcessing.WebHome]].
++; {{ficon name="share-variant"/}}Publish
++: This offers you several options for including the form in your web page. This ranges from a simple standalone link to more complex integrations such as Typo3 and WordPress. See also [[the publish form menu>>doc:Formcycle.UserInterface.MyForms.Publish.WebHome]].
++; {{ficon name="play1"/}}Preview
++: Open a preview of the current form in a new window. Even when you did not save the form yet, this always shows you the form as you see it in the {{designer/}}. This lets you try out the form first before you save it. Especially useful when you made the form dynamic with conditions for when to hide or show some form elements.
++The //More// button lets you access several advanced settings. Most of these settings are also available in the [[form overview page>>doc:Formcycle.UserInterface.MyForms.WebHome]]. The following settings are available:
--{{/panel}}
++; {{ficon name="play1"/}} Open
++: {{html}}&nbsp;{{/html}}
++:; {{ficon name="play1"/}} In preview mode
++:: Open a preview of the current form in a new window. Even when you did not save the form yet, this always shows you the form as you see it in the {{designer/}}. This lets you try out the form first before you save it. Especially useful when you made the form dynamic with conditions for when to hide or show some form elements.
++:; {{ficon name="play1"/}} In live mode
++:: Open the form in a new window. In contrast to preview mode, this will the open the form as it is saved in the system. Unsaved changes will not be present.
--{{panel initial="hidden" triggerable="true" inline="false" title="specify validator / datatype of input fields"}}
++; {{ficon name="properties"/}} Element overview
++: Opens a new window with a list of all form elements in the current form. This lets you quickly get an overview off all elements and its properties. You can also export the list as a CSV or excel file.
++; {{ficon name="lock-open-outline"/}} Lock / unlock
++: When many users are working in the system, you may run into troubles when multiple users attempt to edit a form simultaneously. Edits made by one user could be overwritten by another user.
++To prevent this from happening, you can lock the form. When a form is locked, all other users are receive a warning when they attempt to save the form
++; {{ficon name="lock-open-outline"/}} Files
++: Lets you upload arbitrary files. Should be used for files that are required only for this form. For files shared by multiple forms, upload it as a [[client resource>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]]. See also [[form resource files>>doc:Formcycle.UserInterface.MyForms.Files]].
++; {{ficon name="user-doi"/}} Double opt-in
++: If necessary, lets you setup a double opt-in process for the form. When a user enters some data and submits the form, they are sent an email and are asked to confirm their submission. Until they do, the submitted data is not processed further in any way. See also [[double opt-in>>doc:Formcycle.UserInterface.MyForms.DoubleOptIn.WebHome]].
++; {{ficon name="user"/}} Access
++: Here you can change several settings related to form permissions. For example, you can add a password for opening the form, or change which user groups may edit the form. See also [[access settings>>doc:Formcycle.UserInterface.MyForms.Access]].
++; {{ficon name="inbox"/}} Inbox
++: Lets you change the [[inbox>>doc:Formcycle.Inbox.WebHome]] for submitted forms. You can also modify which columns are show in the form-specific inbox. See also [[inbox settings>>doc:Formcycle.UserInterface.MyForms.Inbox]].
++; {{ficon name="table-large"/}} Data table
++: The data table is an advanced options that allows you to create your own database table for submitted form data. See also [[data table settings>>doc:Formcycle.UserInterface.MyForms.DataTables]].
++; {{ficon name="clock-outline"/}} Versions
++: A list of all versions of the form. You can add a version and delete or export existing versions. See also [[form versions>>doc:Formcycle.UserInterface.MyForms.Versions]].
++; {{ficon name="information-outline"/}} Info
++: An overview with some technical details for the form, such as its ID or the date when it was created.
--{{figure image="element_datatype_en.png" width="300"}} {{/figure}}
++; {{icon name="download"/}} Export  {{version major="6" minor="2" patch="0"/}}
++: {{html}}&nbsp;{{/html}}
++:; {{ficon name="shredder"/}} Word / PDF Export
++:: The form can be exported here as a static Word or PDF document. See also [[Word / PDF Export>>doc:Formcycle.UserInterface.MyForms.Export.Blank]].
++:; {{ficon name="shredder"/}} Form summary
++:: A profile with an overview of the most important properties of a form can be created here. See also [[Form summary>>doc:Formcycle.UserInterface.MyForms.Export.Summary]].
--For each input element, a data type (e.g. email, number, money) to be defined.
++; {{ficon name="date"/}} Schedules {{version major="6" minor="5" patch="0"/}}
++: Schedules can be created and edited here. See also [[Appointment managment>>doc:Formcycle.UserInterface.Appointments.WebHome]].
--{{/panel}}
++; {{ficon name="file-blank"/}} Templates {{version major="6" minor="6" patch="0"/}}
++: {{html}}&nbsp;{{/html}}
++:; {{ficon name="file-css-blank"/}} Design (CSS)
++:: CSS templates can be configured here, which offer the possibility to define global //CSS// rules that can be used by all forms. See also [[Design (CSS)>>doc:Formcycle.UserInterface.FilesAndTemplates.Design.WebHome]].
++:; {{ficon name="file-html-blank"/}} HTML
++:: HTML templates for [[response pages>>doc:Formcycle.UserInterface.MyForms.WorkflowProcessing.Actions.ResponsePage.WebHome]], [[privacy policy>>doc:Formcycle.FormDesigner.FormElements.Footer||anchor="HPrivacypolicy"]] or the [[imprint>>doc:Formcycle.FormDesigner.FormElements.Footer||anchor="HImprint"]] can be created and edited here. See also [[HTML templates>>doc:Formcycle.UserInterface.FilesAndTemplates.HTML.WebHome]].
--{{panel inline="false" initial="hidden" triggerable="true" title="hide elements"}}
++; {{ficon name="database"/}} Data sources
++: {{html}}&nbsp;{{/html}}
++:; {{ficon name="database-search"/}} Database queries
++:: Here you can view or edit SQL queries for custom databases. See also [[database queries>>doc:Formcycle.UserInterface.Data.DBQueries]].
++:; {{ficon name="account-search"/}} LDAP queries
++:: Here you can view or edit LDAP queries for custom active directories. See also [[LDAP-Abfragen>>doc:Formcycle.UserInterface.Data.LDAPQueries]].
++:; {{ficon name="table-large"/}} Sources
++:: Add a datasource with static CSV, XML or JSON data, such as a list of city names or ZIP codes. It is possible to import EXCEL files as well. You can then use this data in the form, such as with [[select elements>>doc:.FormElements.Selection]]. See also [[Sources>>doc:Formcycle.UserInterface.Data.Sources]].
--{{figure image="element_hide_en.png" width="300"}} Element (selection) is displayed when checkbox "myCheckBox" has been activated.{{/figure}}
++; {{ficon name="lan-connect"/}} Connections
++: {{html}}&nbsp;{{/html}}
++:; {{ficon name="database-gear"/}} Database connections
++:: To run a database query, you first need to configure a connection to a database. This menu entry lets you do that. See also [[database connections>>doc:Formcycle.UserInterface.Data.DBConnections]].
++:; {{ficon name="user"/}} LDAP connection
++:: To run an LDAP query, you first need to configure a connection to an active directory. This menu entry lets you do that. See also [[LDAP connections>>doc:Formcycle.UserInterface.Data.LDAPConnections]].
--{{figure image="element_visible_if_en.png" width="300"}} Element (box) is hidden when was checkbox "myCheckBox" enabled.{{/figure}}
++; {{ficon name="action-download-file"/}} Local backups
++: {{html}}&nbsp;{{/html}}
++:; {{ficon name="folder"/}} Load local backup
++:: Download the current form as file to your computer. You can use this as an additional backup mechanism, or to share forms with other people. Please note that this only exports the form itself, not the workflow or upload files. To export the entire form with the workflow and all files,[[use the form export>>doc:Formcycle.UserInterface.MyForms.Export.WebHome]].
++:; {{ficon name="download-network"/}} Save local backup
++:: Upload a form saved on your computer. This replaces the current content of the {{designer/}} with the form you select here.
--{{/panel}}
++== Form preview ==
--{{panel initial="hidden" inline="false" triggerable="true" title="add pictures"}}
++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.
--{{figure image="element_image_en.png" width="300"}} {{/figure}}
++=== Move form elements ===
--First move the //picture element// to the desired location. Then move on the image (file) from the File Explorer ( Windows ) / Finder ( Mac ) in the //picture element// "drop" area.
++To move an existing form element to a different position, you have got two options:
--{{/panel}}
++* Click on the element and drag it with the mouse to the desired position
++* 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.
--{{panel initial="hidden" triggerable="true" inline="false" title="insert new form page"}}
++=== Copy and delete form elements ===
--{{figure image="new_page_en.png" width="300"}} {{/figure}}
++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.
--{{figure image="new_page2_en.png" width="300"}} {{/figure}}
++=== Search for elements ===
--With the form designer can easily create multi-page forms.
--{{/panel}}
++{{figure image="designer_element_search_en.png"}}
++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.
++{{/figure}}
--{{panel initial="hidden" triggerable="true" inline="false" title="change relative width of elements"}}
++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
--{{figure image="relative_size_en.png" width="300"}} {{/figure}}
++* click the search button {{icon name="search"/}} to the bottom right
++* or press ctrl+f
--{{figure image="relative_size2_en.png" width="300"}} {{/figure}}
++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.
++== Properties panel ==
--All elements are relatively positioned, the only way that the form can be adapted to different devices and resolutions. Therefore there are, with few exceptions, not absolute sizes. The width of elements is always a relative value.
++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:
--Example:
++; Properties
++: 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]].
++; Advanced
++: 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]].
++; Form
++: 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.FormDesigner.FormProperties]].
++; Default
++: 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.
--There are two elements side by side whose width corresponds to 50 % to the total width of the form . If for the right element now the relative width "2" is set, this element has a factor of 2 compared to the first element. The left element is smaller and the right is greater (in percent : left ( 33 % ) and right ( 66 % ) ). is the size of the browser changes, the relationships of the elements remain the same.
++== Navigation ==
++[[image:designer_element_navigation_en.png]]
--{{/panel}}
++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.
--{{panel initial="hidden" triggerable="true" title="duplicate elements" inline="false"}}
++== Script and CSS section ==
--{{figure image="duplicate_en.png" width="300"}} {{/figure}}
++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:
--Select the item and duplicate it on the icon in the toolbar. Please note that only one element can be duplicated. Being located in a duplicating element to other elements (e.g. //DIV// , //Fieldset// ...), these are also duplicated. After the operation, we find duplicate items new item name!
++; JavaScript tab
++: 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.FormDesigner.CodingPanel.WebHome]].
++; CSS tab
++: 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.FormDesigner.CodingPanel.CSSTab.WebHome]].
++; Metadata
++: 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.FormDesigner.CodingPanel.MetaTab]].
++; Variables
++: 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.FormDesigner.CodingPanel.VariablesTab]].
++== Language and version ==
--{{/panel}}
++[[image:designer_language_version_select_en.png]]
--{{panel initial="hidden" triggerable="true" title="publish form on the server" inline="false"}}
++You can find the language and version settings to the bottom right of the {{designer/}}:
--{{figure image="publish_en.png" width="300"}} {{/figure}}
--
--The publication of the form via the button in the toolbar.
--
--{{/panel}}
++* 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.FormDesigner.Internationalization]].
++* 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.