Content Update

Please check the latest information on the following page

• Sitecore Connect for Content Hub

Official document

The procedure is available on the official page.

• Enabling Sitecore CMP and DAM in Sitecore XM Cloud

Enable Connector

When using XM Cloud, the procedure for integrating connectors will be different from the traditional environment because it will be SaaS. Sitecore Content Hub offers DAM and CMP integration as a standard feature, and it is very easy to enable this functionality. In this article, we will introduce the procedure for DAM integration.

The official procedure is as follows

• Walkthrough: Enabling the DAM connector in XM Cloud on Sitecore Cloud Portal

First, select the environment you wish to configure in XM Cloud Deploy and choose Variables from the tab menu item.

Add the following two items, where Target is all CM

For information on how to find out the above parameters, please refer to our previous article.

• Sitecore Connect for Content Hub 5.0 Install

The dialog while working on the addition will proceed as follows. The target is CM only.

After setting up, the following items are added.

Preparation is now complete. Select Build & Deploy from the Option menu displayed in the upper right corner of the above screen to deploy the CM server again.

After the Build is completed, the following steps will be taken to confirm the results.

• Access to the management tools
• Launch Content Editor
• Open the Rich Text section of an item in Home
• The fifth button from the left shows the DAM icon

However, it still does not work due to some missing settings.

For the project repository, create a Web.config.xdt file under /src/platform/Xdts and add the following code

<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
    <location path="sitecore">
        <system.webServer>
            <httpProtocol>
                <customHeaders>
                    <add xdt:Transform="SetAttributes" xdt:Locator="Match(name)" name="Content-Security-Policy" value="default-src 'self' 'unsafe-inline' 'unsafe-eval' https://apps.sitecore.net https://*.sitecorecloud.io https://*.stylelabs.io https://*.stylelabs.cloud https://*.stylelabsdemo.com https://*.stylelabsqa.com https://*.stylelabsdev.com https://*.sitecoresandbox.cloud https://*.azureedge.net https://stylelabs.eu.auth0.com https://login.windows.net https://login.microsoftonline.com https://*.boxever.com https://*.xmcloudcm.localhost wss://www.xmcloudcm.localhost https://ipv4.jsonip.com; img-src 'self' data: https://s.gravatar.com https://*.wp.com/cdn.auth0.com/avatars https://*.sitecorecloud.io https://*.stylelabs.io https://*.stylelabs.cloud https://*.stylelabsdemo.com https://*.stylelabsqa.com https://*.stylelabsdev.com https://*.sitecoresandbox.cloud https://*.azureedge.net https://*.xmcloudcm.localhost; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://*.sitecorecloud.io; font-src 'self' 'unsafe-inline' https://fonts.gstatic.com https://*.sitecorecloud.io; frame-ancestors 'self' pages.sitecorecloud.io pages.sitecore.io symphony.sitecorecloud.io explorer.sitecorecloud.io https://pages.sitecorecloud.io https://*.xmcloudcm.localhost https://*.sitecoredemo.com; block-all-mixed-content"/>
                </customHeaders>
            </httpProtocol>
        </system.webServer>
    </location>
</configuration>

To include this file in your project, add the following code to the file src¥platform¥Platform.csproj in ItemGroup (only one line needs to be added in Content include).

<ItemGroup>
    <Content Include="xdts\Web.config.xdt" />
    <None Include="Platform.wpp.targets" />
    <None Include="Properties\PublishProfiles\Local.pubxml" />
    <None Include="README.md" />
    <None Include="web.config" />
</ItemGroup>

Please add the following code to the file xmcloud.build.json to apply this file when building.

    "transforms": [
    {
        "xdtPath": "/xdts/web.config.xdt",
        "targetPath": "/web.config"
    }
    ]

Apply the above code, reflect it on GitHub, and run Build & Deploy again. Errors will continue to appear, but this is due to missing settings on the Content Hub side. Please execute the next step.

Sitecore Content Hub Settings

In order to get it to work within the administrator's screen, we need to put the URL of the tool into the CORS configuration: with Content Hub administrator privileges, open the configuration screen under Manage - Settings, then PortalConfiguration - CORSConfiguration PortalConfiguration - CORSConfiguration.

We will add the following items so that we can run it in the local environment as well: The first item is the Environment host name as it appears in XM Cloud Deploy , matching the administration screen.

