Integrating External Data in Lightning Web Components

– Hello everyone

Thank you for attending today’s Trailhead Live session on integrating external data into Lightning Web Components My name is Stephan Chandler-Garcia and I’m a Senior Developer Evangelist here at Salesforce If you wanted to reach out during today’s session, I will be available in the chat window or you can find me on Twitter @stephanwcg or via email at [email protected] if you have any questions or follow up about today’s session Now, before we get kicked off with the content, I, of course, have to point out our forward-looking statement Please make any purchasing or investment decisions based on our currently available technology and not any future features or functionality that we might be talking about today Now, before we get into our content, just a quick run-through of what we’re going to be going through Initially, I wanna talk about defining a use case and digging into your Salesforce org and finding a way that you can benefit from bringing in external data through Lightning Web Components We’re then gonna through the process of designing a component and really looking at where the data’s coming from, how our UI will react to that external data and how we compose that component altogether on a page We’re then going to go through and build the component and get hands on Lastly, we’re gonna talk a look at how we can take that component that we’ve built and enhance it with some common design patterns, that it can help you create familiarity for your users around the components that you’ve written And then we’re gonna go through a recap and see how it was all done So let’s talk about defining a use case It’s really important that when you’re go out and put time and effort into building a component from scratch, to make sure that your users are going to be finding benefit from that work And so, as we do that, I wanna take a look at the Sample Gallery, just for some inspiration It’s a great place to go and look sample apps, that have been created by the developer relations team and maintained by them, that give you the ability to interact with the components, see the code and see how the app all really comes together Now, we’re going to use DreamHouse today, an app that I’m sure you’re familiar with if you’ve seen any of our keynotes in the last few years And in order to that, just gonna go over to the GitHub repo and you can run through the instructions for installing the app and it will deploy the source into one of your Scratch orgs Now, I’ve already taken the time to do that today so we can get hands on a bit quicker, and this is what DreamHouse looks like when you open it up in your org for the first time You’re navigated to the DreamHouse app and you can go ahead and explore the different tabs and components that we have available for you to view Now, today we’re gonna take a look at the property finder You’ll see that Property Finder has loads of Lightning Web Components here that you can use as inspiration for creating your own You can see here, we can search through properties, we can view the map and we can select properties and see those properties Same thing with the Property Explorer We can see here, we have some search filters that are applied We have these great tiles that provide a really rich experience for our users and when we select on a property, it will give us a bit more detail and allow us to navigate to that property Now, when we’re one the property page, you can see here, we just have our basic property details We have some details about the broker, we have this nice, little chart showing how long the property’s been on the market and a map And all this is brought to life using those components Now, how could we use external data in this scenario to bring even more power to this property page? Well, having been looking on the market myself recently, one of the statistics that we’ll see when looking at properties is the ranking of the schools nearby or what available courses there are to your property Now, there are many external data sources that we can use to go out and grab, and identify what the nearby schools are and what their rankings are to a property So it gives us a great use case You’ll see it within our property page, we already have that location’s latitude and longitude here, so we can use that maybe to help us out a bit later when designing our component So let’s take that use case, let’s see if we can build a Lightning Web Component that will allow us to display nearby schools to this property I think that gives a use case that’s beneficial to our users and could immediately provide value and impact when they start using the new component in the context of a property Now, let’s talk about the design process We have our use case, how are we actually gonna build this thing in the next hour-ish? So first, let’s talk about designing our component We’re gonna start out with the data Where is our data coming from? What is the data source and how can we use that information in the component? We’re then gonna take a look at the user interface and how we can identify common design patterns that we’re already using in our other components and bring them into this property explorer component We’re then going to prototype that

