Zeige letzte Bearbeiter
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 {{code language="javascript"}}
10 function myFormCycleCallback(msg){
11 $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
12 renderForm(msg.data);
13 }
14
15 window.addEventListener("message", myFormCycleCallback, false);
16 {{/code}}
17
18 == 3. Ergebenis speichern: ==
19
20 TODO: Iframe
21 {{html clean="false"}}
22 <div class="hljs" id="result"></div>
23 {{/html}}
24
25
26 == 4. Formular einbinden: ==
27
28 {{code language="js"}}
29 window.renderForm = function(formId){
30 var myBase = 'https://help7.formcycle.eu/xwiki/bin/view/Examples/IncludeExternalContext/';
31 var fcBase = 'https://pro.form.cloud/formcycle';
32 var myFormContainer = $('#content');
33
34 var form = $.ajax({
35 type: "GET",
36 url: fcBase + '/form/provide/' + formId,
37 data:{
38 //Render-Parameter
39 "xfc-rp-inline":true, //Verwendete resourcen auflösen
40 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
41 "xfc-rp-usejq":false, //jQuery einbinden
42 "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
43 "xfc-rp-usecss":true, //Use Formcycle CSS files
44 "xfc-rp-useui":true, //jQueryUI einbinden
45 //Prozess-Parameter
46 "xfc-pp-external":true, //Externer Formularrequest
47 "xfc-pp-base-url":fcBase, //URL zum FormCycle
48 "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
49 "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
50 },
51 cache: false,
52 async: false,
53 success:function(html){
54 myFormContainer.html(html);
55 },
56 crossDomain: true
57 });
58 }
59 {{/code}}
60
61
62 == 5. Ergebenis Formular: ==
63
64 {{html clean="false"}}
65 <div class="hljs" id="content"></div>
66 {{/html}}
67
68
69
70
71
72
73
74 Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene [[HTML-Seite>>attach:iframe.html]] in einem iframe dargestellt:
75
76 {{html clean="false"}}
77 <style type="text/css">
78 pre{
79 margin:0;
80 }
81
82 .xm-form{
83 margin:0 auto;
84 }
85
86 .extra .hljs-string{
87 font-weight:bold;
88 color:red;
89 }
90
91 iframe, .hljs{
92 max-width:700px;
93 border:2px solid #515151;
94 }
95
96 .hljs{
97 max-width:985px;
98 text-align:center;
99 }
100
101 .resizer {
102 display:flex;
103 margin:0;
104 padding:0;
105 resize:both;
106 overflow:hidden
107 }
108
109 .resizer > .resized {
110 flex-grow:1;
111 margin:0;
112 padding:0;
113 border:0;
114 height: inherit;
115 }
116 .border { border:4px dashed black; }
117 </style>
118
119 <div class="resizer border" style="height: 1000px;">
120 <iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
121 </div>
122 {{/html}}