AMS integration with On-Prim instance for Accessing Assets

Avatar

Avatar
Boost 3
Level 2
chitranshs90502
Level 2

Likes

3 likes

Total Posts

14 posts

Correct reply

0 solutions
Top badges earned
Boost 3
Give Back
Ignite 1
Boost 1
Validate 1
View profile

Avatar
Boost 3
Level 2
chitranshs90502
Level 2

Likes

3 likes

Total Posts

14 posts

Correct reply

0 solutions
Top badges earned
Boost 3
Give Back
Ignite 1
Boost 1
Validate 1
View profile
chitranshs90502
Level 2

28-06-2021

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:

chitranshs90502_0-1624591420373.jpeg

chitranshs90502_1-1624591420381.jpeg

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. 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Affirm 50
Employee
markus_bulla_adobe
Employee

Likes

169 likes

Total Posts

153 posts

Correct reply

70 solutions
Top badges earned
Affirm 50
Boost 100
Applaud 25
Affirm 25
Boost 50
View profile

Avatar
Affirm 50
Employee
markus_bulla_adobe
Employee

Likes

169 likes

Total Posts

153 posts

Correct reply

70 solutions
Top badges earned
Affirm 50
Boost 100
Applaud 25
Affirm 25
Boost 50
View profile
markus_bulla_adobe
Employee

29-06-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); ​

 

Screenshot 2021-06-29 at 10.11.22.png

  • Use the UI to select an asset and click the "Select" button on the top right
    Screenshot 2021-06-29 at 10.12.43.png
  • 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, … }​

Screenshot 2021-06-29 at 10.13.52.png

 

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.

Answers (0)