Formular über externen Kontext einbinden

1. Externen Kontext via iFrame einbinden z.B.

https://pro.form.cloud/formcycle/external/forms/main.xhtml

TODO: iframe

2. Eventlistener für Formularauswahl registrieren z.B.:

function myFormCycleCallback(msg){
    $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
    renderForm(msg.data);
}

window.addEventListener("message", myFormCycleCallback, false);

3. Ergebenis speichern:

TODO: Iframe
Das Makro [html] konnte nicht ausgeführt werden. Grund: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Klicke auf diese Nachricht, um Details zu erfahren.

4. Formular einbinden:

window.renderForm = function(formId){
var myBase = 'https://help7.formcycle.eu/xwiki/bin/view/Examples/IncludeExternalContext/';
var fcBase = 'https://pro.form.cloud/formcycle';
var myFormContainer = $('#content');
  
var form = $.ajax({
  type: "GET",
  url: fcBase + '/form/provide/' + formId,
  data:{
  //Render-Parameter
   "xfc-rp-inline":true,      //Verwendete resourcen auflösen
  "xfc-rp-form-only":true,     //Formular ohne HTML, BODY etc.
   "xfc-rp-usejq":false,       //jQuery einbinden
   "xfc-rp-keepalive":false,     //Ping zur Sessionverlängerung
  "xfc-rp-usecss":true,      //Use Formcycle CSS files
   "xfc-rp-useui":true,      //jQueryUI einbinden
   //Prozess-Parameter
   "xfc-pp-external":true,      //Externer Formularrequest
   "xfc-pp-base-url":fcBase,      //URL zum FormCycle
   "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
   "xfc-pp-error-url": myBase + "/anfrage-fehler.html"   //CMS Seite bei Fehler  
  },
  cache: false,
  async: false,
  success:function(html){
   myFormContainer.html(html);
  },
  crossDomain: true
 });
}

5. Ergebenis Formular:

Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene HTML-Seite in einem iframe dargestellt:

  pre{
    margin:0;
  }

  .xm-form{
    margin:0 auto;
  }

  .extra .hljs-string{
    font-weight:bold;
    color:red;
  }

  iframe, .hljs{
    max-width:700px;
    border:2px solid #515151;
  }

  .hljs{
    max-width:985px;
    text-align:center;
  }

  .resizer {
    display:flex;
    margin:0;
    padding:0;
    resize:both;
    overflow:hidden
  }

  .resizer > .resized {
    flex-grow:1;
    margin:0;
    padding:0;
    border:0;
    height: inherit;
  }
  .border { border:4px dashed black; }