Hello all,

 

Is there a way to add an Iframe to a Freedom UI page? I found the documentation here that details how to add one but it only seems to describe how to add to a Classic UI page.

Like 0

Like

1 comments

Hi Kevin,

I've written up the steps for adding an IFRAME in Freedom UI here:

https://customerfx.com/article/embedding-an-iframe-on-a-creatio-freedom…

Ryan

Show all comments

HI Team, 

 

How we can use iframe in the new Freedom UI? There is some code we can add?

Thanks, 

 

Like 1

Like

6 comments
Best reply

Federico Buffa ?, Damien Collot, 

It's possible to do that with the help of this article:

https://academy.creatio.com/docs/8.x/dev/development-on-creatio-platfor…

In the 1.2.ii. "Declare the component class", you should insert your iframe HTML markup.

 

Also, keep in mind that not all sites can be inserted as iframes due to different security settings.

 

We have plans to implement a no-code component in future releases. Thank you for your feedback about this.

Hello Federico, 

 

Please let us know if you have tried to implement the functionality as described in our Academy?

If there were any errors or difficulties, please let us know which exactly?

https://academy.creatio.com/docs/developer/interface_elements/record_pa…

 

Best regards,

Anastasiia

Anastasiia Zhuravel,

Yes this seams to work only for the classic UI no for the Freedom. I need a solution for the new UI

Same, Client wanted something similar for an integration with an external application. Was looking forward to more advanced capabilities in Freedom UI

Hello,

 

It seems that IFRAMECONTROL view type is not supported in Freedom UI and also we don't have any example of this implementation internaly. I've asked our core R&D team to add this possibility in the out-of-the-box configuration and provide some examples in the Academy. Thank you for this idea and helping in making the app better!

Oleg Drobina,

Looks is something very needed for the clients :)

Federico Buffa ?, Damien Collot, 

It's possible to do that with the help of this article:

https://academy.creatio.com/docs/8.x/dev/development-on-creatio-platfor…

In the 1.2.ii. "Declare the component class", you should insert your iframe HTML markup.

 

Also, keep in mind that not all sites can be inserted as iframes due to different security settings.

 

We have plans to implement a no-code component in future releases. Thank you for your feedback about this.

Show all comments

Hi Community,

I've this situation where I need to add a new tab "Preview" and the main objective is have a iframe with a preview of the documents in the attachments, however we try first implement the logic if was a website, because we think that the article that we found on academy "https://academy.creatio.com/documents/technic-sdk/7-13/integration-third-party-sites-iframe"partially satisfies what we want to implement;

  1. First, based on the Web field, we were able to do the preview of the website, as you can see on the image below.
  2. Then, we try to call and access to the storage of the pdf that we have on the attachments (image below), but the only link that we have of the pdf is the link/method to download the file, for example: https://..../0/rest/FileService/GetFile/Id.

In this way we want to know if there is any way to acess a link or storage of the file, with objective to implement something like preview of the document with the iframe on the edit page.

Anyone?

 

Best Regards,

Daniel Longo

Like 0

Like

2 comments

Hello Daniel, 



While it is technically possible to open pdf files using iframe tag, it'd require considerable amount of custom development to implement such preview. 

The link you're referring to is the direct link to the attachment file. 



Unfortunately, we don't have examples of such implementation. 

I'll register your idea and it may be implemented in future releases. 

Best regards,

Yurii.

Hello Yurii,

Is there any progress on this implementation?

 

What are the options that FileService gives us beyond the download file link?

Is there any way of call this link and get Data from response?

 

Best Regards,

Igor Matos

Show all comments

Hi,



I wanted to have a button on account page that can open a modal with iframe.



Button was done.

Code for modal was done as well.



I created the following.



(Module)

Ext.define("Terrasoft.controls.UsrIntegrateERPIframeControl", {
    extend: "Terrasoft.Component",
    alternateClassName: "Terrasoft.UsrIntegrateERPIframeControl",
    tpl: [
        '<iframe id="{id}" src="{src}" class="{wrapClass}"></iframe>'
    ],
    id: null,
    src: "https://academy.terrasoft.ru/",
    wrapClass: ["usr-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();
    },
    onAfterReRender: 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
        });
    }
});



(Page View Model)

define("UsrERPModalPage", ["UsrIntegrateERPIframeControl", "css!UsrIntegrateERPIframeControl"], function() {
    return {
        attributes: {
            "TestText": {
                dataValueType: Terrasoft.DataValueType.TEXT,
                type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN
            }
        },
        messages: {
        },
        methods: {
            init: function(callback, scope) {
                this.callParent(arguments);
            },
            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": "UsrERPModalPage",
                "values": {
                    "generator": function() {
                        return {
                            "className": "Terrasoft.UsrIntegrateERPIframeControl"
                        };
                    }
                }
            },
            {
                "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": "TestText",
                    "caption": "Test text",
                    "layout": {"column": 0, "row": 0, "colSpan": 10}
                }
            }
        ]
    };
});