• https://xmc-yourinstance.sitecorecloud.io/
• https://pages.sitecorecloud.io/
• https://xmcloudcm.localhost/

This completes the setup.

Check operation with XM Cloud editing tools

Make sure you have completed the setup and access the XM Cloud environment. First open the rich text editor's edit window to select a media file, then click on the Content Hub icon. After a few moments, click on the dialog and you will see the following to confirm that it is not blocked.

You may have a pop-up blocker regarding login. If this is the case, please unblock the pop-up, or move the login click on the screen. Once you have logged in, you will see your DAM assets and be able to use search and other functions.

We will also check the operation from the Pages tool. Click on the area where the image is used, and you will see a button to change the image in the edit area on the right.

Clicking on the Change button brings up the image selection screen. Two tabs, Media Library and Content Hub, are displayed, so clicking on Content Hub allows you to select images as you did in the Content Editor.

Local Environment Settings

The next step is to make Content Hub DAM accessible to the local environment running on Docker.

The procedure is described in the following pages, but one point is missing and will be included in this blog.

• Walkthrough: Enabling the DAM connector in XM Cloud on Docker

First follow the steps and add the following parameters to .env

SITECORE_AppSettings_damEnabled__define=Yes
Sitecore_DAM_ContentHub=ClientId=ClientId={client_id};ClientSecret = {client_secret};UserName={username};Password={password};URI={uri};
Sitecore_DAM_SearchPage={Sitecore Content Hub search page URI}
Sitecore_DAM_ExternalRedirectKey=Sitecore

Set the parameters according to the server environment, except for the first and fourth lines, which should be the same as the values you set for XM Cloud.

Simply setting this value does not allow either docker-compose.yml or docker-compose.override.yml files to reflect the above value. Therefore, please add the following code to the enviromnent for the cm role in docker-compose.override.yml

      SITECORE_AppSettings_damEnabled__define: ${SITECORE_AppSettings_damEnabled__define} 
      Sitecore_ConnectionStrings_DAM_dot_ContentHub: ${SITECORE_DAM_ContentHub} 
      Sitecore_ConnectionStrings_DAM_dot_SearchPage: ${SITECORE_DAM_SearchPage} 
      Sitecore_ConnectionStrings_DAM_dot_ExternalRedirectKey: ${SITECORE_DAM_ExternalRedirectKey} 

Now you can pass the values set in the .env file to the container.

Next, the Content-Security-Policy needs to be changed. Copy the same Web.config.xdt file that was created for XM Cloud to docker\build\cm\Xdts\Web.config.xdt.

Then, to reflect this file when building, please add the following code to the docker\build\cm\Dockerfile file.

# Copy Xdts
COPY .\Xdts\ .\Xdts

# Perform transforms
RUN (Get-ChildItem -Path 'C:\\inetpub\\wwwroot\\xdts\\web*.xdt' -Recurse ) | `
    ForEach-Object { & 'C:\\tools\\scripts\\Invoke-XdtTransform.ps1' -Path 'C:\\inetpub\\wwwroot\\web.config' -XdtPath $_.FullName `
    -XdtDllPath 'C:\\tools\\bin\\Microsoft.Web.XmlTransform.dll'; };

The preparation is now complete. Start the container with the following command

docker compose build
docker compose up -d

If there are no errors, move on to the operation check.

Confirmation of local operation

For the local server, go to https://xmcloudcm.localhost/sitecore. Then, as with XM Cloud, launch the content editor and validate using the rich text field.

The fifth icon from the left to access the Content Hub DAM is shown.

Clicking on the button will display the login screen, followed by the screen for the list of DAM assets.

We were able to confirm that they are connected safely.

Summary

In this article, we introduced the XM Cloud environment and the procedures for integrating it with Content Hub DAM. As for digital assets, XM Cloud has a media library, but by directly using assets from Content Hub DAM, it is possible to utilize DAM assets on the Web.

Related article

• Enabling Sitecore CMP and DAM in Sitecore XM Cloud
• Walkthrough: Enabling the DAM connector in XM Cloud on Sitecore Cloud Portal
• Walkthrough: Enabling the DAM connector in XM Cloud on Docker
• Sitecore Connect for Content Hub 5.0 Install

Tags

• XM Cloud
• Digital Asset Management
• Operations