Formular über externen Kontext einbinden

author	version	line-number	content
		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.