Embedding an IFRAME on a Creatio Freedom UI Page

It’s likely that the container it is in is rendering that size. The size of things in the designer aren’t always how they will render at runtime You might need to adjust the height of the container.
Ryan

That is a common problem with any IFRAME, not just one in Creatio. I don’t know of a good solution, but google does show a lot of results on that topic.

I would guess likely missed adding the component module name to the SCHEMA_DEPS of the page, see the second code block in this article. Either way, if you look in the browser console/dev tools it will likely reveal the error or cause of the page not loading.

Hard to say without knowing more of how it’s implemented, however, there’s plenty of ways to determine the URL of the system client side and server side. If this is client-side you could use Terrasoft.loaderBaseUrl or Terrasoft.workspaceBaseUrl for the base url

I recently implemented a custom component in an IFrame based on Ryan’s instructions above. I adapted my version to dynamically display or download content sent via API. In our case, the files are stored on an external site, then transmitted via RestAPI using base64 encoding. I embedded the required HTML in my custom iframe component with all the logic needed to determine whether to download or display in line.

The API call is triggered via handler on the page, which calls a Creatio business process. The response includes the encoded data for the file. The encoded data from the process response is pushed to page parameters for the data fields required along with the custom IFrame component which waits for a “data loaded” trigger.

Key points to note:
1) process is called from page load, which passes input record Id to business process.
2) business process calls API via OOTB web service components.
3) response values set to process parameters.
4) handler pushes process parameters to page parameter values.
5) iFrame document viewer component uses page parameter values to load/display. The key data point on our end is an unlimited length text field that acts as a temporary storage for the full base64 encoded data string.

You may be able to adapt some of this to your use case:

viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
{
“operation”: “insert”,
“name”: “DocumentViewer”,
“values”: {
“visible”: “$IsDocumentLoaded”,
“type”: “usr.DocumentViewerFrameComponent”,
“base64Data”: “$base64Data”,
“fileType”: “$fileType”,
“fileName”: “$fileName”,
“dataLoaded”: “$IsDocumentLoaded”
},
“parentName”: “DocumentViewFlex”,
“propertyName”: “items”,
“index”: 0
},

………..

handlers: /**SCHEMA_HANDLERS*/[
{
request: “crt.HandleViewModelInitRequest”,
handler: async (request, next) => {
// Allow other handlers to process first
const result = await next?.handle(request);

(async () => {
// Check required context parameters
const [IsDocumentLoaded, Id] = await Promise.all([
request.$context.IsDocumentLoaded,
request.$context.Id
]);

if (!IsDocumentLoaded && Id) {
try {
const handlerChain = sdk.HandlerChainService.instance;

// Run the process with input and output parameters
const processResult = await handlerChain.process({
type: “crt.RunBusinessProcessRequest”,
processName: “UsrViewDocument”,
processParameters: {
RecordId: Id
},
resultParameterNames: [“fileName”, “base64Data”, “fileType”], // Specify output parameters
$context: request.$context
});

// Check if the process executed successfully
if (processResult.success) {
request.$context.fileName = processResult.resultParameterValues[“fileName”];
request.$context.base64Data = processResult.resultParameterValues[“base64Data”];
request.$context.fileType = processResult.resultParameterValues[“fileType”];

request.$context.IsDocumentLoaded = true;
} else {
console.error(“Process execution failed:”, processResult.errorMessage || “Unknown error”);
}
} catch (error) {
console.error(“Error processing the document handler:”, error);
}
}
})();

return result;
}
}

Matt, that is fantastic. Especially nice touch to use a process for the web service call. Thanks for sharing.

Hello Pranshu,

It does work with a dynamic source for the frame for me (at least last I tested this and wrote this article, not sure if anything has changed in the core Creatio since). I would suggest to use dev tools to see that the source URL is looking like once rendered.

Ryan

Also, it could be that in your control you’re using the properties nested within frameConfig. I would try using the exposed src property to see if the binding works for your case.

Good catch Pranshu, I’ve updated the code in the article with that change.
Ryan

CORS policy (and whether or not a page allows itself to be embedded in an IFRAME) are things controlled by the resources you’re trying to consume and enforced by the browser. Most common ways to avoid is to create/use a server side proxy for the client side calls.

Hi Brett,

Not sure an IFRAME would help with this since you can’t pass the markers to a Google map url. That is typically done with the maps js library and you load the map into a DOM element (like a div somewhere on the page). Also, a challenge that you’d run into for this is that the list only loads 30 records at a time. The list might have 100s or 1000s of records, but you’re only going to get pages of 30 records at a time. For each one of those, you’d need to either pre-geocode the records so you have their lat/long available or get the address lat/long at runtime for each. Either way, that is going to result in a lot of Google API requests, however, if it’s controlled how/where it’s used, it could be reasonable.

Rather than an IFRAME, I’d probably just add a flex container to the page and leave it empty, then use the google maps library to load the map into that container. You’d have to pre-include the lat/long into the list datasource https://customerfx.com/article/including-additional-column-values-in-a-page-datasource-load-on-a-creatio-page/ to avoid the need to query for each lat/long for each record (assuming you’ve pre-geocoded each record before hand), then create the markers for each on the already loaded map in the div.

All in all, not a super straightforward or easy task.
Ryan

Hi Harvey,
Unless I am misunderstanding what you’re after, that hasn’t changed for Freedom UI. For example, if you added an png image to the Accounts_FormPage and named the image MyImage, you’d access that using the URL:
https://creatiourl/0/conf/content/img/Accounts_FormPage-MyImage.png

Same if you added it to the module except the URL would use the module name. Alternatively, you could add the image to the SysImage table (easy way is to add it as the logo to an account, then remove it and it will leave the image in the SysImage table but remove it from the account). For those you’d use the URL (where “230bb6ca-4cb6-9a45-45be-52a02df9e896” is the Id from the SysImage table):
https://creatiourl/0/img/entity/hash/SysImage/Data/230bb6ca-4cb6-9a45-45be-52a02df9e896

Ryan

There are a lot of conditions and security concerns that could prevent this from working. Often you need some headers added to both the parent page and the page in the IFRAME to allow that. I’ve not tried any of this from Creatio, but typically that is done using postMessage. See https://stackoverflow.com/questions/69784876/how-to-pass-data-from-ifram-to-parent

This would require code on the page in the IFRAME to call postMessage, then code in the parent page (the FrameComponent) to receive the message. However, I don’t know if any of this would work in the context of Creatio (would depend on if Creatio has the necessary headers that allow or at least not prevent this.

If you’re using 8.3.1, Creatio does not enforce content security policies which could block the iframe content from loading. In previous versions, the content security policy was set to log violations only. It seems that in 8.3.1 it is now set to block unless it is a trusted url.

You have two options:

Option 1: Add the URL you’re loading in the IFRAME to the content security policy trusted list. To do this, click gear icon, go to Content Security Policy, add URL on trusted sources tab, then log out/in.

Option 2: Change the content security policy off or back to warn only. To do this, go to system settings, locate the setting for “Content security mode” (code CspMode) and change to either “Log violations of content security policies” or “Disable content security”, then log out/in.

However, if that is not your issue, you’ll need to provide more details of what exactly is going wrong.

Hi Ryan Farley,

Thank you
All the errors are resolved now.

Possibly – not sure? I’ve not tried or looked at what you can do with custom components in mobile.