Sample Gallery Summer '20 Updates

– Hi, everyone Thank you so much for being connected today Today, I’m going to give you a webinar to explain all the new features that we have included in our Sample Gallery Apps, which some of them match to the recent updates that have been released with the Summer ’20 release My name is Alba Rivas, if you didn’t know me I am a Developer Evangelist at Salesforce, and this is my Twitter handle in case that you want to ask me any questions Also, you can use the chat window to ask any questions and I’ll try to answer This is the forward-looking statement slide, which means that Salesforce is a publicly traded company and you should make purchasing decisions based on the functionality that is generally available and not beta or pilot However, in Sample Gallery apps, we always include references to GA features, well most of the times So you don’t have to worry about that much regarding the content of this webinar First of all, I want to explain to you what the Sample Gallery is If you don’t know the Sample Gallery, this is a web page that you can access from Trailhead on And in this web you are going to find a set of apps Let me navigate there for a second and show you what it is about And each app is going to have a description and also information about the different features that the app showcases We’ve built this Sample Gallery because we want to give developers tools to learn all the technologies that we have in the Salesforce platform to build applications This includes pro-code technologies as Lightning Web Components or Apex But also includes low-code technologies For example, we have an app called Automation Components that is fully built with low-code Some of the apps simulate a customer use case That is a case of E-Bikes that simulates a Bike Retailer company application DreamHouse which simulates our real estate application and also Easy Spaces and Redwoods Insurance Also, we wanted to create some apps to give solution to a specific coding problems or specific problems when building apps And that’s the reason we created LWC recipes for example, that shows you how to solve a specific problem with Lightning Web Components It contains very simple examples that have no more than 30 lines of code We also created the same version of the app, that opens source that you can run outside of the platform And we have created very recently Visualforce to LWC to help you move from Visualforce to Lightning Web Components and Automation components This is the one I mentioned before to help you adopt our low-code technologies So every app has a button that allows you to navigate to GitHub Let’s take a look at this one, for example, and in GitHub, you have the code, the full code for the app and the instructions on how to install it using different means You can install the apps using a scratch org or a developer org or you can use, for example, Trailhead playground, well, which is basically the same as a developer And sometimes you have also packages that allows you to install the app directly And also instructions on how to create some sample data, how to make things visible for the register user as for example, you assign enough permission set or something similar, et cetera So it’s very useful One thing to highlight is that we accept contributions So if you want to make contributions to the Sample apps,

there is a guide that you have to follow to do them in a correct way, that we are super happy to get your contributions and we will be happy to guide you if there’s something that you are not following or web Okay, so with that, I want to focus on the features that we have recently include in the Sample apps Most of those features relate to Summer ’20 new functionality, right? What we do is that in every release, once we have the pre-release orgs available, the first day that we have them, we create a new branch that is the prerelease branch For example, in Summer, we have the prerelease/summer20 branch, which is there at the moment because we are merging that branch into master next Monday So well, in every release we will call it like Summer ’20 or Winter ’21 or whatever, right? So what we do is from that point, we’ll start working on that branch And we do two kinds of pull requests First, we do maintenance Sometimes we need to do maintenance, for example, to upgrade the API version or include new configurations that have been made available on that release, or even sometimes to fix some metadata that’s happened to us this release because the FlexiPage metadata has changed because of dynamic forms Dynamic forms is now in, Non-GA Preview So it’s available in your org and you can activate them and start playing with them, but that’s going to make you change the metadata of the flexi pages if you have them in your version control system And the other thing that we do is to include new features that showcase the technologies that have been released with that release, in this case, the Summer release And that’s the reason we decided to create this webinar, to explain which features we have included in our Summer branch in this release So let’s start talking about these features The first feature I want to talk about is Lightning Message Service Lightning Message Service was there in the Spring, but it was better, and now it’s generally available There you have the link to their release notes, if you want to read them And if you don’t know Lightning Message Service yet this is a service that allows you to communicate components built with different Salesforce technologies You can communicate Visualforce pages with Aura components, with Lightning Web Components and even more because you can communicate them if they live in different dom hierarchies For example, if you have a Visualforce page in the utility bar, and you have our Lighting Web Component in our lightning console app tab, you can communicate then using Lightning Message Service It’s a service in which you create a message channel, you define a message channel in which you are going to publish messages and all the components are going to subscribe to those messages Similar to platform events, but it works on the client and at a page level, session level as well I mean, it doesn’t work if you have different pages open or different sessions open, right? So what we have done in the Sample Gallery apps regarding Lightning Message Service is to replace the usage that we were doing of Pubsub, which was the component that we created to allow inter-component communication before having Lightning Message Service and we have replaced it by Lightning Message Service in all the sample apps We have done that in greenhouse, on Ebikes as well, and in a lwc-recipes Additionally, we have created some new recipes in lwc-recipes to showcase how Lightning Message Service works

