1

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 ?.

1 Answer 1

3

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);
  }
1
  • How do you actually get the contentKey / content id ? I have an image in the product2 object in a B2B Commerce Cloud (Lightning) environment in the Media Tab -> as far as i understand it is part of the CMS data/ProductMedia Object. Basically my question how do i get the content key from the product2 cms media tab list image?
    – owsata
    May 18 at 9:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.