How to use the iframe integration library

import { IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

const callBackFns = {
  onBreadcrumbClick: (id) => {
    console.log(id); // prints the id of the breadcrumb element the user clicked on
  }
};

IframeIntegrationLibrary.init(callBackFns).then(() => {
    console.log(IframeIntegrationLibrary.getMode()); // prints mode it got from Web Portal
});

import { WidgetInitResult, IframeIntegrationLibrary } from '@bci-portal/iframe-integration';


async ngOnInit(): Promise<void> {
    const settings: WidgetInitResult<BaseStaticSettings> = await IframeIntegrationLibrary.initWidget<BaseStaticSettings>();
    console.log(settings.staticSettings);
}


async ngOnInit(): Promise<void> {
    const settings: WidgetInitResult<BaseStaticSettings, ExampleWidgetSettings> = await IframeIntegrationLibrary.initWidget<BaseStaticSettings, ExampleWidgetSettings>({
        onConfigChanged: (userSettings) => {
            console.log(userSettings);
        },
        onFilterChanged: () => {},
    });
    console.log(settings.staticSettings);
    console.log(settings.userSettings);
}

import { WidgetConfiguration, IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

async ngOnInit(): Promise<void> {
    const settings: WidgetConfiguration<BaseStaticSettings, ExampleWidgetSettings> = await IframeIntegrationLibrary.initWidgetSettings<BaseStaticSettings, ExampleWidgetSettings>({
        onGetWidgetConfigRequest: () => //return form data here,
    });
    console.log(settings.userSettings);
    console.log(settings.staticSettings);
}

import { IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

const currentMode = IframeIntegrationLibrary.getMode();
console.log(currentMode); // depending where it is being used, view, embedded-view, dialog, widget, widget-settings

import { IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

const isEmbedViewAvailable = IframeIntegrationLibrary.isFeatureAvailable('embedView');
console.log(isEmbedViewAvailable); // true if mode === view, else false

import { IframeIntegrationLibrary, Breadcrumb } from '@bci-portal/iframe-integration';

const breadcrumbs: Breadcrumb[] = [
    {
      label: 'Page',
      id: '123',
    },
    {
      label: 'Sub Page',
      id: '456',
    }
  ];

const breadcrumbData = { breadcrumbs };
IframeIntegrationLibrary.setBreadcrumbs(breadcrumbData);

import { IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.getUserSettings('bci.system.dateformatiso').then((userSetting) =>
  console.log(userSetting);
);

import { IframeIntegrationLibrary, CookieSettings } from '@bci-portal/iframe-integration';

const cookieSettings: CookieSettings = await IframeIntegrationLibrary.getCookieSettings();
console.log(cookieSettings);

{
  marketing: true,
  comfort: false, // Deprecated: Same value as convenience.
  convenience: false,
  analysis: true
}

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.getCookieSettings$().subscribe((cookieSettings) => {
          console.log('privacy settings changed: ' + cookieSettings);
        });

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.showMessage('Ticket created successfully', 'success', 'description');

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

const bannerId = await IframeIntegrationLibrary.showBanner('Banner Message', 'info');

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.hideBanner(bannerId);

import { IframeIntegrationLibrary, Context } from '@bci-portal/iframe-integration';

const contextContributions: Context[] = await IframeIntegrationLibrary.getContextContribution('DATA', 'NEXEED_MDM_FACILITY_BASED_KPI', '1.0');

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

const placeholderParams: Record<string, string> = { 'facilityId': '9434ebcd-c740-4376-962d-5556896e68b1' };
const data: any = await IframeIntegrationLibrary.getDataForContextContribution('8de4a4ed-0e45-4315-94b1-9fbc1f6e60b1','meta', placeholderParams);

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

let data = {
  callbackId: '12335',
   responseData: {
     label: "string",
     description: "string"
   }
};
IframeIntegrationLibrary.getDataForContextContributionResponseFromIframe(data);

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

const htmlElement = document.querySelector('button');

IframeIntegrationLibrary.showContextMenu(htmlElement , 'device', { deviceId: '42' });

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

const isMenuEmptyForContextDevice = await IframeIntegrationLibrary.isContextMenuEmpty( 'device');

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.enableBrowserFullscreen();

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.disableBrowserFullscreen();

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.isBrowserFullscreenEnabled().then((isFullscreen) => {
          console.log('isBrowserFullscreenEnabled: ' + isFullscreen);
        });

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.isBrowserFullscreenEnabled$().subscribe((enabled) => {
          console.log('isBrowserFullscreenEnabled: ' + enabled);
        });

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.enablePortalFullscreen();

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.disablePortalFullscreen();

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.isPortalFullscreenEnabled().then((isFullscreen) => {
          console.log('isPortalFullscreenEnabled: ' + isFullscreen);
        });

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.isPortalFullscreenEnabled$().subscribe((enabled) => {
          console.log('isPortalFullscreenEnabled: ' + enabled);
        });

import {  IframeIntegrationLibrary, WidgetMetaData } from '@bci-portal/iframe-integration';

const widgetMetaData: WidgetMetaData[] = await IframeIntegrationLibrary.getDashboardWidgetsMetaData();

[
    {
    "id": "52bd60c3-e8ea-4111-bd4a-18f76fc809a8",
    "catalog": {
      "title": "Markdown IFrame Widget",
      "description": "Markdown iframe widget",
      "categoryId": "cat_others",
      "imageUrl": "/portal-enigma/assets/img/preview-markdown.png"
    },
    "widgetType": "IFrame",
    "configuration": {
      "availableWidths": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      "availableHeights": [1, 2, 3, 4, 5, 6, 7]
    },
    "settings": {
      "widgetUrl": "/iframe-widget/#/widgets/noteswidget?isWidget=true&&tenantId=##tenantId##",
      "widgetConfigUrl": "/iframe-widget/#/widgets/noteswidgetsettings?isWidget=true"
    }
  },
  {
    "id": "99bd60c3-e8ea-4111-bd4a-18f76fc809a8",
    "catalog": {
      "title": "test IFrame Widget",
      "description": "test iframe widget",
      "categoryId": "cat_others",
      "imageUrl": "/portal-enigma/assets/img/preview-markdown.png"
    },
    "widgetType": "iframe",
    "configuration": {
      "availableWidths": [3, 6, 9, 12],
      "availableHeights": [2, 4, 6]
    },
    "settings": {
      "widgetUrl": "/portal-enigma/assets/mocks/iframe-test.html?tenantId=##tenantId##",
      "widgetConfigUrl": "/portal-enigma/assets/mocks/iframe-test.html?tenantId=##tenantId##"
    }
  }
]

const pathValue = '/##deviceId##/process/chart';
const contextParams = {};
const replaceResult = '/##deviceId##/process/chart';

const pathValue = '/ticket?priority=##priority##&severity=##severity##';
const contextParams = { severity: 'medium' };
const replaceResult = '/ticket?severity=medium';

const pathValue = '/##deviceId##/process/chart';
const contextParams = { toolId: 1234};
const replaceResult = '/##deviceId##/process/chart';

import {  IframeIntegrationLibrary, Context } from '@bci-portal/iframe-integration';

const contexts: Context[] =  await IframeIntegrationLibrary.getContextContribution("EMBEDDED_VIEW", "<name of context>", "<context version>");

const htmlElement = document.querySelector('iframe');
IframeIntegrationLibrary.embedView(contexts[0], htmlElement, { key: "value" });

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

customEventHandler = (messageEvent) => {
    const eventName = messageEvent.data.name;
    switch(eventName) {
        case "someEventName": {
            console.log(messageEvent.data);
            break;
        }
        default: {
            console.error('unsupported event from embedded view');
        }
    }
}

const htmlElement = document.querySelector('iframe');
const embeddedViewListener =  IframeIntegrationLibrary.listenToEmbeddedView(this.window,  htmlElement, customEventHandler.bind(this));

embeddedViewListener.unsubscribe() // stop listening to events from embedded view

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.sendEventToEmbeddedView(iframe, 'dataFromHost', { key: 'value' });
IframeIntegrationLibrary.sendEventToEmbeddedView(iframe, 'dataFromHost');

import {  IframeIntegrationLibrary, Context } from '@bci-portal/iframe-integration';

const contexts: Context[] = await IframeIntegrationLibrary.getContextContribution('LINK', 'NEXEED_REPORTING_MANAGEMENT_REPORT_LINK', '1.0');

const context = contexts[0];
const parameterMap: Record<string, string> = {
  prop: 'Some parameter'
};

IframeIntegrationLibrary.requestBrowseToLink(context.contributionId, parameterMap);
});

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

id = 'someid';
const dataToHostView: Record<string, unknown> = {
  id: this.id,
 };

IframeIntegrationLibrary.informHostViewWithCallback('embeddedviewevent', dataToHostView).then((data) => console.log(data));

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

id = 'someid';

const dataToHostView: Record<string, unknown> = {
  id: this.id,
 };

IframeIntegrationLibrary.informHostView('embeddedviewevent', dataToHostView);

import {  IframeIntegrationLibrary, Context } from '@bci-portal/iframe-integration';

const contexts: Context[] = await IframeIntegrationLibrary.getContextContribution('DIALOG_VIEW', 'VIEW1', '1.0');

const context = contexts[0] as ContextDialogViewWithContribution;
const viewParams: Record<string, string> = {
  key: 'value',
};

const data: DialogData | null = await IframeIntegrationLibrary.showViewInDialog(context , 'Title', viewParams);
console.log(dialogData);

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.closeDialog({ key: 'value' });

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.setNavigationMenuState(false);

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.navigationRequest$().subscribe(() => {
   console.log('navigationRequest$'); // send back IframeIntegrationLibrary.performNavigation() or IframeIntegrationLibrary.cancelNavigation()
});

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.navigationRequest$().subscribe(() => {
    if (this.hasUnsavedChanges()) {
        // maybe ask the user with a dialog if he really wants to leave or cancel
        IframeIntegrationLibrary.cancelNavigation();
    } else {
        IframeIntegrationLibrary.performNavigation();
    }
});

import {  IframeIntegrationLibrary } from '@bci-portal/iframe-integration';

IframeIntegrationLibrary.navigationRequest$().subscribe(() => {
    if (this.hasUnsavedChanges()) {
        // maybe ask the user with a dialog if he really wants to leave or cancel
        IframeIntegrationLibrary.cancelNavigation();
    } else {
        IframeIntegrationLibrary.performNavigation();
    }
});