English (US)

中文 (简体)

English (US)

中文 (简体)

Theme

External Controls for Embedded Pages ​

HENGSHI SENSE supports the use of external buttons to operate embedded pages, including refreshing page content, exporting pages as PDF, PNG, etc.

Refresh Page ​

When a client-embedded page needs to refresh dashboard data without reloading the iframe, an external button can be used for the refresh. Below is a code example and display style for refreshing an embedded page via an external button for your reference.

html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <button>Refresh</button>
  </div>
  <iframe
    frameborder="0"
    importance="high"
    allowFullScreen="true"
    width="100%"
    height="760"
    src="https://preview.hengshi.com/share/app/SC7624DA6F8451588A1C621DFD6A4FC44/dashboard/1">
  </iframe>
  <script>
    const button = document.querySelector('button');
    // 1. Click the button outside the iframe
    button.addEventListener('click', () => {
      const iframe = document.querySelector('iframe');
      // 2. Send a message to the iframe to refresh the dashboard
      iframe.contentWindow.postMessage(JSON.stringify({ 
        event: 'dispatchCustomEvent', 
        // 3. Dashboard refresh identifier `hs_dashboard_refresh`
        data: ['hs_dashboard_refresh', {}] 
      }), '*'); 
    });
  </script>
</body>
</html>

Export Dashboard PDF/PNG ​

Embedded pages can export the dashboard as PDF and PNG via external buttons. Below is a code example and a demonstration screenshot.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <button id="exportPNG">Export PNG</button>
    <button id="exportPDF">Export PDF</button>
  </div>
  <iframe
    frameborder="0"
    importance="high"
    allowFullScreen="true"
    width="100%"
    height="760"
    src="https://preview.hengshi.com/share/app/SC7624DA6F8451588A1C621DFD6A4FC44/dashboard/1">
  </iframe>
  <script>
    document.addEventListener('click', e => {
      if (!['exportPNG', 'exportPDF'].includes(e.target.id)) return;
      // Get export type, pdf or png
      const type = e.target.id === 'exportPNG' ? 'png' : 'pdf';
      const iframe = document.querySelector('iframe');
      // Send export event message
      iframe.contentWindow.postMessage(JSON.stringify({ 
        event: 'dispatchCustomEvent', 
        data: ['hs_dashboard_export', { 
          type, 
        }] 
      }), '*'); 
    });
  </script>
</body>
</html>

Listening to Embedded Page Events ​

During page interactions, use postMessage to broadcast the following events to better integrate with business processes. On the business page, use

js
window.addEventListener('message', function handlePostMessage(event) {});

to listen to the events we broadcast. Currently, the embedded scenario supports the following events:

  1. Directory and application changes, including the addition, modification, and deletion of directory folders and applications, as well as application republishing.
  2. Clicking on system elements, where the target objects are applications, folders, dashboards, charts, and datasets.
  3. URL change. The handlePostMessage receives an event of type JavaScript MessageEvent, where event.data is the broadcast content. event.data is a serialized JSON string, which can be used after being parsed with JSON.parse(event.data).

Directory and Application Changes ​

Directory and application changes convey information through the following structure, where data is a stringified object. After JSON.parse, the information can be obtained.

  • data.event is the event type, including updateFolder for folder changes, updateApp for application changes, and updatePublish for application publishing changes.
  • data.data contains the specific details of the event, including insert, update, delete, and duplicate types.
javascript
{
  // HENGSHI Interactive Event Standard
  "event": "HengshiInteractiveEvent",
  "type": "HengshiInteractiveEvent",
  "data": {
    // Event type: add, delete, or modify directory 'updateFolder'; add, delete, or modify application 'updateApp'; update publishing 'updatePublish'
    "event": "updateFolder",
    // Specific event details: insert, update, delete, duplicate
    "data": "insert_2198",
  }
}

Click System Elements ​

javascript
// After JSON.parse(event.data):
{
  event: 'HengshiInteractiveEvent',
  data: {
    event: 'clickItem',
    data: {
      type: 'app',
      data: {
        id: xxx,
        ...
      },
    },
  },
}

Where type refers to the type of the clicked element. In addition to app, it can also be:

  • publishApp: Published App
  • dashboard: Dashboard
  • chart: Chart
  • publishChart: Published Chart
  • dataset: Dataset
  • folder: Folder
  • datamart: Datamart

User Manual for Hengshi Analysis Platform

Copyright © 2016-present hengshi.com