Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-04-21 21:47:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5
ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/iframe.md
Pratik Agrawal fb609b0ed5
[docs]: Iframe Component (#15118)
2026-01-30 11:38:50 +05:30

4.3 KiB
Raw Blame History

id title
iframe 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):

<div style={{ width:"100px"}}> Action <div style={{ width:"200px"}}> Description <div style={{width: "200px"}}> 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

<div style={{ width:"100px"}}> Variable <div style={{ width:"200px"}}> Description <div style={{width: "200px"}}> 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

<div style={{ width:"100px"}}> Action <div style={{ width:"150px"}}> Description <div style={{ width:"250px"}}> 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

<div style={{ width:"100px"}}> Property <div style={{ width:"150px"}}> Description <div style={{ width:"250px"}}> 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

<div style={{ width:"100px"}}> Property <div style={{ width:"150px"}}> Description <div style={{ width:"250px"}}> 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?