Servoy 2022.03 – Servoy Titanium
Servoy 2022.03 – Servoy Titanium: The Next Generation of Low-Code Development
We’ve completely modernized to UI engine (again), so you and your team never have to.
Two years ago the Servoy R&D team set out to do one thing: update our entire system without affecting current users. Two years later the update is complete. Now introducing Servoy Titanium: faster, stronger, and more secure than ever. See what it’s all about.
Hello and welcome everyone to Servoy webinar today product update about our 2022 dot three release. I still see a lot of people coming in so I’ll give everyone a second to join. Good to see everyone again on this day, evening morning, depending on where you are. Still a lot of people joining welcome everyone. Welcome to our webinar again product update 2022 dot three release with me today. Sean. Hey Victor. Hello Sean. We have. Rotten. I think. Hey Victor. There we go. I think we’ve got a lot of content planned for you. I think Sean can take it away. Maybe some. Some information at the start. We have a chat where you can answer or respond with your enthusiasm. Victor one small thing each better to use the Q&A not that. Yep. Yeah. The two CSM but I’m not going to respond to it. All your questions. Please put them in the Q&A. So in the bottom of your screen you can see Q&A. I can handle the questions in a more orderly fashion and past the month to Sean there. Of course. Maybe I can answer all the questions but I’ll try to give them on to Sean. But I think now we can start with our content for today. Take it away Sean. Okay. Thanks Victor. Hi everyone. It’s really a lot of people and still more coming in right now. That’s exciting. Yeah. Thanks everyone for taking a bit of your time today to join us. I try to do this webinar quickly and let you get on with your evening for those of you in Europe and your work day for those in North America and elsewhere. Yeah. So the agenda for today. Of course this is the dot three release the Q1 release for 2022. This is typically our kind of flagship release for the year. This is the version that the LTS built are based on when those come out later this year. So for us these this is always an important time of year. And of course. This release is all about titanium something that we’ve been working on for a while now and promoting and really trying to get everyone ready for this move. So. That’s going to be the focus of this webinar. It’s mostly about. Really how to get started. We’ve talked a lot in the abstract and prior webinars and in our messaging about. What’s coming and why and what the plan on but this is really about kind of like. Let’s get let’s get started see how it works and and help you to sort of plan moving forward in a real concrete way. So it’s going to be mostly technical demo which is I think the best format for these webinars. And then this is a two part webinar series for this launch. So tomorrow we’ll be getting into the smart doc editor component one of the really rich components that we’ve been developing. There’s some nice updates to that. And so we’re going to do another webinar we did one a few quarters ago. We’ll do another one just revisit what’s new in that and show some demos of that as well. So that’ll be tomorrow. But before we get through the agenda. There is a happening this year that I think everyone should know about and I’ll invite our CEO Ron if you can to comment more on. So for a world. Yeah, thanks Sean. Yeah, actually before we go into that. Maybe it’s not the right time. You said that the the this time of here is important for us is it’s one of the bigger releases quarterly releases. So three. I would always like to thank the team. R&B has been working. I think more than two years on this item release. For us that’s a big effort. It’s a big thing. And it really comes along to our vision on how we want to do things and what we want to bring to our customer base. And I think that’s what’s going on. What being proud of it. I think is, I can I think I can translate that for the team. And to you guys out there. That the team here is really proud to have done this. It’s a big thing. Although on the outside, you might not see that. It’s almost like driving a race car. And while driving replacing the engine. And I really want to thank the team for their hard work and effort for that. And it’s not just our need. A lot of people at that server are involved in this because there’s many more things around that. So thanks for that. The other thing here. What you see in front of you, the server world on tour. We now started a while back ago. We decided to do server world. Not as a single event. Where everybody comes to one location. But if we wanted to tour the world a little bit. It’s coming up pretty soon. May 9th and 10th is the first one Amsterdam. Week after we do New York and LA or Santa Monica. We are not asking big ticket fees. And the ticket is fully going towards. Coquering and we matched that money. So every ticket delivers. A hundred dollars to the Ukraine. We have a really interesting schedule for for several world. It’s life as we speak on the website. You guys can see that. Go there. Amsterdam is filling up. We originally planned to have an event also in Frankfurt. There were some issues especially with the venue because Frankfurt. I guess it’s really. Events he’s in there. So we move people from Frankfurt to Amsterdam. So that’s filling up quickly. Please. You take us contact. Not for our origins or any of your contacts. As I worry, they can help you get your ticket booked. New York and LA also have limited space. Please contact Jordan or Evo. Based if you want to be contacted. Please pay your email on the phone number in the chat. I will get out there and contact you. And I’m me and Johan. I know from there. We will be there for sure. Of course, the local people. You ask people will be in the US. And I’m really looking forward to seeing all of you again. So. Yeah, Ron, I just to add to that, I would say one of the best things about this is for you guys to meet each other as well. Because that’s kind of a rare opportunity to get some synergy with people in the community and learn from one another. I think there’s more learning in that regard than what even we can provide in sessions and things like that. So. I would really encourage you guys to come if for no other reason, you know, even if you don’t see a technical session that you like, you will meet people that are like you and you can learn from. All right. Well, let’s. I started a poll by the way. Regarding Servoy world and a few other items. If you guys wouldn’t mind to just fill out three questions at some point during the webinar. I would appreciate that also the info on Servoy world is in the chat there for links to register or whom to contact. With that out of the way. Yeah, let’s talk about titanium. And again, this is mostly going to be a technical demo. Before we get into that, just a quick revisit of the wife for those of you who haven’t been following this topic. Ron, you mentioned all the hard work that that goes into this about getting a new engine for the race car. Maybe you could talk a bit about. I don’t know what to be excited about because getting a new engine is. Is one thing, but I think everyone wants to win the race. So. Yeah, totally. So, so to keep that parallel going. We know that the engine or some of the last day that. Piping in that engine in our NG client. Will become absolutely absolutely. So we knew we had to keep our stack modern. Probably in a way that our customers are not. burden by. So we had to keep going and really build a new engine based on one more technology, which is future proof. And that has always been the goal of the void to keep you guys productive and not have to worry about your stack, because we need to take care of that. And we did. And I could have it took a lot of hard work. to make that in a way where you are not. Hassel by having to do all kinds of stuff. So. That’s the totally line. With what we do. I think the other thing is that we need to take. Take the server stack. Every time to the next level. And be ready for that. So this is just a starting point for us. To keep moving our stack into the future. And that for us is really important. And even more important for you guys. So, so you can count on what we do for you. And be be successful with that. Yeah, I would I would add to that Ron that, you know, from from a product management point of view. We can say that the most of the work from R&D is done here in the sense that. The titanium client is ready. And most of the components we ship are are ready. But from a product management point of view. I think we understand that this is really the beginning. And that we’re we’re going to take you guys with us. And we’re setting up to be able to. The feedback. So, that’s actually the sort of chasing look it into the very first one of the most interesting, the time shift. This is good, you know, is to make sure that you can make it. So we’re going to bring everyone along. And we’re going to ask you guys to push us to into helping you and giving you what you need. And that’s going to be like Ron said, this is just the start. And I think the end result is that we’re on the next generation of technology. Some of the, I think, some of the more technical aspects of the stack that we’re excited about is that right away, we’re able to more easily maintain our dependencies. Sometimes people ask me, why are you on the older version of bootstrap? This is so old already. We’re able to update those routinely, almost with every quarterly release now that we make the move. So that’s really nice. It’s sort of rather than doing something in a big bang. Now we get to do it kind of iteratively. The other aspect of that is we can shed some of the older dependencies, some of the baggages that we drag along in the stack. For example, Jake, we re that not only holds a stack, but that also tends to then become a bit of a liability in the stack. In terms of security, something that I didn’t realize right away is that right away, the titanium client is going to be way more hardened. We are able to now block eval, which really reduces risk of injection attacks. That was something we had to leave open before. So now that’s in the NG type titanium, that’s completely blocked, which is quite nice. And then also we are scanning pretty much continuously and updating the dependencies, as I said in the previous slide. Not only is that good for stack maintenance and sanity, but it’s really good for security, especially if you are having to go through penetration tests. They will flag libraries that aren’t up to date. So now we’re really going. We get any of the dependencies we have. We’re able to keep them more up to date with every release. So that’s something to look forward to. Along with that, under the hood in the engine itself, there will be a performance boost. Getting into the details, we say goodbye to AngularJS. We say hello to Angular.io. AngularJS has this feature. Maybe some of you guys know about it called the Digest Cycle, which has a bit of infamy in terms of performance. So now there are, I’ve read some benchmarks that Angular is performing five times faster than the JS. I don’t dare to quote that, exactly. In terms of how it applies to your solution, because those are just benchmarks. But for sure, the actual processing on the front end is faster. There’s things like lazy loading now, which improves load times. The data binding itself is better and faster. So there’s definitely a performance boost there to be aware of. But the real reason I think to be excited is, like I said, Diron, it’s nice to get a new engine, but you want to win the race. This really sets us up on a better foundation to go forward. So this is kind of the beginning. Our R&D department is, I think, excited to be working with TypeScript to be able to build the next generation of components. One thing that I think is pretty cool is that because you can now inherit and type script, like customizations and tweaks to components don’t have to be a fork. They can be an extension. We already have kind of a base component that we other components extend from. And then a specific component could have like a flavor or an alternative where it’s not a fork, if you want to go there, it’s more of an extension, which can then continuously be maintained. And I think we’re already seeing that with something that I’ll be able to show today, which is the list form component, I guess is what we call it, but I’ll say list views. We have incidents crawling now, which is something we weren’t going to do at all on those list views. But immediately when we go to ND Titanium, we’re able to bring infinite scrolling on list views. So I think that we’ll excite some people that have been waiting and asking for that feature, and I’ll be able to show that. So that’s kind of the update, I think, for some of you, that’s a bit of a review, because we’ve been messaging this now for a while, but thanks for hearing that. I think it’s important to understand the why, but I think the real reason we get into these webinars is to show more than tell. So I’m going to do a small demo. And what I really want to show here is kind of that, today you can already, excuse me, get into playing with migrating to Titanium, that there’s a process to take. There are some things to watch out for, and some things that will impede you. But overall, there’s a process, and it’s not too, I was intimidated, to be honest with you. So I thought, let me do a migration, a small migration, and talk to my colleagues and learn, and then kind of box that up and show it. So that’s what I plan to do. I’m going to take a client, an ng-classic client, and then I’m going to try to move it to ng-titanium, and we’ll sort of unbreak the things that don’t seem to work, and we’ll talk about the patterns there, and then we’ll also talk about kind of the big picture, what’s coming next. So, again, if you have any questions about what you see along the way, please just put them in the questions panel. I’m going to go into Servoy developer, and I’m going to launch the ng-client of a small little application that I built yesterday. What you can see here is that, for I put some components on here, I have a chart, I have a table view, a table view, classic table view form, we’ll get into that, and I have also a classic list view form. So just some basic things to get going. And what I’d like to do is to try to run this in titanium. So, I’m going to come into Servoy developer, and the first things that we want to do to get ready to run in titanium, step one is make sure on the latest version of Servoy, what was released just at the beginning of the week, 2022.3. The next thing to do is to make sure you have the latest version of all the components. So you can do that by opening the package manager. There’s various ways to get it that. It’s also in the help menu. And what you’ll see is that there will be updates available that have the 2022.3.x version. What we’re doing with starting with this product release is we’re aligning the extensions with the core product. There’s reasons for this. One of which is that we have to make sure that that those components are compatible with the quarterly version that they’re coming out with. It used to be a bit easier to just let them go on the completely independent. But now we have to keep them more closely aligned. It’s also a bit nicer, I think, experience that you kind of will be able to intuitively see what versions of the components we have. So the older versions will look like nggrids.9.1. So what you want to do is upgrade to the latest 2022.3.x. You can do, we already have some more revisions of those components. How to know if a particular component is titanium compatible. If it’s in the Servoy package manager, it means it is a supported component. However, if you don’t see that 2022.3 version, it means it’s not yet available for titanium. So you can see that almost all of them, especially the main packages that most people rely on are available. And there’s a few that we have yet to migrate. Full calendar component is interesting one and I’ll talk about that a bit more. But long story short, you just want to be on the latest version of those packages. So the next step, once you’ve done that, is to be able to launch your application in the titanium client. So the way to do that is to go to the window menu, the preferences, and you’ll see a tick box here, start ngclients should launch titanium ngclients. There’s another property here which is opening forms with titanium ngclients, form designer. The designer itself has to be compatible with the titanium sources. For now, it doesn’t really matter because the components also have the ngclafthic sources as well. So both will work eventually, that will become the default and the ngclafthic sources won’t be used in the rendering of the form designer. So I’ll click apply and close. So now if I launch the ngtitanium, or launch the ngclafthic, it’ll pick ngtitanium, I have to move my zoom stuff out of the way. Excuse me. So right away, if we look at these two, you’ll see that it’s very different. And one trick I’m going to show you here is you’ll notice that as soon as I launched the ngtitanium client, the ngclafthic client is already killed. And that’s typical right every time you launch the debug client, it kills the old one that you had. But one thing that you can do to look at these side by side is to copy the URL, make a new tab, paste it in there. And if you append in the query string, sorry, one thing, yet you’ll notice that it’s a solution for titanium and solutions is the classic ngclafthic. So you’ll want to add that as back in there. And then if you put the no debug flag to true, then you get the classic ngclafthic and running in no debug mode. So this is the way that you can, in general, that you can run multiple clients at the same time out of the development, just that this one is not a debug client. It doesn’t get broadcast updates from developer, but it’s a nice reference to be able to just flip back and forth between tabs here. And say, OK, well, here’s my titanium client. Here’s my classic client. And right away, I can see, well, shoot. It looks different. So while the components rendered, there will be some differences. So that’s kind of how to get started and just launch the client and start to compare it. But now the work begins. So we have to figure out, OK, well, they look different. What I don’t want you to do is say, well, it’s not ready. I’m going to wait until the next release and see if it’s fixed by Servoy. Because in many cases, it actually is ready, but there’s a little bit of work that you need to do. So I’m going to explain how to figure out what you need to do and identify those things and fix them. So let’s go back to the IDE. And the first thing we need to do is make sure that we have a titanium compatible style. One of the reasons that it doesn’t look the same is that it’s not even using a style sheet that could be compatible with the solution. So every application solution has a top level style sheet here at this TI migration.less file. It’s in the media folder. The first step that you want to do is to make a copy of this. So I’m going to duplicate media. Now the name is important because what we’re going to do is give it the same name and then append an ng2 flag. And that’s a kind of a reserved flag. And what it does is it, at runtime, the it will serve oil detect if it’s the ngTitanium client, it will look for the ng2 variant of the top level style sheet. And it will dynamically switch to it. So right away, if I were to now launch the titanium client, it’s going to pick up this style sheet instead of the old one. Now they’re identical. So of course, it’s not going to fix anything yet. But now I can start to, the reason you want to do this is you don’t want to start messing up your ng classic solution to get your titanium solution right. What you want to do is make the separate style sheet and then make your tweaks what will only be applied to ngTitanium. So this sets you up to do a more clean kind of working environment. The next thing that you want to do is deal with teaming. Now I hope that most of you are using the theme role or taking advantage of theming because it really reduces the amount of CSS that you have to do. And if you stay completely within a theme, then the migration is that much easier. So every ng client application comes with its custom-stervoy-themed properties.less file. And this is the one that you open up. And it’s the less file, but we have a special editor for it. And it shows where you can override the defaults for the theme. And these get dynamically applied via less to styles for all of your components to keep everything consistent. So this is the theme that I’ve made, like that light orange main color is what we were seeing here in the nav bar, for example. That’s just the main color variable in the less theme. What we can do is there’s a titanium version of the theme roller project. So we can make a copy of our theme and also make it a titanium compatible. The reason for that, I’ll explain this, is that many of the components or some of the components, the actual underlying structure and markup has changed from classic to titanium. And therefore, some of the CSS selectors that would be in a normal CSS file, they don’t apply. So even though you say, hey, the background color here should be light orange, the selector doesn’t match the new markup, and then it’s just broken. We fix a lot of that in the theme roller and kind of abstracted away by making a titanium compatible version of the theme roller so that if you stay within the theme, it actually should work. So what I’m going to do is make a copy of this file. And again, we’re going to give it the same kind of NG2 variant. So we get the same name there. We put underscore NG2. So now I have my NG2 variant of the same exact theme. However, the next thing you want to do is switch this to the NG2 compatible version. There’s lots of versions of the theme. And we have the version so that as components evolve, that the selectors that are all built in, they all apply. So that’s another benefit of just working with the theme is that you can evolve the components without having to restyle all the time. So here now it’s using the NG or the titanium compatible version of the theme. And so the application of those should work after that. Now there’s one more thing I have to do. If we look at the titanium compatible version of my top level style sheet, there’s always the import at the top, which imports the theme. This gets generated by default on new solutions. It’s still pointed to the old one. So I have to append that NG2 flag in there and save it. And after all of that, I should be able to relaunch the NG titanium version. And so now you can see it’s looking a lot more like the previous one. I get the theme in here. If I switch back and forth, you’ll notice some differences still. But it’s come a long way already in just a few minutes. That’s kind of how to get in a position to now get into really tweaking the style, which is what I’ll do next. Again, if you have questions about what you’re seeing, you can put them in the Q&A panel. Also, there’s a guide that we’re going to publish and I’ll give you the link for that, which is kind of has these steps in it. So don’t worry about writing everything down or taking notes. I’ll give you the links to that at the end. OK, so the next thing that we’re going to do is to get into the little style differences and how to do that. Because once you get past the overall setup, then you’re going to still see these differences. And there’s a way to deal with that. But just getting to this point puts you in the position to really now just get into the new degree. So I want to look at the client and point out some subtle differences. One of them was the, actually, I forgot to look at what I had put in there. We can have a highlight in the focus fields. So back in the NG Classic, I had this thing where in my solution I wanted to make sure that you get that light orange on whenever I focus on the field. That actually wasn’t in the theme. So I sort of, I escaped the theme and I did an extra customization in my left file. And now, if you notice in titanium, well, that just works. So this is one example where the CSS tweak will work because if we look at my tweak here, I set the background color on the selector when a form patrol has focused to the main color light from the theme. That’s wonderful because that selector still applies for those components. So that’s why I said here, this will work in titanium. However, let’s look at another tweak that I did in the, let’s look at the, this is the NG Classic version. What I wanted to do is make the bold color, make the bold text on the hover in the type of head component, right? So I decided to make that little tweak. Now in titanium, well, it doesn’t work. Doesn’t look right. Doesn’t look the same, right? So how do we get around that? What you then do is you have to, this is, this is the hard part is you have to understand the difference in the change in markup. So if we look at, let me get the original version and the side by side. So we got the classic one on the left and the, how close these. I need them, classic one on the left, titanium on the right. And this one now, this, although I have a tweak in here for the, the type of head sealed, it’s not working. And the reason for that is that the underlying markup has changed. And so we have to know the right selector. Now there are certain things that probably should be fixed in, in the theme roller self that I noticed. So that’s something that that we’ll take care of. But you know, you could do some tweak where you need to then go and inspect to the markup and see what’s changed. But we’re going to try to document most of that in the, in the titanium version of the theme roller. And what I’ve done is I’ve got the six here and the notepad. And so I’ll just leave this in here, but it doesn’t really do anything. This is the right way to do this now to, to fix that. And you’ll see that it’s still drop down menu, but instead of an, an ATAG in there, it’s another, I think a div or a button, I think it was a button. And it’s got the class drop down item on it. So I just had to find the right, the selectors are just a little bit different. And as I was saying, the background color that the fact that those look different, that’s actually a problem with the theme that I made a, I take it for that already and we should be able to fix that pretty, pretty quick. However, the bold color was my own tweak and that’s what I have to put in here. So if I were to come in here and take this font, wait, bold and apply that, then I got to relaunch this. I should get my tweak there. Yeah, geez. What did I do, Raul? It’s on the hover shop. It’s on the hover. Have you hover over nights and? Oh, yeah. Yeah. Okay. No, no, that’s the classic one. Hang on. Let me show I get this right. Yeah, there we go. It was on that over. I’m right. I always the second guess myself. Okay. So I know that was a little complicated and some of you don’t even get into the CSS, some of you do and that’s fine. For those of you that don’t, you stick with the theme and it should be mostly okay. However, if you do notice a difference like how the background color and the type ahead wasn’t following the theme, then those are actually bugs and the theme and you’re encouraged to report those because the theme is pretty easy for us to fix, but we don’t know everything that’s different yet. So please go ahead. Don’t be afraid and don’t be like, ah, doesn’t work. Let us know and we’ll get on it quickly because again, we want to make sure everyone can do this. It’s not as hard as it seems. So those are the styling tweaks and I think that’s a good enough example. I didn’t want to get into crazy CSS or anything because the point is to show that it’s an incremental thing and you can kind of pick those off one by one and you can really do it in a separate last file. So it’s not like the ng classic stuff is getting polluted or anything. So that’s the one topic. I’ll leave that there and we’ll come back to questions on that at the end. The next thing that I wanted to show in the classic one is these table views, right? So this is now specifically those of you that have sort of grandfathered in the form type table view and list view from the even older clients that we have still many people run, which is the web client and smart client. Those are actual forms where the view can be set. Those of you who this applies to you, you know exactly what I’m talking about. Those are not supported in ng titanium. I should say they won’t, they will not render correctly and I’ll show you what I mean. So there’s the classic table view but over here in titanium, it’s just a record view. Because that’s actually the way the form looks in the design, right? It just shows up as a record view and if we go back here, what I have is a nice list view. And over here it’s the same thing. So right away that’s a big problem. How do you fix it? So let’s start with table views. I’m going to come into the designer, excuse me, get rid of all this style stuff. So essentially what needs to happen is this form which is a order stable, it needs to be converted into a regular form with a grid component on it that has everything, what was in the previous form. Now that can be done manually. You would just make a new form and you could copy paste to those components in there, etc. Or duplicate the form and tweak it. You understand that this could be partially automated. And so we actually have a utility that we’ve published and I’ll give you guys a link to this at the end. A utility that we’ve published which can partially automate that. Now I want to say partially because again, there’s a lot of flexibility on those classic forms. The one that I have here is the most basic where you add the fields and labels and it just works. But whether or not they’re editable, whether or not you’re using a header part, whether or not you put other components on the form like buttons and things, that all plays into what happens and also how you want it to look. So what we recommend is that you kind of take this, what I’m about to show you with, kind of take it with a grain of salt in that it’s more of like a boilerplate that you could take and you could customize the scripts where you could run the scripts and then you go and manually tweak it from there. The idea is if I have a hundred of these grids, they all kind of look the same and work the same. It’s realistic that you could get a lot of the hard work of that conversion done and out of the way and then just going back and tweak some things or even just tweak the script. And it’s not as scary as it sounds. And we know this from experience because we’ve been helping customers make this migration to develop some of these scripts and it’s really an approach that’s realistic. It’s not like several months project to go through these grids. It’s doable. So I’m going to show you how that works. What I’ve done is I’ve included not packages, modules, something called SEYPI migration from a titanium migration project where we’re putting some utilities and I’ll show you where that lives in a minute. And I just include that as a module in my solution and now it’s available. The other thing I did is I actually put it in an navigation menu. So if you look here, I have TI UyTills. It’s got a little form here. Everything that I’m going to show you here manually can be called programmatically through an API because you might want to get a rate over all your forms and do them all, something like that. This is just a one off example. You can see that it makes the value list out of the table view forms and then I click convert form and I get the new form and the old form down here. So it did work if I actually navigate back to that table view. Now it’s showing a proper NG data grid here instead of the classic table view form. So it did work and then I’ll show you what that looks like in the solution. So that actually took the orders table, classic table view form that I had and it renamed it to underscore old. So this is that form is preserved. And I made a new form by the same name. All the code in there would be copied. All the event findings would be the same. More or less because there’s also what happens on individual fields. And then it created this grid and it put the columns on the grid so it added the component. So again, that gets me a start. Now I could probably break this pretty quickly by tweaking something back in the original and then it is the script fails there. So I want to emphasize that this is like a boilerplate thing. But we’ve used this approach successfully on several customers already. Not just to get to titanium but just to get to the NG client because the rest goes from NG classic to NG titanium automatically pretty much here. But the thing was is NG classic, these forms are still supported. NG titanium they’re not. So that’s how you approach this. Again, I’ll give the links for the titanium migration utilities and the documentation on that. The next thing to show, and this is kind of the last topic that we’ll get into before we get too long in the webinar, is the list view thing. So again, this list view not looking so nice, looks fine over here. And we wanted to look like that in NG titanium. So what do I do? What I’m going to show you is a manual process and then we’ll talk about how that could be optimized afterwards. So I have this product list, that’s my classic list form. What I’m going to do is make a, well I’ve cheated. I’ve made already a list form component here. I call it product LFC for list form component. If you haven’t used form components before, they’re like sort of forms that are reusable as component and they can be put in a list container. So I basically copied the way the classic form looks, but I have it now in a form component. Then what I’m going to do is make a new form. I’m going to call this products list PI. I’m click finish. And under form containers, you’ll see that there’s a list form component there with that product’s list form component. I’m going to just drop that on the form. I’m going to set the CSS position to take up the whole screen because remember the classic form is a whole form. So I want this to basically look the same. So I’m going to just put these out to do a full screen, our full size CSS position. That takes up the whole room. Now a couple of properties that you’ll want to set on this form component. We’ll leave it at the form found sex. They’re both both based on the same data source. I’m going to set the page layout to list view. And the other thing that you can change, and this is new, I said that we had infinite scrolling now. If you update a style class to be the list form component dash scroll, then that will apply the infinite scrolling. So I’m going to save that. Now I want to get this form to show up in the client. And this is another thing that I want to show you. So if I come back here, that’s all well and good, but it’s still there, right? The old one’s still there. So I want to get this one to show up. How would I know if I’m running titanium or classic in my menu method where I’m initializing the side nav component to show these things? I have commented out here something that I will bring back. And I’ll comment out this one. So what is this? Menu item ID, this is the form that I’m going to show. It’s this here that I want you to focus on. We now have a property that we just sort of hide in just a regular client property, but it’s called NG2. If you do application get client property with the NG2 flag, it will return true, boolean true, if you are running NG titanium, and it will just return empty null if you’re running NG classic. So right there I just say, well, the form that I’m going to use here if it’s running NG is going to be the titanium version of that list. Otherwise it’s going to be the classic one. So I’m going to save that small tweak. I’m going to relaunch the client because that gets initialized on load. And so now if I come to list view, now it’s rendering like it did in over here in the classic one. And one thing that you’ll notice we on the, for those of you that have been using NG client the whole time, the list view container had this pagination widget at the bottom. People have been asking for infinite scrolling for a long time. And now you can see I can scroll and the scroll bar keeps moving. So one of the benefits already of NG titanium is not just a new engine. We can do better smarter components. And this is just the start and I’m happy that we’re able to show infinite scrolling on list components. So I think that wraps up what I want to show you from sort of a how to. I hope that it makes you feel less intimidated about getting started. And I want to talk about how you can try it out. So you can take the steps that I took. I’ve prepared, well, I said we’ve prepared a guide for you. I’m going to paste this into the into the meeting chat for all. Oh, I’m going to pay everyone there we go. So that’s where you can find the steps that I just showed also some documentation on that on the migration utilities. And some things that there’s good documentation there, I will be we will all be updating this really regularly. So the more we hear from you guys that the faster that this will go. So please don’t be afraid to get started. Let us know where you get stuck. You can make cases on the the serve way forum for that. One other thing that I want to say is that there’s a big aspect of this that I didn’t get into which is components that I showed you in the package manager that aren’t yet ready. If you have those, you will be blocked. So we’ll be providing updates on those. But there’s also components where the markup has changed a lot. And I was going to show it like on the charts. If you pass in the custom properties, those have changed a lot and the charts break kind of easily. You have to know what’s different. We’re just going to put that in the guide. I think that’s too detailed for the webinar. The full calendar component does have a titanium version, but it’s completely on a new version of that library. The underlying library. So that is going to be released as a separate component. We’re going to add a separate section to the guide on the full calendar. So those right away charts and calendars are known problem areas. And then there’s the whole subject of custom components. For those of you that have that are using components that aren’t shipped by serve way, those will have to be updated as well. And we are preparing a guide for titanium component developer’s guide, how to build those components. And that will inform you then on how to migrate those as well. That’s a really advanced topic. And so it’s not for everyone. It was just also why we don’t want to get to it. In this webinar, but alongside this other guide, we’ll be contributing more to this component developer guide. And that should be ready shortly. As I said, we want to bring everyone along. If you serve way as flexible in that, we try to make it easy, but there’s always an escape to get more control. And if you take that escape, then it’s a little bit harder to do the migrations. But we won’t forget about you. We will also be documenting that as well for those component developers. And so we’ll provide an update on that. Victor, I’m going to go back to, by the way, sorry, one other thing. I didn’t even go into the release notes for everything. I just talked about titanium. If you go to the release notes, it’s also on the forum, but people ask about this. I just want to pop this also in the chat. It’s got some information. There’s updates on like view, bounce at API has been. And so there’s lots of other updates going on in there. It’s not all titanium. It is pretty much for this webinar. Okay. I’m running out of breath and out of time. I think you want to go do some questions now. We’ve got three currently. Yeah. The first one is about the components. Will they be updated for the LTS versions? Will the components be yes? They will be, they will be. So components will be treated in that the excellent question. I’m glad someone asked that. One thing about going to, just in general, that now we have kind of the classic version of component and the titanium version. The classic version of the components are already kind of in hibernation. So we won’t be updating those. This doesn’t answer that question, but I don’t want to forget to say this. We won’t really be updating those unless there’s severe issues or security or something like that. So we won’t be enhancing those. But even on the titanium versions of these components themselves, we get into now making sure that they’re in line with the quarterly releases of Servoy, but there will also be like an LTS branch of a web package that has the component in it. So the answer to the question is yes. And I think that’s a good thing that we start to branch these and we’re able to better maintain them across quarterly releases and then also provide those back-reported minor fixes and stuff to LTS users so they can get an LTS update and the component updates that are compatible with that if there are any. So yes. Okay. Very good. Also another question. In previous webinars, it was said that we do not have the ability to make our own titanium components yet. Will that ability be added in 2022? 0.3. Yeah, you do. It’s just that it’s really hard and we have a guide that we’re working on and we’re going to release that guide as quickly as possible. And if you go into the developer, Servoy developer and you make, I’ll show it, as well. So if you were to come in here and again, I’m getting into areas that I don’t know that much about. But if you create a new component package project, it’ll build all the scaffolding for you to go ahead and then modify the sources for your titanium component. So it’s already like the default now. And in fact, you can then also have, you know, NG Classic sources in there so you can run them side by side. So what you need to do is if you’re moving a component, and again, I don’t want to get too much into this, but if you’re moving a custom component and you already want to try to to start, probably best to make a new component package, you get all the NG, all the NG titanium scaffolding and then go and take your old sources and copy those into the NG Classic portion of that scaffolding and then you can run them side by side. But again, that’s a whole other topic. I don’t want to get too much into this, but you can do it already just that it’s hard and we’re going to try to backfill that as soon as possible. Thank you. We make a guide for that as well. Yeah, there’s a placeholder there in the guide for that. It’s going to be a step by step guide on how that works. Okay. Again, it’s an advanced topic, but there’s actually a lot of people that have a, you know, a few custom components. So then the last question, what about updating or migrating with the old framework? Is that even possible? And so will there be a guide as well? Yeah, I don’t know. I mean, that’s not really a supported project anymore. I think we’d have to take a closer look at that. The, that particular framework that this user is asking about, there is support. I like, I showed how to move table view forms and this reforms. So those, those should be able to be done, but I didn’t, you know, it, you have to come up with a way to make that productive, I think. And then everything else, all the other old like Servoydefault components are still work and those are working indefinitely. So in theory, yes, but there won’t be a guide. I don’t, I don’t think we’re, that’s already too, too old for us to, to make a guide that’s going to work for everyone better to contact us and work directly one on one. Okay. I think that’s a sufficient answer. And we have five minutes left in the, in the time that we scheduled. Is there anything else on the agenda? Yeah, well, please come back tomorrow. We have another webinar. Well, there you go. Yeah. And if you haven’t quickly, please answer the questions in the poll. And I hope to see you guys. I want to thank you for taking your time. We get a really big participation in this webinar, which excites me. And please get started. Please don’t be afraid file cases email me. We want, we want you guys to, to start this and, and we’re, we’re going to put in the work to bring you along. So, let’s do it. All right. That’s a, that’s a great way to end it. I hope to see everyone tomorrow. And of course, thanks everyone for coming. Thanks everyone for listening. Have a nice evening or morning. Thanks all. Thank you for having us. Bye all.