Configure a Content Selector From Scratch

If you prefer to create your own content selector for Salesforce CMS that connects an external content system, these are the main steps involved.

Define the DgtAssetMgmtProvider type, which provides basic provider information.
Create a LightningComponentBundle that implements a user interface for the external content provider in the CMS content editor.
Configure the DgtAssetMgmtPrvdLghtCpnt type, which links the external provider to the component.
Set up DgtAssetMgmtProviderInstance for the runtime configuration. See CMS Digital Asset Management Providers in the Connect REST API Developer Guide.
Deploy and test the complete integration.

Create an Instance of the Provider

To create a provider instance, you can use Apex code. You can create multiple provider instances, each using its own URL and Lightning web component, but there can be only one default instance.

In this Apex example:

Replace yourProviderLabel with the name of your provider’s label.
Replace the value assigned to input.namewith the name of your instance.
Replace the value assigned to input.instanceUrl with the URL of your instance.

1String providerLightningComponentId = null;
2String yourProviderLabel = 'MyProvider1';
3
4// retrieve the ID of the 'DgtAssetMgmtPrvdLghtCpnt' component with the matching label 'MyProvider1'
5ConnectApi.ManagedContentProviderCollection providerCollection =
6   ConnectApi.ManagedContent.getManagedContentProviders();
7if (providerCollection != null) {
8    List<ConnectApi.ManagedContentProvider> providers = providerCollection.providers;
9
10    for (ConnectApi.ManagedContentProvider provider : providers) {
11        if (yourProviderLabel.equals(provider.label)) {
12            providerLightningComponentId  = provider.providerLightningComponentId;
13            break;
14        }
15    }
16}
17if (providerLightningComponentId == null) {
18    return;
19}
20
21// create the default instance
22ConnectApi.ManagedContentProviderInput input = new ConnectApi.ManagedContentProviderInput();
23input.name = 'MyProvider1-DefaultInstance';
24input.instanceKey = 'www.salesforce.com';
25input.isDefault = true;
26input.providerLightningComponentId = providerLightningComponentId;
27
28ConnectApi.ManagedContentProviderInstance providerInstance =
29       ConnectApi.ManagedContent.createManagedContentProvider(input);

Lightning Web Component Interaction

A JSON object with the following context property shape is set on the custom Lightning component instance when created from the component definition.

1context: {
2  spaceId: ‘0ZuZ600000000YCKAY’,    // the CMS Enhanced Workspace ID
3  mediaType: ‘IMAGE’,  // the requested media type
4  instanceKey: ‘https://salesforce.com/assets’ // the key that uniquely identifies the provider instance
5}

Media Types

Name	Value	Preview Available
Audio	AUDIO	Yes
Document	DOCUMENT	No
Image	IMAGE	Yes
Video	VIDEO	Yes

Context Properties

Property	Type	Description	Constraints
`spaceId`	string	CMS Enhanced Workspace ID	Standard 18 characters
`mediaType`	string	Requested media type	One of Media Type values
`instanceKey`	string	A key that uniquely identifies the Digital Asset Provider instance	Max 255 characters
`isBuilder`	boolean	Indicator to determine whether the context is launched from Experience Builder

Asset Selection Event

When the user selects an external asset, your custom Lightning web component must fire an assetselected event with a payload that can be associated with the CMS content item, such as in this example.

1handleAssetClick({ currentTarget: { dataset: { id } }) {
2    const selectedAsset = this.assets.find(asset => asset.id === id);
3    const {altText, id, slug, title} = selectedAsset;
4
5    this.dispatchEvent(new CustomEvent('assetselected', {
6        detail:  {
7            url: selectedAsset.imageUrl,  // e.g. ‘The Hamptons Chair’
8            contentInfo: {
9                externalId: id, // e.g. “asset-12345”,
10                title, // e.g. ‘https://images.unsplash.com/photo-1501045661006-fcebe0257c3f?q=80&w=800&auto=format&fit=crop’,
11                altText, // e.g. Comfort Chair,
12                urlName: slug // e.g. comfort-chair
13            }
14        }
15    }));
16});

Event Detail Payload

Event	Property	Type	Required	Constraints
assetselected	`url`	string	Yes	Max 2000 chars.
	`contentInfo.title`	string	Yes	Max 255 chars
	`contentInfo.altText`	string	No	Max 255 chars
	`contentInfo.externalId`	string	No	Max 255 chars. Every asset click will be treated as new content if externalId is not provided.
	`contentInfo.urlName`	string	No	Max 255 chars, alphanumeric content slug with lowercase letters, and without spaces (use hyphen instead). Will be derived from title if not provided