And the first thing to, the best way to do to see that is to show you them So here I have already opened an org in which I deployed Lightning Web Components If you deploy the Summer branch, because it’s not merged yet, right, in master, we are going to merge that Monday because it’s the Monday after all the production orgs have been upgraded You are going to see that there is a new tab called message service This new tab contains three components that are publishers We have a Lightning Web Component publisher, an Aura Component publisher, and a Visualforce publisher They publish messages into our lightning message channel And we have three components which are subscribers We have a Lightning Web Component subscriber an Aura subscriber, and a Visualforce subscriber Sorry for Visualforce, we have two We have Visualforce Remoting, and Visualforce Pauseback action And I’m going to explain to you why in a second So what we do is that every time that I click on a contact, a message is published and the subscribers read that message and retrieve the contact information from the backend or from the cache depending on the technology that we’re using and depending if the record has been accessed before So here, for example, if I click on Michael Jones, the components are going to retrieve that contact and are going to update the component itself So what did we decide to create two different components for Visualforce? Well, because the mechanism in which you can connect the Visualforce subscriber, to the action that retrieves the data from the backend is pretty different if you use Visualforce remoting or the traditional post-back action So we decided to create both There you have the both implementations, and you can take a look at the source as with any other recipe, for an org components recipes Great So what is? Yeah, I wanted to mention that there is a small difference between the GA version of Lightning Message Service and the Beta version You know, that when we publish something on Beta is also to gather feedback from customers and sometimes things change a bit, right? And one of the things that has changed is that we have included a new scope variable that you use to configure to which scope the message is going to be published The scope variable by default has a value which is active And it means that the listeners for the message are going to be those in active sections of the page So for example, if you have a Lightning Console app only the top that is active is going to be listening for that message However, if you configure it to be a scope application instead active is going to go all over the place to also the invisible tabs, for example, in our Lightning console app, and that’s like a difference that you have to bear in mind because you may need to change your implementation if you were using the Beta version Okay, whereas, well, there is something that has been released with Summer, which is CSS sharing Now you can create a CSS only mode and module and share it among different Lightning Web Components This is very useful to reuse styles that are going to apply to several components on the same page or on the same application, right? And there you have the link to the release notes, if you want to read them And the way to do that is super easy So first you create a component which just contains a CSS file and a metadata file Then in other components that you want to group that CSS, you import the module using the @import syntax and then you can directly use those CSS styles

within your components It’s super simple, right? What we did to showcase that in the Sample Gallery apps was to use a CSS module share between two existing recipes And I’m going to show you that as well So here, if you go to the composition tab, these were two existing recipes We had composition basics and composition iteration, but we realized that this CSS styles that we were applying to both of them were very similar and we decided to create a module to share those styles So what we did was to create a module called CSS library that contains the shared styles As you can see this module just contains a CSS file and a metadata file And then we imported that module within the two components We imported it in composition basics.CSS, and also in composition iteration.CSS As you can see here, you can keep adding more styles that will also work in the same way that those imported from the CSS library, you can directly use them in the markup as we are doing here, right? Contact-tile Great What else Well, another thing that has been released with Summer are two models that you can use within your Lightning Web Components to check if a user has a specific user permission or and a specific custom permission In the first way, you import the reference to the permission from the Salesforce user permission module and in the second way from the Salesforce customer permission module Again, we want you to highlight that in our Sample Gallery, and what we did was to create a new recipe that checks for custom permission and shows, well, conditionally shows a piece of markup or another piece of markup depending on that customer permission And I’m going to show you that, Okay, so in this case, you have to go to the Misc tab in the LWC recipes There you are going to find a new recipe called Misc Permission-Based UI As you can see here, we can see a message that says the permission set is not assigned This is happening because my user, the one that is viewing the component at the moment doesn’t have that custom permission assigned via permission set or Opera file, right? What the description of the recipe says is that what you can do is to assign our permissions set to your user that contains that reference to that customer permission And then the markup is going to change You will have to refresh that page, right? We’re using these in the most simplistic way, because that’s the propose of LWC recipes We want to give you super simple examples that help you learn very easily, right? So I want to show you the permission is this one, right? The permission set, and the permission set has this custom permission assigned So what I’m going to do now is to assign the permission set to my user as a recipe explains And I’m going back, and I’m going to reload the page to see how this has changed Now, the message says, “The permission set is assigned.” And if we take, I look at the code for the recipe, we are not using Apex to check that customer permission, we are using the new module that is part of Summer ’20 release Bear in mind, this doesn’t free you from checking for permission servers, right? But sometimes it’s super handy to conditionally render some pieces of markup

