CMP DAM Asset Picker in CMS

Package prerequisites

• EPiServer.CMS.Core 12.8.0 or later
• EPiServer.CMS.UI 12.9.0 or later

Install the Optimizely CMP integration package

1. Enter the following command to install the Optimizely Content Marketing Platform (CMP) integration package.

   $ dotnet add package EPiServer.CMS.WelcomeIntegration.UI
   

2. In Startup.cs add following line:

   services.AddDAMUi();
   

Configure the Optimizely CMP integration

See also Integrate CMP DAM Asset Picker in CMS.

You can customize the integration in theEPiServer\Cms section of application.json:

{  
  "DAMUi" : {  
    "Enabled"  : true,  
    "Settings" : {  
      "Welcome" : {  
        "IconClass"      : "dijitNoIcon",  
        "AvailableTypes" : "episerver.core.imagedata",  
        "StoreName"      : "episervercmsdamcontentcreation",  
        "Endpoint"       : "https://app.welcomesoftware.com",  
        "PathAndQuery"   : "/cloud/library-picker?assetTypes=image"  
      }  
    }  
  }  
}

• IconClass – Choose an icon class. Default: dijitNoIcon.
• Availabletypes – Specify the new editor command that is added only if it is (or inherited from) one of the available image types. Default: episerver.core.imagedata so properties that let you add an image have the new command.
• StoreName – Specify the server side code (with your new store) into which you can add your business logic. Default: episervercmsdamcontentcreation.
• EndPoint – Specify the end point to transform the root DAM domain for each environment you have (inte, preprod or prod) Default: app.welcomesoftware.com.
• PathAndQuery – Specify the path and query so that you can add default filters for the DAM library picker by image, video or all. Default: image.

Configure the connection to CMP

📘

Prerequisite

Install Optimizely.Cmp.Client.

An optional parameter to the AddDAMUi method lets you provide credentials.

services
  .AddDAMUi(
    o => o.Enabled = true,
    o =>
    {
      o.ClientId = "YourApplicationClientId";
      o.ClientSecret = "YourApplicationClientSecret";
    }
  );

You can also provide the Client ID and Client Secret via appsettings.json, as the second parameter in an Options configuration: CmpClientOptions.

📘

Note

Available only in CMS 12, Optimizely supports images, videos and some files, such as PDFs, Word Documents, Excel Spreadsheets, Zip and 7Zip files. In the case of files, an anchor tag is rendered to link to that specific file.

You have the following options to use this feature:

• Use the provided C# service to get the metadata from CMP by injecting the IDAMAssetMetadataService where you want to use it.
  The IDAMAssetMetadataService contains one method, GetAssetMetadata(Guid id), which retrieves metadata from CMP using the GUID of a specific asset. This GUID can be found within the information dialog of any asset in CMP.
• Use the HtmlHelper extension method, RenderTagWithMetadata which renders an appropriate HTML tag, based on retrieved asset.
  To use it, import @using EPiServer.Cms.WelcomeIntegration.UI.Helpers; inside a .cshtml page of choice, and use the page model that contains a ContentReference property.
  Then, call @await Html.RenderTagWithMetadata(x => x.YourWelcomeContentReference) with an expression that provides a ContentReference. You should link this ContentReference to a CMP Asset.
  Your page should now render either an image, a video or a link to the supported file with the respective metadata attached to the HTML tag.
• Use the TagHelper called DAMAssetTagHelper, which does the same thing as above but is used a bit differently.
  To use it:
  1. Add the tag helper in your \_ViewImports.cshtml file:@addTagHelper \*, EPiServer.Cms.WelcomeIntegration.UI.
  2. Add \<dam-asset content-reference="@Model.YourWelcomeContentReference"/> to your .cshtml page of choice.
     Your page should now render either an image, a video or a link to the supported file with the respective metadata attached to the HTML tag.

The following example shows HtmlHelper and TagHelper on Alloy site:

@using EPiServer.Cms.WelcomeIntegration.UI.Helpers;
@model PageViewModel<StandardPage>
  
  Using HtmlHelper
  @await Html.RenderTagWithMetadata(x => x.CurrentPage.WelcomePageImage)
                                    
  Using TagHelper
  <dam-asset content-reference="@Model.CurrentPage.WelcomePageImage"/>         

The result is shown in the following image.

Configure security headers

If your site uses content security policy (CSP) headers ensure that https://app.welcomesoftware.com is included to prevent errors in the CMS UI when selecting assets.

Related topics

📘

Looking for installation on CMS 11?

See Install the Optimizely DAM Asset Picker (for CMS 11).

• Optimizely CMP DAM Asset Picker
• Configuration
• Cms section