Skip to Content

Wiki source code of JavaScript und CSS

Show last authors
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_en.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_en.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.Layout]] and select this as the [[layout of the form>>doc:Formcycle.Designer.Form.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.Designer.Form.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.Designer.Form.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.Designer.Form.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.Designer.Form.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.Designer.Form.CodingPanel.ScriptTab.WebHome]] and [[{{smallcaps}}Css{{/smallcaps}} tab>>doc:Formcycle.Designer.Form.CodingPanel.CSSTab.WebHome]] for more details.