and identify what works, what doesn’t work and take that prototype, and maybe use it later to sketch out our component We’re then going to understand how our component lives in a page and what context it needs to run We already mentioned that we have that latitude and longitude field on the property, so how can we bring those into our component? And then lastly, we’re gonna talk about putting these three components together and compose them inside of our component, so that the interactions are timed properly and the data gets to our component, our component’s hydrated and our users can gain value and benefit from that component Now, starting out with the data, I did a little bit of pre-work and research before today’s session to find a data source that I thought would be suitable for the DreamHouse app and what I came across was the code.org local schools database Code.org is a nonprofit that provides directory services and up-skilling help on training you to code, whether you’re a student in high school, whatever And they give you a tool and a database that you can use to search for that information Now, if we take a look at what that looks like This is the code.org local schools database API and it provides you the backend data to their local schools search engine Now, if we click on that database, you can see here We’ve got some great information here It’s just in a JSON format I’m going in zoom and then take a look at this a bit better And we can see here, we have things like the name of the school, the website, what levels they have and, quite interestingly, what languages that school teaches And as you keep looking through this, you can see there’s some great information there that we can use to find out more information about the schools and what might be nearby our properties Now, this is great but it’s just a really long file with loads of information about different schools It doesn’t give us any context to the distance from our current location and it doesn’t do any of the searching And that’s what code.org have put this there for They’ve put this to give you inspiration to create your own search engine and to use this as a template for learning how to write against an API, which was a great opportunity for us as well to go through and look at how we could do that to interact with DreamHouse Now, the challenge we have is that this file is too large for Apex We can’t pull this file in and then parse it and then look for the nearby schools to a location because of its size, so we’d have to build an API on an external service or third party service to expose this data So what I did was build a quick API in Go, because Go is a great language for just writing an API, getting it out there in the open And that’s made even easier with the Heroku Buildpack for Go because we could write our API and make it searchable by geolocation, and deploy it in a couple of hours And on top of that, I’ve made all the code available on GitHub so that you can go ahead and try that out, and expose this API for yourself Now, if we take a look at what that looks like, you can see here, we have our GitHub repo here with our Go API All of the main code is in the main .go file You can go ahead and explore that You can see which modules we’re using to create this API For example, you can see here, we’re using the router to grab the latitude and the longitude from the URL We’re going through finding the distance from that latitude and longitude, and then we’re gonna be returning those top three nearby schools in our response to this API Now, if you wanna dig into detail, feel free Go check out this repo, clone it Or you can use the Deploy to Heroku button to deploy it directly to Heroku and take advantage of that right from your environment and create your own version of this API Now, once we have our API up and running, the response body looks exactly like the response that we were just seeing in that JSON file in the browser We have the name of our schools, I think that’s something we can take advantage of We have a website, maybe we can navigate to that website, push the user in that direction We have which levels they teach, so elementary school, middle school or high school We even have their languages and I think this is really cool I think we can do something quite interesting in our Lightning Web Component to showcase what languages the schools offer, and I think because we’re writing a component for DreamHouse, which is set in Boston, I think it’s quite relevant to see that the main focus for anyone buying a house might be any of the computer science schools or courses that are nearby So I think that gives us something to work with from a data perspective, so now let’s take a look at the UI and how we can start developing and designing what that’s going to look and feel like Now, the number one place to start is the Lightning Design System Memorize it, know it, visit the website constantly because the closer you are to the patterns and to the designs, the easier it is for you to quickly build components Now, I love using Sketch, it’s a great tool for wireframing and prototyping, and allows you to really create user interfaces that you can then share and distribute paper prototypes with your end users

