How to make an iframe in the Back Office

Sam van de Kreeke

Published: 23-10-2019

Last updated: 27-08-2020

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

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 web application 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 Back Office and production environment URL in the production Back Office. 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 Back Office), 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 Back Office 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.

In this tutorial

Not sure where to start?

Click here to register and start learning