HTML-элемент iframe

Средний

HTML-элемент iframe — элемент интерфейса, который используется для отображения сторонней веб-страницы внутри страницы, в которой он размещен.

Назначение элемента iframe — внедрение стороннего веб-приложения в Creatio для обеспечения удобного просмотра сторонних веб-ресурсов (страниц, видео и т. п.) непосредственно из Creatio.

В HTML-коде страницы элемент iframe реализуется с помощью тегов <iframe>. URL отображаемой страницы устанавливается с помощью атрибута src.

Важно. Необходимо помнить, что не все сайты разрешают загрузку своих страниц в элемент iframe.

Для реализации элемента в front-end ядре Creatio реализован компонент Terrasoft.controls.IframeControl. Компонент Terrasoft.controls.IframeControl описан в Библиотеке JS классов.

Назначение компонента Terrasoft.controls.IframeControl — отображение пользовательской HTML-разметки в Creatio.

Пример использования компонента Terrasoft.controls.IframeControl — страница шаблонов Email-сообщений справочника Шаблоны email-сообщений (Email message templates).

Смотрите также

Библиотека JS классов

Добавить HTML-элемент iframe

Средний

Пример. На странице записи в разделе Контрагенты (Accounts) создать вкладку WEB, на которой отображается сайт, указанный в поле Web.

Создать схему замещающей модели представления страницы записи

Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, в который будет добавлена схема.
На панели инструментов реестра раздела нажмите Добавить —> Замещающая модель представления (Add —> Replacing view model).
Заполните свойства схемы.
- Код (Code) — "AccountPageV2".
- Заголовок (Title) — "Страница редактирования контрагента" ("Account edit page").
- Родительский объект (Parent object) — выберите "Account edit page".

Реализуйте добавление HTML-компонента iframe.

В массив модификаций diff добавьте конфигурационные объекты:
- WebTab — вкладка WEB.
- UsrIframe — компонент для отображения Terrasoft.controls.IframeControl.
В свойcтве methods реализуйте метод getSource() для привязки данных колонки Web к свойству src компонента.

Исходный код схемы замещающей модели представления раздела представлен ниже.

AccountPageV2

define("AccountPageV2", [], function() {
    return {
        entitySchemaName: "Account",
        diff: /**SCHEMA_DIFF*/[
            /* Добавление вкладки [WEB].*/
            {
                "operation": "insert",
                "name": "WebTab",
                "values": {
                    "caption": "WEB",
                    "items": []
                },
                "parentName": "Tabs",
                "propertyName": "tabs",
                "index": 1
            },
            /* Добавление компонента IFrameControl.*/
            {
                "operation": "insert",
                "name": "UsrIframe",
                "parentName": "WebTab",
                "propertyName": "items",
                "values": {
                    "itemType": Terrasoft.ViewItemType.IFRAMECONTROL,
                    "src": {
                        "bindTo": "getSource"
                    }
                }
            }
        ]/**SCHEMA_DIFF*/,
        methods: {
            /* Используется для привязки данных.*/
            getSource: function() {
                return this.get("Web");
            }
        }
    };
});

На панели инструментов дизайнера нажмите Сохранить (Save).

Результат выполнения примера

Чтобы посмотреть результат выполнения примера:

Очистите кэш браузера.
Обновите страницу записи раздела Контрагенты (Accounts).

В результате выполнения примера на странице записи раздела отобразится вкладка WEB, на которой отображается содержимое веб-страницы, URL которой задан в поле Web. Если поле Web не содержит значения, то отображается пустая вкладка.

Ресурсы

Пакет с реализацией примера