to really get some feedback and ensure that what you’re building is correct Recently, we’ve launched the Sketch UI toolkit and really enhanced it from its original version so that we can all of those Lightning Design System patterns, components, fonts, everything you need in Sketch for us to use and design our greater components And then, lastly, try and relate those to Base Components because the more Base Components we’re using, the less markup we’re having to write ourselves and it creates a nice consistency around all of the components that you’re writing, and ensures that your components fit really well into all of the standard Salesforce components and pages that they’re going to be interacting with Now, I’ve already gone ahead and identified some of the key components that we can use to build out our School Finder component You can see here, we have a card that our component will live in I think it’s a good pattern to use Almost everything within Salesforce is nested within a card and it’s a great starting point We then have tiles, and I think a tile is a great way to display information If we go back to our data, we have things like the name, we have the website, we have the description, we have the skills I think that that’s a great way to include lots of information and show multiple tiles inside of our card to give us a really good idea of what schools are nearby And lastly, we have the badges, and I mentioned earlier that I thought the languages were a pretty cool feature of the database, I think it’d be great if we could show those languages in a badge inside of the tile, so that we can get a really nice experience for the user and give them a component that looks nice for them to use Now, I’d like to actually jump into Sketch and show you what it’s like to design that component within Sketch before we go and write any code So we’re gonna go ahead and start out by pressing the insert button up here Once you do that and you’ve imported all of the design system libraries from GitHub, you can see here, we’re given all of the Lightning Design System patterns, charts, components to work with Now, I would actually like to start out with the Artboards And in the Artboards, we get a template for what a page might look like within Salesforce, and I’m gonna go ahead and bring the large desktop page into my canvas here And you can see here, we just have a nice placeholder for our page We can then go in to the wireframing tools and we can bring in a lot more components that mimic what might be on the page surrounding it For example, I always like to bring in a page header for a record because it makes me feel like my component is living in that record context, as I’m designing it And we’re gonna go ahead and shrink this just a little bit So that we have A nice, uniform experience with our header there Now, as we mentioned in the slides below, we wanna start with a card And so, let’s go ahead and go to our components here And you can see here, we have our Lightning Design System components for web And you can see, all of the components that are included in the patterns within the design system website are available here And so, we can go ahead and start out with a card I’m gonna go ahead and select this card and drag it onto my page I like the idea of this component sitting in the right hand panel of a two panel page layout And so, we’re gonna go ahead and just give this some space and stretch this out, and design our component So let’s go ahead and zoom in on our card here You can see here, it has a title, it has an icon so we can go ahead and update those So let’s call it a local computer science schools (keyboard clacking) Okay, and we can go ahead and select the icon and it will give you the list of all of the standard and custom icons available for insertion into the slot And so, let’s go ahead and select the standard icons And because we’re looking at computer science schools, I’m gonna go ahead and select Apex here and give us that nice, cool icon in our card So the next step is to create a tile So a tile isn’t necessarily a standard component that exists within Sketch, but more of a pattern that you can reuse around your components And so, to create my own tile, I’m just gonna start out by inserting a shape here into Sketch And I can go ahead and draw that shape onto my card here And you see that we’ve got the nice rectangle that’s been created I can go ahead and update some of the style of this We’re gonna go ahead and sit that there Okay We can open up the style here We can remove that background color I’m gonna leave the border color the same I know the one in the design system is a little bit lighter but we’ll worry about that when we’re writing our component So now, lets go ahead and bring in some of that text as part of the tile You can see here, in all of our components, we’re able to see all of the different styles available We can see the different body styles and variants So for the top, I’m gonna go ahead and put in the name of the component here as a link Okay And on top of here, we’re gonna go ahead and call that our code school We’ll call it “Code Camp,” this one

