Verstecke letzte Bearbeiter
gru 11.8 1 == 1. Externen Kontext via iFrame einbinden z.B. ==
2
3 [[https://pro.form.cloud/formcycle/external/forms/main.xhtml]]
4
5 TODO: iframe
6
7 == 2. Eventlistener für Formularauswahl registrieren z.B.: ==
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);
15 }
16
17 window.addEventListener("message", myFormCycleCallback, false);{{/code}}
18
19
20 == 3. Ergebenis speichern: ==
21
22 {{html clean="false"}}
23 <div class="hljs" id="result"></div>
gru 8.4 24 {{/html}}
MKO 6.1 25
gru 1.1 26
gru 11.8 27 == 4. Formular einbinden: ==
gru 8.5 28
gru 11.8 29 {{code language="js"}}
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';
33 var myFormContainer = $('#content');
34
35 var form = $.ajax({
36 type: "GET",
37 url: fcBase + '/form/provide/' + formId,
38 data:{
39 //Render-Parameter
40 "xfc-rp-inline":true, //Verwendete resourcen auflösen
41 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
42 "xfc-rp-usejq":false, //jQuery einbinden
43 "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
44 "xfc-rp-usecss":true, //Use Formcycle CSS files
45 "xfc-rp-useui":true, //jQueryUI einbinden
46 //Prozess-Parameter
47 "xfc-pp-external":true, //Externer Formularrequest
48 "xfc-pp-base-url":fcBase, //URL zum FormCycle
49 "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
50 "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
51 },
52 cache: false,
53 async: false,
54 success:function(html){
55 myFormContainer.html(html);
56 },
57 crossDomain: true
58 });
59 }
gru 11.6 60 {{/code}}
gru 1.1 61
gru 11.8 62
63 == 5. Ergebenis Formular: ==
64
65 {{html clean="false"}}
66 <div class="hljs" id="content"></div>
67 {{/html}}
68
69
70
71
72
73
74
gru 11.6 75 Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene [[HTML-Seite>>attach:iframe.html]] in einem iframe dargestellt:
gru 8.4 76
gru 1.1 77 {{html clean="false"}}
gru 7.3 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
gru 9.4 102 .resizer {
103 display:flex;
104 margin:0;
105 padding:0;
106 resize:both;
107 overflow:hidden
gru 7.3 108 }
gru 9.4 109
110 .resizer > .resized {
111 flex-grow:1;
112 margin:0;
113 padding:0;
gru 9.6 114 border:0;
gru 9.10 115 height: inherit;
gru 9.4 116 }
gru 9.9 117 .border { border:4px dashed black; }
gru 7.3 118 </style>
119
gru 11.5 120 <div class="resizer border" style="height: 1000px;">
gru 9.4 121 <iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
122 </div>
gru 1.1 123 {{/html}}