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.

Of The lightning, web components, recipes, app, this is some work that i was doing, as, lms, went into beta. Where i wanted to show an example, in fact it's the screenshot, that i showed earlier. That showed, uh lwc. Aura, and visual force all side by side, you know all, uh publishing, and subscribing. Uh to, a single message, channel. And so, you know the, uh the visualforce, recipes. Are comprised, of a publisher. And you can see that on the top there the top row. Um there's also. A, subscriber, that uses, visualforce. Postback. Another subscriber. Using visualforce, remoting. All of the the actual. Code or the javascript, behind this is sitting in a set of static resources. And because we have, um, visualforce, remoting. In those cases, we have to manually. Create the dom. So there's a templates, js, as well, in that static, resource. And all of my javascript. Is actually using es6. Modules, for their architecture. So basically, each page is going to do an import. And then that's going to make use of that. All right and that kind of brings me to my demo. So let's go and take a look at that. Uh where are we, there we go. Uh so this is the lightning web components, recipes, app this is available. As one of the sample apps, if you actually. Uh go to the trailhead, apps, github, org. You can find all our sample apps. And. If i go to the message service. Tab here. You'll actually see the examples, that we created. And so each of these examples, the web component, the or component. And the visualforce. Page. Publishes. A, message. Uh over the same message, channel. And then if i scroll down a little bit you'll see that there are, also, subscribers. To these, so. If i click on michael jones here for example. I can see that you know all four of the subscribers. Have picked up that message. And. They're going, and retrieving, that one record. So let's go take a look and, you know in this case because we're talking about including. Visual, force. In lightning. I'm just going to focus, on how we accomplish, the visual, force implementation. Of this. However, there are some recordings, out there, that talk about, all three of these if you want to take a look at this. Okay. So here i am and to get started, we're actually looking, at the, message. Channel, itself.

So The message, channel. You can see over here. Is called record, underscore. Selected. Now what you'll see is that when i reference that via api, name it it depends, on that underscore, underscore, c suffix. And that in fact, is a completely, implicit, feature, so. That's not something, you, specify, it's something that's just sort of automatically, specified. By the framework. All right so moving on. Um, what we have here. Uh is the publisher, visualforce. Page. Now this publisher, visualforce, page, is actually, using javascript, promoting, to fetch. Uh the data, and so you can kind of see a little bit of that down here. I'm not going to focus, on that part i just want to focus on the implementation. Of lightning, message service. And how that works. So this is where i'm importing. That es6. Module. Which includes, that, lms, publisher, visualforce. Page. And. That, actually exports, a single function, called set page configs. And the reason for this, is that. The the way that i access, the message, channel, is via a binding. To, the, dollar, message, channel. Um. Global object, or global variable. So i access that global variable, and i'm going to pass it in. To this, message, channel, config. Now, there's some, visual force remoting, functionality. That i'm passing in as well obviously that has nothing to do with like message service. But i also have this lms, publish. And this is actually, where i'm going to pass in the, s4.1. Publish function. So all of these apis. Hang off of the, s4.1. Object. In visual force. In the visual force implementation. Let's go take a look. Uh, at. The visual for sorry the javascript. All right, so you can see here set page configs. Passes those configs, into this local, object. And then that's what i'm going to be using, to actually, invoke the publish. So. Handle, contact. Selected. Is actually what's happening on the visualforce, page when i select a contact. And then you can see here, that, that's using. The lms. Publish. Function. That i've passed in, from, the visualforce, page context. And then you can also see it's using the message, channel as well, um and then what do i actually, pass, over. Uh well it's this payload, object so essentially, i'm getting an id value from a data set i'm assigning, it, as record id and then i pass that over, the message, channel. Now. The one thing i want to mention here is that when you have a message, channel. The only, thing that is actually, type checked, when, you. Store this, back in salesforce. Is the message, channel name so that record id property that i set. That is not actually, checked, even though if you go back here to the message channel. You can see that it's declared, as a field, those fields, are kind of you know suggestion. And documentation. But there is no, checking, for that when you actually, save that back to salesforce. All right so let's go take a look at how we're doing. The. Publishers, i'm sorry the subscribers, rather. Okay, so this is a subscriber. And this particular, subscriber. Is, using. Pretty standard. Visual force, functionality. In, that, it is using. Action, function, so i'm kind of using the old original, postback. Functionality. In apex. And. Ape, i have an apex controller, that has a refresh. Contact. Method, that's been surfaced, from it. And then i, am, getting access, to it, using action function. By calling this refresh, contacts, function. So essentially, what i need to make sure that i do with this particular. Uh, visualforce. Page. Is to go back, and invoke, this refresh, contact, function. And it's and all that's going to do is go and fetch a contact, in, apex. Using, a record id. And then, i'm using, a re-render. And, anybody who's used the old classic, visualforce, postback, knows that, that's what triggers, a partial, page refresh, and if i go and look for contact, list up here i'll see there it is there's contact, list so essentially. I have an output panel, that's then going to be refreshed. Now. If you recall, alba talked about, one of the ways to make your visual force page, look, like, lightning, experience. Is to use apex, slds. And that's exactly, what i've done here. So, when i go and look at this, i'm not going to be able to tell the difference between this visual force page and the rest of lighting experience. Um. All right so let's go take a look um. Finally. At how we're going, you know it's the same pattern that i used before for including the static resource, where, that's the javascript, module, i'll include. There's my set page configs. Function. That. I'm exporting. From that javascript, module. I pass in the message, channel, and in this case i'm going to pass in subscribe. And that refresh, contacts, function that i need to invoke. As part of the callback. All right. So again there's our page configs, we do the assign. And, the, key here, is that i need to, subscribe.