Okay, and that gives us that name from our dataset And now, let’s bring in a body text Font and size here So we’ll go and grab just the standard body text We’ll drop that right below there And we can say, “Okay, what is the distance? “What is the distance from our current property “that we’re viewing to the code school?” And we can just say, “It’s .01 miles.” Let’s take a look at the description We can go ahead and say, “This is a description.” dot dot dot What’s another field in the dataset that we really like that I think would be beneficial to the users? I think identifying what level of this school is so we can get an idea of the age ranges available and so, we’re gonna say, “Level,” and we can say, “Elementary.” And lastly, we have those skills And like I said earlier, I thought the skills would be a great thing to do as a badge And so, let’s go ahead and go into our component for web here, and here, you can see we have a badge And so, I can go in and grab a badge here Let’s drag that in And since we’re talking about Lightning Web Components today, let’s go ahead and say we’re gonna be teaching HTML Let’s go ahead and make a copy of that badge I’ll make two copies, drive it over We’ll say the next thing we’re going to be teaching as a skill is JavaScript And lastly, why not? Let’s throw some CSS in there as well and then they can start building Lightning Web Components in elementary school there And there, I think that’s given us a quick, simple component We can see the name of the school, get some details, maybe click on the component to open up into the website that they’ve supplied So let’s go ahead and group this here We’re going to create a group in sketch and we’re gonna just copy this Just go head and copy that and drag it down Now, let’s do that one more time And there you go We have now a component that will show us the nearest three schools to a location Obviously, there’s fake data in here but I think this gives us a good basis for actually building up our component And so, let’s see now what we can do with this If we go back into our slides, we’ve now designed our UI What about the context of that component? What data does the component need to work? Well, it’s going to live on property page, we know that already And we’re really going to need that location, that latitude and that longitude of the component so that we can identify which schools are the nearest and calculate that distance How does the user interact with our component? Well, as we’ve said before, we think they can click on it and navigate to that website And so, they’ll be able to get a bit more information about the course And then, what state does it inhabit? So initially, we’re just gonna display those three schools but we also have to bear in mind what happens if there’s no data available What if there are no schools nearby? How does our component respond? Same thing, but what happens if there’s an error? How does our component respond? And now, lastly, we need to talk about how we’re gonna bring that component altogether Now, the composition really brings together the data, the UI and the context all in one into a nice package and that becomes our component We know that we have Lightning Data Services available to us We can use Lightning Data Services to get the record and get that property information from our record We’re gonna use an Apex to callout to our endpoint for the nearby schools You can write callouts in JavaScript in your Lightning Web Components, yes, but I prefer to write them in my Apex because then, I know where all of my callout execution is happening And if I’m running a large org, I can always track back to a certain area of our code to identify where the callouts are happening And we’re gonna need a remote site setting as well in order to call out to our API Now, from a UI perspective, we’ve already identified we need a lightning card, we’re gonna use tiles for those details of the schools and we’re gonna use lightning badges to display the skills We’re then gonna reference the design system when we need to, in case we need some of the utilities and then we’re gonna iterate over that data Now, we’re gonna use a feature in HTML called a “dataset” to navigate to the website, but we’ll go through that when the time is right And that gives us all of our UI functionality and features And then, lastly, we need to talk about the context and how the component works together Well, when the component is inserted into the page, we first then need to go and get that record detail of the property Once we have that record detail, we can go and run our callout to get the nearby schools We can then render the data and then, optionally, they can navigate to a school by clicking on the tile Now, I think that gives us a good basis We know where our data’s coming from, what the data looks like We know what the component is going to look like We have an idea of where we can go and grab some of those base components to start working with,

