Question

Open iFrame on floating page

Hi

 

I can create an iFrame inside a page / tab.

I can create a button to do things.

 

How can I make the button open floating page in which I can show my iFrame ?

 

And please do not refer me to this article: https://community.creatio.com/articles/add-iframe-modalbox , it is not working.

 

Thanks

Like 0

Like

7 comments

Hello Oren,

 

Could you please provide detailed answers to the following questions: 
1) What is the current version of your system? 
2) What exactly is not working according to the article?

 

Thank you in advance!
Olga. 

Olga Avis,

 

Hi Olga

 

Thanks for trying to help.

 

The three callings to the Sandbox Subscribe inside the subscribeSandboxEvents function are preventing the page from working. They are causing error.

 

I guess there are some parameters inside such as 

 

IntEntitySchemaName,

IntRelatedSchemasDetail,

IntUploadFileClick

 

That needs to be replaced with something unclear.

 

 

Hello Oren,

 

Thank you for your reply! 

 

Could you please provide a screenshot of the developer console of what kind of error you exactly faced?
Please, do not hesitate to provide as many details as possible.
Also, it will be useful for us to know the current version of your system.

 

Thank you beforehand!
Olga. 

Olga Avis,

Hi Olga

 

Just to make sure I am not mistaken.

On stage 2 in the article, creating IntDonateModalPage, it says to create a page. 

Should I create this page as a "Replacing Client Module" ?

And if so, what is the parrent object ?

 

Anwering to your question.

 

These lines:

 

this.sandbox.subscribe("GetMasterEntitySchema", function() {
    return this.get("IntEntitySchemaName");
    }, this, [this.getDetailId("IntRelatedSchemasDetail") + "_DetailModalBox"]);
this.sandbox.subscribe("IntUploadFileClick", this.onFilesSelected, this, [this.sandbox.id]);
this.sandbox.subscribe("GetModuleInfo", this.getDonateModalBoxConfig, this,
    [this.getDonateModalBoxId()]);

 

Cause this error on the console:

 

 message: Uncaught Terrasoft.UnsupportedTypeException: Message GetMasterEntitySchema is not defined in CardModuleV2 (CardModuleV2_aca24ae1-319c-4e8c-94b5-a7ca7bd5cc07_UsrApplications1Page) module 
 

 

Thanks

Hello Oren,

 

Here is a detailed instruction on how to create an Iframe module:

 

1. Create an Iframe module (Module)

(GlbIframeControl)

 

Ext.define("Terrasoft.controls.GlbIframeControl", {

            extend: "Terrasoft.Component",

            alternateClassName: "Terrasoft.GlbIframeControl",

            tpl: [

                        /*jshint quotmark:true */

                        '<iframe id="{id}" src="{src}" class="{wrapClass}"></iframe>'

                        /*jshint quotmark:false */

            ],

            id: null,

            src: null,//"https://academy.terrasoft.ru/",

            wrapClass: ["glb-iframe"],

            setIframeSrc: function(value) {

                        value = value || "";

                        if (this.src !== value) {

                                    this.src = value;

                                    this.safeRerender();

                        }

            },

            init: function() {

                        this.callParent(arguments);

                        var selectors = this.selectors = this.selectors || {};

                        selectors.wrapEl = selectors.wrapEl || "#" + this.id;

            },

            LoadPageBySrc: function() {

                        var iframe = this.getWrapEl();

                        iframe.dom.src = this.src;

            },

            onAfterRender: function() {

                        this.callParent(arguments);

                        this.LoadPageBySrc();

            },

            getBindConfig: function() {

                        var bindConfig = this.callParent(arguments);

                        return Ext.apply(bindConfig, {

                                    src: {

                                                changeMethod: "setIframeSrc"

                                    }

                        });

            },

            getTplData: function() {

                        var tplData = this.callParent(arguments);

                        return Ext.apply(tplData, {

                                    src: this.src,

                                    wrapClass: this.wrapClass

                        });

            }

});

In less tab create your css class

.glb-iframe {

            width: 643px;

            height: 400px;

}

 

2. Create a page that will contain Iframe and will be displayed in Modal Box

(GlbIframeModalPage)

 

Parent object: Base modal box page schema ( NUI )

 

