Wiki source code of JavaScript und CSS
Hide last authors
author | version | line-number | content |
---|---|---|---|
![]() |
22.1 | 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//. | ||
![]() |
1.1 | 3 | {{/figure}} |
4 | |||
![]() |
22.1 | 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. | ||
![]() |
1.1 | 7 | {{/figure}} |
8 | |||
![]() |
22.1 | 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. | ||
![]() |
1.1 | 11 | {{/figure}} |
12 | |||
![]() |
22.1 | 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. | ||
![]() |
1.1 | 15 | {{/figure}} |
16 | |||
![]() |
22.1 | 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. |
![]() |
1.1 | 18 | |
![]() |
22.1 | 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: |
![]() |
1.1 | 20 | |
![]() |
22.1 | 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. | ||
![]() |
1.1 | 25 | |
26 | {{info}} | ||
![]() |
22.1 | 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"]]. |
![]() |
1.1 | 28 | {{/info}} |
29 | |||
![]() |
22.1 | 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: |
![]() |
1.1 | 31 | |
![]() |
22.1 | 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. | ||
![]() |
1.1 | 40 | |
![]() |
22.1 | 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. |