and we know how our component is going to be orchestrated Once we’ve done this exercise, it will make creating our components so much easier and so much faster because we’ve already questioned the ways that we’re going to be building it, instead of just getting hands on the keyboard and starting to write code And now that we’ve done that, we can go ahead and start building our component So let’s get into our Lightning Web Component We’re gonna go and navigate into VS Code And the first thing I wanna show you is our local code school search, Apex class I’ve gone ahead and written this ahead of time so that we can go ahead and focus on our Lightning Web Component today But just so you’re aware, what we have here is an aura-enabled method called, “Get Nearby Code Schools” that takes the parameters of a property latitude and property longitude for us to then append onto our callout URL with our Heroku app here so we can get back those nearest three properties Now, you can do this with a name credential and if you’re doing this in production, I would suggest that but because this is just a demo, there is no authentication on this endpoint, I’m just gonna construct here in our class Now, you’ll notice, we’re gonna pass back that raw JSON response directly to our Lightning Web Component instead of parsing it in Apex because we’re gonna parse it anyways in our LWC There’s no reason for us to do that twice So let’s go ahead and create our Lightning Web Component The way we’re gonna do that is by opening up the command pilot and we can type in, “Create Lightning Web Component” and use Salesforce TX to create that component for us We can just give it a name We’re gonna call this one “Local Code Schools” (keyboard clacking) and press return And then, we can just press return again to confirm that it’s the going in the other (murmurs) path And like that, you’ll see it’s created our component for us Now, the first thing we need to do is get that record ID from the record page into our component The way we’re going to do that is by using an API decorator The API decorator allows us to declare a property as public Now, the lightning runtime itself knows that when we have a public property of a record ID available on that component, that if it’s on a record page, to pass that record ID into the component And so, we’re gonna go and just specify the API decorator and say, “Record ID.” And there we have our public property So now, how can we use our record ID? Well, we want to call some sort of mechanism to get that property latitude and longitude from our property record, and we’re going to do that by using the Get Record Wire Adapter that uses Lightning Data Services to call the UI, API and get some fields that we specified Now, the way we do that is we’re gonna import the wire decorator and then we’re going to just say, “@Wire,” and then our method name of, “Get Record,” and then we can pass that some parameters In there, we’re just going to pass at the record ID And there, we then want to specify a dollar sign and then our property name with record ID And that will enable the property as reactive so that when that record ID changes, it will run this callout through the wire adapter to go and get the necessary data We then also want a pass at the second parameter and that is fields We want to be able to specify which fields we’re getting on return of this callout And so, we can do that by actually going ahead and just pasting this in here We’re gonna define a property outside of our default class, called “Fields,” and we’re gonna specify that property, double underscore, C, or latitude and our longitude You’ll see, we’ve got the double underscore-S at the end of the field to show and designate that it is part of compound location field that we can get latitude and longitude from And so, we now have our “Get Record,” we’ll pass on our record ID and then our fields that we’ve defined a second ago So now we need to something with that data, so we’re gonna go ahead and specify a wired record here and we’re gonna pass in here, our error and our data That way, if the response is successful, we’ll get our data back If it’s not successful, we’ll get an error So let’s go ahead and check that using “If” statements We’re gonna go ahead and just say, “If data is returned,” and we will then say Let’s go ahead and define the property, and so we can say, “Property, there “Property property equals data.fields” and that will give us all of the fields as part of the property that’s been returned into our property Next, we want to then specify the latitude and longitude Now, to do that, we need a property to place those in and so, let’s go ahead and say we have our latitude here

