iframe

Styles

The iframe component embeds a webpage in a visualization application. You can configure the URL for the embedded content and customize the style of its close button.

Configuration panel

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

• Link: The URL of the webpage to display in the component.

  Important

  When a visualization application is accessed over HTTPS, browsers block HTTP content in an iframe due to mixed content restrictions. The target page must also support cross-origin requests.

• Closable: When enabled, a close button appears in the upper-right corner of the component in preview or published mode. Clicking this button closes the webpage.

• Always display close button: If enabled, the close button is always visible. Otherwise, it appears only when you hover over the component. This option is available only when Closable is enabled.

• Not scrollable: If enabled, scrolling is disabled on the embedded webpage. If disabled, the page is scrollable.

Data panel (default mode)

The url field configures the link for the webpage displayed in the component. It has the same function as the Link configuration item. If both are configured, the url field from the data source takes precedence.

Data panel (analysis mode)

For detailed information about the BI analysis data configuration panel, see Introduction to the BI analysis mode data panel.

The url field configures the link for the webpage displayed in the component. It has the same function as the Link configuration item. If both are configured, the url field from the data source takes precedence.

Interaction panel

Select Enable to activate the component's interactive features. When the iframe link changes, the component emits a custom variable that you define. For detailed configuration steps, see How to configure a callback ID.

Blueprint Editor interaction

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the iframe component in the import node bar. The configuration parameters for the iframe component appear on the canvas, as shown in the following figure.

   • Events

     Event	Description
     When a data API request is complete	Triggered after the data API request returns a response and a data filter processes the data. The event passes the processed data in JSON format. For a data sample, see the Data Response section on the Data tab in the component's configuration panel.
     When a data API request fails	Triggered if the data API request fails, for example, due to a network issue or an API error, and a data filter processes the response. The event passes the processed data in JSON format. For a data sample, see the Data Response section on the Data tab in the component's configuration panel.
     When the link changes	Triggered when the component's link address changes.

   • Actions

     Actions	Description
     Request Data API	Re-requests data from the server, using data passed from upstream data processing nodes or layer nodes as parameters. For example, if the iframe component is configured with an API data source of https://api.test and the data { id: '1'} is passed to the Request Data API action, the final API request is https://api.test?id=1.
     Import Data API	Imports and redraws the component with data that is already processed into the required format. This action does not re-request data from the server. For a data sample, see the Data Response section on the Data tab of the component's configuration panel in the canvas editor.
     Set iframe address	Sets the URL for the iframe displayed within the component.
     Update component configurations	Dynamically updates the style configurations of the component. To do this, first copy the configuration data by clicking Copy Configurations to Clipboard in the component's Configuration panel. Then, modify the desired style fields in a data processing node on the Blueprint Editor configuration page.
     Show	Shows the component. The following code is a data sample: return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Hide	Hides the component. The following code is a data sample: return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Toggle Display Status	Toggles the component's visibility. The following code is a data sample: return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     Move	Moves the component to a specified position. The following code is a data sample: return { // The move method. 'to' for absolute positioning, 'by' for relative positioning. Default: 'to'. "positionType": "to", // The target position (x and y coordinates). "attr": { "x": 0, "y": 0 }, // The animation settings. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation easing function. Optional values: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" } };