Zeige letzte Bearbeiter
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
45 == 1. Externen Kontext via iFrame einbinden z.B. ==
46
47 [[https://pro.form.cloud/formcycle/external/forms/main.xhtml]]
48
49 TODO: iframe
50
51 == 2. Eventlistener für Formularauswahl registrieren z.B.: ==
52
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);
57 }
58
59 window.addEventListener("message", myFormCycleCallback, false);
60 {{/code}}
61
62 == 3. Ergebenis speichern: ==
63
64 TODO: Iframe
65 {{html clean="false"}}
66 <div class="hljs" id="result"></div>
67 {{/html}}
68
69
70 == 4. Formular einbinden: ==
71
72 {{code language="js"}}
73 window.renderForm = function(formId){
74 var myBase = 'https://help7.formcycle.eu/xwiki/bin/view/Examples/IncludeExternalContext/';
75 var fcBase = 'https://pro.form.cloud/formcycle';
76 var myFormContainer = $('#content');
77
78 var form = $.ajax({
79 type: "GET",
80 url: fcBase + '/form/provide/' + formId,
81 data:{
82 //Render-Parameter
83 "xfc-rp-inline":true, //Verwendete resourcen auflösen
84 "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
85 "xfc-rp-usejq":false, //jQuery einbinden
86 "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
87 "xfc-rp-usecss":true, //Use Formcycle CSS files
88 "xfc-rp-useui":true, //jQueryUI einbinden
89 //Prozess-Parameter
90 "xfc-pp-external":true, //Externer Formularrequest
91 "xfc-pp-base-url":fcBase, //URL zum FormCycle
92 "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
93 "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
94 },
95 cache: false,
96 async: false,
97 success:function(html){
98 myFormContainer.html(html);
99 },
100 crossDomain: true
101 });
102 }
103 {{/code}}
104
105
106 == 5. Ergebenis Formular: ==
107
108 {{html clean="false"}}
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>
112 {{/html}}
113
114
115
116
117
118 Hinweis: Aus Kompatibilitätsgründen wird der Inhalt auf dieser Seite in einem iframe dargestellt.