8.16 Integration of Embedded Systems IFrame and windows.open into ADvendio UI
Version | Integrations supported |
---|---|
ADvendio (2.168 and up) | Broadsign |
Challenge
Â
Is there a way to simplify the process for users to access and manage bookings in external systems from ADvendio? Specifically, the process should be based on the Media Campaign or Campaign Items that are selected. It would be optimal if users could interact with an external system without having to manually search for specific bookings. Is there a solution that will allow users to handle everything themselves with ease?
Solution
Â
The goal is to make it easy for users to access external systems bookings through ADvendio by selecting a Media Campaign or Campaign Item. (We are using Broadsign as a use case example here). This will enable users to perform tasks that aren't available within ADvendio.
Â
Enabling iFrames for Internal Websites
If you intend to display an external website within Salesforce using an iFrame, you must grant explicit permission. Here are the steps:
Go to Setup and search for "CSP Trusted Sites" under Home in the "Quick Search" bar.
Create a new trusted site by selecting "Create New View."
Fill in the required information across Steps 1-4:
Step 1: Enter View Name
Step 2: Specify Filter Criteria
Step 3: Select Fields to Display
Step 4: Restrict Visibility
For Broadsign, you might see similar info being filled:
After activating the domain in CSP Trusted Sites, you can proceed to input the URL into the testing component.
External System URL Components
We offer two distinct components designed to incorporate iFrames:
Component 1
Is called externalSystemUrlCell. This component comes into play when you introduce the "external_system_url" field path within the tabs and columns of ItemConfiguration tabs and columns.
This will display the component in the Campaign Builder:
Component 2
The second component called externalSystemUrl, plays an important role in this integration. It is responsible for displaying the URL generated through the urlFieldpath configuration within the designated feature setting named ExternalSystemURL. This component can be added to a layout, enhancing user interaction and accessibility.
Important to note that the proper functioning of this component needs a valid Campaign Item ID, ensuring the smooth integration between ADvendio and external systems.
Both of these components require a specific feature setting to be properly configured in order for the iFrame integration to function properly. Please ensure the below values are incorporated:
Feature Setting Name | ExternalSystemURL |
Feature Name | Campaign Builder |
Value | { } |
Â
Field Value Name | Field Value explanation |
urlFieldpath | Is a field within the Campaign Item that holds the URL required for integration. For your use in the Campaign Builder it's important to choose a field that is visible in the Campaign Builder meaning that the value needs to be part of tabs and columns, or static columns in the item configuration. If necessary, you can even use logical fields that remain hidden from users but serve the purpose of making the URL accessible for the campaign builder. |
sandboxValue | This value allows you to define sandbox permissions for the iFrame, with each permission separated by a white space. More information about sandbox values: here |
iFrameHeight | This parameter specifies the height of the iFrame within the campaign builder. Note: changes to this value will not impact the layout of the externalSystemUrl component in the layouts. |
iFrameWidth | This parameter specifies the width of the iFrame in the campaign builder. Note: adjustments to this value will not affect the externalSystemUrl component in the layouts. |
Important Note: In order for an iframe
to function correctly, you must include the domain of the URL you intend to use within in SF set up and in CSP Trusted Sites settings.
Things to Consider When Using windows.open
An alternative and more direct approach is to use the windows.open
method for implementation. This involves calling the windows.open
function and passing additional parameters such as:
feature = "width=800,height=500,menubar=no,toolbar=no,location=no,scrollbars=no,status=no,modal=yes"
Upon clicking the "Windows Open" button, the specified URL from the input will be opened, appearing as a pop-up window with the defined dimensions.
However, it's important to be aware of potential security concerns:
Salesforce official documentation LWS Distortion Viewer - Salesforce Lightning Component Library highlights security concerns related to the use of windows.open
method. Specifically, it warns that the method could potentially allow a user to open any URL, including URLs containing malicious code. As a result, Salesforce takes precautions to distort or modify the behaviour of the windows
object to prevent any unintended or harmful actions from occurring.
Â
Once you have successfully logged into the system, whether you choose to use the iFrame or windows.open
method to open external content such as Broadsign. The session within Broadsign remains active.
Possible challenges
It is not unusual to encounter further challenges. You may come across the following problems:
Challenge 1
One potential challenge is the need for explicit permission within the sandbox input to ensure proper iFrame functionality. Failure to provide this permission, such as leaving the sandbox input empty, can result in the following console error:
Challenge 2
However, upon adding the 'allow-scripts' permission, a new issue may arise. You might encounter the following error:
Once this step is taken, the iFrame functionality should be fully restored.
The sandbox input provides the flexibility to dynamically incorporate sandbox permissions based on the specific requirements of external websites for better functionality.
Â
Setup
Possible iFrame modifications
You can customize the behaviour of the iframe by adjusting the following settings:
Resize the iframe to your desired dimensions.
Specify a different URL for the content to be loaded.
Set the referrer policy, controlling how the original page's URL is disclosed.
Utilize the sandbox attribute to establish a secure browsing context for the content.
Â