hello everyone welcome to a new series for developers who are interested in developing with experience cloud and lightning web runtime sites in our fifth episode we will look at how to use content assets and metadata from salesforce cms within your lwr sites ready set go search for cms is as the name says account management system which is built on top of the salesforce platform it comes in two flavors content management within salesforce where you maintain all data directly within a salesforce environment and content management outside of salesforce where salesforce cms operates as connector to another
cms for this series we are focusing on the option to maintain content within the celtos environment and for the remainder of the video we will call just cms because well that makes it a bit easier now cms offers you a variety of capabilities you can organize your content in so-called workspaces have different content types schedule go lifetimes multi-language support and more and then you can deliver that content to your end users through a variety of authenticated or unauthenticated channels let me walk you through how that looks like for experience cloud and our sample app we
are here in our salesforce org environment to work with cms you have two options available in app launcher sas for cms and cms home personally i prefer to use the latter one so let's pick that because cms has been really built with experience cloud in mind you get an overview of the available sites like from our sample app and then you can create your workspaces where a workspace is really just a mechanism to organize your content around so let's do that we give it a name ac insurance in our case next we select the channels
that we want to deliver this content through and a channel itself is a mechanism to manage access control to your content it's visible when we click on create channel and on a per channel basis you define if the content can be publicly accessible to unauthenticated users or if it's for users behind the login additionally you can also specify if you want to serve this channel via b2c commerce page designer we won't go in depth here find in the description of this video links to some blog posts that walk you through the different use cases and
how to for example access salesforce cms content from marketing cloud so once we select the channels we can specify who of our internal users can use this workspace and also can administrate it and next we specify the available languages the default language and that's it we created our first workspace ours is now pretty empty at the moment so let's change that there are two options on how you can populate a workspace either while adding content manually using the add content action or via an import action as we have plenty of content prepared we will use
the later one and upload our content there are two types of content image assets and rated text content so we have to run two imports it is a really straightforward process and takes for our data only a minute or so now in case you wonder why we are doing this all through a user interface and not an api this is because there is no api for this which means creating and maintaining cms always needs interaction through an org that includes creating and or uploading content as there's also currently no api for this as our content
is now imported we can maintain it for example let's filter for carousel images and select the first entry this is the content that is displayed on the home page of the marketing site within our carousel component i want to highlight here the different metadata that you see like the button label custom image and so on this is available because we defined the custom content type carousel image based on our business needs it is important to know that you can't create custom content types through the built-in user interface if you want to have your own types
there are two options the first one if you prefer a user interface is to use the cms content type manager app from the salesforce app exchange the link to that one is posted in the description below the second option which i prefer is to use metadata content types are stored in a salesforce environment using the manage content type metadata type we look here at the metadata definition of the carousel image content type that was just on screen and working with that is really simple a field is represented here as a managed content node types node
in xml like the definition of the title or text or an image and compared to workspaces channels or content a managed content type can be programmatically created within a salesforce environment for example with the metadata deployment like with the salesforce cli you can create one now once you have all your content in an environment how do you actually access it within an lwr site and that's what we will look at next if you watched the previous video about custom navigation you may remember that we used the visual property editor to manage the behavior of our
navigation and the same can be done for cms content like for our carousel we can specify which content actually should show up on the carousel you will notice that we have a specific user interface which already filters for carousel images and this can be defined in the metadata definition of our lightning web components when we zoom in on the first property you will see the two key configurations first the type of the property is content reference which tells the property editor to actually display the cms content selector and second we specified a filter for our
custom content type so that we can only select this specific content type for this specific component because eventually we rely on content type specific metadata for our component now you learned so far how to set up cms and how to ensure that anyone can select your cms content for your custom lightning web component next we will explore what code we have to write the selected content is stored as metadata associated within our custom component on our site we're looking here at the page definition within our experience bundle and the content id value of our selected
cms content is stored as a component attribute value note that these values are preserved in your experience bundle so when you change a component attribute in general and then retrieve that metadata to your local project it will be stored in source format that may cause challenges when you don't have the same cms content imported in the environment where you deploy your site to we can now use the configured content id value to retrieve the metadata and data of our cms content for that we use within our sample app a single apex method get content in
this iteration of the sample app we designed that apex method to take in a couple of parameters like the content id language or filtered by content type what is really neat is that you can access cms wire apex using the connect api we provide the manage content class which has different methods to query cms and in our sample app we use the method to query by content key this method gives us in return a managed content version collection of all content notes based on our selection criteria the full documentation of the manage content class is
linked below in the description and that you will also find the other methods to query all content by channel by id and so forth in our lightning web component we then call that epics method for example for a specific content id in return we get a json object with the data and metadata of the query content and every node type that is configured can be directly accessed by its node name and then we can then access its value property there is one special thing to hide about images which are obviously the most visual asset images
have an auto-generated property unauthenticated url which gives direct access to the image for unauthenticated users on public channels to effectively use cms images in your custom lightning web component you will have to construct the url by prepending sf sides c to the unauthenticated url and if you want to make your component fail-safe you will also add the base path in case you have not worked with that it is an out of the box import that gives you programmatic access to the current base path of the current site this ensures that the component is agnostic to
your site's configuration with or without a base path after its domain now this is how you can use salesforce cms with lwr sites compared to other templates you don't have access to pre-built cms components and that's okay because this is a build your own template with a couple of lines of code you can use the connect api to query all your cms content and bring it into your site thanks so much for viewing feel free to like the video and see you next time when we talk about using experience cloud specific navigation with lwr sites
never miss an episode by subscribing and turning on your notifications