and we have our longitude And then, we’re gonna say this.latitude equals property and then we can go ahead and type out our location Double underscore, latitude, double underscore, S, and then, once again, this.longitude And you’ll see, I’m using tab nine within VS Code as a plugin That will auto-populate based on some of the fields and some of the previous things that I’ve typed in which is very useful, but always verify when you press return that it’s what you expected because sometimes it mixes things up, until it learns your coding style Now, after that, we wanna go ahead and catch any errors And so, we can say “Else, if error” and then we can just say, “Property equals error message.” So let’s put in Add in a property for that And so, let’s say we’ve got our error handling here Let’s say, there we go, “Error message” and let’s say Let’s let error message, “This dot error message equals” and we’ll say, “Error dot message.” And that will give us back the string of the error response that’s been returned and so, we can use that display to our users later on Okay And there we go, we now have our wire here We have our wired schools there Let’s make sure that that’s correct Okay So you’ve got an error here Great And so now, let’s go ahead and write our next function to go ahead and get those property details So we’re gonna use a wire again but first, we actually need to import our Apex method into our Lightning Web Component We’re gonna go ahead and just say, “Import “Get nearby schools.” Code schools We’re going to then say, “From,” and then our, “@Salesforce-Apex/localcodeschools” and get nearby code schools And see, it’s auto-populated that for me And that’s gonna go ahead and bring in our Apex method for use within wire adapter Now, we’re gonna go ahead and specify, once again, @wire and then here, we’re going to say, once again Now, we’re gonna specify “get nearby code schools” there and we’re gonna pass in our parameters here And so, let’s go ahead and say comma, curly bracket, and let’s say our property latitude, and then we’ll say that equals, once again, dollar sign, latitude And then, let’s add in our next property Let’s say “property longitude.” And once again, it’s gone ahead and auto-populated that for us We can then say, “wired schools,” and then let’s pass in our error and our data And once again, if data, then let’s go ahead and store our schools and our property Let’s go ahead and add another property for schools Let’s say, “schools equals…” Now, if we were parsing the data or bringing back data from Apex, we could just say “schools equals data.” But because we’re passing back that raw JSON response from the API, we can go ahead and parse that here, and we could say, “JSON.parse then data.” And that will populate our schools property with that data in the structure that we need for our front end Now, once again, we can say, “Else if error, “this.errormessage equals error.message” and there we go Look at that, we’ve created two callouts really One, to go and get that property latitude and longitude, based on the record ID that’s been populated And the second, to go out and get the nearest three schools based on that property latitude and longitude changing Now, you’ll see, because we’ve specified this dollar sign in the property name, it’s reactive So based on getting this record ID into the record here, it will go out and run to get records, wire adapter Then, once that latitude and longitude are populated, it will go and run the “get nearby code schools” method to go and get those nearby schools Now, that that’s been completed, we can go ahead and jump into our HTML Now, to save us time here,

I’m gonna go ahead and paste in a version of this component that I wrote earlier today for us to take a look at We can see which Base Components we’ve selected to use and how we’re iterating over that data to give us that component that we designed earlier Now, if we take a look at this, you can see, initially, the very first thing that we have declared is a lightning card because that’s the outside container of our component If we go reference what that looks like in Sketch, you can see here, we have that other card Then, we want to then identify each of the tiles that can exist within that So here, as I said, we have our lightning card We can then say, “Template, if true, schools” and verify that that data’s been populated If that parameter doesn’t have any data, we don’t want to try and hydrate the user interface yet because that could cause some errors when we’re trying to display and render data that’s nonexistent That way, if we’re checking that that data exists, we’re not gonna make any of those mistakes Next, you can see, we have a list that we’ve pulled from the Lightning Design Systems So we’ve got a list that has dividers and space to allow us to use one of those utilities, to avoid having to pad out the cards and worry about the spacing ourselves, it just makes life much easier when it comes to actually padding out the component Next, we want to iterate over those schools and you can just see that we’re using a “for each” iterator here “For item,” we’re specifying is a school, and what that does is it gives us a variable to use for each of the items within the iteration And then we’re specifying the index for us to use in our key So, for example, inside of each iteration, we have a list item that uses the specification based on this “has dividers around space” class It then specifies the key here of school.i and inside of that list item, we have our lightning tile Now, the lightning tile gives us everything that we need to render the tile in the way that we just designed within sketch You can see here, we’re specifying a label We’ve specified an “on click” function here and we specified a dataset URL here We’ll get to that in a minute and talk about how we can use that to navigate to these records Now, inside of the tile, you can see here that we just have another list here where we’re taking the distance and then specifying the distance here, populating that in with the “school.distance,” same thing with our description, with our levels Now, when it comes to the levels, the levels are actually brought back to us in a list because you can have multiple different school types based on that school You can have elementary courses, high school courses, college courses, etc and the way we actually want to render those is reliant on the Lightning Design System If you ever have to render data in a list, always go and check out the list utilities that exist here So, for example, we’re gonna talk about a horizontal list You can go ahead and search for horizontal list here and we can see all of the shortcuts and classes that we can use to create those lists In this example, I really like using a list that’s spaced with dots And so, you can see here, we’ve got those bullet points here in between each item And so, what we can do is actually take that markup and bring that into our component to create that list And here, you can see, inside of our code, we have our template iterator here where we’re iterating over that “school.levels” field and then taking a look at that item, and then just displaying that value And then, like I said, you can see here, we’ve got that “list item detail,” we have our “dividers left” here and our “list horizontal” for displaying that data Now, the last aspect of our tile is those languages and those skills that they offer for their courses Here, you can see, once again, we’re gonna be iterating over, now, this time, the “school.languages” array and specify language as the item itself Within taking our lightning badge component, we’re just applying that label here as the language and generating our badge And that should loop through all of the different languages and create a badge for each language Now, lastly, you’ll see here in the footer here, we’ve just put some A notice to say that the data’s come from the code.org local schools database because that’s what they asked for within their service Please know, if you’re bringing in any data from external services, make sure you check out the terms and conditions, especially if it’s public data, to make sure that you’re giving them the proper credit for their data source Now, the last thing I want to touch on, as I mentioned earlier, is using that dataset capability to navigate to a school What we want to do is enable this tile to navigate to that school’s website when it’s clicked You can see here, we’ve specified a “data-url.” That data URL will allow you to go to the school’s website when you click on that component What that does is it specifies an attribute as part of this div here

