Summary

• Page properties (3 modified, 0 added, 0 removed)

Details

Page properties

Title

...	...	@@ -1,1 +1,1 @@
1		-$services.localization.render("PT.Main.ScriptMETAundCSSBereich")
	1	+JavaScript and CSS

Author

...	...	@@ -1,1 +1,1 @@
1		-XWiki.gru
	1	+XWiki.fse

Content

...	...	@@ -1,14 +1,41 @@
1		-{{figure image="093En.png" width="300"}}
2		-Script, CSS, meta, and variables section (red rectangle).
	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	3	{{/figure}}
4	4
5		-{{figure image="094En.png" width="300"}}
6		-Changing the height of the tabs via drag & drop.
	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	7	{{/figure}}
8	8
9		-When you need to include your own custom CSS or Javascript, you can add them in the CSS or Script tabs, respectively. By default, these tabs are hidden. To open these tabs, go to the {{designer/}} and click on the grey bar at the bottom with the upwards pointing arrow.
	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}}
10	10
11		-Furthermore, the variables tab allows you to insert hidden input fields that can be access from Javascript and used later during [[workflow processing>>doc:Status und Aktionsverarbeitung ]].
	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}}
12	12
	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.
13	13
14		-{{subpages title="Sub pages"/}}
	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.