Iframe
The Iframe component allows you to embed external content from other websites or applications directly within your ToolJet application.
Example Usage
A logistics company needs to display real-time shipment tracking from their third-party carrier's tracking portal. Using the Iframe component, they embed the carrier's tracking page directly into their internal operations dashboard, allowing warehouse staff to monitor shipments without switching between applications.
Properties
| Property | Description | Expected Value |
|---|---|---|
| URL | The URL of the external content to be embedded in the iframe. | String (e.g., https://tooljet.io/). |
Events
The Iframe component does not support any events.
Component Specific Actions (CSA)
The following actions of the component can be controlled using component-specific actions (CSA):
Action | Description | How To Access |
|---|---|---|
| setURL | Sets the URL of the iframe to display different content dynamically. | components.iframe1.setURL('https://example.com') |
| setVisibility | Sets the visibility of the component. | components.iframe1.setVisibility(true) |
| setDisable | Disables or enables the component. | components.iframe1.setDisable(false) |
| setLoading | Sets the loading state of the component. | components.iframe1.setLoading(true) |
Exposed Variables
Variable | Description | How To Access |
|---|---|---|
| url | Holds the URL currently loaded in the iframe. | {{components.iframe1.url}} |
| isVisible | Indicates whether the component is visible. | {{components.iframe1.isVisible}} |
| isDisabled | Indicates whether the component is disabled. | {{components.iframe1.isDisabled}} |
| isLoading | Indicates whether the component is in a loading state. | {{components.iframe1.isLoading}} |
Additional Actions
Action | Description | Configuration Options |
|---|---|---|
| Loading state | Enables a loading spinner, often used with isLoading to indicate progress. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Disable | Enables or disables the component. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Tooltip | Provides additional information on hover. | String (e.g., View external content here.). |
Devices
Property | Description | Expected Value |
|---|---|---|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Styles
Property | Description | Configuration Options |
|---|---|---|
| Box Shadow | Sets the box shadow properties of the component. | Select the box shadow color and adjust the related properties or set it programmatically using fx. |
Need Help?
- Reach out via our Slack Community
- Or email us at [email protected]
- Found a bug? Please report it via GitHub Issues