Page Comparison

...

The Smart Asset Picker can be inserted into any host application as an iframe to easily provide access to assets from your single source of truth. If you have the proper roles then you are able to access and login to the Smart Asset Picker from https://customer-mediamanager-url/embedded/ and then see the below view.

...

Navigate assets by searching, folders or simply using the filters you are so use to from your Media Manager, Creative Cloud Connector and Office Connector. Find all asset info and then select the asset you need for your host application by simple button click.

...

export enum MessageType {
  AssetMessage = 'AssetMessage', // When clicing an asset
  ChangeUrl = 'ChangeUrl', // When user clicks change URL
  SmartPickerInitialized = 'SmartPickerInitialized', // when iframe is initialized
}

export interface DigizuitePostMessage {
  messageType: MessageType;
  mmUrl?: string;
  asset?: AssetMessage;
}

export interface AssetMessage {
  assetId: number;
  itemId: number;
  title: string;
  description: string;
  downloadUrl: string;
  thumb: string;
  extension: string;
}

Listening to events

As mentioned above, the iframe will post messages to its parent / host application. Listening to these events are what makes the magic. It can be done in different ways and most modern frameworks have ways for handling it. But since all are JavaScript frameworks then the most basic way in any kind of application would be to use ‘addEventListener’.

window.addEventListener("message", (event) => {

      if (event && event.data && event.data.messageType) {
            .......
      }
   
}, false);

An example from Angular:

  @HostListener('window:message', ['$event'])
  onMessageReceived(event: any) {
    console.log(`${this.onMessageReceived.name}`, event);

    if (event && event.data && event.data.messageType) {
      const message: DigizuitePostMessage = event.data;
      if (message.messageType === MessageType.SmartPickerInitialized) {
        this.initializeSmartPicker();
      } else if (message.messageType === MessageType.ChangeUrl) {
        const baseUrl = message.mmUrl.endsWith('/') ? message.mmUrl.slice(0, -1) : message.mmUrl;
        this.setNewTempUrl(baseUrl + '/embedded');
      } else if (message.messageType === MessageType.AssetMessage) {
        const asset = message.asset;
        this.assetReceived.emit(asset);
      }
    }
  }