@pyramid-embed/embed-js

Pyramid Embed

The main embed client. This object manages the life cycle of the embed content on the host page.

Installation

yarn add @pyramid-embed/embed-js

npm i @pyramid-embed/embed-js

API documentation

Please check online help for the general documentation.

Usage

import { PyramidEmbedClient } from '@pyramid-embed/embed-js';

const embedClient = new PyramidEmbedClient('http://pyramid:8181');

Examples

Basic

The code example uses existing embed auth cookie.

import { PyramidEmbedClient } from '@pyramid-embed/embed-js';

// create embed client
const embedClient = new PyramidEmbedClient('http://pyramid:8181');

// create embed options
const embedOptions = {
    contentId: 'f5366b40-fbc7-4773-8180-7759bb0760df'
}

// embed a report into a div element
const el = document.getElementById('embed-container');
embedClient.embed(el, embedOptions);

<div id="embed-container" style="width: 1280px; height: 720px;"></div>

Filtering

The code example uses existing embed auth cookie.

import { PyramidEmbedClient, Filter } from '@pyramid-embed/embed-js';

const embedClient = new PyramidEmbedClient('http://pyramid:8181');

const filter = Filter.create().addUniqueName('[customer].[country].[France]');
const embedOptions = {
    contentId: 'f5366b40-fbc7-4773-8180-7759bb0760df',
    filters: filter
}

const el = document.getElementById('embed-container');
embedClient.embed(el, embedOptions);

Embed Options

Name	Type	Description	Required
contentId	string	GUID string of the item that is to be embedded	yes
filters	Filter	Filter object of items to drive filtering on the content.
targets	Target	Target object of items to drive targeted filtering on the content.
deviceType	'desktop' | 'tablet' | 'phone'	Specifies the layout type of the presentation to use. If not supplied, the device type is determined automatically.
theme	'dark' | 'light'	Theme colors of the built-in dialogs
slideNumber	number	Initial slide number, starts from 1
locale	string	User locale, applies when anonymous embed license is available

Filter

The filter objects contain information on how to dynamically filter embed content (both reports and dashboards).

See online help

Target

The target objects contain information on how to dynamically filter embed dashboard content by directing the attached filters to the right named targets (as designed in the presentation itself)

See online help

Further help

For more help on embedding with Pyramid, especially instructions on authentication, scenarios and use of REST APIs together with embedding, please see online help.

Hub

• available since version 3.0.0

Examples

Basic

<div id="embed-container" style="width:100%; height:800px;"></div>

import { PyramidEmbedClient } from "@pyramid-embed/embed-js";

const embedClient = new PyramidEmbedClient('http://pyramid:8181');
const container = document.getElementById('embed-container');
const hubEmbedOptions = {
  theme: "dark",
  editable: true,
  showTabs: true,
  responsiveness: "compact",
};

const hub = await embedClient.hub(container, hubEmbedOptions);

Hub Instance

Method	Description
changeSelectedTab(tabIdx)	changes selected tab by index
getSelectedTab()	returns selected tab index
getTabsList()	returns all tabs as an object

Hub Embed Options

Name	Type	Description
theme	'dark' | 'light'	Theme colors
editable	boolean	Enables editing capabilities
showTabs	boolean	Shows or hides tabs
responsiveness	'compact' | 'none'	Responsive layout behavior
style	Object	Custom styles
smartReportDialogPopupMode	'none' | 'tab' | 'popup'	Smart report button behavior, 'none' - not shown, 'tab' - opens pyramid client in a new browser tab, 'popup' - opens pyramid client in a flyout popup using an iframe
template	string	use specific embed hub template

Custom styles object

{
  'tabs.nonSelectedTab.color': 'red',
  'tabs.nonSelectedTab.backgroundColor': '#f2f2f2',
  'tabs.nonSelectedTab.fontSize': 12,
  'tabs.nonSelectedTab.fontWeight': 500,
  'tabs.selectedTab.color': '#353d42',
  'tabs.selectedTab.backgroundColor': '#f2f2f2',
  'tabs.selectedTab.fontSize': 12,
  'tabs.selectedTab.fontWeight': 500,
  'tabs.border': '2px solid #d2d6d9',
  'tabs.backgroundColor': '#f2f2f2',
  'tabs.addTabIconColor': '#d2d6d9',
  'tabs.deleteTabIconColor': 'gray',
  'tabs.iconColor': '#8599A8',
  'buttons.color': 'green',
  'buttons.secondaryColor': 'blue',
  'buttons.hoverColor': 'red',
  'tiles.backgroundColor': '#ffffff',
  'tiles.titleColor': '#353d42',
  'tiles.boxShadow': '1px 1px 1px 1px rgba(0, 0, 0, 0.19)',
  'tiles.addWidgetPrimaryColor': '#8599A8',
  'tiles.addWidgetSecondaryColor': '#328EC1',
  'picker.backgroundColor': '#ffffff',
  'picker.tabs.nonSelectedTab.color': 'red',
  'picker.tabs.nonSelectedTab.backgroundColor': '#f2f2f2',
  'picker.tabs.nonSelectedTab.fontSize': 12,
  'picker.tabs.nonSelectedTab.fontWeight': 500,
  'picker.tabs.selectedTab.color': '#353d42',
  'picker.tabs.selectedTab.backgroundColor': '#f2f2f2',
  'picker.tabs.selectedTab.fontSize': 12,
  'picker.tabs.selectedTab.fontWeight': 500,
  'picker.tabs.border': '2px solid #d2d6d9',
  'picker.tabs.backgroundColor': '#f2f2f2',
  'picker.tabs.addTabIconColor': '#d2d6d9',
  'picker.tabs.deleteTabIconColor': 'gray',
  'picker.tabs.iconColor': '#8599A8',
  'container.border': '#8599A8',
  'canvas.backgroundColor': 'lightblue',
}