Wiki source code of URL-Parameter
Show last authors
author | version | line-number | content |
---|---|---|---|
1 | {{content/}} | ||
2 | |||
3 | When you open a form, you can add additional parameters to the URL of the form to prefill some form fields. You need to separate URL parameters from the main URL by adding a question mark **?**. If you need multiple parameters, separate them with an ampersand **&**. This results the following pattern for the URL: | ||
4 | |||
5 | {{code language="none"}} | ||
6 | http://<host>//formcycle/form/alias/1/demo?<field1Name>=<field1Value>&<field2Name>=<field2Value>&... | ||
7 | {{/code}} | ||
8 | |||
9 | Please note that when you need to use special characters, you need to [[escape them>>url:https://en.wikipedia.org/wiki/Percent-encoding]]. For example, to specify an URL parameters named //tfCompany// with the value //Clark & Joe Ltd.//: | ||
10 | |||
11 | {{code language="none"}} | ||
12 | http://<host>//formcycle/form/alias/1/demo?tfCompany=Clark%20%26%20Joe%20Ltd. | ||
13 | {{/code}} | ||
14 | |||
15 | == Using URL parameters == | ||
16 | |||
17 | You can use URL parameters to prefill form fields both when the form is opened for the first time as well as when a saved or submitted form is opened again. Please note that existing form field values are overwritten when URL parameters are used. | ||
18 | |||
19 | == Examples == | ||
20 | |||
21 | === Prefilling an input field === | ||
22 | |||
23 | {{figure image="designer_url_param_textfield_en.png"}} | ||
24 | Setup in the {{designer/}} for prefilling an input field. | ||
25 | {{/figure}} | ||
26 | |||
27 | {{figure image="designer_url_param_textfield_demo_en.png"}} | ||
28 | When opening the form, we set the URL parameter //tfMail//. This sets the initial value of the corresponding input field. | ||
29 | {{/figure}} | ||
30 | |||
31 | Create a [[input field>>doc:Formcycle.FormDesigner.FormElements.Input]] with the name //tfMail//. When you open the form, add the URL parameter //tfMail// and set it to an email address. The URL could look like: | ||
32 | |||
33 | {{code language="none"}} | ||
34 | http://<host>/formcycle/form/alias/1/demo?tfMail=johndoe@example.com | ||
35 | {{/code}} | ||
36 | |||
37 | As shown in the figure to the right, this sets the initial value of the input field to the given email address. | ||
38 | |||
39 | === Prefilling a select field === | ||
40 | |||
41 | {{figure image="designer_url_param_select_en.png"}} | ||
42 | Setup in the {{designer/}} for prefilling a select field. | ||
43 | {{/figure}} | ||
44 | |||
45 | {{figure image="designer_url_param_select_demo_en.png"}} | ||
46 | When opening the form, we set the URL parameter //selSex//. This sets the initial value of the corresponding select field. | ||
47 | {{/figure}} | ||
48 | |||
49 | You can preselect an option of a [[select field>>doc:Formcycle.FormDesigner.FormElements.Selection]] as well. Note that you cannot use the displayed name as the value of the URL parameter. You need to use the value specified in the //values// column of the options section in the properties panel of the {{designer/}}. | ||
50 | |||
51 | Create a select field with the name //selSex//. When you open the form, add the URL parameter //selSex// and set it to //f//. The URL could look like: | ||
52 | |||
53 | {{code language="none"}} | ||
54 | http://<host>/formcycle/form/alias/1/demo?selSex=f | ||
55 | {{/code}} | ||
56 | |||
57 | As shown in the figure to the right, this preselects the option //female//. | ||
58 | |||
59 | {{info}} | ||
60 | You cannot prefill [[repeated elements>>doc:Formcycle.FormDesigner.ElementProperties.BaseProperties||anchor="repeat"]]. It is also not possible to set the initial number of repetitions via URL parameters. | ||
61 | {{/info}} | ||
62 | |||
63 | === Changing the form layout {{version major="6" minor="2" patch="0"/}} === | ||
64 | |||
65 | {{figure image="CSSTheme_eng.PNG"}} | ||
66 | To open a form with a different layout (CSS theme), use the URL paramter //xfc-rp-theme// and pass the UUID of the CSS theme as the value. The UUID is shown in the details panel (1) to the right hand side of the //Design (CSS)// menu. | ||
67 | {{/figure}} | ||
68 | |||
69 | You can create different form layouts (CSS themes) in the [[Design (CSS)>>Formcycle.UserInterface.FilesAndTemplates.Design]] menu. You can then assign one form layout to each form. If you want to open a form with a different layout, such as a blue or red variation of your main theme, you can use an optional URL parameter. | ||
70 | |||
71 | The name of the URL parameter is //xfc-rp-theme//, and its value needs to be the UUID of the form layout. You can view the UUID of each form layout in the [[Design (CSS)>>Formcycle.UserInterface.FilesAndTemplates.Design]] menu (see screenshot to the right). | ||
72 | |||
73 | For example: | ||
74 | |||
75 | {{code language="none"}} | ||
76 | http://<host>/formcycle/form/alias/1/demo?xfc-rp-theme=<UUID> | ||
77 | http://<host>/formcycle/form/alias/1/demo?xfc-rp-theme=8b4a9c2d-34d9-4cff-8759-9b54ed4b0ff1 | ||
78 | {{/code}} |