that we can go ahead and grab So now, if we pop into our JavaScript, we’re gonna go ahead and handle that on click And so, what you can see here is we then have, inside of our tile, our “navigate to URL” function, we can pass in an event Okay In that event, we can access that “data-URL” by using, like I said a second ago, what’s called the dataset function And so, we can say, “URL equals event.currenttarget.dataset,” that’s what represents that data dash and then the name of our dataset property, and that’s URL And that should give us that URL Now, from there, we’re actually gonna use lightning navigation services to navigate to an external URL Now, in order to do that, we have to import the navigation mix in up here into our component We, then, have to allow our component to extend that navigation mix in This is a step that I always forget every time I’m writing a component I can’t tell you the number of times that I’ve questioned why my component wasn’t navigating somewhere and it’s always because I forget to do that And then, we can go ahead and bring in that lightning navigation service function into our method here And we can say “Const URL equals,” once again, our URL “This.navigationmixin.navigate” and then navigate to a page reference And in this instance, our page reference is a standard webpage and our attributes are this URL, and that will let us navigate to that URL from my component So the last thing we need to do before we can actually test this out is to open up our components configuration file We need to expose this component and we do that by setting “isExposed” to “true.” we then need to set our component’s targets and our targets, in this case, are just a lightning record page because we only want this to be available on record pages, not home pages or app builder pages or community pages Only record pages And then, we can specify the target configurations to let us know, “Okay, if it’s a record page, “what objects can it be visible on?” And so, in this instance, we’ve set the object as a property So we’re gonna go ahead and save this component and push that to Salesforce Okay, and save that and save that So let’s go ahead and see what this look like So we’re gonna go ahead and go into our DreamHouse app Great, so now back in our property record, we’re gonna go ahead and just edit this page here We want to see if our component’s available for us to drag on there So as we scroll down, you can see here, we have our local code schools component So great, it’s come through into the lightning app builder Let’s go ahead and drag that onto the page Here, you can see, even in the preview mode, it’s called up to API and return those schools, so let’s go ahead and save this and let’s go back And that’s brilliant You can see here, we have our schools that have come through via the callout Let’s go ahead and let’s look at another property and see what happens Let’s look at the Heart of Harvard Square You can see here, once again, we have our schools that have come through with our languages I really love the badges here in this use case You can see, when I click on it as well, it will take us to that page that’s available Again, click on Harvard University and we can see, it’s gonna pass us to those pages Looks like though, code.org need to update some of their URLs So if we take a look at Sketch, let’s see what the difference is I mean, it looks great We’ve got our components, we’ve got the style exactly as we depicted You can see here, we have our card that’s come through, each of our tiles, each of our languages coming through as badges And because we’ve been able to these back to those base components, it’s made it super easy to ensure that this style is what we meant it to be when we’re deploying it live And so, you can see here, our component reflects that Now, if we wanted to take this to the next level, we can actually start to look at some Lightning Web Component design patterns for bringing in a bit more responsiveness, state management and look and feel to the component The first one, for example, is loading You will have noticed the component itself started out really small and then just jumped to a larger size when the data was available We can get around this by putting in a proper loading pattern so that we know the size of the component and generally, we’ll be able to fit the certain shape, show a spinner and then allow us to hide that spinner when that data’s been received We can use a pattern like a “Stop loading” function with a set timeout that allows us to ensure that we’re not getting little flashes of spinners, but that we’ve got a consistent spinner and loading time for each of our components Another pattern we can rely on is an empty state It’s part of Lightning Design System

