Skip to main content

Display and editing forms

You can utilise an iframe to display the form editor within your own workflow. You have some control over the toolbar buttons that are shown as well.

info

You first must deep-link to a form, to be able to show/edit using the UI.

Using the allow parameter#

By passing through an array of allow button names, you can control what is shown on the toolbar, the minimum required are:

  • save
  • close
  • zoom-in
  • zoom-out

Other buttons that are allowed and recommended:

  • finalise
  • annexures
  • files
  • toggle-menu

Just add allow=save,close,zoom-in,zoom-out,finalise,annexures,files,toggle-menu to the URL parameters when setting the iframe src.

e.g. https://app.formslive.com.au/?x-token=<deep-link token>#form/1234?allow=allow=save,close,zoom-in,zoom-out,finalise,annexures,files,toggle-menu

Listening to UI events#

The iframe can communicate with it's parent by using window.postMessage(). The parent will receive an event with the following data:

window.addEventListener("message", (event) => {
if (event.data && event.data.success) {
var data = event.data;
if (data.type === 'close') {
// form was closed
}
}
});

Currently only the close event is supported.