... |
... |
@@ -1,3 +1,47 @@ |
|
1 |
+{{html clean="false"}} |
|
2 |
+ <style type="text/css"> |
|
3 |
+ pre{ |
|
4 |
+ margin:0; |
|
5 |
+ } |
|
6 |
+ |
|
7 |
+ .xm-form{ |
|
8 |
+ margin:0 auto; |
|
9 |
+ } |
|
10 |
+ |
|
11 |
+ .extra .hljs-string{ |
|
12 |
+ font-weight:bold; |
|
13 |
+ color:red; |
|
14 |
+ } |
|
15 |
+ |
|
16 |
+ iframe, .hljs{ |
|
17 |
+ max-width:700px; |
|
18 |
+ border:2px solid #515151; |
|
19 |
+ } |
|
20 |
+ |
|
21 |
+ .hljs{ |
|
22 |
+ max-width:985px; |
|
23 |
+ text-align:center; |
|
24 |
+ } |
|
25 |
+ |
|
26 |
+ .resizer { |
|
27 |
+ display:flex; |
|
28 |
+ margin:0; |
|
29 |
+ padding:0; |
|
30 |
+ resize:both; |
|
31 |
+ overflow:hidden |
|
32 |
+ } |
|
33 |
+ |
|
34 |
+ .resizer > .resized { |
|
35 |
+ flex-grow:1; |
|
36 |
+ margin:0; |
|
37 |
+ padding:0; |
|
38 |
+ border:0; |
|
39 |
+ height: inherit; |
|
40 |
+ } |
|
41 |
+ .border { border:4px dashed black; } |
|
42 |
+ </style> |
|
43 |
+{{/html}} |
|
44 |
+ |
1 |
1 |
== 1. Externen Kontext via iFrame einbinden z.B. == |
2 |
2 |
|
3 |
3 |
[[https://pro.form.cloud/formcycle/external/forms/main.xhtml]] |
... |
... |
@@ -6,19 +6,18 @@ |
6 |
6 |
|
7 |
7 |
== 2. Eventlistener für Formularauswahl registrieren z.B.: == |
8 |
8 |
|
9 |
|
- |
10 |
|
- |
11 |
|
- |
12 |
|
-{{code language="javascript"}}function myFormCycleCallback(msg){ |
13 |
|
- $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' ); |
14 |
|
- renderForm(msg.data); |
|
53 |
+{{code language="javascript"}} |
|
54 |
+function myFormCycleCallback(msg){ |
|
55 |
+ $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' ); |
|
56 |
+ renderForm(msg.data); |
15 |
15 |
} |
16 |
16 |
|
17 |
|
-window.addEventListener("message", myFormCycleCallback, false);{{/code}} |
|
59 |
+window.addEventListener("message", myFormCycleCallback, false); |
|
60 |
+{{/code}} |
18 |
18 |
|
19 |
|
- |
20 |
20 |
== 3. Ergebenis speichern: == |
21 |
21 |
|
|
64 |
+TODO: Iframe |
22 |
22 |
{{html clean="false"}} |
23 |
23 |
<div class="hljs" id="result"></div> |
24 |
24 |
{{/html}} |
... |
... |
@@ -28,8 +28,8 @@ |
28 |
28 |
|
29 |
29 |
{{code language="js"}} |
30 |
30 |
window.renderForm = function(formId){ |
31 |
|
- var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/'; |
32 |
|
- var fcBase = 'https://pro.formcloud.de/formcycle'; |
|
74 |
+ var myBase = 'https://help7.formcycle.eu/xwiki/bin/view/Examples/IncludeExternalContext/'; |
|
75 |
+ var fcBase = 'https://pro.form.cloud/formcycle'; |
33 |
33 |
var myFormContainer = $('#content'); |
34 |
34 |
|
35 |
35 |
var form = $.ajax({ |
... |
... |
@@ -63,7 +63,9 @@ |
63 |
63 |
== 5. Ergebenis Formular: == |
64 |
64 |
|
65 |
65 |
{{html clean="false"}} |
66 |
|
- <div class="hljs" id="content"></div> |
|
109 |
+ <div class="resizer border" style="height: 1000px;"> |
|
110 |
+ <iframe id="content" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe> |
|
111 |
+ </div> |
67 |
67 |
{{/html}} |
68 |
68 |
|
69 |
69 |
|
... |
... |
@@ -70,54 +70,6 @@ |
70 |
70 |
|
71 |
71 |
|
72 |
72 |
|
|
118 |
+Hinweis: Aus Kompatibilitätsgründen wird der Inhalt auf dieser Seite in einem iframe dargestellt. |
73 |
73 |
|
74 |
74 |
|
75 |
|
-Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene [[HTML-Seite>>attach:iframe.html]] in einem iframe dargestellt: |
76 |
|
- |
77 |
|
-{{html clean="false"}} |
78 |
|
- <style type="text/css"> |
79 |
|
- pre{ |
80 |
|
- margin:0; |
81 |
|
- } |
82 |
|
- |
83 |
|
- .xm-form{ |
84 |
|
- margin:0 auto; |
85 |
|
- } |
86 |
|
- |
87 |
|
- .extra .hljs-string{ |
88 |
|
- font-weight:bold; |
89 |
|
- color:red; |
90 |
|
- } |
91 |
|
- |
92 |
|
- iframe, .hljs{ |
93 |
|
- max-width:700px; |
94 |
|
- border:2px solid #515151; |
95 |
|
- } |
96 |
|
- |
97 |
|
- .hljs{ |
98 |
|
- max-width:985px; |
99 |
|
- text-align:center; |
100 |
|
- } |
101 |
|
- |
102 |
|
- .resizer { |
103 |
|
- display:flex; |
104 |
|
- margin:0; |
105 |
|
- padding:0; |
106 |
|
- resize:both; |
107 |
|
- overflow:hidden |
108 |
|
- } |
109 |
|
- |
110 |
|
- .resizer > .resized { |
111 |
|
- flex-grow:1; |
112 |
|
- margin:0; |
113 |
|
- padding:0; |
114 |
|
- border:0; |
115 |
|
- height: inherit; |
116 |
|
- } |
117 |
|
- .border { border:4px dashed black; } |
118 |
|
- </style> |
119 |
|
- |
120 |
|
- <div class="resizer border" style="height: 1000px;"> |
121 |
|
- <iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe> |
122 |
|
- </div> |
123 |
|
-{{/html}} |