They provide loads of illustrations that we can use to display an empty state component You’ll notice here, we’re using the LWC messaging utility, which is actually a Salesforce Labs app that you can use to quickly show illustrations and messages Once again, we’re doing the same thing with our error handling We’re using that messaging utility to just pass on the parameters from the component that show us that error message Now, if you wanna take a look at that, it’s actually a Salesforce Labs app that I’ve built You can go ahead and download it You can get this source code on GitHub and include it in your projects for a quick and easy way to show the different types of error messages that exist within Salesforce and are designed by the Lightning Design System team So let’s take a look back at our code and let’s implement a couple of those patterns I’m gonna go ahead and replace this code with one that I’ve written earlier that brings these patterns in Here, you can see, initially, I’ve got my “Stop loading” function is, well, here That will go ahead and stop the loading of that component And you can see, at each of our functions here that are getting called by our wire, we have a “stop loading” every time there’s an error And if the data’s been received, we have a “stop loading” so that we know to render something within the component If we take a look at our HTML, we can go ahead and grab that and just drop that back into the page And you can see here, we have quite a few Conditional statements here around our templates about loading So if loading is true, let’s show the spinner See, if loading is false, we can then start showing some of our content and say, if there’s an error, let’s pass back to our messaging utility and pass the error context Same thing with the schools If schools are false, let’s go ahead and pass in an illustration You can see here, I’ve said we’ve specified an illustration as the messaging type and the name of that illustration Now, lastly, let’s go ahead and create a CSS file here to give our spinner a container And so, we’re gonna call that “localcodeschools.css,” okay And, in that, we’re gonna go ahead and paste in the CSS of our spinner container here This is just taking directly from the component library We’re gonna go ahead and save that Let’s save our HTML and then let’s save our JavaScript And let’s go ahead and refresh our page on our component and see how it’s responded So, once again, we’re on the Heart of Harvard Let’s go ahead and refresh this page And here, you can see, we have a proper loader that’s spinning the component before we see our component Once again, if we navigate to another page, City Living, you can see, it’s scrolling, getting the data, allowing the user to identify that it’s currently loading and then showing us the data instead of just instantly trying to hydrate a component that’s empty Now, like that, we’ve found a great Lightning Web Component use case in DreamHouse for creating those nearby properties and getting that data We’ve designed our component by looking at the dataset, how we can get the data We’ve taken a look at how we can use some user interface patterns to really design our component before we start writing code to ensure that our end result is going to be what our users expect and find useful We’ve then taken that and put it all together within the context and composition of the component to really understand how those pieces of the puzzle interact with each other We’ve then taken a look at some design patterns and enhanced our component by bringing in an empty state manager, a loading manager and things like error handling And, in the end of the day, we’ve delivered some really good value to our users in minimal time because we’ve put that effort into the upfront design Now, thank you very much for attending my session today If you have any questions or follow up, please reach out to me using the contact information we specified earlier If you’d like to reach out, please do I’m happy to answer your questions and I think it’d be great So, on that note, thank you very much and have a good rest of the day