(Replacing View Model )

define("AccountPageV2", ["AccountPageV2Resources", "MaskHelper"], function(MaskHelper) {
  return {
    entitySchemaName: "Account",
    methods: {     
      subscribeSandboxEvents: function() {
        this.callParent(arguments);
        this.sandbox.subscribe("GetModuleInfo", this.getGenerateQouteModalBoxConfig, this,
                               [this.getGenerateQouteModalBoxId()]);
 
      },
      getGenerateQouteModalBoxConfig: function() {
        return {
          "schemaName": "UsrERPModalPage",
          "modalBoxSize": {
            "width": "680px",
            "height": "400px"
          }
        };
      },
      getGenerateQouteModalBoxId: function() {
        return this.sandbox.id + "_GenerateQouteModalBox";
      },
      onGenerateQouteButtonClick: function() {
        this.sandbox.loadModule("ModalBoxSchemaModule", {
          id: this.getGenerateQouteModalBoxId()
        });
      }
    },
    diff: [   // Adding the button.
      {
        "operation": "insert",
        "parentName": "LeftContainer",
        "propertyName": "items",
        "name": "GenerateQouteSectionButton",
        "values": {
          itemType: Terrasoft.ViewItemType.BUTTON,
          caption: { bindTo: "Resources.Strings.OpenERPGenerateQouteButtonCaption" },
          click: { bindTo: "onGenerateQouteButtonClick" },
          style: Terrasoft.controls.ButtonEnums.style.BLUE    
        }
      },   
    ]
  };
});

Then I compiled (my package) but I got this error.

{ message: "Message GetModuleInfo is not defined in CardModuleV2 (SectionModuleV2_AccountSectionV2_CardModuleV2) module" }



Then I log-out, flush Redis, login again, compile all but still received the same error.



References:

https://community.creatio.com/articles/add-iframe-modalbox

https://community.creatio.com/questions/open-iframe-floating-page



Best Regards,

Solem

Like 0

Like

1 comments
Best reply

Hi Solem,

 

In the AccountPageV2 schema you do also need to create several messages were not mentioned in the original community post https://community.creatio.com/articles/add-iframe-modalbox since Excel report builder marketplace app was chosen as a page for an example where I think these messages are declared:

 

{
				"GetMasterEntitySchema": {
                        direction: Terrasoft.MessageDirectionType.SUBSCRIBE,
                        mode: Terrasoft.MessageMode.PTP
                                    },
     			 "UsrUploadFileClick": {
						direction: Terrasoft.MessageDirectionType.SUBSCRIBE,
                        mode: Terrasoft.MessageMode.PTP
                 },
          		"GetModuleInfo": {
                         direction: Terrasoft.MessageDirectionType.SUBSCRIBE,
                         mode: Terrasoft.MessageMode.PTP
                                    }
 
      },

As a result the button started to display the IFrame as needed:

Best regards,

Oscar

Hi Solem,

 

In the AccountPageV2 schema you do also need to create several messages were not mentioned in the original community post https://community.creatio.com/articles/add-iframe-modalbox since Excel report builder marketplace app was chosen as a page for an example where I think these messages are declared:

 

{
				"GetMasterEntitySchema": {
                        direction: Terrasoft.MessageDirectionType.SUBSCRIBE,
                        mode: Terrasoft.MessageMode.PTP
                                    },
     			 "UsrUploadFileClick": {
						direction: Terrasoft.MessageDirectionType.SUBSCRIBE,
                        mode: Terrasoft.MessageMode.PTP
                 },
          		"GetModuleInfo": {
                         direction: Terrasoft.MessageDirectionType.SUBSCRIBE,
                         mode: Terrasoft.MessageMode.PTP
                                    }
 
      },

As a result the button started to display the IFrame as needed:

Best regards,

Oscar

Show all comments

Hi community!

How are you?

I hope you can help me!

Currently, I show in an iframe a static local page created manually

How can I call an external page by passing a parameter? For example, contact Id.

This page would be shown, for example, by clicking on a button

King Regards,

Ezequiel

 

Like 0

Like

2 comments

You can create a web service in bpm'online. Then call the web service by clicking on the button and pass the parameter. 

https://academy.bpmonline.com/documents/technic-sdk/7-12/how-call-confi…

The web service will send a message to the page displayed in the iframe. The page should have it's own api to receive and process the request. 

There is no way to pass a parameter into an iframe. There are just different pages and they can communicate in the ways how different websites are communicate.

This article might be of some help. Towards the bottom it outlines how to dynamically add an iframe on a tab and set the src of the iframe to a URL which includes a value from the record. You could use this same approach to create an iframe on the contact and set the src url including the contacts ID value.

https://academy.bpmonline.com/documents/technic-sdkmp/7-12/developing-a…

Show all comments