Zeige letzte Bearbeiter
1 {{html clean="false"}}
2 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
3 <script>
4 $.noConflict();
5 </script>
6 <style type="text/css">
7 pre{
8 margin:0;
9 }
10
11
12 .extra .hljs-string{
13 font-weight:bold;
14 color:red;
15 }
16
17 iframe, .hljs{
18 max-width:980px;
19 border:2px solid #515151;
20 }
21
22 .hljs{
23 max-width:985px;
24 }
25
26 span.box{
27 display: block;
28 padding: 20px;
29 }
30 </style>
31
32 <script type="text/javascript">
33
34 function myFormCycleCallback(msg){
35 jQuery('#result').html('Nachricht von: "' + msg.origin + '" Formular mit id: "' + msg.data + '" wurde ausgewählt.' );
36 renderForm(msg.data);
37 }
38
39 window.addEventListener("message", myFormCycleCallback, false);
40
41 window.renderForm = function(formId){
42 var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
43 var fcBase = 'https://pro.formcloud.de/formcycle';
44 var myFormContainer = jQuery('#content');
45
46 var form = jQuery.ajax({
47 type: "GET",
48 url: fcBase + '/form/provide/' + formId,
49 data:{
50 //Render-Parameter
51 "xfc-rp-inline":true, //Verwendete resourcen auflösen
52 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
53 "xfc-rp-usejq":false, //jQuery einbinden
54 "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
55 "xfc-rp-usecss":true, //Use Formcycle CSS files
56 "xfc-rp-useui":true, //jQueryUI einbinden
57 //Prozess-Parameter
58 "xfc-pp-external":true, //Externer Formularrequest
59 "xfc-pp-base-url":fcBase, //URL zum FormCycle
60 "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
61 "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
62 },
63 cache: false,
64 async: false,
65 success:function(html){
66 myFormContainer.html(html.replace(/\$/g,'jQuery'));
67 },
68 crossDomain: true
69 });
70 }
71
72 </script>
73
74 <h1>Formular einbinden und "Externen Kontext" Seite verwenden</h1>
75
76 <p>
77 <h2>1. Externen Kontext via iFrame einbinden z.B.</h2>
78 <br/>
79 <br/>
80 <a href="https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml">https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml</a>
81 <br/>
82 <a href="https://pro.formcloud.de/formcycle/external/forms/main.xhtml">https://pro.formcloud.de/formcycle/external/forms/main.xhtml</a>
83 <br/>
84 </p>
85
86 <iframe src="https://pro.formcloud.de/formcycle/external/forms/main.xhtml" width="100%" height="340px">
87 <span>Ihr Browser unterstützt keine iFrames</span>
88 </iframe>
89 {{/html}}
90
91
92 == 2. Eventlistener für Formularauswahl registrieren z.B.: ==
93
94
95
96 {{code language="javascript"}}function myFormCycleCallback(msg){
97 $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
98 renderForm(msg.data);
99 }
100
101 window.addEventListener("message", myFormCycleCallback, false);{{/code}}
102
103
104 == 3. Ergebenis speichern: ==
105
106 {{html clean="false"}}
107 <div class="hljs" id="result"></div>
108 {{/html}}
109
110
111 == 4. Formular einbinden: ==
112
113 {{code language="js"}}
114 window.renderForm = function(formId){
115 var myBase = 'https://download.formcycle.de/devground/ttr/fc/';
116 var fcBase = 'https://pro.formcloud.de/formcycle';
117 var myFormContainer = $('#content');
118
119 var form = $.ajax({
120 type: "GET",
121 url: fcBase + '/form/provide/' + formId,
122 data:{
123 //Render-Parameter
124 "xfc-rp-inline":true, //Verwendete resourcen auflösen
125 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
126 "xfc-rp-usejq":false, //jQuery einbinden
127 "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
128 "xfc-rp-usecss":true, //Use Formcycle CSS files
129 "xfc-rp-useui":true, //jQueryUI einbinden
130 //Prozess-Parameter
131 "xfc-pp-external":true, //Externer Formularrequest
132 "xfc-pp-base-url":fcBase, //URL zum FormCycle
133 "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
134 "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
135 },
136 cache: false,
137 async: false,
138 success:function(html){
139 myFormContainer.html(html);
140 },
141 crossDomain: true
142 });
143 }
144 {{/code}}
145
146
147 == 5. Ergebenis Formular: ==
148
149 {{html clean="false"}}
150 <div class="hljs" id="content"></div>
151 {{/html}}

Navigation

Copyright 2000-2025