AMS integration with On-Prim instance for Accessing Assets | Community
Skip to main content
C
chitranshs90502
Level 2
June 29, 2021
Solved

AMS integration with On-Prim instance for Accessing Assets

  • June 29, 2021
  • 1 reply
  • 3147 views

Hi All, We have a requirement where we need to access Digital Assets store in On Prim AEM Author from AMS author using asset selector/picker.

Check below SS for example:

Essentially all the assets will be stored in On Prim AEM instance and we should be able to search, access and use those assets in AMS Instance. 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by MarkusBullaAdobe

Hi @chitranshs90502!

In general, there are two approaches to the outlined requirement.

  1. Using the AEM Asset Selector (formerly know as Asset Picker)
  2. Integrating the two AEM installations via the Connected Assets feature

Option 1 is a low-effort, loosely coupled approach. You just call the according UI from your Sites instance and get metadata of the selected asset(s) back, incl. the assets URL and use that information in your Sites instance.

Option 2 is a more sophisticated integration. Please refer to the following documentation links for more detailed information:

I understand that you want to connect

  • AEM Assets on-premise - that's where your assets are stored
  • AEM Sites AMS - that's where you want to use/consume the assets

Unfortunately, this specific setup is not supported according to the supported deployment matrix (see 2nd link).

 

So it seems that option 1 - AEM Asset Selector - is the way to go for you.

 

Update:

For Asset Selector, you can just call the AEM Assets instance at the following URL: /aem/assetpicker.html

This will bring up the Asset Selector UI. You can also provide parameters to control the dialog (see documentation). 

To retrieve the selection (and their according metadata), you need to register a listener for the HTML5 Window.postMessage method.

 

So the general integration approach for Asset Selector would be to integrate it e. g. using an iFrame to any consuming system. For that iFrame, you load the Asset Selector UI directly from the AEM Assets instance. Additionally, you need to register a listener that receives any Window.postMessage messages for the iFrame. The listener should then take care to receive and process the information from the posted message.

 

To get a feeling on how things work you may want to try it:

 

window.addEventListener('message',function(event) {console.log('message received: ' + event.data,event);},false); ​

 

  • Use the UI to select an asset and click the "Select" button on the top right
  • The received message will be logged to your browsers developer console:

 

message received: {"data":[{"path":"/content/dam/wknd-events/wknd-events.jpg","url":"http://localhost:4502/content/dam/wknd-events/wknd-events.jpg","type":"image/jpeg","title":"wknd-events.jpg","size":"96.1 KB","img":"http://localhost:4502/content/dam/wknd-events/wknd-events.jp…nt/renditions/cq5dam.thumbnail.48.48.png?ch_ck=1551357940000"}],"config":{"action":"done"}} message { target: Window, isTrusted: true, data: "{\"data\":[{\"path\":\"/content/dam/wknd-events/wknd-events.jpg\",\"url\":\"http://localhost:4502/content/dam/wknd-events/wknd-events.jpg\",\"type\":\"image/jpeg\",\"title\":\"wknd-events.jpg\",\"size\":\"96.1 KB\",\"img\":\"http://localhost:4502/content/dam/wknd-events/wknd-events.jp…nt/renditions/cq5dam.thumbnail.48.48.png?ch_ck=1551357940000\"}],\"config\":{\"action\":\"done\"}}", origin: "http://localhost:4502", lastEventId: "", source: Window, ports: Restricted, srcElement: Window, currentTarget: Window, eventPhase: 2, … }​

 

You will need to make sure that your AEM Assets instance is properly configured to return a fully qualified URL that is publicly available.

Your AEM Sites instance can then use the provided URL to reference the asset, e. g. in an image component or similar.

 

Hope that helps.

1 reply

MarkusBullaAdobe
Adobe Employee
MarkusBullaAdobeAdobe EmployeeAccepted solution
Adobe Employee
June 29, 2021

Hi @chitranshs90502!

In general, there are two approaches to the outlined requirement.

  1. Using the AEM Asset Selector (formerly know as Asset Picker)
  2. Integrating the two AEM installations via the Connected Assets feature

Option 1 is a low-effort, loosely coupled approach. You just call the according UI from your Sites instance and get metadata of the selected asset(s) back, incl. the assets URL and use that information in your Sites instance.

Option 2 is a more sophisticated integration. Please refer to the following documentation links for more detailed information:

I understand that you want to connect

  • AEM Assets on-premise - that's where your assets are stored
  • AEM Sites AMS - that's where you want to use/consume the assets

Unfortunately, this specific setup is not supported according to the supported deployment matrix (see 2nd link).

 

So it seems that option 1 - AEM Asset Selector - is the way to go for you.

 

Update:

For Asset Selector, you can just call the AEM Assets instance at the following URL: /aem/assetpicker.html

This will bring up the Asset Selector UI. You can also provide parameters to control the dialog (see documentation). 

To retrieve the selection (and their according metadata), you need to register a listener for the HTML5 Window.postMessage method.

 

So the general integration approach for Asset Selector would be to integrate it e. g. using an iFrame to any consuming system. For that iFrame, you load the Asset Selector UI directly from the AEM Assets instance. Additionally, you need to register a listener that receives any Window.postMessage messages for the iFrame. The listener should then take care to receive and process the information from the posted message.

 

To get a feeling on how things work you may want to try it:

 

window.addEventListener('message',function(event) {console.log('message received: ' + event.data,event);},false); ​

 

  • Use the UI to select an asset and click the "Select" button on the top right
  • The received message will be logged to your browsers developer console:

 

message received: {"data":[{"path":"/content/dam/wknd-events/wknd-events.jpg","url":"http://localhost:4502/content/dam/wknd-events/wknd-events.jpg","type":"image/jpeg","title":"wknd-events.jpg","size":"96.1 KB","img":"http://localhost:4502/content/dam/wknd-events/wknd-events.jp…nt/renditions/cq5dam.thumbnail.48.48.png?ch_ck=1551357940000"}],"config":{"action":"done"}} message { target: Window, isTrusted: true, data: "{\"data\":[{\"path\":\"/content/dam/wknd-events/wknd-events.jpg\",\"url\":\"http://localhost:4502/content/dam/wknd-events/wknd-events.jpg\",\"type\":\"image/jpeg\",\"title\":\"wknd-events.jpg\",\"size\":\"96.1 KB\",\"img\":\"http://localhost:4502/content/dam/wknd-events/wknd-events.jp…nt/renditions/cq5dam.thumbnail.48.48.png?ch_ck=1551357940000\"}],\"config\":{\"action\":\"done\"}}", origin: "http://localhost:4502", lastEventId: "", source: Window, ports: Restricted, srcElement: Window, currentTarget: Window, eventPhase: 2, … }​

 

You will need to make sure that your AEM Assets instance is properly configured to return a fully qualified URL that is publicly available.

Your AEM Sites instance can then use the provided URL to reference the asset, e. g. in an image component or similar.

 

Hope that helps.

    C
    chitranshs90502Author
    Level 2
    June 29, 2021
    Hi @markusbullaadobe , thanks for your response. Yes Option-2 is not supported in our scenario. We are looking into solutions arround asset selector only. "You just call the according UI from your Sites instance and get metadata of the selected asset(s) back, incl. the assets URL and use that information in your Sites instance.": Can you please elaborate Option-1 little bit more. I mean how to call according UI from Sites Instance and how can we use assets URL for Asset Selector. Does this require some custom code or some configuration changes. Thanks.
      Terms & ConditionsAccessibility statement

      Loading footer...