To This when the page is ready. And i'm doing that on the event listener, for ready state change. And then i have, wrapped, the subscription. In a subscribe, to message channel function you can see above. I pass the message channel to that, along with my postback, function that's back here and that's what, goes and actually reinvokes. The. Action function. In the subscription. I pass the channel. Again that's the channel that was passed from right here. And, i passed that handler, as well again, there's the handler specified, there, so it's pretty straightforward, i simply, you know add my subscription. I add what the handler is going to be i make sure it knows what the message channel, and i'm off and running. Now what's cool is that this same pattern works really really well even if i'm using visual force remoting, so let's go take a look at that page. So in this case. It's the exact, same thing where i pass in the message, channel. I pass in the api. The subscribe, api. I'm, going to pass in the api to actually invoke the visualforce, remoting, so of course that's going to be there as well. Let's go take a look at that javascript, module. All right so all the same story here we have the page configs. Object, that has the, the items that i've passed in. Uh, we have the on ready state change, event listener. Um, and then that. Invokes, subscribe, to message, channel. Where we actually, from there we invoke the lms, subscribe, where we pass in the channel. And the handler. And again in this case, you know the actual. Um. The actual, handler, itself, is going to, invoke the remote object, it's going to go and fetch the record, and then. It's going to, manually. Create the dom locally, which is how, the remote object works is essentially, we're going to manipulate, the dom locally. In javascript. Versus in the postback. It invokes, the visual force page rendering. With the partial page refresh. So that kind of goes through all the different details, of, how to have a publisher. And a couple of different, flavors. Of subscriber. In the context, of visualforce. For lightning message service, and with that let me go back to our. Slides. Um, i have some questions, peter. Yeah you better. Okay, so. The first question. Is. You told me that there is a payload, that you can pass, in the messages. But. Can you include, anything, in that payload for example a function. So that's a really good question. Um. One of the features. That. Lightning message service gives you. Is, uh, is it's the ability, to. Pass a message. Through, the visual force iframe so one of the ways that visual force, allows, is allowed to be in the same dom as lightning experience, is that. We sandbox, it into, an iframe. Normally, there is a postmessage. Api. That allows you to traverse that iframe, boundary. However, it's a pretty complex, api so essentially, lightning message service for visual force, is a lot of syntactic. Sugar. Around, post message. In order to send, a post message, and in order to really work across all of these complex, doms. We have to both serialize, and deserialize. That message payload. And so anything. That, needs that, doesn't survive, well. Uh being serialized, in javascript. Is not a good candidate. To, pass, over that message, channel and that includes, functions. Um, but.

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.

2020-09-16 04:00

Other news