Spring'21 Use CMS Content in LWC

Question

I wanted to add an image ( CMS Managed ) to a lightning web component. here does my code look like

TestCMS.html

<template>  
<img data-contentkey={contentId}>  
</template>

TestCMS.js

import { LightningElement, api } from 'lwc';
export default class HelloWorld extends LightningElement {
@api contentId = '';
}

TestCMS.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="testCMS">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
    <target>lightningCommunity__Page</target>
    <target>lightningCommunity__Default</target>
</targets>
<targetConfigs>
    <targetConfig targets="lightningCommunity__Default">
        <property type="ContentReference" name="contentId" label="Content ID" filter="cms_image"/>
          
  </targetConfig>
</targetConfigs> </LightningComponentBundle>

I have used ContentReference property as mentioned in the release notes : https://help.salesforce.com/articleView?id=release-notes.rn_experiences_use_cms_in_custom_lwc.htm&type=5&release=230

My intention is to add this page to the community using the experience builder, when you do you can add content from your Salesforce CMS to your custom LWC.

The main query that still remains is that I am able to fetch the content Id of the CMS Content but how to actually refer it on the html ?.

Answer 1

The ContentReference property type returns a contentKey when a specific piece of content is selected for the component. A content key is a universally unique identifier (UUID) such as MCA4CCV5QS2BAB5H7YRCRPTCWGZQ.

You can take this key and pass it as an argument to a method in your apex controller which calls the getManagedContentByContentKeys method provided in the ManagedContent Class. https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_ConnectAPI_ManagedContent_static_methods.htm

You can then assign the received data to a variable in your JavaScript file which can be used in you HTML.

JavaScript-

@api contentId;


  @wire(getManagedContentByContentKeys, { communityId: Id, managedContentIds: this.contentId, pageParam: 0, pageSize: 1, language: 'en_US', managedContentType: 'news', showAbsoluteUrl: false })
  managedContent({ error, data }) {
    if (data) {

      // Assign data to a variable which you can use in your HTML.
      
    } else if (error) {
      
     // Handle the error. 
    }
  }

Apex method-

@AuraEnabled(cacheable=true)
  public static ConnectApi.ManagedContentVersionCollection getManagedContentByContentKeys(String communityId, String[] managedContentIds, Integer pageParam, Integer pageSize, String language, String managedContentType, Boolean showAbsoluteUrl){
    return ConnectApi.ManagedContent.getManagedContentByContentKeys(communityId, managedContentIds, pageParam, pageSize, language, managedContentType, showAbsoluteUrl);
  }