You can publish data apps to make them available outside of the Peliqan platform.

There are 3 modes to publish an app:

• Public: everyone with the link can access the app
• Peliqan users: only users logged in to Peliqan can access the app
• Embedded: embed in an intranet or portal

In each of the below scenarios you can add embed=true to the querystring of the URL of the app, in order to hide the Streamlit menu in the top right corner (with e.g. Rerun, Print etc.)

Public

Click on Save & Publish. The public URL of the published app will be shown. Anyone with the link can access the app.

You can still implement your own login mechanism in your app. More info.

Peliqan users

Click on Save & Publish. The URL of the published app will be shown. Only users that are logged in to Peliqan will have access to the app.

Embedded

Click on Save & Publish. The Embedding URL of the published app will be shown. Use this URL in an iframe to embed the app in an intranet or portal, with a session token added.

You need to first generate a session token (server-side) and add it to the query string of the URL of the app. The session token is valid for 60 seconds, it’s calculated based on the current timestamp and the App Embed Secret Key.

Example final URL for embedding (e.g. in an iFrame):

https://app.eu.peliqan.io/apps/UnVXaW…sydmlONA==/?embed=true&session_token=xxx

Example Python code:

import json
import hmac
import hashlib
import base64
from datetime import datetime, timezone

app_id = 123 # Application id (see URL in Peliqan)
secret_key = "xxx" # App Embed Secret Key (See app Embed settings in Peliqan)
app_url = "https://app.eu.peliqan.io/apps/UnVG...lONA==/?embed=true"

b_secret_key = secret_key.encode()
timestamp = datetime.now(timezone.utc).timestamp()
message = f"{app_id}_{timestamp}"
b_message = message.encode() # utf-8 encoded binary string
digest_obj = hmac.new(b_secret_key, b_message, hashlib.sha1)
digest = digest_obj.digest() # convert to bytes
digest_base64 = base64.b64encode(digest).decode() # Encode the digest in base64
token = { "digest": digest_base64, "timestamp": timestamp }
token_json = json.dumps(token) # base64 string
session_token = base64.b64encode(token_json.encode()).decode()
app_url = app_url + "&session_token=" + session_token

Example TypeScript code:

async getUrl(): Promise<string> {
  const appId = 123;
  const secretKey = "xxx";
  let appUrl = "https://app.eu.peliqan.io/apps/UnV...mlONA==/?embed=true";
  
  const timestamp = Math.floor(Date.now() / 1000);
  const message = `${appId}_${timestamp}`;
  const enc = new TextEncoder();
  const key = await crypto.subtle.importKey("raw", enc.encode(secretKey), { name: "HMAC", hash: { name: "SHA-1" } }, false, ["sign"]);
  const signature = await crypto.subtle.sign("HMAC", key, enc.encode(message));
  const digestBase64 = btoa(String.fromCharCode(...new Uint8Array(signature)));
  const token = { digest: digestBase64, timestamp };
  const tokenJson = JSON.stringify(token).replace(/:/g, ': ').replace(/,/g, ', ');
  const sessionToken = btoa(unescape(encodeURIComponent(tokenJson)));
  appUrl += `&session_token=${sessionToken}`;
  return appUrl;
}

getUrl().then( (appUrl) => { 
   myHTML = `
    <div style="width:100%; height:400px;">
      <iframe src="${appUrl}" 
              width="100%" 
              height="100%" 
              style="border:1px solid black;" 
              frameborder="0" 
              scrolling="yes">
      </iframe>
    </div>
  `;
} ).catch((e) => {console.log(e)});

Embed in Sharepoint

Public Peliqan apps can be embedded in Sharepoint using the “Embed” web part. In Sharepoint go to a page > Edit > find the “Embed” Web Part in the Right Pane. Add it to the page and set the public URL of the app in the web part.

The above embedding URL using a session token, can also be used to embed apps in Sharepoint using a custom built Web Part. This scenario also allows to e.g. send context from Sharepoint into the Peliqan app.

We will use the SharePoint Framework (SPFx) below to build a custom web part, that embeds a Peliqan app in Sharepoint.

Prerequisites

Make sure you have installed on your local computer:

• Node.js LTS
• Yeoman: npm install -g yo
• Yeoman SharePoint Generator: npm install -g @microsoft/generator-sharepoint
• Gulp: npm install -g gulp

Steps to create a custom web part

1. Create your project

Open a terminal and run: yo @microsoft/sharepoint

The generator will ask questions:

• Solution name: e.g. PeliqanAppEmbed
• Target framework: SharePoint Online only
• Place of files: Use current folder
• Framework: Choose “No JavaScript Framework”
• Web part name: e.g. PeliqanAppEmbed
• Description: Peliqan App Embed

2. Run the project locally (optional)

Inside your project folder: gulp serve

This will start the SharePoint Workbench in your browser where you can test your web part:

https://localhost:4321/temp/workbench.html

3. Edit the web part code

Open the following .ts file, add the below function getUrl() and update the render() function as defined below: src/webparts/peliqanAppEmbed/PeliqanAppEmbedWebPart.ts

Make below changes to tsconfig.json.

4. Package the solution

When ready, bundle and package:

gulp bundle --ship

gulp package-solution --ship

This creates a .sppkg file in: /sharepoint/solution/

5. Deploy to App Catalog

• Go to your SharePoint App Catalog (must be enabled by your admin), URL: https://<your_sub_domain>.sharepoint.com/sites/AppCatalog
• Upload the .sppkg file.
• Approve deployment.
• Make sure to check the checkbox “Enable in all Sharepoint sites”
• Now your web part is available in your Sharepoint sites.

Example uploaded .sppkg file:

6. Add the web part to a page

• Edit a SharePoint page.
• Click + Add web part (right pane)
• You’ll see your custom web part under “Custom”