Элемент iframe (сокращение от internal frame) предназначен для того, чтобы встраивать на страницу HTML содержимое из других источников. Например, благодаря использованию iframe, можно не думать о создании собственного видеоплеера и хранении объемных видеофайлов. Вместо этого можно использовать YouTube и добавить необходимое видео в свое веб-приложение с помощью iframe.
Использование iframe для видео с YouTube
Рассмотрим на конкретном примере. Создадим страницу на которой можно будет посмотреть видео с YouTube канала AppMaster про использование файлов в бизнес-процессах. Для этого необходимо лишь разместить на холсте элемент iframe, указать необходимые настройки (например, по размеру и отступам) и в поле Src установить ссылку на нужное видео.
При этом YouTube изначально предполагает возможность подобного встраивания видео и предоставляет необходимые инструменты для максимального удобства процесса. Нажав на кнопку “Share” под видео, можно воспользоваться вариантом “Embed”.
YouTube предоставит весь необходимый HTML-код для размещения видео на своей странице, но в нашем случае интерес представляет не весь код, а лишь ссылка на необходимое видео. Нужно скопировать ее и разместить в настройках iframe.
Тут же видны предложенные по умолчанию настройки ширины и высоты - 560 и 315. Соответственно можно установить такие же значения в настройках своего iframe.
Можно опубликовать приложение и убедиться в том, что теперь в нем действительно есть встроенное видео.
Аналогичным образом можно встроить и другие типы данных с других источников. Например, добавить карту.
В результате таких настроек можно отобразить карту в виде круга с толстой пунктирной рамкой.
Использование кастомного HTML в iframe
Рассмотрим более сложный вариант. Будем самостоятельно создавать html-страницы для iframe, а не использовать данные из сторонних источников. Для этого добавим на холст элемент RichtextEditor. Он позволяет создавать HTML, как с помощью удобного визуального редактора, так и через прямое редактирование HTML-кода.
Необходимо сделать так, чтобы любой HTML, созданный в редакторе, можно было сохранить в виде файла, а дальнейшем отобразить через iframe. Добавим кнопку и создадим соответствующий бизнес-процесс, который будет запускаться при ее нажатии.
В рамках бизнес-процесса необходимо:
- Получить HTML из редактора с помощью блока Richtext Get Properties.
- Выполнить преобразование HTML в байты (To Bytes).
- Воспользоваться блоком Make File для создания файла. Нужно учитывать, что для создания файла необходимо только его содержимое (Bytes, его получили на предыдущем шаге) и название (оно может быть любым, но установить его нужно обязательно).
- Отправить созданный файл на сервер, сохранить в базу данных (Server request POST /_files/).
- Получить ID созданного файла (Expand File - ID).
- Преобразовать ID в String (To String).
- Собрать ссылку на файл с помощью Concat String. В результате должна получиться ссылка типа https://vdjyien-app.apms.io/api/_files/dQhJVTYrToCqr9G4KWKRD/download/, где vdjyien-app.apms.io - адрес вашего сервера, а dQhJVTYrToCqr9G4KWKRD ID файла, полученный на предыдущем шаге. Итоговая ссылка должна открываться в браузере. Убедитесь при этом, что сам эндпойнт получения файла (GET /_files/:id/download/) не требует авторизации и открыт для доступа.
- Если ссылка в порядке, то остается только передать ее в iframe и увидеть полученный результат (iFrame Update Properties).
Теперь любой HTML созданный в редакторе Richtext Editor можно сохранить в базе и отобразить в приложении. Таким образом, с помощью блока iframe можно добавить в свое приложение даже такие элементы, которые изначально не предусмотрены в дизайнере, использовать нестандартные шрифты или создавать блоки с кастомным HTML-кодом.
