iframe

Chart style

Customize the iframe link style and the Close button to control how embedded web pages appear in your visualization application.

Style panel

• Search Configuration: Click the Style icon in the upper right corner of the panel to enter the name of the configuration item you wish to locate in the search field. The system supports fuzzy matching. For more information, see Search configuration item.

• • Size: The width and height of the component in pixels (px).

  • Position: The component's x-coordinate and y-coordinate in pixels (px). The x-coordinate is the horizontal distance from the page's left edge to the component's top-left corner. The y-coordinate is the vertical distance from the page's top edge to the component's top-left corner.

  • Rotation: The rotation of the component around its center point, in degrees (°).

    • Enter an angle value to control the component's rotation.

    • Click the icon to flip the component horizontally.

    • Click the icon to flip the component vertically.

  • Opacity: The value ranges from 0 to 1. A value of 0 is completely transparent, while a value of 1 is fully opaque. The default is 1.

  • Interaction passthrough: When enabled, mouse interactions pass through this component, preventing it from blocking interactions with other components layered underneath it on a dashboard.

  • Alignment: The alignment of the component within the editor.

• Link: The URL of the page to display in the widget.

  Important

  If you access the visualization application over HTTPS, HTTP links in the iframe widget will not work. Ensure that the linked page supports cross-domain access.

• Closable: Displays a Close button in the upper-right corner of the widget on the preview or published page. Click this button to close the embedded web page.

• Always show Close button: If you turn on this switch, the Close button is always visible. If you turn off this switch, the Close button is only visible when the mouse pointer is over the widget. This option is available only if you enable Closable.

• Disable scroll: Prevents scrolling within the embedded web page in preview mode. Turn off this switch to allow scrolling.

• Allow full screen: Allows the iframe content to trigger the browser's full-screen mode.

• Allow microphone and camera: Allows the iframe content to request microphone and camera permissions.

Data Source panel

url: The URL of the page to display in the widget, equivalent to the Style > Link setting. If both are configured, the url field in the Data Source panel takes precedence.

Advanced panel

Enable this switch to associate the widget with global variables. When the iframe link changes, the widget emits the value of your custom variable. For more information, see Configure widget interactions.

Blueprint interaction

1. Click the icon in the upper-left corner of the page to open the Blueprint page.

2. On the Layer Node tab, add the current widget to the main canvas.

3. View the Blueprint configuration parameters.

   Note

   Click the icon next to an anchor point on the right side of the canvas to view tooltips for event and action parameters.

   • Events

     Event	Description
     When data is updated	Triggered when the data response changes. The updated data is emitted.
     When request status changes	Triggered when the data request status changes. The callback parameter is the current status. For a data example, see the data response area on the Data Source tab of the widget configuration panel in the canvas editor.
     When link changes	Triggered when the link in the widget data changes. No parameters are required.

   • Actions

     Action	Description
     Import data	Processes data in the widget format and imports it to redraw the widget without re-requesting data from the server. See the sample data. [ { "url": "https://www.aliyun.com" } ]
     Request data	Re-requests data from the server. Data from input data processing nodes or layer nodes is used as parameters. For example, if an iframe has its API data source set to https://api.test and the data passed to the Request data action is { id: '1'}, the final request URL is https://api.test?id=1.
     Set iframe URL	Sets the URL for the iframe displayed in the widget. See the sample data. [ { "url": "https://www.aliyun.com" } ]
     Move	Moves the widget to a specified position. See the sample data. { // The movement method. "to" for absolute positioning, "by" for relative positioning. Default: "to". "positionType": "to", // The target position, specified by x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation settings. "animation": { "enable": false, // The animation duration in ms. "animationDuration": 1000, // The animation curve. Valid values: "linear", "easeInOutQuad", or "easeInOutExpo". "animationEasing": "linear" } }
     Toggle visibility	Toggles the widget's visibility. No parameters are required.
     Show	Shows the widget. See the sample data. { "animationType": "",// The animation method. Valid value: "fade". If this parameter is not specified, no animation is applied. "animationDuration": 1000,// The animation delay in ms. "animationEasing": ""// The animation curve. }
     Hide	Hides the widget. See the sample data. { "animationType": "",// The animation method. Valid value: "fade". If this parameter is not specified, no animation is applied. "animationDuration": 1000,// The animation delay in ms. "animationEasing": ""// The animation curve. }
     Update widget configuration	Dynamically updates the widget style configuration. Click Copy configuration to clipboard in the widget's Style panel to get the configuration data, then modify the field values in a data processing node on the Blueprint Editor page.