and do some things on the side of the client Okay, I wanted to highlight other Summer ’20 features for which we haven’t include a new recipe or something else in our Sample Gallery apps yet, but basically because we didn’t have the bandwidth to do that until today, right? But I want to highlight them because first, I think they are also interesting, and second, We may probably include something for this in the Sample Gallery very soon, right? So the first one is a new community module Well, there are two new community modules that have been released Salesforce community ID and Salesforce community based path This allows you to detect the community in which the Lightning Web Component is being visualized And I think this is going to be really useful in the case that you have several communities and you are using the same Lightning Web Component in the different communities And you want to, for example, show something differently in the component depending on the community in which it’s being visualized So super interesting We also have added support for the getElementsByTagName and getElementsByClassName functions Bear in mind these functions are part of the element class on the web API, right? And if you want to query this shadow root interface, this is the template of a component You still have to use query selector and query selector org, right? Don’t get confused with that But said that I think these are two very useful new additions that are going to streamline the way in which you write your code in some of the cases Finally, I wanted to mention something that has been included in Apex This is an annotation that allows you to define if an Apex class is serializable or deserializable And it’s very flexible because you can assign different values You can say that it’s going to be serializable Never, or a same name is spaced or same package applicable when you have second generation packages or always So you have similar values that you can assign and control the way in which it’s serializable or not Whereas, I also wanted to mention some other features that we have included in the Sample Apps in the last month, right? They are not strictly related to Summer ’20 updates, but they fill in some of the gaps that we wanted to fill to help developers adopt some of the features, right? One of them, the first of them is our refactor that we have done to our error panel component The error panel component was aligning work components that we were using all the apps And these error panel component is mainly used when we are using Lightning data service or Apex to retrieve data, and no data is returned, and an error is returned instead, right? So we took a look at the Lightning Design System and we realized that the correct way to show an error when no data is written is to use a no data illustration as this one that we are seeing here And that’s the reason we decided to refactor the panel component Also, in the middle of a Spring on Summer release, the SLDS team, released a plugin for VS code, which is called SLDS validator These plugins examines your CSS code, the one that you have in your CSS classes but also in HTML files, says to you, if you are using the SLDS classes and tokens correctly, and sometimes it gives you suggestions on places in which you can use them For example, you are using hard-coded values instead, right? What we did was to run these plugin,

over all our Sample Apps, and fix all the suggestions and arrows that the plugin was giving If you take a look at SLDS and the Lightning Design System webpage, there you are going to find a section that talks about the validator And there you can go to the response to the Visual Studio Code store And from there is install the plugin and see a demo of how the plugin works, very useful Another thing that we did was to adapt all our continuous integration system to use GitHub Actions, including code formatting verification with Prettier linting, text execution, coverage reports, packaging, we generate unlocked packages automatically in some of the apps and much more If you want to take a look at how we have implemented GitHub actions, you have to go to any of our apps, in this case I open the easy-spaces one And you have to go to the Actions tab in GitHub There you can take a look at the different workflows that we have defined We have workflows defined for when you create a pull request that go to the prerelease or to the master branch, and some workflows will execute in every commit so that we make sure that the quality that we expect in the code is being followed, right? Also, one thing that we have included recently is the, did we have to configure our apps to follow the ESlint configuration for Aura components, right? You can take a look at this link here if you want to see how to do that If you’re using Aura components and you want the linter to detect problems with your Aura code or bad practices, right? And finally, we have created a new recipe called ldsGenerateRecordInputForCreate, is this recipe here, that I’m going to show you better in a LWC recipes, right? And this recipe shows how to use get record, create defaults, and generate record input for create, to create a form that enforces field data security and default values In 99% of the cases you’ll want to use Lightning record form and Lightning record edit form and view form But there may be some cases in which you want to create your own custom form and in those cases, we wanted to showcase how to do that using those functions, because I mean, it needs a couple of lines of code, and this is the code of the components if you want to take a look What we did was to create a new field on account, which is area number, and this field has a default value and is creating create table And that’s the reason we are showing it in the UI You will see that if you take a look at the components Finally, I want to mention that there are some blog posts that we released a couple of days ago that are part of a CDS goal learn MOAR These are published in the developer blog There are also another set of blog posts in the admin blog if you want to take a look And the ones in the developer blog gives you highlights about features that have been included in Summer ’20 for release management, for Einstein vision and language, for Lightning Message Service in this one, it explained everything I explained to you about the scope and the recipes, and so on Lighting Web Components, in this one you can see all the explanation about the different models that have been released this year, just sharing and so on And finally, this one summarizes what we have seen in this webinar The updates that we have made to the Sample Gallery apps and all these latest, right? I certainly recommend you to take a look at them if you want to know more

And with that, we have arrived to the end of the webinar I hope that you liked the webinar If you have any questions, you can ask me on Twitter, I remind you my Twitter handle, which is AlbaSFDC, Alba like SFDC And thank you so much And I hope to see you in the next webinar Bye, bye!