Wiki-Quellcode von Gewinnspiel-Portal-Plugin

Zeige letzte Bearbeiter
1 [[**Plugin-Download**>>url:https://customer.formcycle.eu/index.php/apps/files/?dir=/FORMCYCLE%20-%20Plugins%20Customer/Gewinnspiel-Portal (fc-portal-contest)&fileid=13794||rel="noopener noreferrer" target="_blank"]] (erfordert Anmeldung)
2
3 {{content/}}
4
5 {{info}}
6 {{version major="6" minor="5"}}{{/version}}Für das Gewinnspiel-Portal-Plugin wird mindestend {{formcycle/}} in der Version 6.5.0 benötigt
7 {{/info}}
8
9 {{figure image="beispiel_de.jpg" clear="h2"}}
10 Beispiel für ein mit dem Plugin erstelltes Gewinnspiel-Portal.
11 {{/figure}}
12
13 Das kostenpflichtige Gewinnspiel-Portal bietet die Möglichkeit, Portale für eine beliebige Anzahl an Gewinnspielen innerhalb von {{formcycle/}} zu erstellen und verwalten. Diese Gewinnspiele nutzen für die Dateneingabe der Teilnehmer {{formcycle/}} Formulare. Das Gewinnspiel-Portal kann auf allen Mandanten auf dem {{fcserver/}} genutzt werden, wobei auf jedem Mandanten ein eigenes Gewinnspiel-Portal eingerichtet werden kann.
14
15 == Installation ==
16
17 Das Gewinnspiel-Portal kann nur als [[Systemplugin>>doc:Formcycle.SystemSettings.UserInterface.SystemPlugins]] installiert werden und ist daher automatisch für alle Mandanten auf dem {{formcycle/}} Server nutzbar. Das Gewinnspiel-Portal besteht aus zwei separaten Plugins, //contest-view-portal.jar// und //contest-management-portal.jar//, welche zwingend zusammen installiert werden müssen. Es ist dabei egal, in welcher Reihenfolge die beiden Plugins installiert werden.
18
19 == Rollenrechte ==
20
21 {{figure image="rollenrechte_de.png" clear="h2"}}
22 Nach der Installation des Plugins zusätzlich konfigurierbare [[Rollenrechte>>doc:Formcycle.UserInterface.UserSettings.Roles]] in der Benuterverwaltung.
23 {{/figure}}
24
25 Die Menüeinträge des Gewinnspielportals sind auf der {{formcycle/}} Oberfläche standardmäßig nicht sichtbar. Es müssen daher bei den entsprechenden Nutzergruppen unter [[Rollen>>doc:Formcycle.UserInterface.UserSettings.Roles]] die Rechte für das Konfigurieren und für das Öffnen des Gewinnspielportals gesetzt werden. Diese Rechte sind wie folgt untergliedert:
26
27 === Gewinnspiel-Portal verwalten ===
28
29 Unter diesem Hauptpunkt können alle für die Administration des Gewinnspiel-Portals nötigen Rechte vergeben werden.
30
31 ==== Gewinnspiele verwalten ====
32
33 ; Gewinnspiel anlegen (leer)
34 : Berechtigung ein neues Gewinnspiel anzulegen, welches nicht auf einer Vorlage beruht
35
36 ; Gewinnspiel importieren
37 : Berechtigung ein exportiertes Gewinnspiel importieren zu dürfen
38
39 ; Gewinnspiel aus Vorlage anlegen
40 : Berechtigung ein neues Gewinnspiel anzulegen, welches auf einer Vorlage aufbaut
41
42 ; Gewinnspiel kopieren
43 : Berechtigung ein vorhandenes Gewinnspiel kopieren zu dürfen
44
45 ; Gewinnspiel exportieren
46 : Berechtigung ein vorhandenes Gewinnspiel exportieren zu dürfen
47
48 ; Gewinnspiel löschen
49 : Berechtigung ein vorhandenes Gewinnspiel löschen zu dürfen
50
51 ; Gewinnspiel-Formular bearbeiten
52 : Berechtigung ein vorhandenes Gewinnspiel bearbeiten zu dürfen
53
54 ; Gewinner ermitteln {{version major="1" minor="4"}}{{/version}}
55 : Berechtigung um nach Ablauf des Gewinnspiels Gewinner zu ermitteln, diese ggf. inkl Verarbeitung in einen anderen Status zu verschieben und anschließend per Excel zu explorieten.
56
57 ; Ersatzgewinner ermitteln {{version major="1" minor="4"}}{{/version}}
58 : Ermöglicht es wiederholt Ersatzgewinner zu ermitteln.
59
60 ==== Vorlagen verwalten ====
61
62 Notwendige Berechtigung, um neue Gewinnspielvorlagen erstellen und vorhandene Gewinnspielvorlagen bearbeiten und löschen zu dürfen. Nur wenn dieses Recht aktiv ist, kann der Nutzer ein vorhandenes Gewinnspiel als Vorlage speichern.
63
64 ==== Konfigurieren ====
65
66 Berechtigung, um die für alle Gewinnspiele verwendete Oberfläche konfigurieren zu dürfen
67
68 === Gewinnspiel-Portal öffnen ===
69
70 Berechtigung, das Gewinnspiel-Portal aus {{formcycle/}} heraus direkt öffnen zu dürfen
71
72 == Menüpunkte auf der Verwaltungsoberfläche ==
73
74 {{figure image="portal_menue_elemente_de.png" clear="h2" width="150"}}
75 Zusätzliche Menüpunkte auf der {{formcycle/}} Verwaltungsoberfläche.
76 {{/figure}}
77
78
79 {{html wiki="true"}}
80 <div class='xm-figure xm-float-right xm-clear-h2' data-alt='Zusätzliche Menüpunkte auf der Verwaltungsoberfläche.'><div class='xm-figure-inner' style='width:160px'>{{lightbox image='portal_menue_elemente_de.png' width='150' group='$height' group='$group' title='Zusätzliche Menüpunkte auf der Verwaltungsoberfläche.'/}}<div class='xm-figure-caption'>Zusätzliche Menüpunkte auf der {{formcycle/}} Verwaltungsoberfläche.</div></div></div>
81 {{/html}}
82
83
84 Durch die Konfiguration der entprechenden Rollenrechte erscheinen die folgenden neuen Menüeinträge auf der Verwaltungsoberfläche:
85
86
87 === Gewinnspiele ===
88
89 Nachdem das Gewinnspiel-Portal installiert wurde und der entsprechende Nutzer die Berechtigungen erhalten hat, befinden sich auf der {{formcycle/}} Verwaltungsoberfläche ein neuer Menüpunkt //Gewinnspiele// mit den folgenden drei Unterpunkten:
90
91 ; Gewinnspiele verwalten
92 : Unter diesem Punkt können Gewinnspiele angelegt und die Einstellungen von vorhandenen Gewinnspielen eingesehen und angepasst werden. Siehe [[Gewinnspiele verwalten>>doc:Formcycle.PluginDocumentation.ContestPortalPlugin.WebHome||anchor="backend_gewinnspiele"]].
93
94 ; Vorlagen verwalten
95 : Unter diesem Punkt können neue Vorlagen für Gewinnspiele angelegt und vorhandene Vorlagen eingesehen und angepasst werden. Siehe [[Vorlagen verwalten>>doc:Formcycle.PluginDocumentation.ContestPortalPlugin.WebHome||anchor="backend_vorlagen"]].
96
97 ; Konfiguration
98 : Unter diesem Punkt können Stuktur, Aussehen und Verhalten des Gewinnspiel-Portals konfiguriert werden. Siehe [[Portal konfigurieren>>doc:Formcycle.PluginDocumentation.ContestPortalPlugin.WebHome||anchor="backend_portal"]].
99
100 === Gewinnspiel öffnen ===
101
102 Wenn für den Benutzer in den Rollenrechten die Berechtigung zum Öffnen des Gewinnspiel-Portals gegeben wurde, erscheint im Hauptmenü auf der {{formcycle/}} Verwaltungsoberfläche eine zusätzliche Schaltfläche //Gewinnspiel öffnen//.
103
104 == Grundstruktur des Gewinnspiel-Portals ==
105
106 Mit dem Gewinnspiel-Portal kann aus mehreren vorgegebenen Elementen eine Portal-Webseite konfiguriert werden, in welcher die für ein Gewinnspiel-Portal benötigten Elemente enthalten sind. Die Webseite untergliedert sich in die folgenden Elemente:
107
108 ; (1) Kopfbereich, (7) Fußbereich und (4) Trenner vom Portal
109 : Diese Elemente werden einmal konfiguriert und werden für alle Gewinnspiele im Gewinnspiel-Portal genutzt.
110
111 ; (2) Bannergrafik, (3) Inhalt (Formular, Beschreibung, ggf. Ankündigungen oder Mitteilungen über den Beginn oder das Ende des Gewinnspiels), (5) Teilnahmebedingungen und (6) Datenschutz
112 : Diese Elemente können für jedes Gewinnspiel individuell konfiguriert werden.
113
114 {{lightbox image="portal_aufbau_de.jpg" group="g0" width="800"/}}
115
116 == Verwaltungsoberfläche im FORMCYCLE Backend ==
117
118 {{id name="backend_gewinnspiele"/}}
119
120 === Gewinnspiele verwalten ===
121
122 {{figure image="gewinnspiele_ui_de.png" clear="h2"}}
123 Verwaltungsoberfläche für den Menüpunkt //Gewinnspiele verwalten//
124 {{/figure}}
125
126 Unter diesem Menüpunkt können die vorhandenen Gewinnspiele verwaltet und neue Gewinnspiele angelegt werden.
127
128 ==== Menü ====
129
130 Auf der linken Seite befindet sich die Liste aller vorhandenen Gewinnspiele. Über die Buttons über der Liste kann ein neues Gewinnspiel angelegt werden {{ficon name="plus-circle-outline"/}} oder ein zuvor in der Liste ausgewähltes Gewinnspiel kopiert {{icon name="fa-files-o" title="Kopieren" size="1x" cssClass="fa-files-o"/}}, exportiert {{icon name="fa-download" title="Exportieren" size="1x" cssClass="fa-download"/}}, als Vorlage gespeichert {{icon name="fa-save" title="Als Vorlage speichern" size="1x" cssClass="fa-save"/}} oder gelöscht {{ficon name="trash-alt2"/}} werden. Über die Suchen-Schaltfläche {{icon name="fa-search" title="Suchen" size="1x" cssClass="fa-search"/}} kann ein Eingabefeld eingeblendet werden, nach dessen Inhalt die Gewinnspiel-Liste automatisch gefiltert wird. Beim Anlegen eines neuen Gewinnspiels kan entweder ein neues leeres Gewinnspiel angelegt, ein zuvor exportiertes Gewinnspiel wieder geladen oder eine Vorlage als Grundlage für das Gewinnspiel verwendet werden.
131
132 Links neben dem Namen des Gewinnspiels wird jeweils ein Symbol angezeigt, welches die folgende Bedeutung hat:
133
134 ; {{ficon name="checkbox-marked-circle"/}}
135 : Ein ausgefüllter Kreis mit Haken bedeutet, dass das Gewinnspiel aktiviert ist und sich aktuell innerhalb des konfigurierten Online-Zeitraumes befindet
136 ; {{ficon name="checkbox-marked-circle-outline"/}}
137 : Ein nicht ausgefüllter Kreis mit Haken bedeutet, dass das Gewinnspiel aktiviert ist, sich aber aktuell nicht innerhalb des konfigurierten Online-Zeitraumes befindet. Das heißt dass das Gewinnspiel entweder nicht mehr oder noch nicht online ist.
138 ; {{ficon name="circle-outline"/}}
139 : Ein leerer Kreis bedeutet, dass das Gewinnspiel momentan nicht aktiv ist
140
141 ==== Einstellungen ====
142
143 {{figure image="gs_onlineeinstellungen_de.png" clear="h2"}}
144 Mögliche Optionen zum Konfigurieren der (datumsabhängigen) Sichtbarkeit des Gewinnspiels und der Positionierung des Beschreibungstextes
145 {{/figure}}
146
147
148 {{html wiki="true"}}
149 <div class='xm-figure xm-float-right xm-clear-h2' data-alt='Mögliche Optionen zum Konfigurieren der (datumsabhängigen) Sichtbarkeit des Gewinnspiels und der Positionierung des Beschreibungstextes'><div class='xm-figure-inner' style='width:310px'>{{lightbox image='gs_onlineeinstellungen_de.png' width='300' group='$height' group='$group' title='Mögliche Optionen zum Konfigurieren der (datumsabhängigen) Sichtbarkeit des Gewinnspiels und der Positionierung des Beschreibungstextes'/}}<div class='xm-figure-caption'>Mögliche Optionen zum Konfigurieren der (datumsabhängigen) Sichtbarkeit des Gewinnspiels und der Positionierung des Beschreibungstextes</div></div></div>
150 {{/html}}
151
152
153 Nachdem auf die //Neues Gewinnspiel//-Schaltfläche geklickt oder ein Gewinnspiel in der Liste ausgewählt wurde, erscheint rechts die Konfigurationsseite für das Gewinnspiel. Hier können im oberen Bereich links konfiguriert werden, wann und wie das Gewinnspiel sichtbar sein soll. Die foldenden Optionen können konfiguriert werden:
154
155
156 ; **Aktiviert (Das Gewinnspiel ist aufrufbar)**
157 : Das Gewinnspiel kann über einen Link aufgerufen werden
158
159 ; **Gewinnspiel im Portal anzeigen**
160 : Das Gewinnspiel wird im Portal angezeigt; Nur anwählbar, wenn die Option //**Aktiviert** (Das Gewinnspiel ist aufrufbar)// zuvor angewählt wurde; Anderenfalls ist diese Option ausgegraut und das Gewinnspiel wird nicht im Portal angezeigt
161
162 ; **Name des Gewinnspiels:**
163 : Im Portal angezeigter Name des Gewinnspiels. Wird zudem als //title//-Attribut für das {{formcycle/}}-Formular des Gewinnspiels verwendet.
164
165 ; **UUID des Gewinnspiels:**
166 : Gibt die eindeutige UUID des Gewinnspiels aus um dieses identifizieren zu können.
167
168 ; **Online von:**
169 : Zeitpunkt, ab dem das Gewinnspiel online geschaltet wird. Falls die Option //**Aktiviert** (Das Gewinnspiel ist aufrufbar)// angewählt wurde, wird vor dem an dieser Stelle konfigurierten Zeitpunkt beim Öffnen des Gewinnspiels nur die //Ankündigung// des Gewinnspiels angezeigt. Sofern //Gewinnspiel im Portal anzeigen// angewählt wurde, wird das Gewinnspiel auch vor dem hier konfigurierten Zeitpunkt bereits im Gewinnspiel-Portal angezeigt. Auch in diesem Fall wird beim Öffnen des Gewinnspiels die //Ankündigung// gezeigt.
170
171 ; **Online bis:**
172 : Zeitpunkt, ab dem das Gewinnspiel offline geschaltet wird. Falls die Option //**Aktiviert** (Das Gewinnspiel ist aufrufbar)// angewählt wurde, wird ab dem an dieser Stelle konfigurierten Zeitpunkt beim Öffnen des Gewinnspiels nur die //Abgelaufen//-Mitteilung des Gewinnspiels angezeigt. Sofern //Gewinnspiel im Portal anzeigen// angewählt wurde, wird das Gewinnspiel auch vor dem hier konfigurierten Zeitpunkt bereits im Gewinnspiel-Portal angezeigt. Auch in diesem Fall wird beim Öffnen des Gewinnspiels die //Ankündigung// gezeigt.
173
174 ; **Layout:**
175 : An dieser Stelle kann über 5 Buttons konfiguriert werden, ob und wenn ja an welcher Stelle der konfigurierte //Beschreibungstext// angezeigt werden soll. Zur Auswahl stehen:
176 :; **Formular links**
177 :: Der //Beschreibungstext// wird rechts neben dem Formular angezeigt
178 :; **Formular rechts**
179 :: Der //Beschreibungstext// wird links neben dem Formular angezeigt
180 :; **Formular oben**
181 :: Der //Beschreibungstext// wird unter dem Formular angezeigt
182 :; **Formular unten**
183 :: Der //Beschreibungstext// wird über dem Formular angezeigt
184 :; **ohne Beschreibung**
185 :: Es wird nur das Formular und kein //Beschreibungstext// angezeigt
186
187 {{figure image="gs_microsite_de.png" clear="h2"}}
188 Mögliche Optionen zum Öffnen des Gewinnspiels bzw. zum Generieren von Code zum Einbetten des Gewinnspiels im Punkt //Microsite//
189 {{/figure}}
190
191 ; **Microsite**
192 : An dieser Stelle werden drei Schaltflächen angezeigt, mit denen das ausgewählte Gewinnspiel geöffnet oder ein Link zum Gewinnspiel ermittelt werden kann. Die Buttons haben dabei die folgenden Funktionen:
193 :; **Öffnen**
194 :: Öffnet das Gewinnspiel so, wie es aktuell sichtbar ist. Dabei werden alle durch das Gewinnspiel konfigurieten Inhalte angezeigt. Die durch das Gewinnspiel-Portal bereitgestellten Inhalte wie Kopfbereich, Furßbereich, usw. werden nicht mit dargestellt.
195 :; **Vorschau**
196 :: Selbe Funktion wie die //Öffnen//-Schaltfläche, allerdings wird das Formular im Vorschaumodus geöffnet. Beim Absenden des Formulars wird inneralb des zuvor vom Formualar verwendeten Bildschirmbereichs die Zusammenfassung über die an den Server übertragenen Daten angezeigt, welche auch bei einem normalen {{formcycle/}}-Formular nach dem Absenden aus der Vorschau angezeigt. Am rechten Rand der Schaltfläche kann durch den Klick auf den nach unten gerichteten Pfeil ein Menü geöffnet werden, welches zwei weitere Vorschau-Optionen enthält. Diese sind:
197 :; **Vorschau als angekündigt**
198 :: Öffnet das Gewinnspiel so, wie es sichtbar ist, wenn der Zeitpunkt ab dem es online ist noch nicht erreicht wurde.
199 :; **Vorschau als abgelaufen**
200 :: Öffnet das Gewinnspiel so, wie es sichtbar ist, wenn der Zeitpunkt bis zu dem es online war überschritten wurde.
201 :; **Bereitstellen**
202 :: Öffnet einen Dialog, in dem die URL zum Öffnen des Gewinnspiels ermittelt werden kann. Hierbei können die folgenden Optionen konfiguriert werden, welche das Aussehen des Gewinnspiels beeinflussen:
203 ::; **Kopfbereich des Gewinnspiels ausblenden (Bilder)**
204 ::: Wenn diese Option gewählt wird, wird die Bannergrafik nicht angezeigt.
205 ::; **Beschreibung des Gewinnspiels ausblenden**
206 ::: Wenn diese Option gewählt wird, wird die Beschreibung des Gewinnspiels nicht angezeigt, unabhängig davon, was unter //Layout// konfiguriert wurde.
207 ::; **Fußbereich des Gewinnspiels ausblenden (Datenschutz & Teilnahmebedingungen)**
208 ::: Wenn diese Option gewählt wird, werden die für das Gewinnspiel konfigurierten Inhalte für //Datenschutz// und //Teilnahmebedingungen// nicht angezeigt.
209 ::; **Zu verwendender Server**
210 ::: Auswahl, über welchen Server das Gewinnspiel geöffnet werden soll. Zur Auswahl stehen Master- und eventuell vorhande Frontend-Server.
211 :: Darunter wird die sich aufgrund der selektierten Optionen ergebende URL angezeigt. Durch einen Klick auf die //Quellcode kopieren//-Schaltfläche rechts kann diese in die Zwischenablage kopiert werden.
212 :: Alternativ kann durch einen Klick auf den nach unten gerichteten Pfeil am rechten Rand der Schaltfläche ein Menü geöffnet werden, welches drei weitere Optionen enthält. Diese öffnen jeweils einen Dialog, dessen Konfigurationsmöglichkeiten den bereits beschriebenen entsprecht. Anstelle einer URL werden allerdings in eine Webseite einzufügende Inhalte zum Einbinden des Gewinnspiels angezeigt. Die drei Optionen sind:
213 :; **Bereitstellen als HTML Link**
214 :: Generiert Quellcode, mit dem das Gewinnspiel direkt als HTML-Code in eine Webseite eingebunden werden kann.
215 :; **Bereitstellen als Inlineframe**
216 :: Generiert Quellcode, mit dem das Gewinnspiel als Inlineframe in eine Webseite eingebunden werden kann.
217 :; **Bereitstellen als Ajax/JavaScript**
218 :: Generiert Quellcode, mit dem das Gewinnspiel per Ajax (JavaScript) in eine Webseite eingebunden werden kann.
219
220 {{figure image="gs_inhalt_de.png" clear="h2"}}
221 Quellcode-Ansicht eines Editors im Reiter //Teilnahmebedingungen// von //Inhalt//.
222 {{/figure}}
223
224 ; **Inhalt**
225 : An dieser Stelle wird der eigentliche Inhalt des Gewinnspiels konfiguriert. Die einzelnen Inhaltselemente des Gewinnspiels können über die oben befindlichen Schaltflächen ausgewählt werden. Danach kann in dem darunter befindlichen WYSIWYG-Editor der jeweilige Inhalt eingefügt werden. Bei den HTML-Inhalten kann durch einen Klick auf //Quellcode// jeweils in die Quellcodeansicht gewechselt werden. Hierdurch können zum Beispiel für bestimmte Inhalte auch eigene IDs oder CSS-Klassen genutzt werden. Falls das Gewinnspiel nicht im Portal geöffnet werden soll, aber zusätzlicher JavaScript- und CSS-Code dafür benötigt wird, kann dieser unter //JavaScript (Microsite)// bzw. unter //CSS (Microsite)// definiert werden.
226 : Folgende Inhalte können an dieser Stelle konfiguriert werden:
227 :; **Beschreibung**
228 :: Beschreibungstext zum Gewinnspiel. Wird neben bzw. über oder unter dem Formular angezeigt.
229 :; **Teilnahmebedingungen**
230 :: Teilnahmebedingungen des Gewinnspiels. Wird im Portal unterhalb des Trenners neben dem //Datenschutz// angezeigt.
231 :; **Datenschutz**
232 :: Datenschutzbedingungen des Gewinnspiels. Wird im Portal unterhalb des Trenners neben den //Teilnahmebedingungen// angezeigt.
233 :; **Ankündigung**
234 :: Inhalt, welcher anstelle vom Formular und dem Beschreibungstext angezeigt wird, wenn das Gewinnspiel noch nicht gestartet ist.
235 :; **Abgelaufen**
236 :: Inhalt, welcher anstelle vom Formular und dem Beschreibungstext angezeigt wird, nachdem das Gewinnspiel beendet wurde.
237 :; **CSS (Microsite)**
238 :: Zusätzlicher CSS-Code, welcher nur für dieses Gewinnspiel verwendet werden soll.
239 :; **JavaScript (Microsite)**
240 :: Zusätzlicher JavaScript-Code, welcher nur für dieses Gewinnspiel verwendet werden soll.
241 :; **HTML header (Microsite)**
242 :: Zusätzlicher HTML-Code, welcher nur im Headerbereich dieses Gewinnspiels verwendet werden soll. Dies können zum Beispiel Metadaten oder Verweise auf andere CSS- oder JavaScript-Dateien sein.
243
244 {{figure image="gs_bannergrafiken_de.png" clear="h2"}}
245 Vorhandene Schaltflächen unter //Bannergrafiken//.
246 {{/figure}}
247
248 ; Bannergrafiken
249 : Oben rechts können die auf der Gewinnspiel-Portalseite beim Auswählen dieses Gewinnspiels und auf der Microsite angezeigten Bannergrafiken konfiguriert werden. Für unterschiedliche Geräteklassen bzw. Bildschirmauflösungen können dabei verschiedene Grafiken genutzt werden. Zur Auswahl stehen die folgenden Größen:
250 :: **Desktop** - ab 1026 px Bildschirmbreite; Muss konfiguriert werden
251 :: **Tablet** - zwischen 642 px und 1025 px Bildschirmbreite
252 :: **Mobile** - bei 641 px oder weniger Bildschirmbreite
253 : Wenn eine Bannergrafik für eine Geräteklasse nicht explizit konfiguriert wird, wird bei der Anzeige die Grafik des nächstgrößeren Formats verwendet. Dementsprechend sollte die Grafik für //Desktop// immer konfiguriert werden, während //Tablet// und //Mobile// optional sind. Unterstützt werden alle im Browser zulässigen Bildformate.
254
255 : Die folgenden Schaltflächen dienen der Konfiguration der Bannergrafiken:
256 :; **Desktop**, **Tablet** und **Mobile**
257 :: Durch anklicken dieser Schaltflächen kann zwischen den Grafiken für die einzelnen Geräteklassen gewchselt werden
258 :; **+ Bannergrafik ändern**
259 :: Öffnet einen Dateiauswahldialog zum selektieren einer lokal gespeicherten Grafik. Nach dem Bestätigen der Auswahl wird die Datei hochgeladen. Falls bereits zuvor eine Grafik vorhanden war, wird dieser ersetzt.
260 :; {{ficon name="trash-alt2"/}}-Symbol rechts neben dem Dateinamen einer bereits vorhandenen Grafik
261 :: Löschen der Grafik
262
263 ==== Fußzeile ====
264
265 Hier befinden sich die folgenden zwei Schaltflächen:
266
267 ; **Formular bearbeiten**
268 : Öffnet den Formulardesigner für den Formularteil des Gewinnspiels. Da es sich um ein normales {{formcycle/}}-Formular handelt, erfolgt die Erstellung und Konfiguration des Formulars analog. Vom Designer aus kann dementsprechend auch die Statusverarbeitung des Formulars konfiguriert werden.
269
270 ; **Speichern**
271 : Speichert die auf dieser Seite gemachten Einstellungen bzw. Änderungen an den Einstellungen.
272 \\\\{{id name="backend_vorlagen"/}}
273
274 === Vorlagen verwalten ===
275
276 {{figure image="vorlagen_ui_de.png" clear="h2"}}
277 Verwaltungsoberfläche für den Menüpunkt //Vorlagen verwalten//.
278 {{/figure}}
279
280 Unter diesem Menüpunkt können die vorhandenen Vorlagen für Gewinnspiele verwaltet und neue Vorlagen angelegt werden. An der Oberfläche kann eine Teilmenge der bei //Gewinnspiele verwalten// vorhandenen Optionen konfiguriert werden.
281
282 ==== Menü ====
283
284 Auf der linken Seite befindet sich die Liste aller vorhandenen Vorlagen. Über die Schaltfläche {{ficon name="plus-circle-outline"/}} über der Liste kann eine neue Vorlage angelegt werden, indem ein zuvor exportiertes Gewinnspiel oder eine zuvor exportierte Vorlage wieder importiert wird. Eine vorhandene Vorlage kann mit der sich daneben befindenden Schaltfläche {{icon name="fa-files-o" title="Kopieren" size="1x" cssClass="fa-files-o"/}} kopiert, mit {{icon name="fa-download" title="Exportieren" size="1x" cssClass="fa-download"/}} exportiert und mit {{ficon name="trash-alt2"/}} gelöscht werden. Über die Suchen-Schaltfläche {{icon name="fa-search" title="Suchen" size="1x" cssClass="fa-search"/}} kann ein Eingabefeld eingeblendet werden, nach dessen Inhalt die Vorlagen-Liste automatisch gefiltert wird.
285
286 ==== Einstellungen ====
287
288 Nachdem eine Vorlage angelegt bzw. in der Liste ausgewählt wurde, erscheint rechts die Konfigurationsseite für diese. Die foldenden Optionen können konfiguriert werden:
289
290 ; **Name der Vorlage:**
291 : Innerhalb von {{formcycle/}} angezeigter Name der Vorlage.
292
293 ; **Layout:**
294 : An dieser Stelle kann über 5 Buttons konfiguriert werden, ob und wenn ja an welcher Stelle der konfigurierte //Beschreibungstext// angezeigt werden soll. Zur Auswahl stehen:
295 :; **Formular links**
296 :: Der //Beschreibungstext// wird rechts neben dem Formular angezeigt
297 :; **Formular rechts**
298 :: Der //Beschreibungstext// wird links neben dem Formular angezeigt
299 :; **Formular oben**
300 :: Der //Beschreibungstext// wird unter dem Formular angezeigt
301 :; **Formular unten**
302 :: Der //Beschreibungstext// wird über dem Formular angezeigt
303 :; **ohne Beschreibung**
304 :: Es wird nur das Formular und kein //Beschreibungstext// angezeigt
305
306 ; **Microsite**
307 : An dieser Stelle wird nur eine Schaltflächen angezeigt, mit der die ausgewählte Vorlage wie ein normales Gewinnspiel im Vorschaumodus geöffnet werden kann. Der Button hat dabei die folgenden Funktionen:
308 :; **Vorschau**
309 :: Die Gewinnspiel-Vorlage bzw. das Formular wird im Vorschaumodus geöffnet. Beim Absenden des Formulars wird inneralb des zuvor vom Formualar verwendeten Bildschirmbereichs die Zusammenfassung über die an den Server übertragenen Daten angezeigt, welche auch bei einem normalen {{formcycle/}}-Formular nach dem Absenden aus der Vorschau angezeigt. Am rechten Rand der Schaltfläche kann durch den Klick auf den nach unten gerichteten Pfeil ein Menü geöffnet werden, welches zwei weitere Vorschau-Optionen enthält. Diese sind:
310 :; **Vorschau als angekündigt**
311 :: Öffnet die Gewinnspiel-Vorlage so, wie das Gewinnspiel sichtbar ist, wenn der Zeitpunkt ab dem es online ist noch nicht erreicht wurde.
312 :; **Vorschau als abgelaufen**
313 :: Öffnet die Gewinnspiel-Vorlage so, wie das Gewinnspiel sichtbar ist, wenn der Zeitpunkt bis zu dem es online war überschritten wurde.
314
315 {{figure image="gs_inhalt_de.png" clear="h2"}}
316 Quellcode-Ansicht eines Editors im Reiter //Teilnahmebedingungen// von //Inhalt//.
317 {{/figure}}
318
319 ; **Inhalt**
320 : An dieser Stelle wird der eigentliche Inhalt der Gewinnspiel-Vorlage konfiguriert. Die vorhandenen Optionen entsprechen exakt dem, was im Menüpunkt //Gewinnspiele verwalten// konfiguriert werden kann. Die einzelnen Inhaltselemente der Gewinnspiel-Vorlage können über die oben befindlichen Schaltflächen ausgewählt werden. Danach kann in dem darunter befindlichen WYSIWYG-Editor der jeweilige Inhalt eingefügt werden. Bei den HTML-Inhalten kann durch einen Klick auf //Quellcode// jeweils in die Quellcodeansicht gewechselt werden. Hierdurch können zum Beispiel für bestimmte Inhalte auch eigene IDs oder CSS-Klassen genutzt werden. Falls das in der Gewinnspiel-Vorlage konfigurierte Gewinnspiel später nicht im Portal geöffnet werden soll, aber zusätzlicher JavaScript- und CSS-Code dafür benötigt wird, kann dieser unter //JavaScript (Microsite)// bzw. unter //CSS (Microsite)// definiert werden.
321 : Folgende Inhalte können an dieser Stelle konfiguriert werden:
322 :; **Beschreibung**
323 :: Beschreibungstext der Gewinnspiel-Vorlage. Wird neben bzw. über oder unter dem Formular angezeigt.
324 :; **Teilnahmebedingungen**
325 :: Teilnahmebedingungen der Gewinnspiel-Vorlage. Wird im Portal unterhalb des Trenners neben dem //Datenschutz// angezeigt.
326 :; **Datenschutz**
327 :: Datenschutzbedingungen der Gewinnspiel-Vorlage. Wird im Portal unterhalb des Trenners neben den //Teilnahmebedingungen// angezeigt.
328 :; **Ankündigung**
329 :: Inhalt, welcher anstelle vom Formular und dem Beschreibungstext angezeigt wird, wenn das Gewinnspiel noch nicht gestartet ist.
330 :; **Abgelaufen**
331 :: Inhalt, welcher anstelle vom Formular und dem Beschreibungstext angezeigt wird, nachdem das Gewinnspiel beendet wurde.
332 :; **CSS (Microsite)**
333 :: Zusätzlicher CSS-Code, welcher nur für diese Gewinnspiel-Vorlage verwendet werden soll.
334 :; **JavaScript (Microsite)**
335 :: Zusätzlicher JavaScript-Code, welcher nur für diese Gewinnspiel-Vorlage verwendet werden soll.
336 :; **HTML header (Microsite)**
337 :: Zusätzlicher HTML-Code, welcher nur im Headerbereich dieses Gewinnspiels verwendet werden soll. Dies können zum Beispiel Metadaten oder Verweise auf andere CSS- oder JavaScript-Dateien sein.
338
339 {{figure image="gs_bannergrafiken_de.png" clear="h2"}}
340 Vorhandene Schaltflächen unter //Bannergrafiken//.
341 {{/figure}}
342
343 ; Bannergrafiken
344 : Oben rechts können die auf der Gewinnspiel-Portalseite beim Auswählen dieses Gewinnspiels und auf der Microsite angezeigten Bannergrafiken für diese Gewinnspiel-Vorlage konfiguriert werden. Für unterschiedliche Geräteklassen bzw. Bildschirmauflösungen können dabei verschiedene Grafiken genutzt werden. Zur Auswahl stehen die folgenden Größen:
345 :: **Desktop** - ab 1026 px Bildschirmbreite; Muss konfiguriert werden
346 :: **Tablet** - zwischen 642 px und 1025 px Bildschirmbreite
347 :: **Mobile** - bei 641 px oder weniger Bildschirmbreite
348 : Wenn eine Bannergrafik für eine Geräteklasse nicht explizit konfiguriert wird, wird bei der Anzeige die Grafik des nächstgrößeren Formats verwendet. Dementsprechend sollte die Grafik für //Desktop// immer konfiguriert werden, während //Tablet// und //Mobile// optional sind. Unterstützt werden alle im Browser zulässigen Bildformate.
349
350 : Die folgenden Schaltflächen dienen der Konfiguration der Bannergrafiken:
351 :; **Desktop**, **Tablet** und **Mobile**
352 :: Durch anklicken dieser Schaltflächen kann zwischen den Grafiken für die einzelnen Geräteklassen gewchselt werden
353 :; **+ Bannergrafik ändern**
354 :: Öffnet einen Dateiauswahldialog zum selektieren einer lokal gespeicherten Grafik. Nach dem Bestätigen der Auswahl wird die Datei hochgeladen. Falls bereits zuvor eine Grafik vorhanden war, wird dieser ersetzt.
355 :; {{ficon name="trash-alt2"/}}-Symbol rechts neben dem Dateinamen einer bereits vorhandenen Grafik
356 :: Löschen der Grafik
357
358 ==== Fußzeile ====
359
360 Hier befinden sich die folgenden zwei Schaltflächen:
361
362 ; **Formular bearbeiten**
363 : Öffnet den Formulardesigner für den Formularteil der Gewinnspiel-Vorlage. Da es sich um ein normales {{formcycle/}}-Formular handelt, erfolgt die Erstellung und Konfiguration des Formulars analog. Vom Designer aus kann dementsprechend auch die Statusverarbeitung des Formulars konfiguriert werden.
364
365 ; **Speichern**
366 : Speichert die auf dieser Seite gemachten Einstellungen bzw. Änderungen an den Einstellungen.
367 \\\\{{id name="backend_portal"/}}
368
369 === Konfiguration ===
370
371 {{figure image="portal_ui_de.png" clear="h2"}}
372 Verwaltungsoberfläche für den Menüpunkt //Portal konfigurieren//.
373 {{/figure}}
374
375 In diesem Menüpunkt kann das Aussehen des Gewinnspiel-Portals angepasst werden. Die folgenden Reiter stehen für die Konfiguration des Portals zur Verfügung:
376
377 ; Kopfbereich
378 : Über dem Formular angezeigter Inhalt.
379
380 ; Trenner
381 : Bereich, welcher zwischen Formular/Beschreibung und den Teilnahmebedingungen/Datenschutz angezeigt wird.
382
383 ; Fußbereich
384 : Unter Teilnahmebedingungen/Datenschutz angezeigter Inhalt.
385
386 ; Abgelaufen-Overlay
387 : Hier kann eine Grafik definiert werden welche über der Bannergrafik bei einem abgelaufenen Gewinnspiel angezeigt wird.
388
389 ; CSS (Portal)
390 : Innerhalb des Gewinnspiel-Portals zu verwendender CSS-Code.
391
392 ; JavaScript (Portal)
393 : Innerhalb des Gewinnspiel-Portals zu verwendender JavaScript-Code.
394
395 ; HTML header (Portal)
396 : Zusätzlicher HTML-Code, welcher im Headerbereich des Gewinnspiel-Portals verwendet werden soll. Dies können zum Beispiel Metadaten oder Verweise auf andere CSS- oder JavaScript-Dateien sein.
397
398 == Speicherort der Inhalte des Gewinnspiel-Portals ==
399
400 Die unter //Konfiguration// getätigten Einstellungen werden in {{formcycle/}} als Dateien hinterlegt. Diese befinden sich unter [[Dateien und Templates>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]].
401
402 **Es handelt sich um die folgenden Dateien:**
403
404 |=Dateiname|=Inhalt
405 |contest-portal.css.txt|CSS-Code für das Gewinnspiel-Portal; Als txt-Datei hinterlegt, damit es nicht automatisch in alle Formulare eingebunden wird
406 |contest-portal.footer.html|Inhalt des Fußbereiches der Gewinnspiel-Portalseite
407 |contest-portal.header.html|Inhalt des Kopfbereiches der Gewinnspiel-Portalseite
408 |contest-portal.separator.html|Inhalt des Trenners in der Mitte auf der Gewinnspiel-Portalseite
409 |contest-portal.title.html|(((
410 Titel der Gewinnspiel-Portalseite
411 )))
412 |expired-overlay.png|Overlay-Grafik welche über dem Gewinnspielbanner angezeigt wird sobald dieses abgelaufen ist
413
414 == JavaScript-Schnittstellen ==
415
416 === Allgemein ===
417
418 Allgemein stehen den Gewinnspielen sowohl in Kontext der Microsite als auch innerhalb des Portals folgende Funktionen zur Verfügung:
419
420 ==== Scrollen zum Seitenanfang: ====
421
422 {{code language="none"}}
423 // Innerhalb des Kontextes
424 Contest.scrollToTop();
425
426 // Innerhalb des Formulares
427 // - falls dies in der selben Domaine betrieben wird
428 window.parent.Contest.scrollToTop();
429
430 // - falls dies nicht in der selben Domaine betrieben wird
431 window.parent.postMessage('scrollToTop', '*');
432
433 // Allgemein ansprechbar über postMessage:
434 <window>.postMessage('scrollToTop', '*');
435 {{/code}}
436
437 ==== Scrollen zu den Teilnahmebedingungen: ====
438
439 {{code language="none"}}
440 // Innerhalb des Kontextes
441 Contest.scrollToTerms();
442
443 // Innerhalb des Formulares
444 // - falls dies in der selben Domaine betrieben wird
445 window.parent.Contest.scrollToTerms();
446
447 // - falls dies nicht in der selben Domaine betrieben wird
448 window.parent.postMessage('scrollToTerms', '*');
449
450 // Allgemein ansprechbar über postMessage:
451 <window>.postMessage('scrollToTerms', '*');
452 {{/code}}
453
454 ==== Scrollen zur Datenschutz-Erklärung: ====
455
456 {{code language="none"}}
457 // Innerhalb des Kontextes
458 Contest.scrollToPrivacy();
459
460 // Innerhalb des Formulares
461 // - falls dies in der selben Domaine betrieben wird
462 window.parent.Contest.scrollToPrivacy();
463
464 // - falls dies nicht in der selben Domaine betrieben wird
465 window.parent.postMessage('scrollToPrivacy', '*');
466
467 // Allgemein ansprechbar über postMessage:
468 <window>.postMessage('scrollToPrivacy', '*');
469
470 {{/code}}
471
472 ==== Scrollen zum Formular: {{version major="1" minor="4"}}{{/version}} ====
473
474 {{code language="none"}}
475 // Innerhalb des Kontextes
476 Contest.scrollToForm();
477
478 // Innerhalb des Formulares
479 // - falls dies in der selben Domaine betrieben wird
480 window.parent.Contest.scrollToForm();
481
482 // - falls dies nicht in der selben Domaine betrieben wird
483 window.parent.postMessage('scrollToForm', '*');
484
485 // Allgemein ansprechbar über postMessage:
486 <window>.postMessage('scrollToForm', '*');
487
488 {{/code}}
489
490 ==== Scrollen zum Anfang des Gewinnspiels: {{version major="1" minor="4"}}{{/version}} ====
491
492 {{code language="none"}}
493 // Innerhalb des Kontextes
494 Contest.scrollToContestTop();
495
496 // Innerhalb des Formulares
497 // - falls dies in der selben Domaine betrieben wird
498 window.parent.Contest.scrollToContestTop();
499
500 // - falls dies nicht in der selben Domaine betrieben wird
501 window.parent.postMessage('scrollToContestTop', '*');
502
503 // Allgemein ansprechbar über postMessage:
504 <window>.postMessage('scrollToContestTop', '*');
505
506 {{/code}}
507
508 ==== Scrollen zum Anfang des Inhaltbereichs: {{version major="1" minor="4"}}{{/version}} ====
509
510 {{code language="none"}}
511 // Innerhalb des Kontextes
512 Contest.scrollToContent();
513
514 // Innerhalb des Formulares
515 // - falls dies in der selben Domaine betrieben wird
516 window.parent.Contest.scrollToContent();
517
518 // - falls dies nicht in der selben Domaine betrieben wird
519 window.parent.postMessage('scrollToContent', '*');
520
521 // Allgemein ansprechbar über postMessage:
522 <window>.postMessage('scrollToContent', '*');
523
524 {{/code}}
525
526 === Portal-spezifisch ===
527
528 Innerhalb des Portals wird für die Carousel-Darstellung die Bibliothekt [[slick>>https://kenwheeler.github.io/slick/||rel="noopener noreferrer" target="_blank"]] verwendet. Dies lässt sich hierbei wie folgt ansprechen und umkonfigurieren:
529
530 {{code language="none"}}
531 // Abholen des entsprechenden Carousel-Objekts
532 var carousel = $('.portal-carousel-images');
533
534 // Beispielhafte konfiguration des Autoplay-Features
535 if (carousel && carousel.length > 0) {
536 carousel.slick('slickSetOption', 'speed', 1000)
537 carousel.slick('slickSetOption', 'autoplaySpeed', 5000);
538 carousel.slick('slickPlay');
539 }
540 {{/code}}
541
542 (% class="wikigeneratedid" id="HSelektioneinesbestimmtenGewinnspiels:" %)
543 Ferner lässt sich die wie folgt ein gewünschtes Gewinnspiel anhand der entsprechenden UUID selektieren:
544
545 {{code language="none"}}
546 // Innerhalb des Kontextes
547 Portal.goToContest(<uuid>);
548
549 // Innerhalb des Formulares
550 // - falls dies in der selben Domaine betrieben wird
551 window.parent.Portal.goToContest(<uuid>);
552
553 // - falls dies nicht in der selben Domaine betrieben wird
554 var data = {
555 msg: 'goToContest',
556 uuid: <uuid>
557 };
558 window.parent.postMessage(data, '*')
559
560 // Allgemein ansprechbar über postMessage:
561 var data = {
562 msg: "goToContest",
563 uuid: <uuid>
564 };
565 <window>.postMessage(data , '*')
566 {{/code}}
567
568 === Microsite-spezifisch ===
569
570 Die Microsite besitzt neben den allgemeinen Funkationalitäten einen postMessage-Proxy welcher alle Nachrichten an das Formular-Fenster weiterreicht. Ferner wird die Bibliothek [[iFrame Resizer>>https://github.com/davidjbradshaw/iframe-resizer||rel="noopener noreferrer" target="_blank"]] bereitgestellt.
571
572 == Einbinden als Microsite ==
573
574 Für die Integration einer Gewinnspiel-Microsite als IFrame stehen verschiedene Hilfsmethoden für das Anpassen der Fenstergröße sowie das Scrolling der Site zur Verfügung. Diese sind hierbei folgende:
575
576 ==== Resizing der IFrame anhand ihres Inhaltes ====
577
578 Hier kommt die Bibliothekt [[iFrame  Resizer>>https://github.com/davidjbradshaw/iframe-resizer||rel="noopener noreferrer" target="_blank"]] zum Einsatz. Es muss hierfür auf der Seite die die Microsite einbindet die Datei //iframeResizer.min.js// einbgebunden und der Resizer beispielsweise wie folgt initialisiert werden:
579
580 {{code language="none"}}
581 iFrameResize({log: false}, '<CSS-Selektor der iframe>');
582 {{/code}}
583
584 ==== Scrolling zu gewünschten Stellen auf der Microsite ====
585
586 Für diese Funktionalität werden an die Zielseite durch die Microsite entsprechende postMessages gesendet. Unter der Verwendung von [[jQuery>>https://jquery.com/||rel="noopener noreferrer" target="_blank"]] kann dessen Auswertung wie folgt stattfinden:
587
588 {{code language="none"}}
589 // Behandelt Messages der Microsite
590 function _handleMessage(event){
591
592 // Prüfung ob es sich um eine Scroll-Message handelt
593 if(event.data.scrollTarget || event.data.scrollOffset){
594
595 // Berechnung des Offsets der iFrame zum Seitenanfang. als scrollTarget sind die Werte "top", "terms" und "privacy" möglich.
596 var frameOffset = (event.data.scrollTarget == 'top') ? 0 : $('<CSS-Selektor der iFrame>').offset().top;
597
598 // Animiertes Scrolling zum Ziel. Dieses ergibt sich aus dem Offset der iFrame und dem Offset der Position innerhalb der iFrame
599 $('html, body').animate({
600 scrollTop : event.data.scrollOffset + frameOffset
601 }, 'slow');
602
603 // Weiterleitung aller weiteren postMessages an die Microsite
604 }else{
605 $('<CSS-Selektor der iFrame>').each(function(){
606 var iframewindow = this.contentWindow ? this.contentWindow : this.contentDocument.defaultView;
607 iframewindow.postMessage(event.data,"*");
608 });
609 }
610 }
611
612 // Registireren der Message-Behandlung
613 if (window.addEventListener) {
614 window.addEventListener('message', _handleMessage, false);
615 } else if (window.attachEvent) { // ie8
616 window.attachEvent('onmessage', _handleMessage);
617 }
618
619 {{/code}}
620
621 {{info}}
622 Wie in diesem Beispiel erkennbar werden alle nicht postMessage-Nachrichten der Zielseite an die Microsite weitergegeben. Dies ist wichtig um z.B. interne Resize-Nachrichten des Formulars bis in die Microsite zu geben!
623 {{/info}}
624
625 == Versionshistorie ==
626
627 === 1.4.0 ===
628
629 * Funktionalität zum Ermitteln von Gewinnern und deren Excel-Export
630 * Erweiterung der scrollTo-Funktionen
631 * Kleinere CSS-Anpassungen
632
633 === 1.3.4 ===
634
635 * CSS-Anpassung um einen Layout-Unterschied zwischen Microsmite und Portal-Einbeung zu entfernen
636
637 === 1.3.3 ===
638
639 * Encoden der Vorschau-URLs und Formular-URL für die Unterstützung von deaktivierten Cookies
640 * Korrektur der Formular- und iFrameResizer-URL in der Vorschau
641
642 === 1.3.2 ===
643
644 * Korrektur falscher Bilder in der Lightbox der Gewinnspielübersicht
645
646 === 1.3.1 ===
647
648 * Über den Plugin-Parameter //portal.usebaseurl// kann aktiviert werden, dass für die Gewinnspiel-URLs die hinterlegten Basis-URLs benutzt werden.
649 * Ausgabe der UUID des Gewinnspiels auf entsprechender Konfigurations-Seite
650
651 === 1.3.0 ===
652
653 * Fehlerbehebung beim Ausliefern über den Frontend-Server
654 * Einbau eines iFrame-Resizer für Microseiten
655 * Weitergabe von scroll-Nachrichten an top-window
656
657 === 1.2.4 ===
658
659 * Weiterleitung von postMessage an iframe innerhalb von Microsites
660
661 === 1.2.3 ===
662
663 * Durchreichen von URL-Parametern an IFames im Portal
664 * Fix zum direkten Selektieren eines Gewinnspiels im Portal per URL-Parameter
665
666 === 1.2.2 ===
667
668 * Undo/Redo-Funktionalität an Editoren aktiviert
669 * Zentral pflegbares Overlay für abgelaufene Gewinnspiele eingebaut
670 * Kleinere Anpassungen/Bugfixes
671
672 === 1.2.0 ===
673
674 * Einbinden von grid.css auch in Portal- und Gewinnspiel-Text-Editoren
675 * Überarbeitung des Portal-Layoutings und Anpassung responsiver Breakpoints
676 * Separate Einbindung von jQuery um dass unnötigen Laden von Primefaces zu umgehen
677
678 === 1.1.0 ===
679
680 * Anpassungen für FORMCYCLE Version 6.5.x und PrimeFaces 8
681
682 === 1.0.1 ===
683
684 * Anpassungen für FORMCYCLE Version 6.4.x

Navigation

Copyright 2000-2025