Wiki-Quellcode von Formular über externen Kontext einbinden

Verstecke letzte Bearbeiter

version	line-number	content
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
11.9	9	{{code language="javascript"}}
	10	function myFormCycleCallback(msg){
11.11	11	$('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
	12	renderForm(msg.data);
11.8	13	}
	14
11.9	15	window.addEventListener("message", myFormCycleCallback, false);
	16	{{/code}}
11.8	17
	18	== 3. Ergebenis speichern: ==
	19
11.10	20	TODO: Iframe
11.8	21	{{html clean="false"}}
	22	<div class="hljs" id="result"></div>
8.4	23	{{/html}}
6.1	24
1.1	25
11.8	26	== 4. Formular einbinden: ==
8.5	27
11.8	28	{{code language="js"}}
	29	window.renderForm = function(formId){
11.10	30	var myBase = 'https://help7.formcycle.eu/xwiki/bin/view/Examples/IncludeExternalContext/';
	31	var fcBase = 'https://pro.form.cloud/formcycle';
11.8	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	}
11.6	59	{{/code}}
1.1	60
11.8	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
11.6	74	Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene [[HTML-Seite>>attach:iframe.html]] in einem iframe dargestellt:
8.4	75
1.1	76	{{html clean="false"}}
7.3	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
9.4	101	.resizer {
	102	display:flex;
	103	margin:0;
	104	padding:0;
	105	resize:both;
	106	overflow:hidden
7.3	107	}
9.4	108
	109	.resizer > .resized {
	110	flex-grow:1;
	111	margin:0;
	112	padding:0;
9.6	113	border:0;
9.10	114	height: inherit;
9.4	115	}
9.9	116	.border { border:4px dashed black; }
7.3	117	</style>
	118
11.5	119	<div class="resizer border" style="height: 1000px;">
9.4	120	<iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
	121	</div>
1.1	122	{{/html}}