iframe Integration

A form can be loaded in an inline frame (iframe) in a custom application. The loadForm APIs in the com.tibco.forms.client.FormRunner class support the parent node ID of an <iframe> element.

To make this integration easy, the file IFrameSource.html is provided in the forms client (which is bundled inside the Forms Runtime Adapter). An iframe in the custom application can use the following source URL: 

<iframe class="tf-form-not-loaded" id="formContainer" src="/bpmresources/formsclient/IFrameSource.html">
</iframe>

Using IFrameSource.html is optional. You can provide your own iframe source page if desired.

The forms runtime loaded in a parent window talks to the forms runtime loaded in the iframe. For this communication to happen, the formsclient.nocache.js file must be loaded. The IFrameSource.html page loads formsclient.nocach.js by default. However, if you provide your own iframe source page, ensure that it loads formsclient.nocache.js (using a <script> tag in the HTML; see Injecting the Forms Runtime Adapter in the Browser).

When the form is loaded in the iframe, the Forms Runtime Adapter removes the class selector tf-form-not-loaded from the <iframe> element and adds another class, tf-form-loaded. Similarly, when the form is destroyed by the Cancel, Close, or Submit actions, the Forms Runtime Adapter adds the class tf-form-not-loaded back to the <iframe> element. This can be used to control the visibility of the iframe within a custom application.

Note that changing the CSS class name based on whether a form is currently loaded or not is taken care by the formsclient loaded on the parent window (therefore, your iframe element can initially have the class tf-form-not-loaded, which is automatically removed when a form is actually loaded).

The area of the iframe where the form is loaded, is based on the following conditions:

  • if the same parentNodeId is available within the iframe, the form is loaded within the iframe.
  • if the iframe has an element with the ID tfFormContainer, the form is loaded in that element.
  • if both of the above are missing, the form is loaded directly under the body element within the iframe.