Visualforce to LWC Series - Reusing Visualforce with LWC (8/19)
Great. So, hello, everyone, thank you so much for joining today. Today, we are going to. Talk about, visual force to a wc, again this is going to be the fourth, webinar, in the series. And concretely, we are going to see how to, use your existing, visual course pages. With lining with components. My name is alvarivas. I am a developer. Evangelist. At salesforce. And this is my twitter handle. Where you can ask me questions, later, if you want to. And, i am here with peter today. Hi everybody, my name is peter chittim. I'm also a developer evangelist. And. I am the team lead for the developer, evangelist, team in emea, and north america. Great. So. As i said, this is the fourth, webinars. In the visual force to, lwc. Series, this is going to be the last one, for the first, three webinars, you have the. Recordings. Available. In english, and in spanish. And. Uh first, i want uh to. Present in a slide that we use successful. Because circles, is a publicly, traded. Company. And, this means that you should make purchases, based on the functionality, that's, currently. Available. And with that, i'm going to start by reviewing. What we, explained. In the previous, webinar, if you haven't watched them, you have the opportunity, to do that. In the first webinar. We, reviewed. The architecture. And coding, concepts. Of lining web components. Always, from, the perspective. Of a visual course developers. And we started to talk about how to configure, your development. Environment. We talked about how to debug, landing with components. We compared, visual, force architecture. With lighting the components. Architecture. And we started to talk about things, like, properties. Getters. Etc. In the second webinar, which was named coding, concepts. Continued. We continued. Talking. About. Coding concepts, that you can extrapolate. From visual, force, to learn lining with components. We saw how to, implement, conditional, visibility. How to implement. Iterations. Composition. And much more. Right. If you see the screen. There are two links for the videos, the first links, are for the english recording. And the second link is for the spanish, recording. And finally, the third webinar. Was. About, how to work with salesforce, data. This is very important. Because, in visual field you normally, use, a standard controller. Or apex. And in lining with components, we have, uh more ways to do that and it's important, to know when to use each of the different.
Approaches. So here you have the recordings, as well. And with that let's, start, talking, about, how to reuse. Your visual for space. In, lining web components. First i'm going to give you some tips. That. You must know. To, be able to reuse, your visual for spaces, in learning experience, in general, right. So first of all. Bear in mind that, if you want, to, reuse. A force, that you have in your organization. And you want to make it available. To be. Visible. In a builder, or community, builder, or the utility, bar, any of the local, tools that we have in learning, experience. You have to, check, a setting. Which is this one here that you can see in the screen. Uh this is part of the metadata. Of the visual first page so, you can do that. Programmatically. If you want to but that's important. For example the demos that we are going to see today. Include. Some visual force page in a builder. And i had to activate. That setting. Next. You must, know, that there is a way in which you can include. The lining, the science system. Style, seats. Into your visual first page. And use them. There is a visual for stack, for that, called. Apex. Slds. And, if you include that in the page. Right away. The page is going to, download. Those, style sheets the ones. That. Conform, the line experience, look and feel, and you are going to be able to use them. In your, this workforce, page, for example, if you have a system visual first, page and you want to, extend. It with yes, adding. A. New portion, of code and you want it to look at legs. As lex, you are going to be able to do that. This way. And finally. There is, a, very, nice, tool. Well it's really a. Configuration. Property that you can use in your, apex, pages. So that's, the, standard. Visual, force component. Are a style. With the look of learning experience. So imagine that, you have this visual first page, here. What you can do. Is to activate. The lining, style, sheets. Setting, in the apex, page definition. And with that activation. When you look at the page, in learning experience. The base components, the standard, visual force components, that you have used, in the page are going to look, much nicer. If. You have custom, code. The custom, code is not going to be changed, but this setting. But, as you can imagine the combination. Of this, setting. With the inclusion. Of, lining, the sign system, style seats, in your page. For your custom, code, can. Make your visual, force page, much more appealing, in learning experience without having to, implement. A single, line, of lining web components, code, if you don't. Want to do that. For now right, right. Okay. So now, let's say that you have a visual force page, you are, uh happy with that this one for space, the performance.
Is Okay, you don't want to, re-implement. That painting, lining components, you have. A change, the look and feel of the page using the tools that i have just mentioned. And you are okay. With that portion. But you want to extend that and you want to. Do that by using, lining web components. Or our components. As well right. And you want to. Create, a. Lining web component. That you want to use inside. That page, for a specific, portion, of the page. There is a tool that is going to allow you to do that, the tool is called, lining, components, for resources. And as i said, it works, both for aura components, and for lining web, components. So basically. In the tool. We are going to be able to. Include, a lining where components, you can see, here an example, in the page, that we have aligning component. In green. And we are including that lining component. In a visual first page which is, in orange. And. Well i already said that both lighting requirements, and aura is supported. But the technology. That we are going to use to do that, is, lining, up right. That is going to be used, behind, the scenes, you are not going to. Have to configure. Um. For example the authentication. Right because that is going to, be done for you, but the technology, that is behind. The scene is lining out and this is important, to know because, that means that we are not using an iphone. We are embedding, the component. Itself. And we are going to see that in a moment because we are going to to inspect, the dom, to see how the. Combination. Of the visual force page, and the learning web component. Have. Has been done. And as i said, uh what, this technology. Adds, to, on top of lining, out is that all the authentication. Uh, is set up for you you can forget, about that. It's not the same as when you are using lining, out, outside, of the platform, that you have to configure. The authentication. So. Uh. What we are going to do is to implement. This, use case here. And for that well i have already, done it right. Um. Here. We have a. Visual first page which is the one that you have seen. In the. In the. In the presentation. And, we have included. A, lining component. The way to include, aligning, components.
Using. Um. Lining components, for recent force which is the name of the feature. Is to, use, first, a. Standalone. Aura, app, which is going to be. An app in which we declare, the dependencies. With that lining web component. We will say that we want to use. That the, aura, app. And then we will create, the component. Dynamically. In my case the name of the component, is my landing web component. And. The name of the la of the or app is lining, web component. Container. This function, receives. Other parameters. For example, we can set up some, initial, values. To the, component. Api, properties. We have to define. The, id. Of the, html. Element, this is the portion, in which we want, to, include, the line in the component, we want it to be rendered. And finally. We can define. A callback, function. That is going to execute. Once the component. Gets added, to the visual first page, right. This is the definition, of the. Aura, container. App. There are two things, that you have to do, first, you have to extend. Lining. Out, up. There is also an option to extend. Another, class, called, lining. Out, up and styled. Which doesn't. Inherit. The lining design system. Uh. Strike, style sheets. But, i recommend, you to to use this one. And. Uh also you have to make, the application. Global. Right, and then. Declare, the dependencies. With the components. That you want to, create, dynamically. In your resource for space. Um. I'm not going to give you more details, about the component, for now we are going to open. The, um. Dior. And we are going to see, uh the result. Of using this technology. To. Embed. Uh lining web components. Sorry, it opened, in a different. Page. Here. And, here. Um. I created, an app which is called lining web components, for resource, force. And here we have. The, uh. The page. So first. This part, here is, belongs to the visual force. Page. And this, part. Here, belongs, to the learning, components. If you see. In the code. The value, the initial, value that we, passed. To, a label property. Was. Initial, label value, right, i'm going to close this. And. It happens, that that label, is a public, property. That i'm using, in the component. To define. The label, of the button. So you can see here, that the initial, value. Has been correctly. Set. If, what. Sorry, we just want, to. Go, to a different. Yeah. Okay. So. That's fine, i've explained, how to. Integrate. The lining with component, within, the visual first page, but, now. How, do we communicate. Them right, we need to in most of the cases we are going to need to pass information, from the result for space. To the lining, component. And we are going to need to pass information, from the lining work component. To the research, page. The way to do that. Is. Following, the same principle, that you follow, when you compose, landing work components. So basically, if you want to pass information. Down. You do that by. Setting a value to public, properties. Or by calling, public method. And. The other way around, if you want to pass information. Up from the lining web component, to have your surface page. What you normally, do is to fire an event. From the lining, component. And to, define. A listener, or a handler, for that event, in the visual first page. We're going to see, how to do that. By the way i promised to you that i was going to. Uh, inspect, the dome. To show you the, um. Aspect. Of this. Uh. Of what of the, final, dom that is rendered, this is probably. Very. Small. Yeah. So. Here, you can see, that, we are not using, an iframe. To embed the component. We are, really, using. The, custom. Lining web component. That we have created. Right. Okay. So, what about the communication. Patterns, well, the. First, communication. Pattern that we are going to, explore. Is how to. Send information. Down. By setting a value to a public property. We have already used a public property in our, component, which is the label property. So what we are going to do. Is to. Create, a method. That sets, a different, value. To that property. For that, we are going to query. For. Getting, the component. Right. You saw in the dom that the name of the component, was. Was, c for custom is the custom number space. And then the name, of the component. In kevak, case. So what we do is to query, for that component. And then, we can. Directly. Set, the label, value. But using the dot notation. What i did to test, this, is to create. A custom, button. A command button sorry. That is going to call, the set, lwc, property. Method. Let's try that out. We come, here. This is the button, right. And, pay attention, to this label, because, if, i change i press here, yeah, the label, change the value. Okay. So that's, one. Way in which you can send information, to the lining, component. And the other way. Is to. Again, sorry, i don't know what happened, with this but it's not. Configured. But it should be. Okay, so the second way. Is to. Call, aligning, with component, method, for that i have created, another, command, button.
And The way to call. The lining, with component, method. Is very simple. Again, what we have to do is to. Query. For the, element. Of the dom. That is the lineup, component. And then, we can, call, a method. Using, the parentheses. And even you can pass, some parameters. Here, if you want. This method. Is a public method. That we have defined, in the lining web component. You define public, methods, and public properties, by using a decorator, which is the api. Decorator. Imported, here at the top, if you didn't. Know, about. That method. About that. About public. Properties, and methods before. So. In this method. What we are going to do is that, each time, that, is invoked. We are going to, change, a property. Which is message. And we are going to. Um. Update. The number of times. That the method, is inbox. Invoked, we are going to keep track, of that. If we take a look at the markup, of the component. There is an, element, here in which i'm showing, the message. So let's try that out. Okay. Let's go to the page. Again. And i will try not to change with the trackpad. Okay. So, pay attention. To. This paragraph. Here because this is what we are going to change, by, invoking, the method. This is the button that we define on the visual first page. That we are going to press. And, there you have if i press here. I'm calling the method. On the child component. And i'm changing. Its, a, message, value. Great. So. What's missing now, we need to. Test. How to pass information. From the lining way component. To the visceral, space, and for that what we have to do, is to fire. An event. From the lining, component. And. Make it propagate. And escape, the shadow boundary, the shadow boundary. Is a boundary. That exists. And. Surrounding. Each. Individual, lining web component. And if you want. Events, to be able to surpass, that, that boundary, you have to configure, them, specifically. So here what we have done is to. Uh, create a button. That has a handler. And this handler. When we click on the lining, component. Button. Is going to dispatch. An event. The way to configure. The event. To escape. The shadow boundary, is to configure. It as, bubbles, true. And compose. True, okay both properties. Need to be true. Then, the other, uh. Part, the, the, code that you have to implement in the visual first page.
Is A listener. For that, event. You can do that in several, ways. But, what. I did here, was. When the component. Was added to the visual first page. I. Did a query, selector. Again to get. The, component. Element. And then, i added, an event listener. Here i'm using the same, event, name. That, i, defined. Here. And what i'm going to do, is to, call. A function, called, handle. Lwc. Event. Each time. That an event, is listed. We take a look at that function. The, principle. Is the. Similar, to what i did before. What i'm going to do here. Is to, look for a paragraph. Inside, the visualforce. Page. And i'm going to. Update, the content. To. Represent. The, number of times that the event. Was, listened, and i'm going to keep track, of. That number of times. We take a look at the. Paragraph. Is this one here. That has an initial, value of zero messages, listen. And we are going to increment. That. So. Finally. If i click this button. Pay attention, to this message. Search, here because it should, change. Yeah, and there we have, right, so this is a way to pass information. Up from aligning, with components. To a visual first page, when you are using lining components, for visual force, but. Also for example, if you are, um, composing. Two lining, components, together. Or even, an or a component, with a lanyard component. Okay, so. With that. I'm going to. Give the control to peter. All right great uh thanks a lot alba. Uh hey before we continue, though um, i had a couple of questions, that i thought i'd ask about, uh using. The. Visual force, uh, sorry the lightning components for visual force, features. Uh and the first one is i know that, uh. This feature is using, lightning out. And the lightning out is in beta. Um so what does that, mean, as far as the release status. For. Uh lightning components for visual force. Yeah so it's true, that lining. Out. In a genetic, sense. Is beta. If you want to use lining out, in. Outside, of the platform, that feature, is vega. But. Lining components, for visual force, is ga. So you can use, this feature, right away. Both for aura, and for landing with components. Excellent. Cool. And then, the other question i had. Was. Um, i noticed that you included. Just one, lightning, web component. In, uh. In your visualforce, page am i limited to just one of those. No you are not limited. You can define. As, many. Dependencies. With any web components. As you want to in your, standalone. Aura app. The only limitation. Is that you have to use the same aura, app. In. For every. Visual force page but you can include, as many lighting your components, dependencies. As you as you need. So there's like one standalone, app but then you compose, many, put composite, of many different components, okay, cool. And then, last question. Uh can i use any base component. With, lightning components for visual force. Okay so that that is a good question. Most of the base components. Are supported. At the moment. But. Some of them are not, i would wait to check that, is to go to the component. Reference, in the landing web components. Library. And there is a section, on the top right corner. That, says. Experiences. That say okay. Defines, the experiences, that are supported. The experience, that needs to be supported, is standalone. Or. That one, got it okay, cool. Um. Excellent. Uh that was great uh it's been a long time since i used, um, either lightning out or the lightning for visual force it was a good refresher. Um and, it you know it's pretty powerful like the, the. Ability, to be able to pass events back and forth. And that actually really aligns well with lightning message service, so let's uh kick this off and talk a little bit about that. Um. Now. Lightning, message, service. If you think back to how, horror works or has an event, feature, that allowed you to sort of bubble events, all over the place. Um, and when we launched lightning web components. That, feature. Didn't support lightning web components, it only works for aura. So. We were looking for a way to duplicate, that functionality. To have a kind of cross. Dom. Functionality. But that works, in. All of the salesforce. Ui technologies. So, um. If we look at what the principles, of lightning message service, are. The first one is. Client side event bus that works between don branches. And the second one is equal, citizens. For, uh. Lightning web components, aura, and visual force so, uh. So that's really the the core, piece of what lightning message services. Um there's sort of a third thing which is, don't be surprising. There was a feature, of aura, events where. You could fire off an event. And it would, actually. Trigger. An update, on a component, that was, not visible. And that threw some people off, um so.
Lightning Message service has launched with a feature called scope. That allows, you to determine, whether. Uh, a, an active. But, not selected, part, of the ui, can actually, trigger functionality, on a component. Now i'm not going to talk about scope, in this particular, presentation. But, when i talk about landing message service i try, and make sure i talk about those three core principles. But, keep an eye out because we're going to be hopefully doing some new some, additional, content on scope in the near future. Uh just to illustrate those principles, a little bit when we talk about communication. Between dom branches, this is what we mean um, you know we have potentially, very, complex. Large, dom branches. Um that, uh you know the standard. Uh custom. Event, dispatching. Functionality, that exactly what, alba showed a little bit earlier. It's very difficult, to have messages, passed between. You know deep, points in those two dom branches. So the lightning messenger, is published. Is intended, to be able to send a message, across between, those, very complex, dom branches. And this screenshot, is meant to illustrate, that a little bit where. We have a number of different places, on this user interface. Uh, you know in this case we're showing a console, application, so we have console, tabs, console, sub tabs we have. The utility, bar pop-ups, we even have, a utility, bar. Window, like so this is actually a separate browser window that's been popped up. And, all of these, are places where you can fire a message off. And have it be received. And listened to by another component, that's, subscribing, to that message. And you can imagine, that in the complexity, of this dom just trying to bubble up. Uh an event. A standard dom event or a custom dom event, would be very tricky, to make this work so, that's the whole point behind. Lms. And then as we said, you know we wanted to make sure, that, lightning web components or in visual force were all equal citizens, with lightning message service. Um. So. So that means no matter where i fire an event from, you know whichever, technology. It's being fired from any of those other technologies. Can be subscribing, to it. And that brings us to this discussion. About, using, um, you know how to. Uh use visual force in lightning. So. The lightning message service, architecture. Is comprised, of two, key features. That you need to make sure are in place, uh the first is a message, channel. Um and this is you know this will be a named. Message. Uh, and i'll show you how that's configured, it's actually configured, in xml, it lives in part of your project. It kind of looks like a custom object by name with that double underscore. C, suffix. But just be. You know, be aware that this has nothing to do with custom objects. It in fact. Never really goes to the server it is purely client-side. So just, bear that in mind. And then the other part of it. Is, the message, service, itself, and the message service has a few different apis. But the most important, ones are publish, subscribe. And, unsubscribe. Um. Publish being the way to send a message. Uh, over lms. And, subscribe. Being a way to. To. You know ensure, that. Some component. Or visual force page, can listen. For messages, on a given message channel. And then we'll have a, callback. Function, to respond to that. Unsubscribe. Of course it you know this works really well if you want to explicitly. Subscribe and unsubscribe. In my examples, though. I'm, attaching, the subscription. To, the page load. So. Essentially, my visualforce, pages, are going to automatically. Load. Uh, or sorry automatically, subscribe, the minute that they are available in the dom. Uh and then i'm actually going to be showing this in the context.
Take A look at the documentation. For lightning message service anybody. Who's interested in kind of knowing what you can do it does stipulate. You know these are the things that you shouldn't, pass over a message, channel. Okay, understood. And, another question, this time a more general, question. Is. Well. When i explained, lining components, for visual force the use case was that i wanted, to include. Aligning, with components. Within, the surface, page, right and, i wonder. If in that use case, you can use landing message, service to pass messages, between the lining component, and the visual, stage. So. Currently, lightning message service, does not support, lightning, out. However. Uh. In the context, specifically, of lightning for visual for or sorry lightning components for visual force. I don't know that it explicitly, states that. My sense is that, no, you you would not be able to actually. Sort of traverse. From. The visual force page, to the lightning component, in that particular, context. But what you could potentially, do is in that visual force page you could receive, the message. Right. And then you could use a sort of local, event handler, that could then propagate, that event. Uh, to, the lightning. Component, in lightning components for visual force. Okay, thanks. Yeah, i. Really like the demo i think it's a very interesting, technology. Especially. The, fact, that you can, communicate. Different technologies. In different dom hierarchies. And i'm really looking forward. To your sessions. Or recordings. About. The scope. Yeah scope is really cool, and. Uh. You know just to sum it up essentially. What scope. Allows you to do is that in certain, contexts. So for example. Uh like a tab, in a console, app. Uh, you can make it so. The the default, is that. Those components, will wake up, when the tab is active. And they'll go back to sleep. When the tab is not active. However. If you want a component to always be active you can explicitly, tell it to basically, always be awake. So there's some really cool, sort of granular, control that you can have over components, under certain contexts. Great. Cool. All right so that kind of brings us to resources, and i think most of these are yours to share alba. Yeah, so. When i've shown this slide in the previous webinar, but if this is the first webinar, that, you watch about the visual, studio. Series. Yes, uh, so that you know there is a new sample, app called visual, force to lwc. That contains. Typical, code patterns. Implemented, both in this workforce, in lining, and, lwc. And the idea is that you. Can, see the solution, and get, used to the lining web components. Code very easily. And also, there are. Three, trade head badges. Related. To this surplus, to a wc. Topic. And the first one is a quick start. It's a quick start for the visual force to love ucf. Uh recently, we have released, quick stars, for several, of our apps in the sample gallery. And that's going to. Explain, to you the motivation. That we had to create that app and how to. Deploy, it and. Some explanation. Of the code. That. Confirms, they have. So that's going to be very useful there is another one. Which, is called, lining with components. And salesforce, data. This one is especially, interesting. For visual force developers, because the way in which you work with salesforce, data, in line with components. Is. Different, to the way in which you do that, in visual course and you have several alternatives. And you need to know which is the best one to choose, for. Every. Single use case. And finally, there is another. Batch called, lining with components. For resourceforce, developers. Which is, especially.
Created. For you for people who are visual, force developers. And want to make them move to lining the components. And they know, they don't know where, to start. So that one, is especially, for you. Uh if you can go to the next slide peter, i can, talk about the, uh some more resources, that you can take a look, uh, for. Learning more about today's, webinar. Um, in the first, url. You have, the, code, examples. Of. The demo edit the one about learning web components, for visual force. And. Then there are some more resources. About. Lighting message, service, there is a blog post that will release, in summer. Which is part of our learn, more serious. And, i think, uh. The next one is yours, if, peter, yes. So um. The the work that we did in the lms. Uh, lightning message, sorry lightning web components, recipes, app uh if you want like a sort of quick, way to get to all the bits and pieces of that, uh there's actually a github, issue, that was used to track that work. And it's kind of a quick quick and dirty way to go and find just the code for that. Although if you download the app and you're running it it's really easy to get to there as well. Um, also, i, mentioned scope, very briefly. Uh, there i actually created a sample, that just focuses, on how scope works. Uh so if you want to go and take a look at that um that can be kind of fun to play around with. Great. And finally. I, believe you there are some other trail, head. Modules, that already, existed. That give you tips. To, move from this firefox, to landing experience, in general, it gives you the information, about, how to configure, your base. Pages, style limited, edition, etc and i think, those, are going to be very useful, as well. So. I think, we have arrived to the end of the presentation. I think so. Yeah, it was very fun to present, with you peter. Yeah me too thanks alba and thanks everyone for listening i hope this was helpful. Bye bye, bye.