English (US)

中文 (简体)

English (US)

中文 (简体)

Theme

Embedding External Controls ​

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

Refresh Page ​

When a customer embeds a page that needs to refresh the dashboard data but does not want to reload the iframe, it can be refreshed via an external button. Below is a code example and display style for refreshing the embedded page via an external button, for 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>
  <button>Refresh</button>
  <iframe
    frameborder="0"
    importance="high"
    allowFullScreen="true"
    width="1080"
    height="800"
    src="https://develop.hengshi.org/private/share/app/EAD43BC71B87137928BB1D7D62E639078">
  </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. Refresh dashboard identifier `hs_dashboard_refresh`
        data: ['hs_dashboard_refresh', {}] 
      }), '*'); 
    });
  </script>
</body>
</html>

Export Dashboard PDF/PNG ​

The embedded page can export the dashboard as PDF and PNG via external buttons. Below are the relevant code examples and display screenshots.

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>
  <button id="exportPNG">Export PNG</button>
  <button id="exportPDF">Export PDF</button>
  <iframe
    frameborder="0"
    importance="high"
    allowFullScreen="true"
    width="1080"
    height="800"
    src="https://develop.hengshi.org/private/share/app/EAD43BC71B87137928BB1D7D62E639078">
  </iframe>
  <script>
    document.addEventListener('click', e => {
      if (!['exportPNG', 'exportPDF'].includes(e.target.id)) return;
      // Get the export type, pdf or png
      const type = e.target.id === 'exportPNG' ? 'png' : 'pdf';
      const iframe = document.querySelector('iframe');
      // Send the 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, broadcast the following events using postMessage to facilitate better integration with the business. In the business page, use

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

to listen for 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, and application republishing.
  2. Clicking on system elements, where the clicked object can be an application, folder, dashboard, chart, or dataset.
  3. URL change. The handlePostMessage receives an event which is a JavaScript MessageEvent. The event.data is the broadcast content, which is a serialized JSON string. It can be used after being parsed with JSON.parse(event.data).

Catalog, App Changes ​

Catalog and app changes are communicated through the following structure, where data is a stringified object that can be obtained by JSON.parse.

  • data.event is the event type, including updateFolder folder change, updateApp app change, and updatePublish app publish change.
  • data.data is the specific information of the event, including insert, update, delete, and duplicate.
javascript
{
  // HENGSHI SENSE interactive event standard
  "event": "HengshiInteractiveEvent",
  "type": "HengshiInteractiveEvent",
  "data": {
    // Event type, update folder 'updateFolder'; update app 'updateApp'; update publish 'updatePublish'
    "event": "updateFolder",
    // Specific information of the event, insert, update, delete, duplicate
    "data": "insert_2198",
  }
}

Click System Element ​

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

The type refers to the type of the clicked element, in addition to app, there are also:

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

HENGSHI SENSE Platform User Manual

Copyright © 2016-2024 hengshi.com