define("GlbIframeModalPage", ["GlbIframeControl", "css!GlbIframeControl"], function() {

    return {

        attributes: {

            "UsrLink": {

                dataValueType: Terrasoft.DataValueType.TEXT,

                type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN

            }

        },

        messages: {

        },

        methods: {

            init: function(callback, scope) {

//get system settings value which is responsible for the site link

                this.callParent([function() {

                                                            var sysSettingsNameArray = ["UsrLink"];

                                                            Terrasoft.SysSettings.querySysSettings(sysSettingsNameArray, function(values) {

                                                                        this.set("UsrLink", values.UsrLink);

                                                                        callback.call(scope);

                                                            }, this);

                                                }, this]);

            },

                                    getSource: function() {

                                                return this.get("UsrLink");

                                    },

            getHeader: function() {

                return this.get("Resources.Strings.PageCaption");

            },

            onRender: function() {

                this.callParent(arguments);

                var moduleInfo = this.get("moduleInfo");

                var boxSizes = moduleInfo.modalBoxSize;

                var width = boxSizes.width;

                var height = boxSizes.height;

                this.updateSize(width, height);

            }

        },

        //Insert already existed Iframe

        diff: [

            {

                "operation": "insert",

                "parentName": "CardContentContainer",

                "propertyName": "items",

                "name": "IntDonateIframe",

                "values": {

                    "generator": function() {

                        return {

                            "className": "Terrasoft.GlbIframeControl",

//set the link

                            "src": {"bindTo": "getSource"}

                        };

                    }

                }

            },

            {

                "operation": "insert",

                "name": "MyContainer",

                "propertyName": "items",

                "values": {

                    "itemType": Terrasoft.ViewItemType.CONTAINER,

                    "items": []

                }

            },

            {

                "operation": "insert",

                "parentName": "MyContainer",

                "propertyName": "items",

                "name": "MyGridContainer",

                "values": {

                    "itemType": Terrasoft.ViewItemType.GRID_LAYOUT,

                    "items": []

                }

            },

            {

                "operation": "insert",

                "parentName": "MyGridContainer",

                "propertyName": "items",

                "name": "TestText",

                "values": {

                    "bindTo": "UsrLink",

                    "caption": "Test text",

                    "layout": {"column": 0, "row": 0, "colSpan": 10}

                }

            }

        ]

    };

});

ADD localizable string PageCaption

 

3. Insert a button on a page.

 

After button click, Modal Dialog with Iframe should appear. 

define("UsrCarPage", ["UsrCarPageResources","MaskHelper"], function(resources, MaskHelper) {

            return {

                        entitySchemaName: "UsrCarSection",

                        messages: {

                                    "GetModuleInfo": {

                                                direction: Terrasoft.MessageDirectionType.SUBSCRIBE,

                                                mode: Terrasoft.MessageMode.PTP

                                    }

                        },

                        attributes: {

                        },

                        modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,

                        details: /**SCHEMA_DETAILS*/{

                        }/**SCHEMA_DETAILS*/,

                        businessRules: /**SCHEMA_BUSINESS_RULES*/{

                        }/**SCHEMA_BUSINESS_RULES*/,

                        methods: {

                        subscribeSandboxEvents: function() {

                this.callParent(arguments);

                this.sandbox.subscribe("GetModuleInfo", this.getDonateModalBoxConfig, this,

                    [this.getDonateModalBoxId()]);

            },

                            donateButtonClick: function() {

                this.sandbox.loadModule("ModalBoxSchemaModule", {

                    id: this.getDonateModalBoxId()

                });

            },

            getDonateModalBoxConfig: function() {

                return {

                    "schemaName": "GlbIframeModalPage",

                    "modalBoxSize": {

                        "width": "643px",

                        "height": "400px"

                    }

                };

            },

            getDonateModalBoxId: function() {

                return this.sandbox.id + "_DonateModalBox";

            }

                        },

                        dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,

                        diff: /**SCHEMA_DIFF*/[

                                    {

                "operation": "insert",

                "name": "DonateButton",

                "values": {

                      "layout": {

                                                                        "colSpan": 6,

                                                                        "rowSpan": 1,

                                                                        "column": 18,

                                                                        "row": 1,

                                                                        "layoutName": "Header"

                                                            },

                    "itemType": Terrasoft.ViewItemType.BUTTON,

                    "style": Terrasoft.controls.ButtonEnums.style.RED,

                    "caption": {

                        "bindTo": "Resources.Strings.DonateButton"

                    },

                    "click": {

                        "bindTo": "donateButtonClick"

                    }

                },

                "parentName": "Header",

                "propertyName": "items",

                "index": 1

            }

            ]/**SCHEMA_DIFF*/

    };

});

 

Add localizable string

 

 

Please, let us know in case any additional information is required.

 

Best regards,

Olga.

Olga Avis,

 

Thanks Olga.

 

Did all according to your instructions but the button is not responding at all.

 

Maybe I should fix the getDonateModalBoxId function ?

 

Like this,

 

            getDonateModalBoxId: function() {
                
                return this.sandbox.id + "_GlbIframeModalPage";;
            },

When GlbIframeModalPage stands for the name of the page instead of  DonateModalBox

 

 

Hello Oren,

 

Thank you for your reply!

 

Unfortunately, there is not enough information to provide you with a proper solution. Could you please send your request with a detailed description of the issue to the support team (support@creatio.com) and your personal Creatio manager?

 

Thank you in advance.

Olga. 

Show all comments