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
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
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.