Sitecore Connect™ for Sitecore DAM 2.0.0 is flawed

on

During the last week two colleagues of mine were busy with connection their local Sitecore XP to their Content Hub environment. It didn't go as easy as one would expect. They run into a couples of problems quite fast.

In this blog post I will give some advice on how to setup your DAM connector in Sitecore XP. This article is based on the installation manual that can be found on the Sitecore Content Hub documentation portal. The manual contains detailed information about every step.

After completing the installation manual they found two problems. The first problem was that they could not select an image in the Content Hub on the public links popup in a Rich Text Editor. The second issue after selecting an image in an image item, that would result in a 404.

Lets start with the first problem. In the Overview article you can see how to select an image. First open up the Rich Text Editor. Then select the Insert from Sitecore DAM icon icon in the toolbar. This will open up a popup with an iFrame that show the approved assets of the Content Hub.

Then it's only a matter of finding the resource you would like to use and (create and) select the public link for it. As easy as that. Their was only one problem. In the documentation the button in the image below, clearly is titled "Select" in stead of "Copy link".

So lets try to figure out what was actually wrong. After showing me their problem, I started setting up my own system. Working my way through the documentation I found the follow text, look at the block in red.

This caught my eye, because it states that the pages has changed since the Content Hub 3.2.1 version. As we are now using the newest 3.4.1 version, the link could also be different for us. This would suggest that Sitecore created a custom page for the Sitecore XP module to be used. And indeed Sitecore created two custom pages for the module. You can find the pages under "Manage -> Pages". Scroll down the page until you find Sitecore DAM connect. Click on the arrow behind the name. Their you will find the two custom pages. The "Approved assets" and the "Pending approval" pages.

The only thing we needed to fix is the DAM connector configuration in Sitecore XP. So we open up the Content Editor of your Sitecore XP instance. Click open the content tree to "Sitecore -> System -> Modules -> DAM -> Config". Update the SearchPage with the link to the approved assets page.


This update fixed their first issue with the Rich Text Editor. The other issue was not solved, and still showed the 404. So lets continue with the next issue. Sitecore also allows you to add an image as a direct content item on the data model. In this way the Content Hub will work different from how it works with the Rich Text Editor.

Let start with the problem. Go to the Content Editor in Sitecore XP and open up the Sample Item below the Home node. It contains an Image item by default. When we click on the "Browse Sitecore DAM" link, it will open a pop-up where we can select our asset. Then select the rendition of the asset that you want and wait for it to load. Boom, there is the 404 not found error.

Where does this come from? To make a long story short, I opened the debug window in Chrome. Looked at all the traffic and found the 404 error rather fast. At first the link looks OK. When looking closer at the link you can see that the base url and the path start with a double forward slash. See the url below.

https://demo-macaw.stylelabs.io//api/gateway/29998/thumbnail

After changing the url to a single forward slash, the url works as expected. So I opened up the module package and looked for api/gateway in the files. I found two references of the gateway:
Sitecore Connect for Sitecore DAM-2.0.0.zip\package.zip\files\sitecore\shell\client\Applications\MApp
  • main.bundle.js
  • main.bundle.js.map
In the Javascript "main.bundle.js" file you can find the following code. There it will build the url that is used in the image item. As you can see the url is not validated what so ever.


After checking my configuration of the DAM Module in Sitecore XP. I spotted the problem right away. The DAM instance url ended with a forward slash. The JavaScript doesn't take a forward slash into consideration and therefor creates a invalid url in the end. The easy fix is remote the forward slash and be done with it.


But that's the easy way of doing things. I really believe that an end-user should be helped and not bothered with this. I therefor created a newer version of the module. In stead of simply stitching a string together, it will first create and URL object that solves the issues. The code line is below.

dialogResult.thumbnail = new URL("/api/gateway/" + event.data.selected_asset_id + "/thumbnail", _this.baseUrl).href;

The new version of the DAM connector can be downloaded here:

Sitecore Connect for Sitecore DAM-2.0.1.zip

This blogpost was made possible Gintaras Jasaitis and Jaroslav Miliunec.