Wiki-Quellcode von Formular über externen Kontext einbinden
Verstecke letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
 |
11.12 | 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 | |||
| |
11.8 | 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 | |||
| |
11.9 | 53 | {{code language="javascript"}} |
| 54 | function myFormCycleCallback(msg){ | ||
| |
11.11 | 55 | $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' ); |
| 56 | renderForm(msg.data); | ||
| |
11.8 | 57 | } |
| 58 | |||
| |
11.9 | 59 | window.addEventListener("message", myFormCycleCallback, false); |
| 60 | {{/code}} | ||
| |
11.8 | 61 | |
| 62 | == 3. Ergebenis speichern: == | ||
| 63 | |||
| |
11.10 | 64 | TODO: Iframe |
| |
11.8 | 65 | {{html clean="false"}} |
| 66 | <div class="hljs" id="result"></div> | ||
| |
8.4 | 67 | {{/html}} |
 |
6.1 | 68 | |
| |
1.1 | 69 | |
| |
11.8 | 70 | == 4. Formular einbinden: == |
| |
8.5 | 71 | |
| |
11.8 | 72 | {{code language="js"}} |
| 73 | window.renderForm = function(formId){ | ||
| |
11.10 | 74 | var myBase = 'https://help7.formcycle.eu/xwiki/bin/view/Examples/IncludeExternalContext/'; |
| 75 | var fcBase = 'https://pro.form.cloud/formcycle'; | ||
| |
11.8 | 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 | } | ||
| |
11.6 | 103 | {{/code}} |
| |
1.1 | 104 | |
| |
11.8 | 105 | |
| 106 | == 5. Ergebenis Formular: == | ||
| 107 | |||
| 108 | {{html clean="false"}} | ||
| |
11.12 | 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> | ||
| |
11.8 | 112 | {{/html}} |
| 113 | |||
| 114 | |||
| 115 | |||
| 116 | |||
| 117 | |||
| |
11.12 | 118 | Hinweis: Aus Kompatibilitätsgründen wird der Inhalt auf dieser Seite in einem iframe dargestellt. |
| |
11.8 | 119 | |
| 120 |