Wiki source code of Schaltflächen

Show last authors
1 {{panel float="right"}}
2 (% class="block text-align-center%){{ficon name="XButtonList" size="4em"/}}
3
4 (% class="block%)The icon for form elements of type //button//.
5 {{/panel}}
6
7 == Functionality ==
8
9 The form element //button// adds buttons to the current form. Each button element may contain multiple buttons. By default, this element contains two buttons, //back// and //next//. To add or delete buttons, go to the section //value// on the right hand side.
10
11 For each button, you can select the action when the user clicks the button. Currently available actions are moving to a different page of the form, submitting the form, or saving the form when the user wishes to continue filling out the form at a later time. For more details, see the section //values// below.
12
13 {{figure image="designer_element_buttons_base_en.png"}}
14 Additional base properties for buttons. You can specify how the buttons should be aligned.
15 {{/figure}}
16
17 {{internBaseOptionsElement page="base"}}
18 {{table dataTypeAlpha="0" colWidth="-500"}}
19 |=Name|=Description
20 |Alignment|Changes the alignment (left, right, centre) of the buttons.
21 {{/table}}
22 {{/internBaseOptionsElement}}
23
24 {{figure image="designer_element_buttons_values_en.png"}}
25 For every button, you can enter the text that is shown in the form, and a name used for the HTML. You can also choose which action to perform when the button is pressed.
26 {{/figure}}
27
28 {{internBaseOptionsElement page="val"}}
29 {{table dataTypeAlpha="0" colWidth="-500"}}
30 |=Name|=Beschreibung
31 |Text|The text or label of the button the user sees.
32 |Name|The value of the HTML attribute //name// of the HTML input. This name can be used for selecting the button via JavaScript or CSS. For example the CSS {{code language="css"}}[name=btnSubmit] { width:100%;}{{/code}} makes the button named //btnSubmit// take up the entire available width.
33 |Action|Select what should happen when the user clicks the button.
34 {{/table}}
35
36 === Add and delete buttons
37
38 A new row for adding new button is added automatically as neccessary. To delete a button, press on the {{icon name="trash"/}} icon on the left. You can also move the buttons via drag&drop to change their order (use {{icon name="trash"/}} icon for dragging).
39
40 === Available actions
41
42 Each button lets you specify an action. You can also choose whether to validate the form or not. When you validate the form, checks are done to ensure that no required fields were left empty and that no invalid data was entered.
43
44 The following actions are available.
45
46 {{table dataTypeAlpha="0" colWidth="-500"}}
47 |=Name|=Beschreibung
48 |No action|No action happens by clicking the button. You can use this option if your own action should get implemented with Javascript. The following example displays a short message if you press the button with the name //btnAlert//.
49 {{code language="Javascript"}}
50 $('[name=btnAlert]').click(() => alert("The button was pressed."));
51 {{/code}}
52 |Page x|Navigates to the selected page. There is a separate action for each page.
53 |Page x + check|Navigates to the selected page, unless any form fields on the current page are invalid (missing input or wrong input).
54 |Submit|Sends the form to the server and creates a new form record. The form is sent even if it is invalid.
55 |Sumbit + check|Checks whether the form is valid and if it is, sends the form to the server. Otherwise, informs the user about missing or invalid data by showing error messages.
56 |Submit no save|Sends the form to the server, without creating a new form record. This action should be used if you only need to run a [[workflow>>doc:Formcycle.Designer.Workflow.WebHome]].
57 |Submit no save popup|Sends the form to the server, without creating a new form record. The returned response page is shown as a popup. This action should be used if you only need to run a [[workflow>>doc:Formcycle.Designer.Workflow.WebHome]]. One use case for this action is to create some files on the server and return those files to the user while keeping the form open. See also [[the workflow action file download>>doc:Formcycle.Designer.Workflow.Actions.FileDownload]].
58 |Save|Saves the form data on the server, but do not run any workflow. Usually this is used to let the user save their current progress and fill out the rest of the form later. This does not validate the form. This sets the process to a locked state, as no final submit has yet been made, and should therefore be used for the initial filling process. For a later saving, a submit button is recommended, because the data will be overwritten.
59 |Save + check|Validates the form, and if it is valid, saves the form data on the server only. Usually this is used to let the user save their current progress and fill out the rest of the form later. This sets the process to a locked state, as no final submit has yet been made, and should therefore be used for the initial filling process. For a later saving, a submit button is recommended, because the data will be overwritten.
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"/}}