Page Comparison

Integration Digizuite DAM into almost any other application using the Smart Asset PickerUnified DAM Connector. It will give you a head start on development efforts and reduce both implementation time and risk.

Examples can be found here: https://github.com/Digizuite/embedded-ui-examples

Initial Comments

The solution will out of box simply construct an asset URL which contains an access key. This will expire so the recommendation is to:

1. Upload the asset directly into the host application as a one-off (if you need to update it on changes then combine it with automation and updating your host through the API)

2. Construct an asset streamer URL to a no security destination (where access key is not needed) following this guide How to use assetstreamer (stream qualities / download source file)

3. If you put extraordinary load on the system then please ensure to have your destination in Digizuite configured to use CDN

Insert into any Host Application

The Smart Asset Picker Unified DAM Connector 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 Unified DAM Connector 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.

...

1. Either click ‘Place’ from the home page as shown in above screenshot.

2. Click on an asset to see asset info and then click ‘Use’ to select specific quality as shown here.
   

   Image RemovedImage Added

When an asset is clicked then it returns an asset message with type ‘AssetMessage’ with an asset containing an asset URL to the selected asset. In that asset message, one can also find itemId, assetId, title, description and a link to the thumbnail.

Besides from asset message, then the Smart Asset Picker Unified DAM Connector also posts a message when trying to change the URL from menu (wanting to change MM URL) and then when the Smart Asset Picker Unified DAM Connector is initialized properly so that the host application knows. The 3 important message types are:

1. DigizuiteInitPostMessage - So you know it is the Digizuite Iframe

2. DigizuiteChangeUrlPostMessage - If the user tries to change URL

3. DigizuiteAssetPostMessage - When a user clicks on asset. When multi-select you receive more.
   

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

export interface DigizuitePostMessage {
  messageType: MessageType;
}

export class DigizuiteInitPostMessage implements DigizuitePostMessage {
  messageType = MessageType.SmartPickerInitialized;
}

export class DigizuiteChangeUrlPostMessage implements DigizuitePostMessage {
  messageType = MessageType.ChangeUrl;
  mmUrl: string;

  constructor(mmUrl: string) {
    this.mmUrl = mmUrl;
  }
}

export class DigizuiteAssetPostMessage interfaceimplements DigizuitePostMessage {
  messageType: = MessageType.AssetMessage;
  mmUrl?asset: stringAssetMessage;

  constructor(asset?: AssetMessage) {
    this.asset = asset;
  }
}

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);
      }
    }
  }