Zusammenfassung

• Seiteneigenschaften (2 geändert, 0 hinzugefügt, 0 gelöscht)

Details

Seiteneigenschaften

Titel

...	...	@@ -1,1 +1,1 @@
1		-IncludeFormViaExternalContext
	1	+Formular über externen Kontext einbinden

Inhalt

...	...	@@ -1,1 +1,152 @@
1		-TBD
	1	+{{html clean="false"}}
	2	+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	3	+ <script>
	4	+ $.noConflict();
	5	+ </script>
	6	+ <style type="text/css">
	7	+ pre{
	8	+ margin:0;
	9	+ }
	10	+
	11	+
	12	+ .extra .hljs-string{
	13	+ font-weight:bold;
	14	+ color:red;
	15	+ }
	16	+
	17	+ iframe, .hljs{
	18	+ max-width:980px;
	19	+ border:2px solid #515151;
	20	+ }
	21	+
	22	+ .hljs{
	23	+ max-width:985px;
	24	+ }
	25	+
	26	+ span.box{
	27	+ display: block;
	28	+ padding: 20px;
	29	+ }
	30	+ </style>
	31	+
	32	+ <script type="text/javascript">
	33	+
	34	+ function myFormCycleCallback(msg){
	35	+ jQuery('#result').html('Nachricht von: "' + msg.origin + '" Formular mit id: "' + msg.data + '" wurde ausgewählt.' );
	36	+ renderForm(msg.data);
	37	+ }
	38	+
	39	+ window.addEventListener("message", myFormCycleCallback, false);
	40	+
	41	+window.renderForm = function(formId){
	42	+ var myBase = 'https://download.formcycle.de/devground/ttr/fc/';
	43	+ var fcBase = 'https://pro.formcloud.de/formcycle';
	44	+ var myFormContainer = jQuery('#content');
	45	+
	46	+ var form = jQuery.ajax({
	47	+ type: "GET",
	48	+ url: fcBase + '/form/provide/' + formId,
	49	+ data:{
	50	+ //Render-Parameter
	51	+ "xfc-rp-inline":true, //Verwendete resourcen auflösen
	52	+ "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
	53	+ "xfc-rp-usejq":false, //jQuery einbinden
	54	+ "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
	55	+ "xfc-rp-usecss":true, //Use Formcycle CSS files
	56	+ "xfc-rp-useui":true, //jQueryUI einbinden
	57	+ //Prozess-Parameter
	58	+ "xfc-pp-external":true, //Externer Formularrequest
	59	+ "xfc-pp-base-url":fcBase, //URL zum FormCycle
	60	+ "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
	61	+ "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
	62	+ },
	63	+ cache: false,
	64	+ async: false,
	65	+ success:function(html){
	66	+ myFormContainer.html(html.replace(/\$/g,'jQuery'));
	67	+ },
	68	+ crossDomain: true
	69	+ });
	70	+}
	71	+
	72	+ </script>
	73	+
	74	+ <h1>Formular einbinden und "Externen Kontext" Seite verwenden</h1>
	75	+
	76	+ <p>
	77	+ <h2>1. Externen Kontext via iFrame einbinden z.B.</h2>
	78	+ <br/>
	79	+ <br/>
	80	+ <a href="https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml">https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml</a>
	81	+ <br/>
	82	+ <a href="https://pro.formcloud.de/formcycle/external/forms/main.xhtml">https://pro.formcloud.de/formcycle/external/forms/main.xhtml</a>
	83	+ <br/>
	84	+ </p>
	85	+
	86	+ <iframe src="https://pro.formcloud.de/formcycle/external/forms/main.xhtml" width="100%" height="340px">
	87	+ <span>Ihr Browser unterstützt keine iFrames</span>
	88	+ </iframe>
	89	+{{/html}}
	90	+
	91	+
	92	+== 2. Eventlistener für Formularauswahl registrieren z.B.: ==
	93	+
	94	+
	95	+
	96	+{{code language="javascript"}}function myFormCycleCallback(msg){
	97	+ $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
	98	+ renderForm(msg.data);
	99	+}
	100	+
	101	+window.addEventListener("message", myFormCycleCallback, false);{{/code}}
	102	+
	103	+
	104	+== 3. Ergebenis speichern: ==
	105	+
	106	+{{html clean="false"}}
	107	+ <div class="hljs" id="result"></div>
	108	+{{/html}}
	109	+
	110	+
	111	+== 4. Formular einbinden: ==
	112	+
	113	+{{code}}
	114	+
	115	+window.renderForm = function(formId){
	116	+ var myBase = 'https://download.formcycle.de/devground/ttr/fc/';
	117	+ var fcBase = 'https://pro.formcloud.de/formcycle';
	118	+ var myFormContainer = $('#content');
	119	+
	120	+ var form = $.ajax({
	121	+ type: "GET",
	122	+ url: fcBase + '/form/provide/' + formId,
	123	+ data:{
	124	+ //Render-Parameter
	125	+ "xfc-rp-inline":true, //Verwendete resourcen auflösen
	126	+ "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
	127	+ "xfc-rp-usejq":false, //jQuery einbinden
	128	+ "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
	129	+ "xfc-rp-usecss":true, //Use Formcycle CSS files
	130	+ "xfc-rp-useui":true, //jQueryUI einbinden
	131	+ //Prozess-Parameter
	132	+ "xfc-pp-external":true, //Externer Formularrequest
	133	+ "xfc-pp-base-url":fcBase, //URL zum FormCycle
	134	+ "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
	135	+ "xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
	136	+ },
	137	+ cache: false,
	138	+ async: false,
	139	+ success:function(html){
	140	+ myFormContainer.html(html);
	141	+ },
	142	+ crossDomain: true
	143	+ });
	144	+}
	145	+{{/code}}
	146	+
	147	+
	148	+== 5. Ergebenis Formular: ==
	149	+
	150	+{{html clean="false"}}
	151	+ <div class="hljs" id="content"></div>
	152	+{{/html}}