How To: Embed Forms as iFrames

  • Updated

When using External start for Start Events or Intermediate Events, it is possible to embed them as iFrames. When doing so, you may wish to hide the InRule design parts such as logo, ribbon, and colors that by default are shown. It is possible to hide either only the start button, or to hide the entire InRule graphical user interface (GUI).

When hiding parts of the user interface, the start button is also hidden. If this is your intention, a start button needs to be added to the form template. Read how to add a start button in the section How to create a start button.

When to hide GUI

Many of our users want to have control of the design aspects of their external start links. Removing the InRule design elements leaves only the content of the form visable. This gives more control to the designer of the process application. This is useful when embedding a form as an iFrame on another website.

How to hide the start button only 

Hide the start button by adding the query string ?hideToolbar=true to the end of an external start's URL.


How to hide all GUI

To remove all InRule design elements from a form, add the query string ?hideGui=true to the end of the external link URL.


Embed form as an iFrame

Use the below tag to create the iFrame in your HTML source code:


How to create a start button

If you use the features hideToolbar or hideGui, the start instance button is hidden and you have to configure your own start button.

1. Add a Button field to your form

2. Add the attribute listeners to the button's configuration

3. Copy and paste the following code into the listener setting:

{afterrender : function (comp) {var el = comp.getEl();el.on('click', function () {StartInstance();});}}

Always test your form and the button before using it in a deployed process application with external start and hidden GUI.


Was this article helpful?

0 out of 0 found this helpful



Article is closed for comments.