Wiki source code of Widget-Plugin: Bewertung

Hide last authors

version	line-number	content
2.1	1	[[Plugin download>>url:https://customer.formcycle.eu/index.php/apps/files/?dir=/FORMCYCLE%20-%20Plugins%20Customer/plugin-bundle-widget-xrating&fileid=17292\|\|target="_blank"]] (requires login)
1.1	2
	3	{{content/}}
	4
	5	{{panel float="right"}}
	6	(% class="block text-align-center%){{icon name="star" size="4x"/}}
	7
2.1	8	(% class="block%)The icon for widgets of type //Rating//.
1.1	9	{{/panel}}
	10
	11
2.1	12	== Overview ==
1.1	13
2.1	14	{{figure image="2_WidgetXrating_Formular_de.png" clear="h3"}}The rating plugin adds a list of icons where the user can choose a rating by clicking on one of the icons.{{/figure}}
1.1	15
2.1	16	This plugin adds a new form widget that is available in the {{designer/}}. It lets the user choose a rating by clicking on the appropriate number of icons. You can change the number of icons as well as the icon type and color in the properties panel to the right of the {{designer/}}. When the user selects a rating, that rating is transmitted to the server as the value of the rating form field. You can also configure that value in the {{designer/}}.
1.1	17
2.1	18	== Installing ==
1.1	19
2.1	20	Install the plugin as a client or system plugin. You can find a tutorial on how to install plugins here: [[here>>doc:Formcycle.UserInterface.Client.Plugins.WebHome]].
1.1	21
2.1	22	== Settings ==
1.1	23
2.1	24	This widget offers the following settings in the properties panel to the right of the {{designer/}}:
1.1	25
	26	{{internBaseOptionsElement page="base" headline="h3"/}}
	27
	28	{{internBaseOptionsElement page="label" headline="h3"/}}
	29
2.1	30	=== Options ===
1.1	31
2.1	32	{{figure image="3_WidgetXrating_Optionen_de.png" clear="h3"}}Sample configuration for a rating plugin.{{/figure}}
1.1	33
2.1	34	Rating element have ad additional options section. Here you can select the number of icons and enter the value that is submitted when the user chooses a rating.
1.1	35
2.1	36	You can either enter this data manually, or select a [[CSV data source>>doc:Formcycle.UserInterface.Data.Sources.WebHome]] that contains the available ratings and the corresponding value.
1.1	37
	38	{{internBaseOptionsElement page="cond" headline="h3"/}}
	39
	40	{{internBaseOptionsElement page="help" headline="h3"/}}
	41
	42	{{internBaseOptionsElement page="css" headline="h3"/}}
	43
	44	{{internBaseOptionsElement page="attr" headline="h3"/}}
	45
	46	{{internBaseOptionsElement page="avail" headline="h3"/}}
	47
	48	{{internBaseOptionsElement page="misc" headline="h3"/}}
	49
2.1	50	== Word and PDF export ==
1.1	51
2.1	52	{{figure image="4_WidgetXrating_Export_de.png" clear="h3"}}Layout of a rating widget when the form is exported as a Word or PDF document{{/figure}}
1.1	53
2.1	54	When the form is exported as a Word or PDF document, rating element are displayed like normal select elements with the configured options.
1.1	55
2.1	56	== CSS layout ==
1.1	57
2.1	58	You can adjust the layout of the icons and the colors via custom CSS.
1.1	59
2.1	60	For example, if you would like to change the third icon of the rating element with the name //rate1//:
	61
1.1	62	{{code language="css"}}
2.1	63	[xn=rate1] .idx3 i::before{
	64	content: "\e906";
1.1	65	}
	66	{{/code}}
	67
2.1	68	To change the color of the sixth icon for the rating element with the name //rate2// (only when it is active or the user hovers over the icon):
1.1	69
	70	{{code language="css"}}
2.1	71	[xn=rate2] .idx6.hover i,
	72	[xn=rate2] .idx6.active i {
	73	color: #55C937;
1.1	74	}
	75	{{/code}}
	76
	77	{{velocity}}
	78	##{{content moveToTop="true"/}}
2.1	79	##{{figure image="1_WidgetXrating_Designer_de.png" clear="h1"}}The icon for form widgets of type //Rating//.{{/figure}}
1.1	80	{{/velocity}}