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 der Lektion 1 und der Lektion 2 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