iFrame is always stripped out

[shalmaxb]

When I try to use an iFrame in WYSIWYG Editor, the tag ist stripped out, no matter how I try to implement it. How can I use an iFrame in espoCRM?

[Kyle]

Hi,
It is not easy to override this I have had a look and its probably more work than its worth. I suggest creating a new field type to implement iFrame, you could even implement a new HTML field type that takes raw HTML. I have done this as a dashlet and there should be no barrier to doing it as a field.

[shalmaxb]

Hello, I have been thinking in using a dashlet, too. Could you provide your solution? I am not a programmer and I think it would help to learn something.

[Kyle]

Hi,

Here are the main pieces just use the how to create a dashlet help file here to build this out fully: https://docs.espocrm.com/development...ate-a-dashlet/

Dashlet def: Resources/metadata/dashlets/html.json

{
    "view": "custom:views/dashlets/html",
    "options": {
        "fields": {
            "title": {
                "type": "varchar",
                "trim": true
            },
            "html": {
                "type": "text",
                "required": true,
                "tooltip": true
            }
        },
        "layout": [
            {
                "rows": [
                    [
                        {
                            "name": "title"
                        }
                    ],
                    [
                        {
                            "name": "html"
                        }
                    ]
                ]
            }
        ]
    }
} 

The view file:

define('custom:views/dashlets/html', 'views/dashlets/abstract/base', function (Dep) {
    return Dep.extend({
        name: 'Html',
        templateContent: '<div></div>',
        afterRender: function () {
            var $div = this.$el.find('div');
            var html = this.getOption('html');
            if (html) {
                $div.html(html);
            }
            this.$el.addClass('no-padding');
            this.$el.css('overflow', 'auto');
            $div.css('width', '100%');
        },
        afterAdding: function () {
            this.getParentView().actionOptions();
        },
    });
});