Servoy v2021.03 Launch Webinar Part 2
Servoy v2021.03 Launch Webinar Part 2
Hello, everybody. And welcome to part two of the 21.0.3 release webinar. Last Wednesday, we did the first part, in case you missed it, of course, it will be published on a website. So if you want to look back, you can, I think, as of Monday. Yeah, part one was more about the business and functional side of the outreach release. To base webinar is, well, more focused on the tech side. So, Sean will show in the actual demos about what we thought is coming in the outreach release last Wednesday. Yeah, it’s always this webinar will be recorded. So if you want to look back or share with with peers among your company, that’s possible. And also we tried to make this webinar as interactive as possible. So please ask questions, use Q&A panel for that. And we will try to answer them during this webinar or otherwise afterwards. Sean, are you there? I see you, but we can. Okay, very good. Yeah. Thank you. Thanks for that. Thanks for that, Dr. Today is demo day part two, which is, I think, the fun stuff is we’ll get right into showing what’s new in the release. Before we dive into the demos, I want to give a big thanks to a lot of my colleagues. There’s a ton of work that goes into this release. Certainly our needs are working on NG2 for, well, over two years now, really. So this is the first public release of that and that’s going to be ongoing throughout the year. So we get to kind of a final. So this is kind of the beta release of NG2, but it’s available for you to try with your applications. In addition to that, a lot of work is going on extensions, making extensions compatible for NG2. All the web packages and a lot of work has gone into a new component, the Smart Docs editor, which we mentioned on Wednesdays. Webinar will be given some demos of that. And one of the extensions, the sample solution, which kind of shows all of the extensions together and kind of how to use various frameworks, has also been upgraded and tested against ServoyNG2. That was kind of our target to this release. If we can show the regular sample solution in NG2, then we’ve made a pretty big leap forward. And I’m happy to say we will show that. And I want to thank my colleagues who worked really hard on getting that ready as well. So this for us is I think the culmination of a lot of work and it’s exciting to be able to show everyone. So on tap today, we’re going to show NG2. We’re going to introduce the Smart Docs editor component that we talked about on Wednesdays. We have some pretty neat updates to the security module, based on authentication and single sign-on. We’ll take a quick peek at what’s new in servoic cloud with NG2. And then we’ll wrap everything up and go over some of the release notes real quick. I really encourage everyone to ask questions about what you’re seeing. If it provokes you to think about new stuff or you have concerns, just let us know in this webinar because we release some time at the end. There’s a lot of the covers, so I expect we’ll go probably over 30 minutes today, but we’ll try to get through it as quickly as possible. So I’m going to jump right into the demo. I’m going to turn my camera off for that to give some more real estate. We’ll come back on for the wrap up at the end. Okay, I’m going to switch over to… Let’s start first with the NG climb. Brouchker, you can see my browser and the sample solution that’s in there. Yeah, sure. Okay, so this is the usual sample solution. It is available with every new version of servoic to download and try with tutorials. It also shows kind of best practices in how to put together many of our extensions including security, navigation, components like charts and grids and things like that. So if you haven’t tried this out yet, I highly recommend it. It’s available through the package manager. So when you launch the NG climb, this is what you’re used to seeing. But what I’m going to do is come into the IDE. I’m running 2021.3 and I’m going to, from the console, kill the current client. And I’m going to come back to the browser and where it normally says solutions, I’m going to change that to solutions. So this is kind of hidden right now, just behind the URL. So normally it says solutions and then the solution name and then the index HTML. If you just remove the S and make it solution, that is going to fire off the, oh, this is the SSO didn’t work on here. That’s fine. Let me log in, get a token and log out. So I’m going to do this once more. So I’m logging in NG2 or NG1. Just take a second to pop the client up. Yeah, there was some issue when I tested the SSO, which I’m going to get to in a later demo, which was causing that flickering. So now I believe if I kill this and try again, it should work. Yeah, it’s still flickering. This is nothing to do with NG2. It has to do with the other demo. Oh, right away, we’re, let me disable the on solution open quickly for the sample log in, and we’ll re-enable it. This should work. So that’s NG1 coming up now. And I’m going to, yes, announce logged out completely and I’m going to kill that one and switch to the URL. I can try this once more. There we go. So this is now running NG2. And what you should notice is that it looks nearly identical, there was a one small difference and I’m going to see if anyone could pick it out between the two of them. But this is now running completely all the NG2 stuff under the hood. As I click through the application, you can see that the charts are working, the grids are working, everything functions the same. So this is a lot of work to get at the NG client upgraded and all of the components. And so this was kind of our milestone. And I know it’s a bit boring because it just looks identical, but that was kind of the point. And I think it’s important to show it and to show you how to do it because today you can download the latest version of Servoy and then remember, in developer, if you switch the URL and just remove that S from solutions to solution right up here, then it will convert over. You can’t run them side by side. There’s only one client instance. So you do have to kind of switch them and you’ll notice how in the IDE I was coming to the console, I’ll show it one more time in here, no command console here. And I was terminating the client with a stop button just to make sure it was fully cleared out. Cause I noticed if I don’t do that, there was some stuff cache that seemed to be causing the issue too. But it’s available there for you to test. So that’s kind of it for the NG2 demo and we’ll be coming back to this throughout the year just to give you guys updates in what’s new and we’ll do a recap at the end of this. But I wanna move on to the next demo because it’s a lot more fun. And you guys can share any questions you have about NG2 for the end. So the next thing I wanna do, I’m gonna launch the NG1 client again and just takes a second to come up. We’re gonna get into the smart docs editor component that’s been added. And I’ll show you some use cases for that. So the first thing I wanna do is come into a new menu item I’ve inserted into the sample solution here called documents. And I’m selecting like a document template here and it’s available for editing. So this is the component I’ve dragged on the form. It’s the editor, you can see the toolbar across the top here with a typical kind of text editor functionality. Inside the document you can see I’ve pasted in an image. I have various formatted text, a horizontal line break. This one is a table with two columns. You can see I’ve text, left justified and right justified. And of course you’re probably noticing these big pink tags. These are like merge tags that I’ve inserted into the document to be able to merge this with data. You’ll also notice that at the beginning of the table I have this start repeater tag right here and then I have the table itself and the end repeater. And this is repeating over a related found set that when I merge this it’s gonna repeat the table but not the header. And then I can do the data merge too for related data. So the whole goal of this kind of use case here is I have an order I want to be able to easily design like an order slip or an invoice or a quote or something like that and be able to merge it with data. So what I’m going to do is come over to my orders list here. I’m going to grab one of these orders by double clicking. I’ve added a small print button up here and what it’s going to do is pop that document up and show it to you in a preview mode. And you can see that now the data has been merged. I get the customer address over here. I get the order date and the ship date. Down here I get the items in the grid. So these are the products, quantity price and subtodils which are calculations. And finally the order total which is also a calculation. So you can see that all the normal Servoydata objects are available and they’ve been merged in this document on behalf of this one record. If I were to pick a different record in my orders list, I’ll just grab one at random and print that. You can see that I’m not faking it. It is a different customer. This customer happens to have four items on their order and you can see that all the data is updated for that order. So that’s I think one of the big use cases for this is that you can have rich text editing and inject these merge tags and be able to merge that at runtime. And what I think is really powerful about this beyond a normal reporting tool or templating engine is that this is a component you can drop on a form in the client and your users can edit that. So they could copy this, make a copy of this document and customize it for themselves and personalize it and save it and then merge it to send formatted emails or merged documents or that sort of thing. So gives the developer a lot of control. I want to show you some of the features kind of in action here in particular those tags because those are coming from data but your end user doesn’t have to memorize them. It would be kind of a shame if they had to know your data model to know to be able to insert the company name or the product which is two tables away and these relations here. So I’ll show you how that works. But real quick, I’ll give you a preview of what it’s like if you’re just typing and you want to pop in one of those tags. There’s an indicator for that. So for the field tags, I put in a pound sign and you can see that all of the tags that I’ve exposed for an end user become available and that’s how I was able to inject those. If I put in a dollar sign here, here are some of the system tags for those repeaters to be able to repeat over a found set. So all you have to do is start repeat and repeat and then everything inside that is repeated and we do some special processing here for the table headers if they’re inside a repeat, they get skipped. But you could see that it’s useful for like a listing report or really it’s up to your imagination. The toolbar across the top is very configurable. This is kind of a standard issued toolbar but once I jump into the IDE and show you this component, you can see how that is working. I did make a custom toolbar item. I wanted to show that it’s customizable. So if I wanted to have like a menu item for my user to insert those tags, you can see my font icon didn’t really work out there. But here I have a list of the field tags here. So if I just wanted to click those, try that again. You can see that it injects it right there into my document. So that’s how I was able to customize the toolbar as well and I’ll show what that looks like in the IDE. in just a moment. One other thing you can see that this is compatible with images. I have an image inserted here and I’m gonna click the insert image guy right here and grab an image just off my desktop and you can see that I’m able to insert the image and justify it around the page as well. One thing that’s really cool about the image insert is that if you think about it, what’s happening in the mechanics, it’s inserting the image into the document but not really, it’s uploading it to an endpoint. And then the server side, we’re injecting it into the document like a base 64 encoded image right in the content there. If I, you can see that I have down here in the footer, I have, there’s like a debug client, or sorry, like an inspector, I mean, for the component itself and if I actually look at the element that I’ve selected in the model, which one is it? I don’t see it. The first image is that banner up top. Maybe on the view. You would see that it’s injected a base 64, but the other thing that I want to say is that we can also attach a file upload hook. So if you’re attaching something really big and you just want to put a server side and reference it by URL, you can do that as well. But the base 64 is really nice for email. If you’ve ever tried to email like a template at HTML email and you have an image in there which references an external URL, and you get some problems. And if you encode it right in the document, it works quite nicely. So that’s kind of a view of the document editor. I could show you, of course, all kinds of features about this, but I think it’s nice to go under the hood and take a look at what I’ve done. So I’m gonna come into the IDE and I have a bunch of stuff open. As usual, I’m working right up until the last minute on these demos. So I have a form called this and this is the form that we’re looking at in the client. So this is the list of documents I have down the side. This is the component itself. You can see I have the document editor here and I just drag it on the form and then it brings with it like a standard toolbar. Let me make some more room over here and I’ll scroll out. You can see all the toolbar items that are there, but that’s totally configurable. Also, if I click on it and you see the properties here, it will list the toolbar items as an array of items. But first, I’d like to point out that it’s data bound. So the data provider connects to a real data provider I’ve made a table here called document templates and our doc templates and it really just has a name and a content to hold the markup. And so that’s data bound. So when I’m switching records between different templates, I can have as many documents as I want and they all just go into a column in a database. In this document I have the toolbar. I wanna show you how I had that one custom toolbar. If I scroll down here, sorry, I have some clicking issues. Try this again. I think it is this one. And if I expand that, no, that’s the insert table. I think it was before that. I’m not a whore, this one. Yeah. I added my own toolbar item and the type is Servoy toolbar item, which just means it’s custom. In this case, I made a value list, which is gonna be those tags that I had generated. So I’m generating that drop down list of tags that I can insert from a value list. And then on click, I handle the on click event of the toolbar and that goes right into this form. And then I inject the tag right into the markup using the API of the component. So really I’m just getting a list of tags. I’m getting the display value in this case because it’s a real value, display value value list. And I just inject it right in on click. I don’t worry about the code here. I think what’s important is that you can see that you can come in here and you can add a toolbar item. And there’s not much work to do if you just wanna do it, you can just add one of these and pick any one of the standard ones and it’ll just show up. And some of them might take some other options as well. Finally, I would just say about the two bars is if you wanna get really custom with it, it’s possible to do it programmatically so on form load or on first show, you can pass in a, you know, we encode a total config for the toolbar and that’s a nice way to do it. So the gist of it is that you drag the component on the form, you can customize the toolbar, you can also hide the toolbar as well. So if you wanna render some markup, read only, and I’m gonna show an example of that in a minute, you can do that as well. So yeah, that’s kind of how it looks under the hood. I’m gonna jump back to the client and do one more example. So maybe one question in between. Yeah, sure. And you’ll also make a traditional pixel perfect reports with CCA editor. So with the Smart Docs editor, you can make just, you know, to qualify what this is, it’s HTML editor. So we’re creating HTML content much like you would in like Google Docs or another document editor. So in terms of pixel perfect, it’s scalable, right? It’s different than like an absolute pixel rendering. That said, what you see on the screen is basically what you get when you, you know, when you merge it or when you render it. But this is really, you know, a document that’s generating markup, not a, you know, document which is certain pixels high or certain pixels wide. It is generating HTML. Now when we convert to PDF, that could be another thing to consider. So I don’t know if I really answered that perfectly, but this is HTML. You can even see like if I scale down on my browser, you know, or scale it back up, everything scaling. Yeah, nice sense. Any other questions before I jump to the next demo? Well, there’s one question about using the IIT name. And if you can form a T current fields by using IIT, yeah, you can. I was a bit lazy in here. I did like a calculation for the order total and I just formatted it with with Desmos and a certain number of digits. But anything that you can do with text in Servoy that you’re used to like IIT and or formatting can be done here because you’re in control of what you inject into the document. One thing that I forgot to show, I was knew I was forgetting something is that I created kind of a mapping somewhere. Let me see it was. And again, this scope. Yeah, here’s my mapping for my tag fields, right? So I sort of path this in as like a mapping for what I want to expose to the user. And you can see that while I have the, you know, the orders table and we’re going to display order ID and these are calculations that I made. And then I have a relation to a customer. It’s using this relation, but the end user doesn’t need to know orders to customers or in this case, you know, orders to order details or to details of products. And now we’re, you know, on a foreign table to another foreign table. They don’t need to know about that. We just sort of exposed the shortcut like products, product name and, you know, that was the list they had to choose from. So you have control over what tags you insert. And in this case, I already preformatted order total to have, I missed the currency format. I was being a bit lazy, but I could have inserted that and it would use the low Cal or I could use it 18M to pick one. And so I hope that answers that question. Will it also work with, would failure list base values like gender, gender? Yes. Yeah, okay. Yeah, yeah. So the list of tags, you saw there’s like a real value and a display value there too. So it’s up to you if you just wanna have like an insert for, yeah, if you did, you know, part time full time or something like that from a valueless, but it’s stored one or zero, you know, you can insert the tag, but then when you merge it, it, you know, it’ll pick the right one. That makes sense. All right, I move on to another demo. We’ll kick some more questions to the end. The other use case I kinda wanted to show was, I thought like a comment thread. So I’m thinking of some of the productivity tools that we use like, you know, help desk systems or project management systems where you might have a case or a ticket and you leave comments on it and you mention your colleagues and it sends them an email and in the email it sends them a little formatted digest of what they, you know, what just happened, like an activity stream or an activity digest. So I made a kind of crude version of that here. I’m gonna come into the customer screen. This is a normal customer screen in the sample solution and I’ll just come into one of these guys. And you can see I added a notes button here and I made like a customer notes table and this is some notes that have been left. I’m not quite sure this didn’t render right, but I’ll show you how I can add it. Why don’t I pick a customer that doesn’t have notes already? So I can come up in here and yeah, so these are blank notes and now I have the things blocking my add note button, the inspector, but if I click the add note, so now the editor pops up and I can say, you know, this customer is great and then I’m gonna format that like bold, italic, maybe change the font size to big. You know, I could put in some bullet here and say, you know, I pay on time, call them back. And I’m gonna save that. So there’s one note on this customer and I might come in and add another note and this time I might wanna say mention a colleague. These are the employees in the sample database that chips with the sample, but so suppose that this could be a list of users or something like that and then I can get them in a mention tag here and say, call them back, check on, and start listing things, formatting things, et cetera. So I can just directly start to put those in there. So what I can do is after I save the comment, I could go back and I didn’t put this in the demo, but I could go back and parse the mentions out of the note and then I could act on that and then I could take the content and I could send it in an email, for example. So the moment I put a note on this customer in my sample CRM here or whatever, it’s gonna mail Andrew Fuller and say, you were mentioned and here’s the note. This could turn and I could put a mention for like a product instead of an employee and this could turn into hyperlink and I could click that and it could navigate in the system directly to that product. So it’s really up to the developer, how they wanna use this type of functionality. It’s pretty like low-level primary stuff that you can build on and I’m just trying to provide some example use cases here, but I think you get the idea. So that is the document editor, I’ll do a, we call it smart, the smart docs editor. I will do a kind of recap of it right at the end. I’m gonna do another demo though for you around some new stuff in the SVA Security extension. So in order to show this, what I think I’m gonna do is log out and I’m gonna come back, I remember when we had that little glitch at the beginning, I commented out some code to get around it. I’m gonna go back and change that. So this is using a login solution, we close all these editors here. And when that login solution opens, I was calling the on solution open method and I had disabled that to get around that one issue, but now I’m reconnecting it and I wanna jump in here and show you. So I’m calling a new method in the SVA Security extension called login with token and I’m passing in my namespace and I’ll come back to what that namespace is. But so I just give it this namespace, which is kind of like a unique identifier for my application or my suite of applications to try to log in with. So I don’t have a token. So the first time I launch this, it’s not gonna work and that’s why I get the login screen here, but once I log in, it’s gonna set a token. And maybe I think I’m logging to the console too and we’ll see it there. It’s gonna set a token and then the next time I come in, it’s gonna remember me. So let’s try it out. So I’m gonna go ahead and log in and now I’m not gonna log out. I’m just gonna, I’m just gonna, well, I’ll just relaunch it’ll kill the client. I don’t know what the other stuff is, but you can see a secure token was issued. So I did get a token. I’m gonna go ahead and just relaunch the client. So, you know, supposing I opened up another browser tab or something like that, I came back six hours later. You can see that it auto logged me in. It’s this user admin and it remember who I was. And it’s gonna continue to do that until my token expires or until I log out. Once I log out, the token gets cleared and I start back from the beginning. I wanna go under the hood and show you one other thing. So the very first thing we do when the login solution opens or if you’re using a login form, it could be when the login form loads is you try to log in, right? Because if you have a token under this namespace, then you should try to use it. However, if you don’t have a token and you get to the login form, then we can set that we’re using token-based authentication. So I’m gonna expand that login solution here and come into the, I think it’s this one on load method. And just to show you this is the login form that we’re seeing. So when this form loads, so in this form loads, it’s calling the onload event and this was already here in the sample and I added this code right here. So this is the second part. There’s really only two things you have to do to enable token-based authentication. The first one I showed you is to try to log in with a token if you have one, but this is how to get a token. And so we’re just setting token-based authentication mode. We gotta give it that namespace. We give it this is optional. When does it expire in hours? If you don’t specify anything, it doesn’t expire until you log out. And then the next argument is also optional. It’s a list of solutions that are available. So Cloud Sample Solutions in the list. This is optional too if you don’t specify anything then if you have a token under that namespace, then you just get logged in. This is ideal for someone who only has one solution or if you just want like blanket SSO for anything under your namespace. But if you think about it well, if you want them to have access to the CRM and time sheets but not to financials, then you only wanna give them a token with CRM and time sheets. So you can do this on a user-by-user basis for a group-by-group basis. It’s really up to you. So this is all I need to do to establish that when I land on the login screen, I’m in token mode. I wanna show how this could work in like an SSO scenario. So we’re only using this one sample solution but I’m gonna come to my all solutions node here and I have this other solution that I just made called test SSO. You can see I’ve also identified that as one of the allowed solutions. And I already have a token for the next 24 hours for that one. So I’m gonna activate this one although I just logged out, right? So I don’t have to token anymore. I just need to select all, okay? So now I’m activating a different solution but this solution should be accessible under the same setup. And all this is a solution with one form, the form says, hello world and I’ve included the same login module. Everything else here is kind of a dependency that I think I’ll stuck in there but it’s really this one login module. And so now if I launch the NC client, what warnings does it give me? I didn’t do this since last night. Oh yeah, I’m missing some, whatever, that’s fine. Yeah, so I don’t have the token because I did log out. So I’m gonna log in here to my test SSO and it says hello world. Now what I’m gonna do is come back to my original solution, my cloud sample solution. And I’m gonna launch the client. And I should bypass the login and go straight to the main dashboard. So there you go. So if that was a bit confusing, sorry for that but I went to my, you can only have one debug client open and developer at a time but I went to my test SSO solution that I made with one form. I logged in, I got a token, it’s also valid for this other solution. So therefore when I opened up this one, I got, I bypassed. When your token expires, the next time you try to log in, it’ll just send you back to the login screen and there will be some trace level logging in your server log. But other than that, you would notice. So that’s a token based authentication and single sign on, I’ll give a recap of that at the end. There was one final, it’s not really a demo, but just a show. I do want to continue to give updates on what’s happening in Servoy cloud and among some other things that one of the nice things is that we have already NG2 building in Servoy cloud. So this is, we’re looking at a dashboard for one of the pipelines that I have in Servoy cloud. You can see, I think you guys have probably seen this if you’ve been in some of the prior webinars. About Servoy cloud, but just some overview about connected users in different environments and the latest build, et cetera. I’m gonna come into my jobs. Here’s a list of all the jobs I have configured for this namespace. And I’m looking at the time sheet application and the job that builds and deploys to a development environment from the development branch. I’m gonna come into the configuration. And you can see there’s like a basic and an advance. If I go to advance and I’m just gonna search for my browser for NG2. You can see that Servoy exporter NG2 is for binary war exporter after 2021.3, that’s this version. You take that guy and then from there on the build art effects that are made that are created the war file and the Docker image if you do Docker, will be NG2 instead of NG1. So it’s a simple switch in Servoy cloud to generate the build artifact for NG2. So you can already today build your application on Servoy cloud for NG2 and try it out in a server environment as well. If you are not on Servoy cloud, you can mail me and ask about it, but if you’re generating your artifacts manually, you come into the export solution here. You go to war exports. It’s the first one, export NG2 resources. And you can get the NG2 one. Again, then the URL is different. It’s got that S, it doesn’t have that S, it just says solution, not solutions. And that’s the secret way into NG2 running client. So that concludes all the demos. I’m gonna switch back to our presentation and do a quick recap and take some questions. Okay, so recap on NG2 where we’re at today because this is the Q1 release. This is our first public release for NG2 and we’re not done. We’re gonna continue to update this throughout the year because it’s not production ready per se. But what’s really nice is we focus first on the NG client core, which is the actual running client itself. That was a major rewrite. It was a lot of work and it’s done. And I think it’s important to focus on that first because that’s where the value is, right? If AngularJS is end of life and you’re deploying to Angular 10 instead, then you’re already good. So that was the first thing to achieve. The next thing we worked on is to get all of the standard packages migrated. So these are things like the Servoy extra boost trap extra components, the NG grids, all of the regular business controls, the charts. And we measured kind of like, well, what’s gonna be our standard packages that we’re gonna target for this release by that sample solution. So the fact that I showed you that sample solution looks and feels the same in NG1 and NG2. Kind of shows that we’ve got the standard packages covered. The debug client runs in developers. So I showed you how you can flip back and forth between NG1 and NG2. There is not a, they don’t run in parallel side by side. So there is only one running client in a Servoy developer. So you have to kill one and switch to the other, but you can test it out pretty easily that way. And we have the work exporter which can build NG2 artifacts. And that is also available via Servoy cloud if you do automated builds in Servoy cloud. Testing in Servoy cloud is not there yet. Up next in NG2, of course, we wanna continue the components that we ship. So all of the components that we ship will be migrated. But if you think about things like Google Maps, a PDF viewer, a full calendar, we have a lot of web packages that do more specialized stuff. Those will be working on next and we’ll be migrating those over. During the time that we’re migrating all of these packages, expects that we won’t be doing a lot of maintenance on the NG1 version of these packages, except for fixes, but no enhancements because everything we do, we have to do twice. So we’re putting those in a kind of hibernation mode until we’re done. Another thing that we still have to iron out is package management. Today you can go out and grab any version of any web package through the package manager and import it into your project. The way it works, kind of under the hood, is that we have one version of all of the NG2 packages that are sort of pre-compiled and shipped in Servoy developer. And we go and see what you have. And then when you launch NG2, we go and get the NG2 version if it exists. So there’s not real package management for different versions of different packages in NG2, like there is in NG1. That’s a developer experience only thing. It doesn’t affect runtime. That’s why we’ve deferred that to later in the year. Also something that people have been asking about, many of you may be created your own custom packages, custom components, and you’re probably wondering, well, what happens there? We will be sharing information and documentation on, how to migrate your own stuff. So that’s gonna be coming later this year. What did I show you with a smart talk editor? Don’t worry if you didn’t get all of that how it works or what you can do. The overall use cases are really any rich text editing in a business application. Anywhere you want a user to be able to type something with more than unformatted text. It will work at data bounds. Some of the use cases I like are threading conversations or activity digest, things like that. I think the most powerful one and the one that appeals to a lot of customers I’ve spoken with are ad hoc reports. So when an end user has control over the way a printed document looks, then it’s quite nice. Of course you can merge the docs and email them, or archive them or put them on a website. And we will have formatted data exports. So today, this is why this is not really a production release yet. Today we don’t have export to PDF working. That’s a lot of work. We have it part way done. So that’s coming. But we will be able to do formatted data exports to PDF and potentially other formats. In terms of the technical capabilities, really what this is is a component. You can drag and drop on a form. You can configure it and customize it, including the toolbar. The event model, what happens on data change when you click the custom toolbar item, et cetera. So it’s like a normal component. It gives you that really low level control. And one thing we really like is that mentions feature, which can then go and inject content into your special tags, into your document that you can act on. Like merge things or like email someone that was mentioned or later converted back into a hyperlink. The sky’s the limit. It’s really up to you. One thing that I didn’t show is copy paste from Word. That also works from Google Docs. In fact, that sales order slip that I made, I actually had something in Google Docs, and I went in and I just copied and pasted it and put in the tags and it worked. Image support, I showed you how I could upload a file. But it also works just directly from copying and pasting an image. It also works by dragging an image onto the editor. So that’s really nice. And another thing I didn’t show is that you can have a hook to capture the image in a method. So if you want to first take that image and go put it off in a document store, a database or something like that, and then reroute it back into your document can. The default is that base 64 in code, which is quite nice for convenience and emailing and things like that. Something that I didn’t really get into when you saw some of my code, like how we parse the tags and everything like that. That’s done server-side in the regular solution. So we realized that we’re going to have to shift like utility module that accompanies the component to help with some of this stuff. So some of the code that you saw in my example will go and be in an API kind of thing utility modules that ships along with that to help you do things like merge or generate tags from a value list and make them available. Some things that are really exciting about the underlying component that we’re using here, and this is a commercial component that we’ve purchased OEM for. So it gives us a lot of room to grow and a lot of space to innovate. Some things that could be in the horizon, because they’re supported in the underlying component, tracking changes. So maybe you want to show the different versions of how something was edited. Multi-user editing. This feels really nice in a Servoy application, because we already do data broadcasting. But if you have two users editing the same document at the same time, it is possible to much like you would see in a Google Doc, see where the other user is in that document and get real data broadcast into the editor, as you can know you collaborate and make changes. Markdown support for documentation, things like that. Play sorter controls is something we’re working on. We already have a prototype of that. But if you think about it, these are special blocks in the document that can have custom actions. And so think about, I like the document signing workflow, right? Where you block out places where a signature is required, and then you can have actions to go and step through those blocks and insert a signature. Of course, those tools exist already, but maybe you have a customer approval workflow or something around a document, and you want to actually get inside the document and do it. It could be possible with some of the placeholder controls that you could do that. Restricting editing for certain parts of the document can be nice. If you just want to have a template set up, then they can’t edit the paragraph, but then they can add comments below it. That should be pretty easy to do. Not available in this version, but that could be coming in the future. In terms of the availability of the component itself, we’re not releasing this today, simply because we don’t have the PDF printing complete yet. That’s going to take a little bit more work, and we don’t really see it as feature complete, because everything I showed you was still in the editor, even the comment threads on the customer. I was just re-rendering those back in the editor. We have to flatten the HTML and the CSS down to even render the HTML somewhere else. That’s the easy part, the hard part is the PDFing as well. So we expect to have that wrapped up at the end of the month. We’re making good progress on that, and we’ll announce it again when it’s ready for prime time. But we can provide early access. We have some customers already working with it, so if you want to get a hold of it, work with it, figure out what you can do, give us feedback. You can have early access on demand. So just shoot me an email or any of the Servoy colleagues that you’re already in touch with, and we can get you early access. I showed you a demo of token-based authentication in single sign-on. It’s pretty simple. If you didn’t follow the demo, you just two things you got to do, enable token mode right at the beginning, and then you can try to log in with a token if you have one. So it’s setting a token in your browser storage, and if you try to use it, then you can bypass the login. One thing I didn’t show is if I were to pop that same app up in incognito mode, then it would ask for the login again, because just like if you do that with Gmail or something, it’s gonna forget everything that you’ve cached and take you back to the login. The things that are configurable in the token is the namespace that’s required, and you can think of that as kind of like your footprint in terms of what you’re providing authentication to, so that would be unique to your application or set of applications. The expiration is optional, and that’s in hours, so you may want to let your users stay logged in for 24 hours or for a week or whatever it might be. That’s up to you. If you don’t specify anything, then they can stay logged in until you log out. Anytime you can actually go and log out through the normal security log out, then it will clear the token, so then you’ll be asked to re-log in again. Finally, we get SSO on multiple Servoy solutions by encoding in the token the solutions that they’re allowed to have access to. And I showed how you could switch between two solutions without having to log in. All you have to do is provide an array of solution names, and you’ll be good to go. If you provide nothing, you get kind of blanket access for that namespace, which works for either only one solution and you don’t care, or everybody that has access, has access to everything, and that also works. So this is available today. It’s available in the latest release of the S3Y Security Module, available through the package manager. Yeah, here’s a code sample. I think I explained it already in too much detail. Finally, I showed quickly what’s new in Servoy cloud. If you were in Wednesday’s webinar, you would have also heard that we have expanded now our data centers to cover everywhere that we can get a Amazon zone. So I think we just added Australia as well. So we’re really excited about that. That Servoy cloud is in all over the globe. And I showed you how you can easily configure the delivery pipeline to build artifacts in NG2. Something I didn’t show is that we also now have two factor authentication. We had some customers requesting a bit more security on the login for the cloud control center. That was the UI I was using when I showed that quick demo. So if you want two factor authentication, it’s available upon request. We can just enable it for you. And it will require that you get a email confirmation link, confirmation link in your email every time you want to log in. So if you want that level of security, we can provide it. Okay, these are just the release notes. I’m not going to go through all of these. Suffice to say that in less than an hour, I can only show you kind of the most compelling things about this release. There’s a lot of work that went into this. In the extensions, we’ve updated many of the packages. And the core, well, it’s NG2. That’s the big thing. Something that also was a lot of work is the NG2 theme. I didn’t show that, but there’s seeming available for components so that they’re all looking consistent. And you can see them with some simple variables. There is an NG2 theme. If you open up the theme editor, you can switch between NG1 and NG2 to kind of tweak your NG2 theme and make it look right. So that works quite nice. It works out of the box. That’s why I was able to switch that sample solution from NG1 to NG2 because there’s a theme in place that keeps everything coordinated. On top of that, we still are doing bug fixes and optimizations. We had a lot of cases just come in for data, like data updates, optimizations. We did some stack updates with Jake Weary was updated. I think the version of Angular 1 that we still ship for NG1 was updated. I counted over 30 fixes and enhancements just in the core. So there’s really a lot of stuff. I recommend if you want to see everything you go back to, the release notes on the wiki documentation or on the forum post where we announce these and check those out. But again, I want to thank my colleagues who put in a lot of works to get to this quarterly release. I think it’s a pretty big deal for us that we’re finally on NG2 and moving forward. Okay, I’m going to take a deep breath here and I see some questions coming in. I’m going to ask Karutka for some help with that. And yeah, sure. We indeed have some questions. Well, in general, a lot of positive feedback about the new tool release and the smart doc at the component. We’ve got some questions about functionality. I see that some of you already covered, like mail merge in here, you can do. Can a smart doc editor also do background printing? Is one question? Yeah, so the printing, why is complete? We’ll happen in the background and we are looking at also scaling this in our cloud. So I don’t know if the printing will be, that we have ready by the end of the month will be like high volume printing. But if you think about, you have some email templates and you want to mass produce those and send them out or generate a stack of PDFs and put them somewhere. I think we’re going to offer at some point here a cloud version of volume printing in background as well. Okay. Another question is if we do support mark down standard formatting in blank text. Mark found in blank, sorry, what was it? Mark down standard formatting. Yes, yeah, so that’s listed in the future looks good section. I went over things that are available in the core component. And so that’s going to be something that we can look into supporting because it is supported underneath. All right, then there’s a question about the tiny MCU component. If that’s still available in the 21 Ultra Year release. Yeah, it’s so currently available, but this is the successor to tiny MCU. Okay, very good. And then there is one other question about the merge fields to the editor when adding a merge field to the editor. Again, you add in any type of data provider for like for variables, scope variables, or just found set related down to the fields. Yeah, that’s really outside the editor if you think about it. It just inserts a tag to the editor like a special tag, which is actually in the markup. It’s not just plain text, it’s actually in the markup a real tag that has extra metadata about it. And that’s coming external to the component. So in my case, I had a value list of data providers around the order to insert. And that included related data and included calculated data. I can include formatted data. But really that’s external to the component. So anything that you can normally do in servo, you can inject. But basically it’s just a tag. And then when you merge it through, you can map it back. Yeah. Then there’s a question about the speed. Yeah, in general, if there are any speed or memory, it was improved when it was using NGTU compared to NGTU. Yeah, that’s a good point. We do expect to see performance increase in NGTU. And for those building components, Frangy too, having the modern framework is also quite nice. But overall, the functional difference is mostly that we need to do this because NGTU1 is nearing end of life. And so we don’t want our customers to be running on software that could then become vulnerable or old. So part of our mission is to help you future proof and to kind of abstract away technology so you can focus on business. In terms of real differences, I think there will be intangible stuff related to being on a modern well-maintained framework for the foreseeable future. A question in line with what you’re just saying. If people install 2021-03, can they still continue to develop an employee as is with NGTU1? Yeah, so it is exactly as I had shown it in the IDE where in today we don’t even have like an NGTU button. So your application as you develop it is kind of agnostic to NGTU1 or NGTU. It’s just a normal Servoy application, which is all just metadata, right? So sort of how you can move from smart client to web client and our old classic clients, it’s kind of the same. A form is a form, you know, some code and that doesn’t change. It’s what we generate in the client that changes. So for the foreseeable future, any application that runs in NGTU will also run in NGTU1, the difference is those components, right? So we have the NGTU versions of the components, the things that you drag and drop on a form, and we’re dynamically switching those at the run time, or really it’s going to be at build time when you go to deployment. You were dynamically building, you know, NGTU1 or NGTU components. But in terms of, so at some point those will diverge, right? So you can imagine that beginning of next year, NGTU is final and NGTU1 starts to become, you know, the legacy client, then you say, okay, well we’re adding enhancements to, I don’t know, the Google Maps component, right? We’re probably not going to go back and add that to the NGTU1 version of that. So that’s kind of what you’re looking at for running. But they will run side by side and NGTU1 will be supported for at least a couple of years. So there’s no cliff here at the end of the year, but also, you know, you can start to try both of these from the same solution. Yeah, that makes sense. Yeah, I think that’s about it, Sean. Let me check for sure. I’ve got, yeah, maybe a last question. Is there any relation between these smart dogs editor? And the smart dog plugin that people already might know which is right before the force. Well, they’re both smart. No, no, no, these are, these are different. The plugin is a actual plugin like a programmatic type thing. The editor is an editor component. So it’s for editing rich text in a browser. Makes sense for their functionally totally different. All right. Then I think we, we came to the end of this webinar. Again, Sean, I see a lot of positive feedback about what you were just explaining in the NGTU2 and this release in general. So thank you for that. I would say, well, start downloading and then trying out. And if other questions come up, please reach out to us again, Sean, thank you and also to the audience. Thanks for watching and attending and I’ll see you next time. Okay, thanks everyone. Bye for now. Bye.