JavaScript and CSS - FORMCYCLE Wiki

author	version	line-number	content
1	{{figure image="designer_advanced_js_example_en.png"}}
2	Add custom logic in the JavaScript tab. Here we (a) add a validator to the email field that only allows certain hosts in the email address. And (b), we simplify entering currency values by setting up the library //autonumeric//.
3	{{/figure}}
4
5	{{figure image="designer_advanced_css_example_en.png"}}
6	Changed or customize the layout of the form in the {{smallcaps}}Css{{/smallcaps}} tab. Here we give labels a blue tint and remove the border of input fields.
7	{{/figure}}
8
9	{{figure image="designer_advanced_meta_example.png"}}
10	Add custom {{smallcaps}}Html{{/smallcaps}} tags to the head in the meta tab. Here we include a font and a JavaScript library from a CDN and set some meta tags such as the author and the description.
11	{{/figure}}
12
13	{{figure image="designer_advanced_variables_example.png"}}
14	Add hidden input fields in the variables tab. Here we add the three variables named //varDate//, //varState//, and //varCount//. You could save the date when the form was opened for the first time in the input field //varDate//. It is then always available, even after it was submitted and processed on the server.
15	{{/figure}}
16
17	The {{designer/}} offers you a variety of options to create your form without any programming skills. When you design complex forms you encounter special requirements that cannot be implemented with the graphical interface. {{formcycle/}} does not restrict you in any way and lets you add custom logic as it becomes necessary.
18
19	As with all web pages, the web forms generated by {{formcycle/}} makes use of {{smallcaps}}Html{{/smallcaps}}, JavaScript and {{smallcaps}}Css{{/smallcaps}}. To add your own JavaScript and {{smallcaps}}Css{{/smallcaps}}, you have got several options:
20
21	* Create a [[client file>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]] ending with //.js// or //.css//. These files are automatically included in all forms. This is useful for libraries that every form required.
22	* Create a [[form file>>doc:Formcycle.UserInterface.MyForms.Files]] ending with //.js// or //.css//. These files are included in that form automatically. Use this for libraries you only need for one form.
23	* Go to the JavaScript or {{smallcaps}}Css{{/smallcaps}} tab of the {{designer/}} and add the JavaScript or {{smallcaps}}Css{{/smallcaps}} directly. This is useful for form-specific logic or styles, such as adding a certain validator function to a form field or tweaking the layout of an image. When you make any changes in the {{smallcaps}}Css{{/smallcaps}} tab, you can see the result immediately applied to the form.
24	* You can also create a [[{{smallcaps}}Css{{/smallcaps}} template>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]] and select this as the [[layout of the form>>doc:Formcycle.FormDesigner.FormProperties\|\|anchor="layout"]]. This is useful for basic layout themes shared by multiple forms.
25
26	{{info}}
27	JavaScript you add as a client or form resource is executed immediately when the form is loaded. All the JavaScript you add in the JavaScript tab of the {{designer/}}, on the other hand, is executed only [[once the form has finished loading>>url:http://api.jquery.com/ready/\|\|rel="noopener noreferrer" target="blank"]].
28	{{/info}}
29
30	The advance section is available at the very bottom of the {{designer/}}. Open it by clicking on the [[image:designer_south_pane_expander.png]] arrow. This section is grouped into the following tabs:
31
32	; [[JavaScript tab>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]]
33	: Lets you add your own custom JavaScript. This script is run only [[once the form has finished loading>>url:http://api.jquery.com/ready/\|\|rel="noopener noreferrer" target="blank"]].
34	; [[{{smallcaps}}Css{{/smallcaps}} tab>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]]
35	: Lets you style the form with you own custom {{smallcaps}}Css{{/smallcaps}}. All changes you make here are applied to the form immediately once you click anywhere outside the {{smallcaps}}Css{{/smallcaps}} tab.
36	; [[Variables tab>>doc:Formcycle.FormDesigner.CodingPanel.VariablesTab]]
37	: Here you can add hidden input fields to the form ({{code language="none"}}<input type="hidden">{{/code}}). You may use them for data that is never shown in the form, but may be accessed on the server or via JavaScript.
38	; [[Meta tab>>doc:Formcycle.FormDesigner.CodingPanel.MetaTab]]
39	: Here you can add custom {{smallcaps}}Html{{/smallcaps}} to the {{code language="none"}}<head>{{/code}} of the generated form {{smallcaps}}Html{{/smallcaps}}. Use cases include adding additional {{smallcaps}}Css{{/smallcaps}} and script resources, or to add some meta tags for search engine optimization.
40
41	For editing JavaScript and {{smallcaps}}Css{{/smallcaps}}, we provide you with an intelligent code editor that features auto-completion, syntax highlighting, code indendation and much more. See the help pages on the [[JavaScript>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]] and [[{{smallcaps}}Css{{/smallcaps}} tab>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]] for more details.

Add custom logic in the JavaScript tab. Here we (a) add a validator to the email field that only allows certain hosts in the email address. And (b), we simplify entering currency values by setting up the library //autonumeric//.

3

4

5

6

Changed or customize the layout of the form in the {{smallcaps}}Css{{/smallcaps}} tab. Here we give labels a blue tint and remove the border of input fields.

Add custom {{smallcaps}}Html{{/smallcaps}} tags to the head in the meta tab. Here we include a font and a JavaScript library from a CDN and set some meta tags such as the author and the description.

Add hidden input fields in the variables tab. Here we add the three variables named //varDate//, //varState//, and //varCount//. You could save the date when the form was opened for the first time in the input field //varDate//. It is then always available, even after it was submitted and processed on the server.

15

16

17

The {{designer/}} offers you a variety of options to create your form without any programming skills. When you design complex forms you encounter special requirements that cannot be implemented with the graphical interface. {{formcycle/}} does not restrict you in any way and lets you add custom logic as it becomes necessary.

18

19

As with all web pages, the web forms generated by {{formcycle/}} makes use of {{smallcaps}}Html{{/smallcaps}}, JavaScript and {{smallcaps}}Css{{/smallcaps}}. To add your own JavaScript and {{smallcaps}}Css{{/smallcaps}}, you have got several options:

20

21

* Create a [[client file>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]] ending with //.js// or //.css//. These files are automatically included in all forms. This is useful for libraries that every form required.

22

* Create a [[form file>>doc:Formcycle.UserInterface.MyForms.Files]] ending with //.js// or //.css//. These files are included in that form automatically. Use this for libraries you only need for one form.

23

* Go to the JavaScript or {{smallcaps}}Css{{/smallcaps}} tab of the {{designer/}} and add the JavaScript or {{smallcaps}}Css{{/smallcaps}} directly. This is useful for form-specific logic or styles, such as adding a certain validator function to a form field or tweaking the layout of an image. When you make any changes in the {{smallcaps}}Css{{/smallcaps}} tab, you can see the result immediately applied to the form.

24

* You can also create a [[{{smallcaps}}Css{{/smallcaps}} template>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]] and select this as the [[layout of the form>>doc:Formcycle.FormDesigner.FormProperties||anchor="layout"]]. This is useful for basic layout themes shared by multiple forms.

25

26

27

JavaScript you add as a client or form resource is executed immediately when the form is loaded. All the JavaScript you add in the JavaScript tab of the {{designer/}}, on the other hand, is executed only [[once the form has finished loading>>url:http://api.jquery.com/ready/||rel="noopener noreferrer" target="blank"]].

28

29

30

The advance section is available at the very bottom of the {{designer/}}. Open it by clicking on the [[image:designer_south_pane_expander.png]] arrow. This section is grouped into the following tabs:

31

32

; [[JavaScript tab>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]]

33

: Lets you add your own custom JavaScript. This script is run only [[once the form has finished loading>>url:http://api.jquery.com/ready/||rel="noopener noreferrer" target="blank"]].

34

; [[{{smallcaps}}Css{{/smallcaps}} tab>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]]

35

: Lets you style the form with you own custom {{smallcaps}}Css{{/smallcaps}}. All changes you make here are applied to the form immediately once you click anywhere outside the {{smallcaps}}Css{{/smallcaps}} tab.

36

; [[Variables tab>>doc:Formcycle.FormDesigner.CodingPanel.VariablesTab]]

37

: Here you can add hidden input fields to the form ({{code language="none"}}<input type="hidden">{{/code}}). You may use them for data that is never shown in the form, but may be accessed on the server or via JavaScript.

38

; [[Meta tab>>doc:Formcycle.FormDesigner.CodingPanel.MetaTab]]

39

: Here you can add custom {{smallcaps}}Html{{/smallcaps}} to the {{code language="none"}}<head>{{/code}} of the generated form {{smallcaps}}Html{{/smallcaps}}. Use cases include adding additional {{smallcaps}}Css{{/smallcaps}} and script resources, or to add some meta tags for search engine optimization.

40

41

For editing JavaScript and {{smallcaps}}Css{{/smallcaps}}, we provide you with an intelligent code editor that features auto-completion, syntax highlighting, code indendation and much more. See the help pages on the [[JavaScript>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]] and [[{{smallcaps}}Css{{/smallcaps}} tab>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]] for more details.

Wiki source code of JavaScript und CSS

Navigation