Over the last several blog posts, you’ve learned how Capricorn’s content team and site designers use Salesforce CMS to create content, curate content for their main website, and display content in visually engaging ways. Now, the Capricorn team wants to reuse some of their content, such as the promotional content shown below, on their B2B website (a Visualforce Community) as well. They do this using the Content Delivery API. In this blog post, we’ll learn how Capricorn uses the Content Delivery API and how you can follow the same steps to take advantage of the Content Delivery API.
The Content Delivery API enables you to retrieve content from Salesforce CMS and use it to build and deliver custom experiences. You can use the API to help build components in Lightning as well as reuse content from Salesforce CMS in Visualforce pages.
Prerequisites
- Create and Set Up Communities User permission is enabled.
- User is a member of the Experience/Community where this content is published.
- The Workspace where the content is published is active and shared to the Experience/Community.
- Must have access to Salesforce API.
API
The Content Delivery API is read-only with the following signature.
EndPoint
URL
URL parameters
| Param Name (New Only) | Required? | Values | Description | Since | Group |
| managedContentType | YES | String | The developer name of the managed content type. | 47 | – |
| managedContentIds | NO | List<String> | List of Managed content ids with the max limit as 200 | 47 | – |
| topics | NO | List<String> | List of topics with the max limit as 15 | 47 | – |
| page | NO | int | An integer specifying a page of items. The default value is 0, which returns the first page | 47 | – |
| pageSize | NO | int | Specifies the number of items per page. Valid values are from 1 through 250. The default value is 25 | 47 | – |
| language | NO | String | Specifies the language of the content. | 47 | – |
You can find more details about the API here.
Note: The Content Deliver API is supported from API Version 47.0.
There are three available approaches to using the Content Delivery API. The Capricorn team used all of them. These examples can help you decide how you want to build your customized experiences.
Approach 1: Visualforce page with CMS content inside a Visualforce Community
Prerequisites
The content you’re retrieving using the Content Delivery API is published to a community.
Step 1: Create a Visualforce-based community
Use case: The example uses Capricorn’s B2B Commerce Community. Like Capricorn, you want to customize a site by adding tabs for each content type. You can use the Content Delivery API and Visualforce. This approach is helpful if you’re already using a Visualforce-based community.
If a community is created from a Visualforce page, select the Salesforce Tabs + Visualforce template to create the community.
Step 2: Embed the custom code
Create custom code using the example code snippet. This example shows adding an Apex class that integrates the Content Delivery API and uses the contenttype (‘news’) parameter to return content.
Add a Controller Class (MCApexController) that calls the Content Delivery API as shown in the code snippet.
Add a page block in an Apex page (ManagedContent) that invokes the method defined in the Apex class and returns the content.
Create a custom tab, then configure the Apex page that corresponds to that tab.
You can add custom tabs into a Visualforce community page from the community workspaces tab.
From the experience community URL, you can see that you published content to the community in a flexible and customized way.
The same Visualforce page can be included in the B2B Commerce Order Confirmation page, using Module Body Includes in B2B Commerce Configuration settings. The following is an example of how CMS content looks inside B2B Commerce.
Approach 2: Bespoke Aura component with CMS content in Lightning Community
Now the Capricorn team wants to customize the site so that the user provides the contenttype and contenttypeid as input. That way, the user will only be able to see content based on that input. Capricorn can do that by using component-based development. The component created can be reused in multiple communities and can coexist with other components.
Capricorn used the following steps to create an Aura component that uses the Content Delivery API. You can follow the same steps.
Step 1: Create an Aura component bundle with contenttype and contentID user input
Create an Apex class that calls the Content Delivery API to get content.
Create an Aura component “McComponent.cmp” markup that the displays content.
Create an Aura controller for the component markup to the display content.
Create an Aura component bundle that displays the content fetched via the Content Delivery API in a customized format.
Create an Aura component ‘RetrieveMcComponent’ that uses the contentType and ContentId input.
Create an Aura Controller that fetches content from ContentType and ContentId.
The components you created can now be added into an experience/community from experience builder.
Step 2: Add Aura component to community or app
Add the components you created to the community using the experience builder. Then publish the community.
When accessing the community URL, the user will be able to access the content by providing contenttype and contentId in a flexible and customized way.
More details of adding an Aura component can be found in here.
Approach 3: Bespoke Lightning Web Components (LWC) with CMS content in Lightning Community
Now the Capricorn team wants to customize the site using Lightning Web Components, which has performance improvements compared to Aura Components. The user will be able to see content created in CMS in Lightning Communities in more customized way. The component created can be reused in multiple communities and can coexist with other components.
Capricorn used the following steps to create a Lightning Web component that uses the Content Delivery API. You can follow the same steps.
Prerequisites:
The content you’re retrieving using the Content Delivery API is published to a community.
Step 1: Create a Lightning WebComponent bundle with Content fetched from CMS via Content Delivery API
Create an Apex class that calls the Content Delivery API to get content.
MCWrapperController.cls-meta.xml
Create an LWC component bundle with folder name “cmsContent”. Create “cmsContent.js” which uses @wire to call an Apex class and get content.
cmsContent.js
cmsContent.js-meta.xml
Specify target as <target>lightningCommunity__Page</target> to make the component available in Community Builder.
cmsContent.html
Deploy the Lightning web component using SFDX to the Salesforce org. More details about deployment can be found here.
The component created can now be added into the community from experience builder.
Step 2: Add the LWC component to the community using the experience builder
Add the LWC component created to the community using the experience builder. Then publish the community.
More details of adding a Lightning web component can be found here.
The Content Delivery API provides more flexibility and an extensible way to use content to build a richer experiences for customers.
References
Blog posts in this series
- Deliver Beautiful and Contextualized Digital Experiences with Salesforce CMS
- Use the CMS App to Create Content
- Content Curation in Salesforce CMS
- Use Layouts to Unleash the Power of CMS
About the author
Pradeep Kumar Saraswathi
Pradeep is working as LMTS at Salesforce.org, based in Hyderabad, India. He has been working on UI for the last several years architecting, developing and improving User Experience. You can connect with Pradeep on LinkedIn.