Wiki source code of JavaScript und CSS

Hide last authors
gru 15.7 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//.
awa 15.2 3 {{/figure}}
gru 1.1 4
gru 15.7 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.
awa 15.2 7 {{/figure}}
8
9 {{figure image="designer_advanced_meta_example.png"}}
gru 15.7 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.
awa 15.2 11 {{/figure}}
12
13 {{figure image="designer_advanced_variables_example.png"}}
gru 15.7 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.
awa 15.2 15 {{/figure}}
16
gru 15.7 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.
awa 2.2 18
gru 15.7 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:
awa 2.2 20
gru 15.7 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.
awa 2.2 25
26 {{info}}
gru 15.7 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"]].
awa 2.2 28 {{/info}}
29
gru 15.7 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:
awa 2.2 31
gru 15.7 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.
awa 2.2 40
gru 15.7 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.
Copyright 2000-2024