After reading this article you will know:

  • How to create an iFrame
  • How to create an iFrame in a subview with dynamic data

Betty Blocks offers the possibility to show pages/endpoints in the Backoffice.

By default, this option is disabled to protect your application being shown in other applications/webpages. You can enable this in the my.bettyblocks applications settings, where you can find the option under WEB OPTIONS. There are 3 options; allow, deny, and same_origin. The first two are pretty straight forward; you can allow or deny display in iframes. Same_origin means you can only iframe endpoints within the webapplication you're working with.

How to create an iframe

Now it's time to go back to the application. Open the Back Office and start the Builder Mode (E on keyboard). Now you should be able to create a page in the Back Office by pressing the + Add page button.

After you created a new page, press the gear icon in the top of the page. The following popup will show:

You can paste the URL of the endpoint you wish to show in the Iframe url input field. Press save and your page will load!

It’s also possible to use an expression for the iframe URL. This is great for situations where you’re making use of testing environments. You can create a custom configuration which holds a text value. This value can be set independently in each environment, but keep the same name. Now you can use the testing environment URL in the testing Backoffice and production environment URL in the production Backoffice. This variable can represent the URL of the iframe.
You can also use the expression option to depend the view on the current_user variable.

How to show dynamic data from a record in iframe

This can only be used if this iframe shows an endpoint of the same application.
If you're looking to show dynamic data in a subview that gets filled by the information of the record you selected (in the Backoffice), you need to make some small adjustments. At first you need to add a Number input variable to the endpoint you're showing in the iframe. The name of the variable should be record_id. The platform will recognize this input variable name and will use the id of the record you initially opened.

Now go to a record in the Backoffice and enable the Builder Mode. On the right side, press the button + Add page

When you press this button you're asked to enter a name for this view, which roles are allowed to view it and select an icon. 

From here it's basically the same as for the normal iframe. Press the gear icon on the top of the page and enter the iframe URL or custom configuration variable. Now the iframe will load the endpoint and you're good to go. If you have debugging turned on, the logs will show the record's id in the record_id input variable.

Did this answer your question?