How to use iframe

The iframe element (short for internal frame) is designed to embed content from other sources into an HTML page. For example, thanks to the use of an iframe, you can not think about creating your own video player and storing large video files. Instead, you can use YouTube and add the required video to your web app using an iframe.

Using iframe for YouTube video

Let's look at a specific example. Let's create a page to watch a video from the AppMaster YouTube channel about using files in business processes. To do this, you need to place an iframe element on the canvas, specify the necessary settings (for example, in size and indents), and set a link to the desired video in the Src field.

At the same time, YouTube initially assumes the possibility of such video embedding and provides the necessary tools for maximum convenience of the process. By clicking on the “Share” button under the video, you can use the “Embed” option.

YouTube will provide all the necessary HTML code to place the video on its page, but in our case, not all the code is of interest, only a link to the required video. You need to copy it and place it in the iframe settings.

The default width and height settings - 560 and 315 - are also visible here.

You can publish the application and make sure that now it really has an embedded video.

Similarly, you can embed other types of data from other sources. For example, add a map.

As a result of these settings, you can display the map as a circle with a thick dotted border.

Using custom HTML in an iframe

Let's consider a more complex option. We will independently create html pages for the iframe, and not use data from third-party sources. To do this, add a RichtextEditor element to the canvas. It allows you to create HTML, both with the help of a convenient visual editor and through direct editing of the HTML code.

It is necessary to make it so that any HTML created in the editor can be saved as a file, and then displayed via an iframe. Let's add a button and create the corresponding business process that will be launched when it is clicked.

As part of the business process, you should:

1. Get HTML from the editor using the Richtext Get Properties block.
2. Convert HTML to Bytes (To Bytes).
3. Use the Make File block to create a file. Keep in mind that to create a file, you only need its contents (Bytes, it was obtained in the previous step) and the name (it can be anything, but it must be installed).
4. Send the created file to the server, and save it to the database (Server request POST /_files/).
5.  Get ID of created file (Expand File - ID)
6. Convert ID to String (To String)
7. Collect a link to a file using Concat String. The result should be a link like https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/, where "vdjyien-app.apms.io" is your server address, and "dQhJVTYrToCqr9G4KWKRD" is the file ID obtained in the previous step. The resulting link should open in a browser. Make sure that the file receiving endpoint itself (GET /_files/:id/download/) does not require authorization and is open for access.
8. If the link is OK, then all that remains is to pass it to the iframe and see the result (iFrame Update Properties).

Now any HTML created in the Richtext Editor can be stored in the database and displayed in the application. Thus, using the iframe block, you can even add elements to your application that are not initially provided by the designer, use non-standard fonts, or create blocks with custom HTML code.