Wiki source code of Schulungsvideos

Show last authors
1 In den Schulungsvideos begleiten wir Sie bei den ersten Schritten und Sie lernen unter anderem, wie Sie Formulare im Formulardesigner erstellen, Workflows konfigurieren und die Formulare bereitstellen. Am Ende jeder Lektion wird ein Beispiel/Zusammenfassung gezeigt. Sie haben die Möglichkeit, wenn gewünscht, eigene Übungen durchzuführen, oder eine Übungsaufgabe anzufordern. [[Übungsaufgabe anfordern>>https://pro.formcloud.de/formcycle/form/alias/3024/uebungsaufgabe/||rel=" noopener noreferrer" target="_blank"]]
2
3 {{velocity}}
4 #set ($mainCards = [{
5 'icon': 'fa fa-play-circle',
6 'title': 'Lektion 1',
7 'description': 'Erste Schritte<br>Formulardesigner',
8 'documentation': "Schulung.lektion1",
9 'bgcolor': '#cae7df',
10 'color': '#2b3649',
11 'colordesc': '#617496'
12 }, {
13 'icon': 'fa fa-play-circle',
14 'title': 'Lektion 2',
15 'description': 'Workflowdesigner',
16 'documentation': 'Schulung.lektion2',
17 'bgcolor': '#cae7df',
18 'color': '#2b3649',
19 'colordesc': '#617496'
20 }, {
21 'icon': 'fa fa-play-circle',
22 'title': 'Lektion 3',
23 'description': 'Postfach',
24 'documentation': 'Schulung.lektion3',
25 'bgcolor': '#cae7df',
26 'color': '#2b3649',
27 'colordesc': '#617496'
28 }, {
29 'icon': 'fa fa-play-circle',
30 'title': 'Sonstiges',
31 'description': 'Datenquellen<br>Double-Opt-In<br>...',
32 'documentation': 'Schulung.lektionSonstiges'
33 }])
34
35 ## 'icon': 'fa fa-play-circle',
36 ## 'title': 'Einführungsvideos',
37 ## 'description': 'Kurze Videos zum Vorstellen einzelner FORMCYCLE-Funktionen; ggf. Titel "Schnelleinstieg"',
38 ## 'documentation': 'https://formcycle.eu/de/features'
39 ##}, {
40 ## 'iconfc': 'puzzle',
41 ## 'title': 'Anwendungsfälle',
42 ## 'description': 'Formulardaten verarbeiten',
43 ## 'documentation': 'doc:Anwendungsfälle.WebHome'
44 ##}, {
45
46
47
48 ## 'icon': 'fa fa-share-square',
49 ## 'title': 'Daten extern weiterverarbeiten',
50 ## 'description': 'Mit FORMCYCLE erfasste Daten an andere Systeme weiterleiten',
51 ## 'documentation': 'Formcycle.UserInterface.MyForms.WorkflowProcessing'
52 ##}, {
53
54
55
56 {{html}}
57 ##$jsontool.serialize(${mainCards})<br>
58 ##$jsontool.serialize($mainCards)<br>
59 {{/html}}
60
61 {{MainMenuTiles cards='$jsontool.serialize($mainCards)' /}}
62
63 {{/velocity}}
64
65
66
67
68 {{velocity}}
69 {{html wiki="false" clean="false"}}
70
71 <style>
72 .jqcloud{font:10px Helvetica,Arial,sans-serif;line-height:normal;overflow:hidden;position:relative}.jqcloud-word{margin:0;padding:0}.jqcloud-word.w1{color:#aab5f0;font-size:100%}.jqcloud-word.w2{color:#9ce;font-size:150%}.jqcloud-word.w3{color:#a0ddff;font-size:200%}.jqcloud-word.w4{color:#90c5f0;font-size:250%}.jqcloud-word.w5{color:#90a0dd;font-size:300%}.jqcloud-word.w6{color:#90c5f0;font-size:350%}.jqcloud-word.w7{color:#39d;font-size:400%}.jqcloud-word.w8{color:#0cf;font-size:450%}.jqcloud-word.w9{color:#0cf;font-size:500%}.jqcloud-word.w10{color:#0cf;font-size:550%}.jqcloud-word a{color:inherit;font-size:inherit;text-decoration:none}.jqcloud-word a:hover{color:#0cf}
73 .jqcloud span {
74 -moz-user-select: -moz-none;
75 -khtml-user-select: none;
76 -webkit-user-select: none;
77 -ms-user-select: none;
78 user-select: none;
79 background-color: #eaeaef;
80 border-radius: 10px;
81 padding: 0px 4px 0px 4px;
82 }
83 .jqcloud span.jqHighlight {
84 color: #0cf !important;
85 }
86 .jQButton {
87 color: #fff;
88 background-color: #3480AD;/*#f0f0f3*/
89 text-align: center;
90 display: inline-block;
91 border-radius: 4px;
92 padding: 4px 10px 4px 22px;
93 font-size: 15px
94 margin: auto;
95 margin-bottom: 5px;
96 -moz-user-select: -moz-none;
97 -khtml-user-select: none;
98 -webkit-user-select: none;
99 -ms-user-select: none;
100 user-select: none;
101 }
102 .jQButton[active=false] {
103 background-color: #a7a7a7;
104 }
105 .jQButton:hover {
106 background-color: #0cf;
107 }
108 .jQButton[active=false]:hover {
109 background-color: #676767;
110 }
111 .jQButton .jQButton-icon::before {
112 font-family: "FontAwesome";
113 font-size: 14px;
114 font-weight: 400;
115 content: "\f046";
116 }
117 .jQButton[active=false] .jQButton-icon::before {
118 content: "\f096";
119 }
120 .jQButton-icon {
121 position: absolute;
122 margin-left: -11px;
123 }
124 </style>
125
126 <script>
127 require(['jquery'],function(XjQ) {
128 'use strict';
129
130 /*
131 * Plugin class
132 */
133 var jQCloud = function(element, word_array, options) {
134 this.Xelement = XjQ(element);
135
136 this.word_array = word_array || [];
137 this.options = options;
138
139 this.sizeGenerator = null;
140 this.colorGenerator = null;
141
142 // Data used internally
143 this.data = {
144 placed_words: [],
145 timeouts: {},
146 namespace: null,
147 step: null,
148 angle: null,
149 aspect_ratio: null,
150 max_weight: null,
151 min_weight: null,
152 sizes: [],
153 colors: []
154 };
155
156 this.initialize();
157 };
158
159 jQCloud.DEFAULTS = {
160 width: 100,
161 height: 100,
162 center: { x: 0.5, y: 0.5 },
163 steps: 10,
164 delay: null,
165 shape: 'elliptic',
166 classPattern: 'w{n}',
167 encodeURI: true,
168 removeOverflowing: true,
169 afterCloudRender: null,
170 autoResize: false,
171 colors: null,
172 fontSize: null,
173 template: null
174 };
175
176 jQCloud.prototype = {
177 initialize: function() {
178 // Set/Get dimensions
179 if (this.options.width) {
180 this.Xelement.width(this.options.width);
181 }
182 else {
183 this.options.width = this.Xelement.width();
184 }
185 if (this.options.height) {
186 this.Xelement.height(this.options.height);
187 }
188 else {
189 this.options.height = this.Xelement.height();
190 }
191
192 // Default options value
193 this.options = XjQ.extend(true, {}, jQCloud.DEFAULTS, this.options);
194
195 // Ensure delay
196 if (this.options.delay === null) {
197 this.options.delay = this.word_array.length > 50 ? 10 : 0;
198 }
199
200 // Backward compatibility
201 if (this.options.center.x > 1) {
202 this.options.center.x = this.options.center.x / this.options.width;
203 this.options.center.y = this.options.center.y / this.options.height;
204 }
205
206 // Create colorGenerator function from options
207 // Direct function
208 if (typeof this.options.colors == 'function') {
209 this.colorGenerator = this.options.colors;
210 }
211 // Array of sizes
212 else if (XjQ.isArray(this.options.colors)) {
213 var cl = this.options.colors.length;
214 if (cl > 0) {
215 // Fill the sizes array to X items
216 if (cl < this.options.steps) {
217 for (var i = cl; i < this.options.steps; i++) {
218 this.options.colors[i] = this.options.colors[cl - 1];
219 }
220 }
221
222 this.colorGenerator = function(weight) {
223 return this.options.colors[this.options.steps - weight];
224 };
225 }
226 }
227
228 // Create sizeGenerator function from options
229 // Direct function
230 if (typeof this.options.fontSize == 'function') {
231 this.sizeGenerator = this.options.fontSize;
232 }
233 // Object with 'from' and 'to'
234 else if (XjQ.isPlainObject(this.options.fontSize)) {
235 this.sizeGenerator = function(width, height, weight) {
236 var max = width * this.options.fontSize.from,
237 min = width * this.options.fontSize.to;
238 return Math.round(min + (max - min) * 1.0 / (this.options.steps - 1) * (weight - 1)) + 'px';
239 };
240 }
241 // Array of sizes
242 else if (XjQ.isArray(this.options.fontSize)) {
243 var sl = this.options.fontSize.length;
244 if (sl > 0) {
245 // Fill the sizes array to X items
246 if (sl < this.options.steps) {
247 for (var j = sl; j < this.options.steps; j++) {
248 this.options.fontSize[j] = this.options.fontSize[sl - 1];
249 }
250 }
251
252 this.sizeGenerator = function(width, height, weight) {
253 return this.options.fontSize[this.options.steps - weight];
254 };
255 }
256 }
257
258 this.data.angle = Math.random() * 6.28;
259 this.data.step = (this.options.shape === 'rectangular') ? 18.0 : 2.0;
260 this.data.aspect_ratio = this.options.width / this.options.height;
261 this.clearTimeouts();
262
263 // Namespace word ids to avoid collisions between multiple clouds
264 this.data.namespace = (this.Xelement.attr('id') || Math.floor((Math.random() * 1000000)).toString(36)) + '_word_';
265
266 this.Xelement.addClass('jqcloud');
267
268 // Container's CSS position cannot be 'static'
269 if (this.Xelement.css('position') === 'static') {
270 this.Xelement.css('position', 'relative');
271 }
272
273 // Delay execution so that the browser can render the page before the computatively intensive word cloud drawing
274 this.createTimeout(XjQ.proxy(this.drawWordCloud, this), 10);
275
276 // Attach window resize event
277 if (this.options.autoResize) {
278 XjQ(window).on('resize.' + this.data.namespace, throttle(this.resize, 50, this));
279 }
280 },
281
282 // Helper function to keep track of timeouts so they can be destroyed
283 createTimeout: function(callback, time) {
284 var timeout = setTimeout(XjQ.proxy(function() {
285 delete this.data.timeouts[timeout];
286 callback();
287 }, this), time);
288 this.data.timeouts[timeout] = true;
289 },
290
291 // Destroy all timeouts
292 clearTimeouts: function() {
293 XjQ.each(this.data.timeouts, function(key) {
294 clearTimeout(key);
295 });
296 this.data.timeouts = {};
297 },
298
299 // Pairwise overlap detection
300 overlapping: function(a, b) {
301 if (Math.abs(2.0 * a.left + a.width - 2.0 * b.left - b.width) < a.width + b.width) {
302 if (Math.abs(2.0 * a.top + a.height - 2.0 * b.top - b.height) < a.height + b.height) {
303 return true;
304 }
305 }
306 return false;
307 },
308
309 // Helper function to test if an element overlaps others
310 hitTest: function(elem) {
311 // Check elements for overlap one by one, stop and return false as soon as an overlap is found
312 for (var i = 0, l = this.data.placed_words.length; i < l; i++) {
313 if (this.overlapping(elem, this.data.placed_words[i])) {
314 return true;
315 }
316 }
317 return false;
318 },
319
320 // Initialize the drawing of the whole cloud
321 drawWordCloud: function() {
322 var i, l;
323
324 this.Xelement.children('[id^="' + this.data.namespace + '"]').remove();
325
326 if (this.word_array.length === 0) {
327 return;
328 }
329
330 // Make sure every weight is a number before sorting
331 for (i = 0, l = this.word_array.length; i < l; i++) {
332 this.word_array[i].weight = parseFloat(this.word_array[i].weight, 10);
333 }
334
335 // Sort word_array from the word with the highest weight to the one with the lowest
336 this.word_array.sort(function(a, b) {
337 return b.weight - a.weight;
338 });
339
340 // Kepp trace of bounds
341 this.data.max_weight = this.word_array[0].weight;
342 this.data.min_weight = this.word_array[this.word_array.length - 1].weight;
343
344 // Generate colors
345 this.data.colors = [];
346 if (this.colorGenerator) {
347 for (i = 0; i < this.options.steps; i++) {
348 this.data.colors.push(this.colorGenerator(i + 1));
349 }
350 }
351
352 // Generate font sizes
353 this.data.sizes = [];
354 if (this.sizeGenerator) {
355 for (i = 0; i < this.options.steps; i++) {
356 this.data.sizes.push(this.sizeGenerator(this.options.width, this.options.height, i + 1));
357 }
358 }
359
360 // Iterate drawOneWord on every word, immediately or with delay
361 if (this.options.delay > 0) {
362 this.drawOneWordDelayed();
363 }
364 else {
365 for (i = 0, l = this.word_array.length; i < l; i++) {
366 this.drawOneWord(i, this.word_array[i]);
367 }
368
369 if (typeof this.options.afterCloudRender === 'function') {
370 this.options.afterCloudRender.call(this.Xelement);
371 }
372 }
373 },
374
375 // Function to draw a word, by moving it in spiral until it finds a suitable empty place
376 drawOneWord: function(index, word) {
377 var word_id = this.data.namespace + index,
378 word_selector = '#' + word_id,
379
380 // option.shape == 'elliptic'
381 angle = this.data.angle,
382 radius = 0.0,
383
384 // option.shape == 'rectangular'
385 steps_in_direction = 0.0,
386 quarter_turns = 0.0,
387
388 weight = Math.floor(this.options.steps / 2),
389 word_span,
390 word_size,
391 word_style;
392
393 // Create word attr object
394 //word.attr = XjQ.extend({}, word.html, { id: word_id });
395 word.attr = XjQ.extend({}, word.html, { id: word_id, group: (word.group ? word.group : "") });
396
397 // Linearly map the original weight to a discrete scale from 1 to 10
398 // Only if weights are different
399 if (this.data.max_weight != this.data.min_weight) {
400 weight = Math.round((word.weight - this.data.min_weight) * 1.0 * (this.options.steps - 1) / (this.data.max_weight - this.data.min_weight)) + 1;
401 }
402 word_span = XjQ('<span>').attr(word.attr);
403
404 word_span.addClass('jqcloud-word');
405
406 // Apply class
407 if (this.options.classPattern) {
408 word_span.addClass(this.options.classPattern.replace('{n}', weight));
409 }
410
411 // Apply color
412 if (this.data.colors.length) {
413 word_span.css('color', this.data.colors[weight - 1]);
414 }
415
416 // Apply color from word property
417 if (word.color) {
418 word_span.css('color', word.color);
419 }
420
421 // Apply size
422 if (this.data.sizes.length) {
423 word_span.css('font-size', this.data.sizes[weight - 1]);
424 }
425
426 //Render using template function if provided.
427 if (this.options.template) {
428 word_span.html(this.options.template(word));
429 } else if (word.link) {
430 // Append link if word.link attribute was set
431 // If link is a string, then use it as the link href
432 if (typeof word.link === 'string') {
433 word.link = { href: word.link };
434 }
435
436 if (this.options.encodeURI) {
437 word.link.href = encodeURI(word.link.href).replace(/'/g, '%27');
438 }
439
440 word_span.append(XjQ('<a>').attr(word.link).text(word.text));
441 }
442 else {
443 word_span.text(word.text);
444 }
445
446 // Bind handlers to words
447 if (word.handlers) {
448 word_span.on(word.handlers);
449 }
450
451 this.Xelement.append(word_span);
452
453 word_size = {
454 width: word_span.outerWidth(),
455 height: word_span.outerHeight()
456 };
457 word_size.left = this.options.center.x * this.options.width - word_size.width / 2.0;
458 word_size.top = this.options.center.y * this.options.height - word_size.height / 2.0;
459
460 // Save a reference to the style property, for better performance
461 word_style = word_span[0].style;
462 word_style.position = 'absolute';
463 word_style.left = word_size.left + 'px';
464 word_style.top = word_size.top + 'px';
465
466 while (this.hitTest(word_size)) {
467 // option shape is 'rectangular' so move the word in a rectangular spiral
468 if (this.options.shape === 'rectangular') {
469 steps_in_direction++;
470
471 if (steps_in_direction * this.data.step > (1 + Math.floor(quarter_turns / 2.0)) * this.data.step * ((quarter_turns % 4 % 2) === 0 ? 1 : this.data.aspect_ratio)) {
472 steps_in_direction = 0.0;
473 quarter_turns++;
474 }
475
476 switch (quarter_turns % 4) {
477 case 1:
478 word_size.left += this.data.step * this.data.aspect_ratio + Math.random() * 2.0;
479 break;
480 case 2:
481 word_size.top -= this.data.step + Math.random() * 2.0;
482 break;
483 case 3:
484 word_size.left -= this.data.step * this.data.aspect_ratio + Math.random() * 2.0;
485 break;
486 case 0:
487 word_size.top += this.data.step + Math.random() * 2.0;
488 break;
489 }
490 }
491 // Default settings: elliptic spiral shape
492 else {
493 radius += this.data.step;
494 angle += (index % 2 === 0 ? 1 : -1) * this.data.step;
495
496 word_size.left = this.options.center.x * this.options.width - (word_size.width / 2.0) + (radius * Math.cos(angle)) * this.data.aspect_ratio;
497 word_size.top = this.options.center.y * this.options.height + radius * Math.sin(angle) - (word_size.height / 2.0);
498 }
499 word_style.left = word_size.left + 'px';
500 word_style.top = word_size.top + 'px';
501 }
502
503 // Don't render word if part of it would be outside the container
504 if (this.options.removeOverflowing && (
505 word_size.left < 0 || word_size.top < 0 ||
506 (word_size.left + word_size.width) > this.options.width ||
507 (word_size.top + word_size.height) > this.options.height
508 )
509 ) {
510 word_span.remove();
511 return;
512 }
513
514 // Save position for further usage
515 this.data.placed_words.push(word_size);
516
517 if (typeof word.afterWordRender === 'function') {
518 word.afterWordRender.call(word_span);
519 }
520 },
521
522 // Draw one word then recall the function after a delay
523 drawOneWordDelayed: function(index) {
524 index = index || 0;
525
526 // if not visible then do not attempt to draw
527 if (!this.Xelement.is(':visible')) {
528 this.createTimeout(XjQ.proxy(function() {
529 this.drawOneWordDelayed(index);
530 }, this), 10);
531
532 return;
533 }
534
535 if (index < this.word_array.length) {
536 this.drawOneWord(index, this.word_array[index]);
537
538 this.createTimeout(XjQ.proxy(function() {
539 this.drawOneWordDelayed(index + 1);
540 }, this), this.options.delay);
541 }
542 else {
543 if (typeof this.options.afterCloudRender == 'function') {
544 this.options.afterCloudRender.call(this.Xelement);
545 }
546 }
547 },
548
549 // Destroy any data and objects added by the plugin
550 destroy: function() {
551 if (this.options.autoResize) {
552 XjQ(window).off('resize.' + this.data.namespace);
553 }
554
555 this.clearTimeouts();
556 this.Xelement.removeClass('jqcloud');
557 this.Xelement.removeData('jqcloud');
558 this.Xelement.children('[id^="' + this.data.namespace + '"]').remove();
559 },
560
561 // Update the list of words
562 update: function(word_array) {
563 this.word_array = word_array;
564 this.data.placed_words = [];
565
566 this.clearTimeouts();
567 this.drawWordCloud();
568 },
569
570 resize: function() {
571 var new_size = {
572 width: this.Xelement.width(),
573 height: this.Xelement.height()
574 };
575
576 if (new_size.width != this.options.width || new_size.height != this.options.height) {
577 this.options.width = new_size.width;
578 this.options.height = new_size.height;
579 this.data.aspect_ratio = this.options.width / this.options.height;
580
581 this.update(this.word_array);
582 }
583 },
584 };
585
586 /*
587 * Apply throttling to a callback
588 * @param callback {function}
589 * @param delay {int} milliseconds
590 * @param context {object|null}
591 * @return {function}
592 */
593 function throttle(callback, delay, context) {
594 var state = {
595 pid: null,
596 last: 0
597 };
598
599 return function() {
600 var elapsed = new Date().getTime() - state.last,
601 args = arguments,
602 that = this;
603
604 function exec() {
605 state.last = new Date().getTime();
606 return callback.apply(context || that, Array.prototype.slice.call(args));
607 }
608
609 if (elapsed > delay) {
610 return exec();
611 }
612 else {
613 clearTimeout(state.pid);
614 state.pid = setTimeout(exec, delay - elapsed);
615 }
616 };
617 }
618
619 /*
620 * jQuery plugin
621 */
622 XjQ.fn.jQCloud = function(word_array, option) {
623 var args = arguments;
624
625 return this.each(function() {
626 var Xthis = XjQ(this),
627 data = Xthis.data('jqcloud');
628
629 if (!data && word_array === 'destroy') {
630 // Don't even try to initialize when called with 'destroy'
631 return;
632 }
633 if (!data) {
634 var options = typeof option === 'object' ? option : {};
635 Xthis.data('jqcloud', (data = new jQCloud(this, word_array, options)));
636 }
637 else if (typeof word_array === 'string') {
638 data[word_array].apply(data, Array.prototype.slice.call(args, 1));
639 }
640 });
641 };
642
643 XjQ.fn.jQCloud.defaults = {
644 set: function(options) {
645 XjQ.extend(true, jQCloud.DEFAULTS, options);
646 },
647 get: function(key) {
648 var options = jQCloud.DEFAULTS;
649 if (key) {
650 options = options[key];
651 }
652 return XjQ.extend(true, {}, options);
653 }
654 };
655
656 var jQwords = [
657 {text: "Druckvorschau", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
658 {text: "Link im Formular", weight: 6, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
659 {text: "Kalenderwidget anpassen", weight: 8, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
660 {text: "Optionale Daten einer Auswahl mitspeichern (col Attribute)", weight: 4, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
661 {text: "Aktion vor Absenden ausführen", weight: 5, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
662 {text: "Absenden ohne Speichern", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
663 {text: "Eigene Formularfeld-Validatoren (Regex)", weight: 10, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
664 {text: "Wiederholende Felder (dynamic) im JS adressieren", weight: 10, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
665 {text: "Events an dynamic Felder anhängen", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
666 {text: "[Richtext-Editor (Ticket #4227)]", weight: 3, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
667 {text: "Vorbelegung von Daten im Formular (extern)", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
668 {text: "intiale Vorbelegung von Daten in Feldern", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
669 {text: "Formularfelder mit LDAP-Daten vorbelegen (Ticket 3701)", weight: 3, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
670 {text: "Formulareingaben zurücksetzen", weight: 7, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
671 {text: "Formulardaten lokal speichern und später wieder laden (Ticket #3964)", weight: 8, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
672 {text: "Formular zwischenspeichern", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
673 {text: "Labeltext zur Laufzeit manipulieren (Ticket #3493)", weight: 5, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
674 {text: "Mehrfachbedingungen im Designer", weight: 7, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
675 {text: "zusätzliches JS und CSS in allen Formularen", weight: 8, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
676 {text: "mehrseitige Formulare", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
677 {text: "responive / mobile Ansicht", weight: 10, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
678 {text: "andere Schriftart einbinden / Design ändern", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
679 {text: "Java-Script API", weight: 8, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
680
681 {text: "Datenquellen für Auswahllisten hinterlegen", weight: 8, group: 'Datenquellen', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
682 {text: "Datenquellen in Auswahllisten anhand von Parametern hinterlegen", weight: 6, group: 'Datenquellen', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
683 {text: "Leerer erster Eintrag bei SQL-Datenquelle (Ticket #4068)", weight: 5, group: 'Datenquellen', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
684
685 {text: "Mehrfachbedingungen im Workflow", weight: 8, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
686 {text: "Automatisiertes Löschen nach bestimmten Zeitraum", weight: 9, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
687 {text: "Exportmöglichkeiten von Daten", weight: 6, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
688 {text: "E-Mail Aktionen abhängig von Eingaben (Bedingungen) durchführen", weight: 8, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
689 {text: "Bedingtes Einblenden von Elementen", weight: 7, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
690 {text: "Mehrstufigen Workflow (Beispiel)", weight: 8, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
691 {text: "Statuswechsel", weight: 10, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
692 {text: "Vorgangs-ID im Druck (Word-Fill) anzeigen (Ticket #3813)", weight: 5, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
693 {text: "iCal Datei erzeugen", weight: 3, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
694 {text: "aktuelles Datum in der Verarbeitung", weight: 6, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
695 {text: "Laufende Nummer aus Nummernkreis erzeugen (Ticket #3249)", weight: 3, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
696 {text: "E-Mail-Versand", weight: 10, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
697
698 {text: "Migrationsmöglichkeiten in Webseite", weight: 6, group: 'Abschlusseite', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
699 {text: "Abschlussseite in Webseite anzeigen (inline)", weight: 5, group: 'Abschlusseite', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
700 {text: "Generierte Dateien auf Abschlussseite anzeigen", weight: 7, group: 'Abschlusseite', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
701 {text: "Benutzerdefinierte Abschlussseite", weight: 9, group: 'Abschlusseite', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
702 {text: "Referenznummer (Ticket #3866)", weight: 5, group: 'Abschlusseite', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
703
704 {text: "Vorgänge löschen", weight: 9, group: 'Posteingang', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
705 {text: "Filtermöglichkeiten", weight: 8, group: 'Posteingang', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
706 {text: "Stauswechsel im Postfach ermöglichen (notwendige Einstellungen)", weight: 6.5, group: 'Posteingang', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
707 {text: "Postfach exportieren", weight: 7, group: 'Posteingang', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
708 {text: "Berechtigungen/Sichtbarkeiten für Benutzer festlegen", weight: 6, group: 'Posteingang', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
709
710 {text: "Update FORMCYCLE", weight: 4, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
711 {text: "Zugriffseinschränkung - Möglichkeiten", weight: 3, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
712 {text: "I-Frame automatisch Höhe anpassen", weight: 5, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
713 {text: "Daten aus Formular werden nicht gespeichert (Disablede Felder)", weight: 6, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
714 {text: "Double Opt-In", weight: 7, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/UserInterface/MyForms/DoubleOptIn/'},
715 {text: "[Übersicht von Lösungen bei Problemen mit z.B. DB (Ticket #3714, #3057)]", weight: 6, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
716 {text: "[Tomcat Zugriff HTTPS - Zertifikat-Einrichtung (Ticket #3295)]", weight: 5, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
717 {text: "Beispiele für Print CSS / Erläuterung was das PDF Print Plugin macht", weight: 7, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'},
718 ];
719 ##http://mistic100.github.io/jQCloud/demo.html#handlers
720 /*XjQ('#jQArea').jQCloud(jQwords, {
721 classPattern: null,
722 colors: ["#176694", "#3480AD", "#5398c1", "#76b2d6", "#7ca2b9", "#889fad", "#8e979c", "#929596", "#babbbb"],
723 fontSize: ['16px','15px','15px','14px','14px','13px','13px','12px','12px'],
724 //width: 500,
725 height: 500
726 });*/
727
728 var jQButtons = XjQ('.jQButton');
729
730 jQButtons.click(function() {
731 if (XjQ(this).attr('active') == 'true') {
732 XjQ('#jQArea').children('span[group="'+XjQ(this).attr('group')+'"]').each(jQTagInvisible);
733 XjQ(this).attr('active', 'false');
734 } else {
735 XjQ('#jQArea').children('span[group="'+XjQ(this).attr('group')+'"]').each(jQTagVisible);
736 XjQ(this).attr('active', 'true');
737 }
738 });
739 function jQTagVisible() {
740 XjQ(this).css('display', 'block');
741 }
742 function jQTagInvisible() {
743 XjQ(this).css('display', 'none');
744 }
745
746 jQButtons.hover(function() {
747 console.log("hover",XjQ(this));
748 XjQ('#jQArea').children('span[group="'+XjQ(this).attr('group')+'"]').each(jQTagHighlighted);
749 }, function() {
750 console.log("unhover",XjQ(this));
751 XjQ('#jQArea').children('span[group="'+XjQ(this).attr('group')+'"]').each(jQTagNotHighlighted);
752 });
753 function jQTagHighlighted() {
754 XjQ(this).addClass('jqHighlight');
755 }
756 function jQTagNotHighlighted() {
757 XjQ(this).removeClass('jqHighlight');
758 }
759 });
760 </script>
761 <!--
762 <div class="row">
763 <div class="d-none d-md-block col-lg-12 card-main">
764 <div class="well" >
765 <div id="jQButtons">
766 <div id="jQBtn1" class="jQButton" group="Designer" active="true"><span class="jQButton-icon"></span>&nbsp;&nbsp;Designer</div>
767 <div id="jQBtn1" class="jQButton" group="Datenquellen" active="true"><span class="jQButton-icon"></span>&nbsp;&nbsp;Datenquellen</div>
768 <div id="jQBtn1" class="jQButton" group="Statusverarbeitung" active="true"><span class="jQButton-icon"></span>&nbsp;&nbsp;Statusverarbeitung</div>
769 <div id="jQBtn1" class="jQButton" group="Abschlusseite" active="true"><span class="jQButton-icon"></span>&nbsp;&nbsp;Abschlusseite</div>
770 <div id="jQBtn1" class="jQButton" group="Posteingang" active="true"><span class="jQButton-icon"></span>&nbsp;&nbsp;Posteingang</div>
771 <div id="jQBtn1" class="jQButton" group="Anderes" active="true"><span class="jQButton-icon"></span>&nbsp;&nbsp;Anderes</div>
772 </div>
773 <div id="jQArea">
774 </div>
775 </div>
776 </div>
777 </div>
778 -->
779 {{/html}}
780 {{/velocity}}
781
782