Installation

LiveDesign Integration Setup Guide

In this guide, we will walk you through the steps to set up the LiveDesign integration for Ideation.

The main steps are:

Register a custom gadget in LiveDesign.
Update Nginx configuration.
Send us your LiveDesign URL for whitelisting.

Prerequisites

Access to LiveDesign with admin privileges.
Access to LiveDesign server and Nginx configuration.

Step 1: Upload Gadget file

First, SSH or log in to your LiveDesign server.

Once there, we will register a new custom gadget for Ideation. cd to the LiveDesign custom gadgets directory, usually /home/seurat/custom_gadgets.

cd /home/seurat/custom_gadgets
mkdir -p ideation
cd ideation

In here, create a new file named index.html with the following content, replacing https://acme-ideation.discngine.cloud with the actual URL of your Ideation instance:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/penpal@^6/dist/penpal.min.js"></script>
    <title>IdeationWrapper</title>
    <script>
      if (!window.bb) {
        window.bb = window.parent.dngLDBackup;
      }
      window.parent.dngLDBackup = window.bb;

      document.addEventListener('DOMContentLoaded', () => {
        const ideationFrame = document.getElementById('ideation');
        Penpal.connectToChild({
          iframe: ideationFrame,
          childOrigin: 'https://acme-ideation.discngine.cloud',
          methods: {
            getDatasetList() {
              const bb = window.bb;
              const openLRList = bb.records.LiveReport.getDefaultCollection().map(lr => ({
                label: lr.getName(),
                value: lr.getIdSafe(),
              }));
              return openLRList;
            },
            getDatasetAsSdf(liveReportId) {
              return new Promise((resolve, reject) => {
                const body = {
                  live_report_id: liveReportId,
                  type: 'SDF',
                  column_ids: [],
                  entity_ids: []
                };
                const getSDFUrl = new URL('/livedesign/api/live_reports/export', window.location.origin).toString();
                fetch(
                  getSDFUrl,
                  {
                    method: 'POST',
                    body: JSON.stringify(body),
                    headers: {
                      'Content-Type': 'application/json'
                    }
                  }
                ).then(res => res.text()).then(resolve).catch(reject);
              });
            },
            getDisplayOptions() {
              return {
                sdfAlias: 'LiveReport'
              };
            },
            getDatasetMetadata(liveReportId) {
              const projectId = bb.records.LiveReportMetadata.getDefaultCollection().getById(liveReportId).getProjectId();
              return {
                type: 'liveDesign',
                liveReportId: parseInt(liveReportId, 10),
                projectId: parseInt(projectId, 10),
                serverUrl: window.location.origin,
              };
            }
          },
        });
      });
    </script>
  </head>

  <body style="height: 99vh; width: 100%; margin: 0">
    <iframe id="ideation" src="https://acme-ideation.discngine.cloud" style="width: 100%; height: 100%; border: 0" />
  </body>

</html>

IMPORTANT

Make sure to replace https://acme-ideation.discngine.cloud with your actual Ideation instance URL.

Step 2: Update Nginx configuration

To make the newly created gadget accessible, you will need to set up a dedicated route on Nginx. To do so, create a new configuration file at /etc/nginx/endpoints.d/ideation.conf and fill it with the following:

location /discngine/ideation
  alias /home/seurat/custom_gadgets/ideation/;
  index index.html
}

IMPORTANT

Adjust the gadget path /home/seurat/custom_gadgets/ideation/ based on what you actually used in Step 1.

To expose your newly created route, restart the Nginx server, usually with the following command:

sudo systemctl restart nginx

Step 3: Register Gadget in LiveDesign Admin Portal

On the LiveDesign Admin portal, under "Feature Configuration", go to "Properties".
In the "Feature Settings" section, look for "CUSTOM_TOOLS". Edit its value and add a new Object to the JSON:

[
  {
    "categoryName": "Discngine",
    "gadgets": [
      {
        "name": "Ideation",
        "location": "/livedesign/discngine/ideation/"
      }
    ]
  },
	...Other gadgets
]

IMPORTANT

Adjust the "location" to the value used in Step 2.

Save the new setting and refresh LiveDesign page.

You should now see the "Ideation" item in the "Visualize" menu.

Step 4: Send LiveDesign URL to Discngine

If not already done during the registration phase with Discngine, send the full URL of your LiveDesign instance to support@discngine.com, i.e. https://livedesign.acme.com.
This is required for us to whitelist your LiveDesign server and allow Ideation to load in it.

Why the whitelisting?

To prevent various attacks such as Clickjacking, we only allow Ideation to be loaded in a selected list of parent application.
That is why we need you to provide us with your LiveDesign server URL.

Until your server has been whitelisted, you will not be able to load Ideation in LiveDesign.

Step 5: Log in to Ideation

Once you have received confirmation that your Ideation server has correctly been whitelisted, you will be able to load Ideation through the "Visualize" > "Ideation" item.
Log in to Ideation as usual and start importing a LiveReport to create SAR Slides from it.