Salesforce Experience Cloud - How to use Salesforce CMS in a Community and use CMS Connect

what's up everybody i'm matt gary and in this episode of coding with the force we're gonna go over how to set up a cms site using experience builder in salesforce [Music] all right guys so today we're gonna figure out how to set up our content management system or cms in salesforce and uh distribute that content through the use of an experience builder site or basically a salesforce website so um the first thing that you're gonna do is sign up for your salesforce developer edition org if you haven't already um you can do so for free at developer.salesforce.com sign up most of you that watch these episodes typically will know how to do this but just in case you didn't know you can sign up for one for free the next thing that we'll do once you've signed up for your free org is of course log into your org and what we'll want to do first is create a permission set for our user or users that are going to be creating the content for our cms right so we'll create a new permission set and we'll just call this a cms user or something you could also do this through a profile but i'm more of a permission set guy myself uh and we'll give it a description of perm set for users who utilize cms and sf i don't know and we will need to give this a license because we have to give these users access to tabs if you didn't know if you create a permission set without a license uh you're gonna have some difficulty uh setting this up you can't you can't give them access to tabs without a license so we're gonna give them a sales force license and hit save and from within here we're going to do several things so the first thing that we're going to do is actually go to system permissions and once it loads we'll click the edit button and there is a cms workspace and channels permission that we'll want to give access to so we'll check that box and save it and once that is done yep then we are going to go on ahead and go over to the assigned apps and in assigned apps we need to give the users access to the salesforce cms app so we'll bring that over and click the save button and then we'll go down to the object settings and in object settings we're going to actually give them access to the tabs to be able to create the content so there are four tabs here cms channels we'll click it it'll take forever to load apparently and once it does load today or tomorrow or maybe never i'll just go back to permission sets and give this another shot go to object settings and i'm just going to actually right click and open all these in a new tab cms channels experiences home and workspaces we'll need access to all of them so once each of those are opened you'll click the edit button and then uh just make it a visible tab same for this guy i'll also make it a visible tab this guy you might also see the drop down option here for tab settings instead of available or visible depending on your ui choices just change it you'll get the options of hidden default off and default on you would choose default on to make this go a little bit easier for you and last but not least the workspaces will save it and once that is done we have set up our permission set and the next thing that we're going to need to do is assign this permission set to our current user so to do that you'll click your profile up in the top right corner click the settings button from settings you'll click advanced user details and scroll down and click edit assignments under permission sets so find your permission set that you named over here on the left side click add and save it so the next thing that we need to do is open up our cms app that we gave ourselves access to just a moment ago and we'll do so by clicking i guess i should walk through that click on the app launcher up here in the top left corner and click the view all button down here and you'll see this salesforce cms app near the bottom or it might be somewhere else for you mine is probably going to be at least a little different than yours and once we open up this salesforce cms app we are going to see a couple things the first one of which is cms workspaces and the second of which is the experience dashboard experience builder dashboard now right now it's saying experience builder is disabled contact your salesforce admin for help thankfully you are your own admin and we can solve this problem because we actually need to create the site really quick first before we start creating content because you have to assign the content on a site-by-site basis so let's figure out how we deal with this experience builder disabled you'll go up here to the setup gear click setup and over here on this side we're going to type in experiences and we'll find this digital experiences settings and you'll click on that guy and you know if you already have this enabled in your org your salesforce org then of course you won't need to do this but if you don't you'll need to check this enable digital experiences and find a domain name so we'll try coding with the force i may have already used this uh we'll see yeah it already is maybe coding i might have used this one too in the cloud how about uh coding with matt okay cool well at least that one's ready so we'll uh you basically have to choose your domain name uh your basically what your experience urls are going to be set up as they will end up looking like this it would be codingwithmatt.na162.salesforce.com so you know make sure you pick one that you like um you can of course change your domain names to be like actually you know the typical names you'd see like www.codingwiththeforce.com or something but that is not something that we are going to cover right now so as you can see um after i've picked my domain name and enabled experiences i can now create experiences and in fact if i go over here to cms home and i hit ctrl shift r to hard refresh the page it should now give me the option to create an experience and i need this to go away really wants to stick around okay so this experience builder uh is what you're gonna use to basically generate your site it's much like picking a theme from wordpress or something else um so we're gonna click that create an experience button and it's going to take a while to load just really thinking about things and basically what we're going to end up doing is clicking this build your own salesforce experience now you could click any one of these these are also good options word of warning right now though if you choose this lwr you basically have to create a completely custom website unlike all the rest of these which operate with aura components that have tons and tons of pre-built functionality in them the lightning web component variety does not so maybe not this guy but everything else should be a decent option for you we're going to go with build your own and i'll show you how to select your own template here in just a little bit to make it look really good looking really fast so we'll just call this um cms example or something and i'll give it a cms example you can name this whatever you want i'm pretty positive it can even have spaces and whatnot in it so um we're going to create that now that we've picked our sub domain and then we've named our site it's going to take i don't know maybe a minute or two to generate the site it normally doesn't take all that long and once it does we'll go on to creating a couple of pieces of content um if it takes much longer i'll cut the video oh here we go there it is so um really quickly just to show you how easy this stuff is the first couple things that i'm going to do uh is select a theme for my site so that i'm not creating absolutely everything from scratch and i'm going to delete some of these junk components that we don't need around so this guy for instance is just a kind of like welcome to your site we can just delete that and we'll go on ahead and come over here click on theme and so we'll go to settings theme manage and click change and it's going to give you a whole bunch of pre-built themes you can also build your own if you hate all of these but i'm just going to go on ahead and pick the jepson theme because i don't know why not and it's going to drop in a handful of things and give me some components to use that might be useful cool so now it's got a nice menu and a search bar that i can use profile for users if they want to use it and or if you you'd like to use profiles for users and a nice banner image to make things look you know a little cuter or something i don't know um all right so we've got our site kind of set up let's go back over to our cms area and let's create a cms workspace now that we have a site to create a cms workspace for so we'll create this cms workspace and we'll say this is our cms site workspace you can name that whatever you want and you'd ideally give it a description that was useful for future people but i'm not going to waste your time you can see that we have our cms example site right here and we want to add that as a channel that we can basically distribute our content to so we're going to click the plus button here and go to the next screen at this point you're going to be able to choose the people in your org that you would like to be able to contribute to the content for your website these are the people who would create content etc i don't have anybody in my own personal work so i'm not going to add anybody but you'd be able to search for them here or groups of users if you've set public groups up for users in your org and add them appropriately the next thing that it's going to ask you to do is set up the languages that you'd like translated this is kind of a complicated topic that deserves its own section so i'm not necessarily going to go over all of the things you need to do to translate your content for us cms but i will put some links in the description if you're interested if this is something a use case that you need for your org there's some pretty decent documentation over how to do this so i'll link it in there and you can check it out if you have a need to translate your content for different languages for different users so we'll just select english for now right so i just selected english here and made the default language english and go on and then we'll hit done because we've set everything up and it's going to generate our workspace for us which is great so now that we've got this cms site workspace set up for it or set up for us we're going to go ahead and add some content and you can do so by clicking a button this add content button here you can also organize things in folders if you wanted to i'm not going to be creating a ton of content but you know if you were you'd probably want to make a folder and organize it so we'll click add content and i'm going to be creating a news-based content which is basically a nice way of saying create your own content um if you wanted to display a document you could upload a document or if you just wanted to display an image in your site you could just upload an image as well but let's start with the news and go from there so we'll create a news based uh piece of content and basically what it's going to ask me to do is create a content title so we'll say i don't know we'll just use one of my recent videos uh cool or actually what debugging techniques for apex and lwc uh check out this video for cool or good apex and lwc debug tips and we will add an image um i don't have an image in this org to pick so i'm going to need to add some content and i will upload an image from my desktop i'm somehow already on this which is just pure luck so i'm gonna double click this and upload it and now i've got this image to use i can give a link for this image if i wanted to use it individually a title to this image and then alt text so you know users who don't have the ability to see can still at least hear uh what the image should be representing so let's hit save here and it's going to be added as the banner image here and excerpt we can just enter whatever lwcn apex debug tips technically you don't even need to fill this out but why not so we'll then click save to draft save draft up here in the top right and once we're cool with what we're viewing and we like it we'll go on ahead and put click the publish button if you had you know you could you can put approval processes around this so that you can have different people approve the content before they go out the door but again something that is maybe a little outside the scope of this particular video you can have people approve it before you publish it if you wanted to okay so we've created this new piece of content now let's figure out how in our site that we've created over here uh how to basically display that content right so we're gonna go over here to components and you can see over here in components we have the cms single item i don't know if i can even zoom in on this maybe oh yeah i can so there's uh the cms single item component for content and we're just going to grab it and drag it in here and once we do that we're going to click this it's going to be highlighted if it's not right and you don't see anything up there in the top right corner just click back here on that cms single item and click the add content button now we've got two options debugging techniques for blah blah blah which is of type news or that debugging techniques image which is just that image that we uploaded for our news article so we're gonna go on ahead and click the news article version and hit save and after that shows up on the screen you're gonna look at this and be like that is garbage what should i do next um basically once you've chosen your content you know how to choose the layout and field mappings for your content so you'll drop down this content layout and we'll go over some of these other things in just a bit so give me a minute and then we'll click this field mappings drop down so that we can actually set this up to look like better so we'll make the headline the title um maybe we'll make the subheading the excerpt and we'll make the image the banner image cool so we're getting somewhere kind of interesting and [Music] yeah so we'll leave the rest of these blank because we don't necessarily need them but you have the option to add video if you had video or a bunch of other things if you wanted to add them right cool so anyway uh the reason by the way that this has a paragraph tag in it is because this is a rich text field and it really shouldn't ever be used for an eyebrow it should be more the excerpt if you put that into the subheading surprisingly it does not do the paragraph tag only the eyebrow does that so just beware don't put your body in an eyebrow or the top thing up here uh anyway okay so uh the next thing that we'll go on to is uh you know component style if oh my phone's blowing up here give me a second um so if you wanted your banner's height to be a little smaller you could change that up make it bigger make it smaller you can change the width you can change the content alignment so maybe you wanted everything to align top left for some reason i don't know you can do that and if you wanted the background overlay to change you could also do that too so if i wanted to be more like a red color there's no stopping you and you can basically change virtually everything else about this including adding effects so if i wanted it to have an overlay fade out when i hovered over it i could do that and you might want to change the text on the button so you can click the button styles and change this to i don't know read more or something and there you go you can now read more stuff all right and then we'll exit out of this and now we have a nice cms single item post dropped right here in the page and if we preview it we can even see that nice little effect that it does which is kind of cool now unfortunately if we click on this at this moment in time we're not going to get anything super useful so if we click on this it might actually okay cool it doesn't do that thankfully every once in a while you'll get an error which isn't great um but uh thankfully we're not getting an error we need to go back to builder and head over to where we landed which is the news detail page if um for some reason you landed on this error page uh honestly what normally fixes that for me is just publishing the site um for some reason if you don't publish the site first every once in a while you end up landing on an error page instead of a news detail page uh obviously that's very confusing but yeah just know publishing should publishing your community should should normally make that go away um okay so we're on this news detail page you can see there's literally nothing here so that's not helpful at all um but let's figure out how to actually navigate here from where we were so before we were on this home page up here at the top which is where we dragged this cms single item to but now we need to update the news detail page so that when we click on one of these cms single items something actually pops up and is useful for people to look at so um all right so the way that you get there is you click up here in the top left where it says home or it might say something else but just click on the tab and find this news area and click news detail and once you get over here to the news detail area you'll want to grab a component and the component you'll want to grab is cms single item detail and drag drag that onto the page it's of course going to show nothing which is super helpful yet again but we'll want to go to the field mappings area of this so if you didn't see this pop up in the top right corner again just find that single item detail and click on it and down here for the headline we are going to create or use the title um for the image we're going to use the banner image and for the content body we are going to use the body and maybe if we want a subheading we can use the excerpt right cool um all right and we can add styles to this there's several different things that we can change up about it just out of the box so awesome so now we have our detail page set up or our news detail page so if we head back over to the home page and click preview scroll down and actually click the read more button now we should get something useful so our bodies in here and everything else all right so there's one other thing that i just want to make you guys uh really aware of i suppose you can see that the body of my content right here doesn't have much in it but if i wanted something to have you know a lot more content in it you can pretty much put whatever you want and style it how you'd want to style it by just going back over to your content i have already clicked create a new draft but if i hadn't instead of this saying save draft or publish you would see a create new draft button on your content that we created just a little bit ago the news content um so you'd click create and create a new draft or something along those lines and we'd come down here and maybe update this maybe i want to actually add my youtube video to this so i could come over to my youtube video grab the url and drop it in there and now i've got my video maybe i wanted this to be centered or bolded i can do all that and i guess basically what i'm saying is you can add whatever you want i can just type a whole bunch of junk to take up space and style it a bunch of different ways put bullet points in there whatever right so lots of different options uh to basically be able to style and add to your content pretty much however you'd want to add to it so we'd hit save draft and publish this new version and now if we go back into the experience builder we can refresh this page by doing control shift r and we'll preview this again uh you can see that the body i've added the body in here and it's starting to show my video which isn't great so you'd probably want to change this but if we click read more now you can see that there's you know more to it and all that magical stuff so cool um let's go back to the builder and move on to collections of content all right so there's two different types of content collections that you can put on your site um so let's figure out how to do that uh the first one that we'll just go over are actual you know like news content so we'll go back over here to our salesforce cms workspace or app rather and we'll just create one more news article and well i meant to click add content here and we'll create this news content and within here we'll just make another one debugging with nebula logger and nebula lager is cool and we'll make a banner image which we'll just do the same way we did before i'll find my nebula logger one upload it and save it and we'll just say nebula logger stuff all right so so far so good we'll save this draft we'll publish this draft publish it cool cool cool cool cool now we've got two different news articles and we want to create a collection of news articles to display kind of like all at the same time so what we'll end up doing is going back over to our experience builder our website um and what we'll do is up here in the top left corner we'll click this little you know workspaces or builder icon i think is what it's actually called and we will go to the content management area right here and once we're in the content management area the first thing that we'll do is go over here to collections and we will create a new collection if you've never created a collection before you won't see anything here in fact we could just delete this and you'll see what you normally see so if you have no collections at all for your site yet you'd get this create connect or create collection button and we will click that and the first thing that we'll try is the cms content so we'll say uh we'll name this collection debugging tutorials or something and click that hit next and we'll want the type in here to be news and we'll want to kind of can i mean you could manually add articles to this collection but if you manually add to it then you kind of have to continuously manually add to this over and over and over so it might be a better decision to create a conditional uh collection so that it can kind of just you can just automatically add content to this collection over time you create something new and you will find it just automatically shows up in your collection which would be cool right um so we're gonna choose all criteria are met and say we want our title to contain debugging now i will say i'm not going to go over topics but a much better way to do this is to use topics in salesforce and to tag your content with topics i'll put some information in the video description that goes over what contents are and how you can set that up or sorry what topics are how you can set that up but topics make this really really awesome in my opinion but for now so that we don't get too deep into what topics are and how to set them up let's go and just filter by title and we know we have two um two news articles with the title debugging in them and we'll hit finish and we'll see that we now have two articles within this collection which is great cool so now we've got one collection so let's just figure out how to put this collection of content in the page so go up here to the top left again and click this pound sign or hashtag or whatever else you want to call it and go back to the builder and in the builder we'll want to go up here to components again and grab our cms collection component right here and drag it in to the page and once we're here we'll click the add content or sorry add collection button and grab that debugging tutorials collection that we just took a look at or just made really hit save and once that's there you can see that we have two pieces of content being added to our collection but nothing's showing up just like last time because we need to make some decisions so the first thing that we'll want to do actually is go to content layout which will give you that field mapping section again and we'll make the headline the title and the image the banner image cool so now we have these two pieces of content in our collection and we can kind of go from there you can change not the links but rather the buttons to say you know read more or something along those lines and it'll update the buttons here and you could optionally change the layout for both different things the collection layout and then the the way that the content is viewed too so you could have your content kind of be laid out this way or if you wanted your collection to be in a carousel style you could have a carousel style collection which i'm a fan of for headers like up here or you could do strips right so you could have a strip that they could kind of go through if i had more than two maybe i had four or five they'd be able to kind of scroll through them or you could go with uh some more of a slideshow approach totally up to you right so if i previewed this now click this i can slide show back and forth through them and there's obviously a lot more customization options that you can do with this just out of the box so pretty cool stuff so we'll go back to the builder i'm going to change this back to a grid actually and yeah so the next type of collection i want to show you is the salesforce record collection basically so maybe you wanted to show a list of products or maybe a list of accounts or something that you've done business with i don't really know i'm just making stuff up let's go back to our content management section so we'll click content management come back over here and the first thing that we actually need to do before we create a collection actually let me just show you this if you tried to create a new salesforce crm collection right now and say we wanted to just get some accounts or something then it's going to say select an approved salesforce crm object which we have none right now for this site so if we try to do anything we are basically going to get nowhere so to create approved content or sorry approved objects and salesforce to create collections for we'll go over to this content tab click on salesforce crm click on this add crm connections and we want to look at accounts which honestly is probably probably not the best one to choose but i think i have accounts loaded into my org so i'm just going to stick with that so we'll click save and now we've approved the account object to be used in collections pretty cool so at this point we'll go over here to collections again uh hit the new button go with salesforce crm and we'll say account collection or something you can name that whatever of course and now you'll see that account comes into the drop down here and you'll notice that it says to choose a list view because the way that collections are created for objects and salesforce is through the list of global globally visible list views so if i wanted to create a new basically collection of account object to be able to to display um i would go back over here to salesforce you know maybe launch the sales console app and head over to accounts and you can create a new list view for your account records by just going to the accounts tab clicking new on this gear icon and say all users can see this list view which makes it globally accessible as you can see it says including guest partner and customer portal users and just saying you know you would obviously choose a better name matt's list view and save it and then you can add filters to this list view so if i wanted the only specific types of accounts maybe i only wanted active accounts then i can do that right and i can add whatever filters i want and if i came back over here to my content collection and i just closed this for now i'm probably going to have to refresh this i don't know that i do but i'm just going to be safe here and then create a new collection i'll name this again account collection salesforce crm next we can see matt's list view is in here now and i can select it and do whatever i want with it if i wanted different fields to be in here you can change the fields that you'd like to display in your list view the fields that you display in your list view are effectively the fields that you'll have to map to your content when you get back into the community which i'll show you in just a second so we're going to pick this matt's list view and hit finish and you can see all of the accounts that have been pulled into this collection of content so now if we go back to our builder and we'll create a new cms content collection or cms collection rather i'll just drop it in wherever for the moment click add collection we can now see that the account collection um is there so we'll hit save and we can see now in the content layout if we go to field mappings we can make the heading any one of the list view visible fields that we have so we'll see it's account name site billing phone type account owner if we come back over here account name site billing phone type account owner so whatever you want to be mapped um is what will effectively you know be available to you um or whatever you put as fields in that list view will be what's available to you so yeah i don't have of course any images for these accounts so if you wanted to add images you'd need to make an image field on the account object and then map it but yeah that's uh that's really all there is to it you just create that collection and it show up and now if we viewed this the one difference i will say between a content collection like this one is that the content collection is going to take you to this news detail page right but the um record content collection uh so like the accounts or whatever other salesforce object you might be displaying is going to take you to a record detail page so it's going to take you to basically more information about that account so you just need to be aware that this takes you to a record detail page with more information about that particular record in your salesforce org all right so that does it for how to create content um so actually what have we covered so far we've covered the permissions necessary to create content how to create single content items how to create content in general how to set up the cms workspaces how to create collections of records so the last thing that we're going to go over is how to connect salesforce to wordpress or really any other cms based site using cms connect all right guys so to be able to use cms connection with wordpress i just want to kind of want to set the stage number one you could connect to any content management system out there really but since wordpress is the most popular it's what i'm going to do for this example but you could do this with anything now for the first couple minutes here i'm going to get a little bit technical because i like to actually explain to you guys how things work so that you actually know what's going on but it's not necessarily required for you to know all these things i would just rather you know them and have the power and the knowledge to be able to do more with what i'm about to show you than to just overly simplify things and you know make it seem easier uh than maybe it really is um so the first thing that we want to do um i'm going to demo this with my own site if you didn't know coding with the forces blog is run on wordpress because why not it's simple it's easy it's it's a good cms um but to be able to allow external connections to your wordpress site especially if you're using jetpack you need to go to this page here which is your jetpack modules and make sure that your json api is activated it might even say that it's activated and it's actually still deactivated so if this is the first time you've ever connected to your sales force or sorry to your wordpress organization or wordpress site really you'd check this box even if this says that it's active and click up here it's going to say bulk actions click the activate button and then click apply after you've done that one time you'll now be able to access your site through the wordpress public api right it's just um https public api wordpress.com blah blah blah so um the next thing that you need to know about is once you've enabled your site to be able to be to have connections to it through the rest api um is that it's just about the developer.wordpress.com which hosts all of the rest api documentation now i'm already on what we're going to care about for uh probably 99 percent of situations for cms connect and sales force which is this posts portion of the rest api now again if you're not technical just stick with me this is actually super easy to set up but i want to explain how everything works so um if we come over here so we've got this url right here https public api wordpress.com rest what v 1.1 sites site posts post id this site will just be replaced by your site url so if we come over here here's the basically public api that looks at the post for my site which is public api.wordpress blah blah blah and then you'll see word www.codingwiththeforce.com posts and that just pulls in all of the posts from my site uh you can just check them out take a look at them you'll be able to retrieve them and after that what i would suggest doing and what i've already done is taking this and putting it into what's called a json pretty printer again you don't have to do this but i'm just showing you there's going to be some things in a minute that don't make sense without this json looking pretty to reference so i'm putting it over here i guess i said i suggest you do it you don't necessarily have to do this but i'm putting this over here so that i can explain how things work when we get through it so this ugly looking block of junk here when you make it pretty looking ends up looking like this which is a whole lot easier to read all right cool so we've kind of set the stage here for what's coming next now let's shift it back over to salesforce and create a cms connection with our wordpress site so if we go back over to our site so um you're probably still over here on the builder potentially right um so we're back over here on our site our site builder let's go to content management again and within content management let's go to this cms connect area and we will do the add cms connection and you can name this whatever you want i'm going to say coding with the force wordpress site and we can make this site wordpress but as you can see it could be anything the other allows you to do the anything there and our connection type is public um and our server url is uh this guy here public api dot wordpress.com where did i go here we are don't need uh this guy might not need the https either but i'm gonna leave it for the moment and uh we don't need anything for root path css or add script because we're not working with an h with html rather we're working with the json that we were just looking at over there so we're going to click the add json and the content type name will just be coding with the force posts and we'll add a content list and this is the same as the content collections kind of before it's going to be able to create a list of posts so we'll say um post list again this can be named anything all of this stuff so far can be named anything except for the server url and the path will end up being the rest of this which is rest v 1.1 sites my site name slash posts we'll come back over here drop that in the path and then the next question you might have is what is node path which is exactly why i have this pretty looking json a node is basically i don't know how to describe this exactly these are called no referred to as nodes in json so you've got this found node so it found 39 posts and this post node which holds an array or a bunch of the posts actually all of the posts on my site so this is the node that i would care about because it holds all the posts in my site and i'd come back over here and drop that in the node path cool now if i wanted to also just create individual content items for my posts what i could do is say uh post i don't know again you can name that anything the path will be the exact same here not posts but rather this guy with one change that is that you put in component which is uh interesting but basically what this ends up doing is uh dynamically picking the id path which we'll put right here in just a second and placing it here which is cool so it basically just takes the post id that we grab from the id path and it places it at the end of our url here so the id path where is that basically it's just going to be the id here pretty cool so again this is a node within your object array of posts and so we're just going to grab that id path drop it in there oh and the title path let's see we'll just grab the actual title node in here and drop it in cool and that i believe ought to do it uh language mapping uh you don't really need to do this um well actually i guess that's not true um and no i'm not wrong i haven't done this in a while i don't believe that you need to do language mapping at all unless you actually have um different languages that you need to translate between the sites so we'll see if i'm right i'm wrong here in just a minute if i'm wrong we'll come back and fix it i'm just going to go ahead and save this now it's going to say your connection has been saved and we have added the external domain to your csb trusted sites um which is great it's automatically adding that for you i'm going to just quickly show you where that exists in salesforce just in case things go wrong and it doesn't do what it's supposed to do in salesforce if we go back to our regular salesforce area here if we go to setup you can go to um cores i think cores um it didn't add that to cores it's actually in csp csv trusted sites but we are going to want to add it to course too to be real safe about it so it came over here um to this wordpress site and added this trusted wordpress site so the https public api wordpress um we're just gonna want to to be real consistent here go over to course in our security area otherwise we might end up with some unexpected errors with content not showing and basically do star dot wordpress wordpress.com and what star means is that it can start with anything and then b.wordpress.com more or less uh maybe i'm doing this wrong okay one second it's been a little bit uh oh it just okay it just wants me to use https uh okay one sec just like this and it's safe cool um so we've got our core setup you might not need this just so you know feel free to experiment by either adding this and deleting it or not adding it and then checking it out but lots of times when you're embedding this wordpress stuff using um cms connect without this you start seeing things that are weird or not expected so uh all right let's get back to our site so we've set up our cms connection we've added our json portion to it now let's go back to our builder and finish this tutorial up maybe hopefully um so what we're going to do now is go to components and you can see that there's the cms connect json component and we're just going to drag it onto the screen here and we're going to grab our source that we just set up and the json content is going to be for now the post list and uh we need to just save this we can create a grid and a card okay cool um so i didn't need to save it first i need to pick my layout options all right so right here is where it kind of gets confusing you know what do you put for this title field or the author field or publish on or body or image source or blah blah blah whatever else right um this is where it gets a little confusing and i'm going to explain how you choose this so we've got the title that we want filled out here if we go back over to this json we can see that we have this title node under posts right so what what salesforce is wanting over here is for us to use an ash or a yeah at sign and then that title node so you put at title and if we wanted the author we would grab whatever the author is i don't know i think it's just author but i should probably check um it is indeed author but we might not um necessarily want it to just be the author node because that's in another object right so we've got author but if we did author it wouldn't really work out um because it's going to grab an object which is what is in these brackets here so really what we want is at author slash name so if we come back over here what we're going to see so we've got author name we're gonna do at author slash name and all this is case sensitive so i'm just gonna double check cool we got that right published on i think there's a date indeed there is so i'm going to grab the date from here say at date and the body of it is going to be the content so come back over here one more time at content and unfortunately i don't think i use featured images at all which would uh make this a lot prettier looking when i finish up here but as you can see i don't use featured images lots of posts places do but i don't but if you wanted to create a background image and you actually did use featured images you could use at featured image to do that so i'll just put it in there for fun why not uh let's hit save and see if we get anything uh so if you get this it's okay this error here don't freak out too much about it it's basically saying your access to resources are from an or you're asking to access resources from an unapproved host that's fine uh you'll just hit okay then what you'll end up doing is a couple of things so the first thing that you'll end up doing is clicking the settings and going over here to content security policy and changing this to relaxed and okay that's fine and just going to keep throwing those errors and it's going to want you to add a trusted site so our trusted site will be coding with the force site or maybe make it wordpress site and we'll drop in not that but our public api drop that guy in there and hit add site and make it active now it's still gonna complain that's okay if you remember we set up that csp trusted site or salesforce really did that for us however it didn't check all the boxes we needed checked so let's go right back to that csb trusted sites by clicking this link it's going to bring up our trusted sites for some reason it did it in classic but it doesn't really matter everything is the same if you wanted to do this you just type in csp over here and click csp trusted sites whether you're in classic or lightning it's all the same and we would click edit on this site name and we need to check these boxes here or else it's still going to complain it's going to be like ah sorry we don't allow all of this stuff that you think you want to allow so okay let's come back over here exit out of this and hopefully now if we hard refresh this ctrl shift r it's going to load but maybe not um okay so we've got we've got another one this is just another url that my site my wordpress site is actually um using so we just need to add a trusted site for it too so we'll go back to csp again create a new trusted site call this cwtf uh site links or something and just add that in there we're going to allow all these things from it as well oh all right this can only this uh name can only contain underscores it can't contain spaces that's fine okay cool so we've added that to our csp our trusted sites um it's gonna complain a lot it looks like that is okay but at least our post popped up this time so uh let's just go ahead and come on over here and add one more trusted site and that's my df site links add this site and hopefully now yes okay okay i know i need to reload you hopefully now we are to refresh this page since we've activated that other one we won't get this error anymore but maybe we still are um add to the list of trusted hosts uh yeah i think it's here coding with the force make sure codingwiththeforce.com um maybe we should add this to our cores as well so that it's not getting too confused and upset so let's go ahead and do that go to course and add my coding with the foresight in here too so we'll just say https colon slash coding with the force.com um and yeah that that'll hopefully do it or or not i guess i don't need to do that for uh it's only if i'm starting with it um all right let's let's try it again and see see what we can see maybe it'll do it maybe it won't there we go success so no more errors everything is working okay uh so you just have to be really aware of the different places you have to go the three different places you have to go to say it's okay uh experience cloud um just let me display my wordpress content so the three places are security and privacy you're gonna have to change this to allow framing by the same origin policy only or sorry actually i'm sorry the security level you'll have to change this to relax csp and then you'll have to add the sites that are needed for your wordpress content to be able to show up the other two places are cores you'll have to update your cores uh to have all the sites that are relevant for your wordpress site and then your csp trusted sites to have all the sites as well cool um now that we've done that let's preview it and see what we get so if we click the read more link it will actually bring in my um content directly into salesforce now it's not perfect as you can see it's not embedding my youtube video properly um but overall pretty good um it's embedded my images from my post and pretty much everything else appropriately my code blocks so pretty pretty awesome all my links are here the only thing i can say that it has trouble dealing with is at least for wordpress are videos it just wants to give you a link instead of an actual video unfortunately but everything else looks great so pretty cool stuff that you can do i guess we can just demo the uh really quick to be super thorough with everything we can go back to home drag one more component onto the page which will hopefully be considerably less of a pain this time and just do the detail this will be at title this will be at author slash name and this will be what was it i think content uh content yeah date and content at date at content and if we save that oh right i've got to enter a component path that makes sense because it's just an individual post so the component path will be the id of the post because if you remember a long time ago now when we created this our path is the id basically so we'll go over here to our json and the first post is its id number is 343 so come back over here to experience builder put that in there save it and shazam there's a there's a post and uh pretty cool so we've got one last thing left to do and that is publish our site and activate it and make it potentially available to anybody in the world if that is what you would like to do so if you want it to be accessible to anybody out there then you'll want to check this box it's actually not public can access the site by default it's only available to people who log in to salesforce through community login portals so if you want this to be publicly accessible click the public and access the site you might also just want to double check that your page access for each of your pages is set to public it should default to public so in all likelihood they are all public after you check that box anyway but if something's weird or not working right just know that you can go there to set that visibility or if you want it to not be public you can a specific pages to not be public you can change that there and the last thing we'll do is publish this site and it might take a little bit and spin around and it'll tell you that it'll publish it and send me an email in a minute so i'll just wait a second and probably cut this and we'll come back once i get the email and it's live all right so i got my email that it is live so let's uh click on the link and see if it is and it appears to be live and publicly accessible as in i didn't log in or do anything and obviously my site looks pretty ugly but we can even see we can view these records indeed we can so cool our site is up now there's one important thing i'd like to talk about especially if you're making your site publicly accessible to guest users and that's that if you're viewing this right now unfortunately salesforce has cast your cached your session id so you need to open up an incognito window and place that url in the incognito window to see what it would actually look like to a guest and it might be pretty different because the guest users may not have the access that they need it looks like for the most part we're good here our wordpress stuff is coming in just fine and but we do see a couple of small differences right it looks like our content is visible and that's all good so our content is visible and that's fine so that setup is great but if you didn't notice i guess i will show you real quick somehow i opened two of these windows um we are missing way down here at the bottom our accounts right this guest user is missing the accounts so if we needed to update access to things for our guest user like the accounts then we would need to do the following we'd go back to our experience builder over here and in the experience builder you'd go to settings and down here there's this guest user profile and in this guest user profile we give access to the account object or it's where you give access to objects and the fields on those objects and everything like that so if you're not seeing um records get displayed for you in a record collection then you may need to update your guest user profile to display whatever it is you want to display now once you've updated that you would then have to go to within salesforce you'd have to update your security for the records so what we were just looking at an experience builder this guest profile gives you object level access as in access to the account table or object within salesforce but the individual records are handled in a different way you'd go to sharing settings and you would either update the default external access or create account sharing rules for your guest user so that you're able to actually view things [Music] so definitely make sure that you go and do those things if you want to do those things if you want these records to be visible to your end users or to guest users who aren't logged into your community then you would need to go update both of those places to distribute access to them but that is a whole security topic that i'm not particularly sure this already very long video should maybe go into so just make sure to check those places if you intend to share internal sales force records with external guest users all right i think this is uh long enough video if you have any questions about anything any questions about security for guest users any questions about you know things i couldn't cover or didn't wasn't able to cover within this video about salesforce cms or the cms connect or anything like that definitely leave me a comment it might take me a little bit to get to it but i typically get to the vast majority of my comments eventually so leave me a comment i will do my best to get to you and answer it if you like the video make sure to subscribe hit the bell icon if you want to know when the next videos are coming out or when the next voting period for videos begin and if you didn't know you guys get to vote on every video i create so make sure to go to the community tab and vote on the next video otherwise you're just going to see a video that somebody else voted for and you might be all sad inside afterwards most of the voting is really close like one or two or maybe three votes max away from another video so go vote um so you get to see what you want to see that ought to do it though if you're still here thanks for sticking with me and i will see you in the next video [Music] you

Channel: Coding With The Force

Views: 25,426

Keywords: Salesforce, CMS, Salesforce CMS, Content Management System, CMS Connect, Wordpress, Wordpress API, API, CMS Collection, Experience Builder, Experience Cloud, Experience Site, Community Cloud, Communities, Community Site, Salesforce Site, Guest User, Salesforce Developer, Tutorial, Training, Developer

Id: BXsknsjFW9o

Length: 76min 10sec (4570 seconds)

Published: Wed Aug 11 2021