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| | exporting | ExportingOptions | Exporting content options. (Pyramid 2023.02 version or greater is required) | | fullDiscovery | boolean | Shows data discovery slicers and legends. (Pyramid 2023.02 version or greater is required) |

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

Exporting Options

• Available since 3.0.1
• Pyramid 2023.02 version or greater is required

| Name | Type | Description | | ------------- | ------------- | ------------- | | exportTypes | Array | Sets available export content options. Supported values: 'pdf', 'png', 'excel', 'csv'. To hide all exporting options set it to null or an empty array. By default all options are visible. |

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
• Pyramid 2023.01 version or greater is required

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',
}