Wiki-Quellcode von Widget-Plugin: Bewertung
Zeige letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
| 1 | [[**Plugin-Download**>>url:https://customer.formcycle.eu/index.php/s/mZItSXrWkHYwwbM||target="_blank"]] | ||
| 2 | |||
| 3 | {{content/}} | ||
| 4 | |||
| 5 | {{panel float="right"}} | ||
| 6 | (% class="block text-align-center%){{icon name="star" size="4x"/}} | ||
| 7 | |||
| 8 | (% class="block%)Das Symbol für Widgets vom Typ //Bewertung//. | ||
| 9 | {{/panel}} | ||
| 10 | |||
| 11 | |||
| 12 | |||
| 13 | |||
| 14 | == Funktionsbeschreibung == | ||
| 15 | {{figure image="2_WidgetXrating_Formular_de.png" clear="h3"}}Beispiel für ein Bewertungswidget mit Sternen in einem Formular.{{/figure}} | ||
| 16 | |||
| 17 | Das Plugin stellt ein neues Widget im Designer zur Verfügung, welches es erlaubt, auf einfache Art Bewertungen einzugeben. Das Widget erzeugt eine Kette von links nach rechts anwählbarer Icons entsprechend der im Designer getroffenen Einstellungen bezüglich Iconform, Iconanzahl und Farbe. Die durch das Widget je nach Anzahl der ausgewählten Icons zu übermittelnden Werte können konfiguriert werden. | ||
| 18 | |||
| 19 | == Installation == | ||
| 20 | |||
| 21 | Das Plugin kann als Mandant-Plugin oder System-Plugin installiert werden. Eine Anleitung zur Installation von Plugins finden Sie [[hier>>doc:Formcycle.UserInterface.Client.Plugins.WebHome]]. | ||
| 22 | |||
| 23 | == Konfiguration == | ||
| 24 | |||
| 25 | An Widgets dieses Typs können die folgenden Eigenschaften konfiguriert werden: | ||
| 26 | |||
| 27 | {{internBaseOptionsElement page="base" headline="h3"/}} | ||
| 28 | |||
| 29 | {{internBaseOptionsElement page="label" headline="h3"/}} | ||
| 30 | |||
| 31 | === Optionen === | ||
| 32 | |||
| 33 | {{figure image="3_WidgetXrating_Optionen_de.png" clear="h3"}}Mögliche Konfiguration der zu verwendenen Auswahloptionen eines Bewertungswidgets.{{/figure}} | ||
| 34 | |||
| 35 | Bewertungswidgets verfügen über einen zusätzlichen Bereich //Optionen//. Hier können die zu verwendenden Auswahloptionen und die bei der Auswahl einer Option jeweils als Formularwert zu übertragenden Inhalte konfiguriert werden. | ||
| 36 | |||
| 37 | Neben der Konfiguration der Optionen direkt am Widget ist es zudem möglich, eine [[CSV-Datenquelle>>doc:Formcycle.UserInterface.Data.Sources.WebHome]] zu verwenden. Diese kann im Auswahlelement //Datenquelle// selektiert werden. | ||
| 38 | |||
| 39 | {{internBaseOptionsElement page="cond" headline="h3"/}} | ||
| 40 | |||
| 41 | {{internBaseOptionsElement page="help" headline="h3"/}} | ||
| 42 | |||
| 43 | {{internBaseOptionsElement page="css" headline="h3"/}} | ||
| 44 | |||
| 45 | {{internBaseOptionsElement page="attr" headline="h3"/}} | ||
| 46 | |||
| 47 | {{internBaseOptionsElement page="avail" headline="h3"/}} | ||
| 48 | |||
| 49 | {{internBaseOptionsElement page="misc" headline="h3"/}} | ||
| 50 | |||
| 51 | == Druckbild im Word-/PDF-Export == | ||
| 52 | {{figure image="4_WidgetXrating_Export_de.png" clear="h3"}}Darstellung eines Bewertungswidgets im Word-/PDF-Export.{{/figure}} | ||
| 53 | |||
| 54 | Wenn das Formular per Word-/PDF-Export exportiert wird, wird in den erzeugten Dokumenten anstelle des konfigurierten Aussehens eine Auswahl mit den unter //Optionen// konfigurierten Auswahloptionen erstellt. | ||
| 55 | |||
| 56 | == Mögliche CSS-Anpassungen == | ||
| 57 | |||
| 58 | Um Icons oder Farben individuell zu setzen, können per CSS Anpassungen vorgenommen werden. | ||
| 59 | |||
| 60 | Zum Beispiel das verwendete Logo für das Dritte Icon des Widgets mit dem technischen Namen //rate1// setzen: | ||
| 61 | |||
| 62 | {{code language="css"}} | ||
| 63 | [xn=rate1] .idx3 I::before{ | ||
| 64 | content: "\e906"; | ||
| 65 | } | ||
| 66 | {{/code}} | ||
| 67 | |||
| 68 | Die Farbe für das 6. Icon des Widgets mit dem technischen Namen //rate2// setzen, wenn es aktiv ist oder sich der Mauszeiger über diesem Logo befindet: | ||
| 69 | |||
| 70 | {{code language="css"}} | ||
| 71 | [xn=rate2] .idx6.hover I, | ||
| 72 | [xn=rate2] .idx6.active I{ | ||
| 73 | color: #55C937; | ||
| 74 | } | ||
| 75 | {{/code}} | ||
| 76 | |||
| 77 | {{velocity}} | ||
| 78 | ##{{content moveToTop="true"/}} | ||
| 79 | ##{{figure image="1_WidgetXrating_Designer_de.png" clear="h1"}}Das Symbol für Elemente vom Typ //Bewertung//.{{/figure}} | ||
| 80 | {{/velocity}} |