Servoy 2021.06 Product Update

This is the 2021-2021.06, so the second quarter of this year we do quarterly releases kind of a comprehensive release including the core platform and the additions to Servoy cloud or our extensions. And as always we like to start with some demos and then I’ll go over the release notes and we’ll get out of here. I think this webinar should be pretty quick. We had some pretty big stuff in the last release and that webinar was the long one of the tech was two webinars. So this one, I know I say that a lot but I really think it will be out of here pretty quickly just a few demos. So I’m going to show a number one, the smart docs editor component that we showed in prior webinars has been released but now it’s also available in the sample solution that you can download easily and see for yourself and try out. So just to make that a little bit more accessible we added that. We are going to show as I put in the announcement we’re going to show some Dragon Drop custom list views. I want to show that in the context of building regular basic list views because this is more of an advanced topic right now and we’ll ask for your feedback on Dragon Drop capabilities there as well. One of our most our long time and most use extensions the S3 wise for search module got some enhancements and we’re going to demo those and I’ll show you a bit about client connection mode which was a core enhancement that was added. I’ll just kind of show you where that and what it does and we’ll go over the release notes we’ll get out of here. So let me jump over to demo. And I’m just going to come in here to the sample solution that is available. My first demo is really just to show you that there has been a menu item added to this called document editor and this is the same really the same example that I showed in the past webinar so I’m not going to go through this again. Because you can watch this in a prior webinar and many of you have already probably seen it but just to let you know that you can actually just download the sample solution. The document editor is ready to go with the sample document in there you can experiment with the print preview and you can also experiment with. Playing with the tags and the merch tag and that all that capability so that’s not really a demo but I just wanted to show you that I am I downloaded the sample this morning so I build these samples pretty much the morning of the webinar and. This one I just I just downloaded it and it’s there and it’s working I added my two other demos to it. The next demo in our agenda here is really the drag and drop list view but I want to put that in the context of basic list views. We did a whole webinar on this topic so if you go to the the text series homepage so it’s Servoy.com I think slash webinars text series. You get a list of these old webinars and I think are not all of them are old but building list views we did I think last year so and so this actually shows how to make nice list views with the wiziwe get it or just a few minutes so go back and watch that one if you’re interested. Just to show you real quick I have sort of a wiziwe list here of product in for our order information and I want to show what that looks like in the designer. So we have a feature called a form component it’s just like a form except that it has no scripting scope. I like a form but I made an order list form component here so I can drag drop make this data bound style it with CSS etc and then in my my orders. I can go to the list form component and if I expand this it shows all the ones that I’ve already made so if you go and you drag. One of these on the form it’ll just pop it on there ready to go and you can interact with all the properties and the events and everything with that so. I am showing this not because this is the main focus of the webinar I’m showing this to. Many people have a lot of experience in surviving these webinars but we have some people that are new with server or even just evaluating it and I didn’t want to give the impression that. You are required to do the next thing I’m going to show to get a list you I want to show you that building a list you is really easy you just drag drop and and scripts the next thing I’m going to show is our advanced renders component. This is a component that is kind of a building block for other more complex components so let me switch back to the running client here and first look at like our orders list here with the pop up filter so if I click here on on the filter and I want to filter. I want to show you that there is a list that sticks in here and the filter. That’s where this one component comes in it’s sort of like a building block for more complex components and we’ve tried to discourage people from using it directly because. I’m going to show you that and I want to show you that so if you do have that requirement we don’t want to hold you back and then also get your opinion on drag and drop capabilities and your requirements for those so I’m going to click here on the drag and drop list. I’m going to click here on the drag and drop list menu item and what I have here is a sample solution. On that that component repository the sample solution is available I just sort of poached it and stuck it into the navigation structure here and it just works. But essentially my use case is well I got my products table I’m filtering on the product category here and suppose that I just want to move products into another category. Suppose that I decide that. I for whatever reason. I is not a beverage anymore it’s a condom mentor a produce right so I’m going to go ahead and drag this from this list into this list. Stick it anywhere that I want you can see that things reorders I hover over and drop it in there and so now it belongs in the the produce category. I could change my mind and remove it and drag it back here. Drop it there another use case could just be a short reorder so maybe you have some cards that you want to you want to allow the user to just sort to their own preference and you say that somewhere so I could click and just reorder some of these. And store stored in my sort index or something like that so that’s kind of a list view. Drag and drop example I’m sure you can think of your own use cases like dragging products onto an order to make a picker kind of thing or whatever might be. So I’ll take you a bit into the IDE and we’ll we’ll look under the hood again this one’s a bit a bit more advanced so there’s going to be some stuff I’m going to skip related to this component and just get to the dragon drop stuff. And you can post any questions you have in the chat as I go so I’m going to. Close a close all of these and find that that form here. I think it was called something drag. Found that dragon drop there it is. And when we look at the editor of this form you will see that there’s two components that are on the form one for each list sorry it always takes a while to render the form editor when zoom is running. But here they are these are the advanced renderers and I’ll show you where to get that on the palette. Let me see. So there here yes under visualization. There’s custom list and found set list they’re basically the same the difference between them is that the found set list can be bound to. To back and data source so if I select one of these you can see that. To the found set here is is the products data source and I’ve selected the. The data providers that are going to show there. Also you’ll notice that I have dragon able set the true so this is a new property there drop enabled set the true. And then far the down here you can see that there are a couple new events one is on drop and the other one is on sort end so these are the the final events when you when you drop an item on here or you reorder an item from within within the same list so let’s go ahead and. Jump into this method and I’m really just going to kind of show you the method signature you can see I was just printing a lot of stuff out of the console. But the thing to focus on here is the method signature so it passes in the event objects which comes with any UI event and then it tells you kind of like the index in the in the. The destination and the index in the target where it’s dropped the actual record or records that were moved so I could do a shift click I don’t know if I have that enabled in this sample. Let me see. Yeah I do so I did a shift control click here now now I’ve grabbed two of them and and I can drop one to over here into the target so that’s that’s how you get in a array of record objects that were moved. So the list is really just a rendered view of the model but the actual drop event does nothing to the model if just renders it in the list and then you have to catch it in this event and then update your model however you like so. And you know automatically move the product into a new category in the database or automatically change the value of the short column right so that would be convenient however there would be no way to predict what you want. So in this case it just passes this stuff in and here you can see that on this line to 58 were updating the category ID. Of the record that that was was moved into the new category filter that is set. And then we just refilter the list so that it all matches up again this puts the the state of the model back in sync with the state of the view. Again this is kind of an advanced component so I’m not going to get into all of the details and the code in this example all the code that here is also in the example solution that is in that repository. And that’s a standard component you can add through the package manager. So that is the custom dragon drop demo again that’s the advanced renderers component that you can add. The other demo that I wanted to give was a there’s a small enhancement to SUI search but I thought any any. And excuse I can get to demo that that extension I do because it’s very flexible and I find that people are even if they’ve been using it for a long time to learn new ways to use it so it’s always good to revisit it. And I think it’s telling that such a mature extension we have still gets feature requests coming in even now. The feature request that came in was hey I have to put if I put in in the search here a number it’s only matching exactly that number so actually let me disable some code and show you the way it was working. I’m going to show for. The first orders list. I should have said it to and then commented it uncommented but I forgot to do that. So the first time this form shows I’m I’m saying some stuff here but let’s comment that out will show you the way that it it works by default. Okay. So coming back here and looking at the orders. You can see that if I were to type in like an invoice number or an order number I want to for nine. It’s it finds it right but or one oh two five oh. It’s matching on this ID here but but the request came in that will suppose I want to find all the order numbers that start with you know one oh two five right I should be able to enter that but then it doesn’t match so the default behavior because ID order ID is an integer in the database. It says well that’s new matrix or we’re going to treat it strictly like number and only do an exact match you probably could do. I don’t know something like this. Yeah, I don’t know. Yeah, I don’t know that’s probably matching on something else it’s greater than 10 25. But you’d have to play with it and it’s not intuitive to the user that’s the point the user expects to type a string fragment and get results so. We added a simple method to the SUI search which is called set cast integer and it’s a Boolean so by default we’re not not no default behavior changes but if you set that to true on the search provider so that’s an individual column that searched. Then then it will it will try to match you know cast it as a string and match on it with all the other string operators that might be in play. I’m going to comment out this one as well. Save that and I didn’t check for first show so in theory I should probably relaunch it I’m going to relaunch this one more time. And when we come into that order’s view. We should see the expected behavior now which would be that I can sort on search on the order ID as if it were a string. So now I got my list of orders here and I’m going to put in 1025. So now you can see I have you know anything 10 to 52 51 etc. And if you look down at the bottom I get this one one one 0 to five or what is that that’s because it contains the one 0 to five but it doesn’t start with that so I could come in and. Set the string matching to excuse me string matching to starts with. And then it will it will just match those ones that are starting with the 1025. That’s that’s an order property but I wanted I put that in here to show that. That once you cast this to set that this search provider cast to a string all the other string matching settings case sensitivity not that that matters with numbers all of that stuff. And I think that’s the first thing that that’s worth pointing out is that you know you can put spaces in and all of the additional search terms apply so if I wanted to do. So now I get all of the you know invoice numbers in that range that were shipped to Brazil or maybe. Let’s see we have a mix of 2019 2020 and 21 on the ship date. I could just put in 2021 which is also a nice enhancement from the last release this and now I get those there so I did that by. Setting that ship date was implied by default date columns are ignored unless you explicitly type you know like ship state. Like that or whatever the alias is and then and then the value. But you don’t have to do that if you said it to be an implied search you know it’ll do it by default get 2020 etc. So those search terms work together just like if it were a string. So that’s also really nice so I want to thank the person that submitted that feature request because I think other people had noticed that as well and we’re happy to pick that up and release that. With this quarterly release there is. Yeah, a couple of questions about this. The the cost to string. Does it work on dates to. So that the it’s the proper the new. The new property is called you know a cast integer set cast integer. So it only applies to integer columns because oftentimes integers. They can represent like something that’s truly numeric. But often they’re used for like IDs or you know order numbers or invoice numbers or something so. This is meant to specifically treat them like like strings for dates. So that’s a good question. There is already. Date format support. So you could see that when I put in 2020 I can get rid of the invoice number part when I put in 2020. That’s implicitly working on ship date here by the way because I had set it up that way. But it’s showing all of the orders that were shipped in 2020 or 2021 right or 2019. You can see that. That those all match there. There’s already a date format if you look at. I think in the in the base of this. This is extending something but there’s already that’s already kind of plugged in. If we look at this particular form in the sample it’s extending all of those grids. One of the tutorials based on the sample is just a quickly built a grid. And I think on the loader on the show it probably sets the allowed format. Yeah, so here’s all the date formats and that’s also part of the S.U.I. search API. This is a sample solution which uses the tool bar filter and the grids which is all kind of a bunch of extensions working together at the heart of that search though is that simple search API. Which allows you to just get in there and set your date formats. So you can set what’s an acceptable format. I could come in here and also do. I’ll try something off script here. It’s right 31.07.2019. Yeah, so that matches exactly there. So that’s already can be treated like like a string and you can do the year as well. That’s nice. Good question. Thanks for that. Yeah, got one other question about the notes at custom list. Do they allow infinite scroll? I’m glad that that was asked as well because so that’s about the list here. Which are these are bound to found sets now. There’s only you know, a finite number of products in each of these categories. One of the main use cases of this particular component is the infinite scrolling. So yeah, the answer is yes, because the normal with the way, list that you see here. This will do the the pagination at the bottom. And then there will be a little arrow to go to the next page. So this over comes that limitation. We’re able to with this one because it’s kind of like a custom component template. We’re able to overcome some of the limitations in the normal list view. But one of the poll questions there is about the dragon drop that you saw because we have looked into a little bit into Dragon drop in other realms and in the in our components. It’s definitely more difficult to implement and we’d like to get your feedback on the requirements on that. Good questions. Thanks guys. There was one question there. What font are we using on these forms? I don’t know off hand, but you can run the sample at sample.serverway.com and right click and inspect element and you can check out the font. So let’s go on to one more. One more demo here. And this was the. Oh yeah, the client connection mode. This is more of like an info than a demo. Let me close all these. Sure. So there was one other enhancement that I wanted to highlight and I’ll go over the release notes in a minute and get in the nuts and bolts. But one other one that’s worth highlighting is something called client connection mode for data sources. And there’s a couple of use cases for this, but I just sort of want to highlight how it works. So I’ve created. I’ve used one of the custom connectors in this case, the Facebook connector. Here you can see. I used the Facebook driver. And there you can access more than a hundred of these types of custom connectors for cloud services, ecommerce platforms, SAP, Facebook, LinkedIn, HubSpot, Salesforce, whatever. We have lots of them available. And the basically provide database access to what is not a database. You can see the tables here for Facebook. You can see the views. If there are any other APIs, they can be exposed to procedures directly. And so it’s really simple to create a connection to the service and treat it like any other data source to the Servoy. The challenge is, and this is a technical explanation. So bear with me here. The challenge is, and you can see it in the advanced properties here, Servoy does connection pooling on data sources. So, and that’s a way to greatly increase efficiency on the database, because many clients can share just a few connections. And do that very efficiently. However, if you think about the way, the way that these might work for an multi-tenant or multi-user environment, each connection here and the data source is a bit dependent on some connection properties. And those need to be set dynamically after the user authenticated to the service. So I don’t want to get into the whole OAuth, but this is what sort of was driving this feature request. So, the first time we heard it. So, now what we allow you to do is kind of map a data source to a single client. And then you get a dedicated connection, and you can run times that properties on that. So I’m just going to punch this into the command console to show it, because to demo it is a little bit cumbersome. And there’s nothing to see. It’s just switching the connection. So, we’re going to start by going to the data source as API. You pick your data source in this case. I’m going to do db. And then the Facebook connector. And then there’s this new API on any data source called Define Client Connection, any db data source. And you call Define Client Connection. And then that’s like a builder. And then you can start to do things to it. So you can set the password at username and passwords. So you can change the credentials that are used to connect. You can also call this one, which is set property. And then you just put in name value pairs. And all of these connectors, both sort of custom, you know, the seed data connectors. And any other database, have a whole range of custom properties that you can set. And you can just pass that in at the very end. And you can keep calling set set set. This is like a, you know, call chaining. But at the very end, you call create. And that is what creates the new dedicated connection. And then you can also destroy it if you want to do some cleanup. So that is a nice new feature. I want to highlight a couple of use cases are. Some database vendors do multi-tenancy this way. So you actually want to change the connection properties. I think we have a lot of data. So I will try to do that. So I will try to do that. So now we support their native multi-tenancy. Based on connection properties as well. As allowing the seed data connectors to be multi-tenant for various social platforms, etc. One caveat to this is that you get a dedicated client connection. So that can put more load on a real database on the, like the Facebook connector does matter. Because that goes to API. But a real database like Oracle or something. Normally we can share 30 connections for 300 clients. Now if you have 300 clients and they all do this, 300 connections. So that is something to keep in mind. So yeah, that is not like an awesome demo, but it is hard to demo something like that. But I wanted to just sort of highlight that because if you are using those seed data connectors or use. Open edge progress or Oracle from multi-tenancy. And I think there is probably some other use cases I don’t know about. That is available to you in this release. And it is just a line of code really to do. And you want to do that like right at startup as soon as they authenticated you know what properties you want. So that is how you do that. There is a poll question there on the seed data connectors as well. So if you could answer that for us, I would appreciate that as well. So that does it. As I said, we just have, you know, some light demos there. Nothing too crazy. And let me jump back to my browser here and go through the rest of the release notes and we can take questions as well. So yeah, hit all those demos. Some other stuff in this release. Of course, we have to talk about Angie too. We’ve been talking about that since the beginning of the year. We announced that we are migrating the Angie client itself. What it runs on from Angular to Angular. So we just have to do this as well. So we’re doing that for you. So that you don’t have to. And the status on that is that all the essential components, all of the, you know, basic components that you use in almost every application have been migrated already. There’s still a few specialized ones out there like calendars. The smart docs editor that we just released last quarter and demoed is not yet ready for NG2. Those will be coming later. Also, something interesting which is kind of internal, but all of the component source code 4NG2 is now in the web package repository. So you have the NG1 and NG2 versions of those in the same repository. So when you add a component through the package manager, and then you go to run NG2, it can pick up the NG2 sources before we were kind of cheating and shipping that in the IDE like pre-bondled. So now we actually can build it from your installed packages the way we do with NG1. So like the right way. Of course, this is a long process, and our R&D team has been hard at work on this for like two years at least. But I want to look ahead. In the next quarter release, we hope to have the form designer, the actual editor with EWIG editor migrated to be running and supporting NG2 components. So we really focused on what actually happened in the client so the people can release as soon as possible. And now as we wrap that work up, we go and improve the developer experience. We will port more components over, including things like PDF, your calendar, Google charts, these are more specialized components that not everyone is using. So we’ll be continuing that work. And by the end of the year, we will have this hardened for production use. So people can feel confident to put their application actually in production in NG2 because the end of life for NG1, the underlying framework is at the end of the year. So at that point, it goes on supported. We will be acquiring a long term support contract on NG1. So it doesn’t mean that you have to migrate by the end of the year. We just want to make it possible for those who want to be ahead of the curb. And also there are folks who make their own components. Servoy’s web package architecture is open. So people can make their own web components. You’re kind of on your own to migrate those to NG2, but we hope to provide some. Some help with that in terms of documentation and best practices. So we’ll be looking to do that later this year as well. Some other performance updates in the core platform that I did demo that are still worth mentioning. We made some performance updates. One is related to something called batching modes. So this is the scenario where the user maybe has generated a lot of new records in the same data. And before they save it or when they save it, you know, the way it works by default is those are all kind of discrete. SQL statements. And so that doesn’t take advantage of the benefit of batching those all in one transaction. So there is a property. So the default is it doesn’t change, but there is a property that if you put this in your properties file. Save a batching equal to true. Then when you’re saving records to the same data source in one go, it will actually treat that like a transaction. And kind of bundle those together in a bulk insert. So that can improve performance greatly for, you know, big record inserts. There is one thing to consider and that it treats it like a transaction mode. So if one record fails, they all fail. It used to be that when it’s when it sets the false. And you, you know, you’re building up record new records and record changes. And then you save. If if one of those fails, it gets marked as failed, but any once before that that succeeded still go to the database. You of course could have already done that in transaction code. But this sort of kind of just doesn’t automatically, you set a statement batching to true. So that’s available for you. I recommend that you don’t really just turn it on willy nilly. But if you do see performance problems. Like you have a use case where a user or in code could be building up a lot of inserts to the same data source. And it feels like that slow. There’s a way to overcome that. Excuse me. Another performance update. We have another config property, which allows you to kind of bypass the table filters when you’re loading records with primary key values. So this is another config property that you can sneak in there. Again, there’s no change to the default. So if you ignore what I’m saying nothing, you will happen when you run this. But it does allow you to, if you if you disable this, instead of the false. It allows you to skip the requearies against the table filters. When you’re loading records by primary key. So that’s another thing. Again, this is like a real edge case. But it’s good to know that it’s there if you see a performance issue when you have. Table filters and you’re calling load records by pk. Another performance update. It has to do with data broadcast and notification of data changes and new records. So typically what happens is a new record is is made on either in your client or in another client and receive a data broadcast from someone else. And then found sets of these cached or these data sets that we have. That manage the cache they they are requeering to make sure that record shows up. I mean that Servoy data broadcasting. So one of our are really nice features. That does have an overhead because the client have to figure out which which found sets to update, so which ones could have that record. We have greatly optimized how that works. Limiting the number of checks that it needs to make. When that happens so this is a change which is sort of like you’ve been opted in already so. And in this case there is a change you shouldn’t notice anything other than better performance. However in a really complicated scenario. It’s it’s still possible that you would get a scale patch on a new record so suppose. There’s a new record from another client and you have some crazy relation or something happening or change together relations. I suppose it’s possible that still. That record doesn’t show up with with a broadcast in that case you could disable this and set it back to false which would revert it to. What it was like in the previous versions but you would miss out on the on the optimization. Okay that’s it for core changes that have to do with performance those are all kind of edge cases but they’re good to know about. I’m I demo the client connection mode just kind of to explain that so we now enable one to one connections for data source per client. So this allows you to really get flexible with what you want to set for connection properties to it to a data source and have that just be for one client you should understand that when you do this for a real database. That it can reduce the efficiency that you get by connection pulling so you just want to keep that in mind if you have a really high number of users and you choose to use this for all of them. Yeah I mentioned the use cases particularly any of our custom see data connectors or a cool multi fancy open edge multi tenancy that’s what you used that for. There is a new solution event that we added is called on before login and so this gets call show let me show you really quickly. In here so if you look at the solution events here it is right here on before login this gets called prior to. This solution authentication happening right before login on a successful login. And so that allows you to now handle deep link arguments so these would be arguments that you actually put in the URL. If you’re deep linking from somewhere else and say an email that you sent it says we want you to approve this invoice or something and then you click it and you want to handle the deep link and then navigate directly to that record right. From from a URL if you want to do something like that. You you probably want to figure that out. You know you still may be still have to authenticate but then you need to know where you’re going it used to be that you can only handle those in the login solution which was a separate solution dedicated to the login flow. This essentially lets you handle it in the pre login event and set whatever state you need and then and then move on and not you don’t need that sort of more heavy login solution you can do it just with a login form so there’s again there’s two properties on on the solution here there’s. There’s a login solution name and if you don’t set that there’s a login there’s a solution login form you can do one or the other the login solution is kind of a legacy thing now going back to our desktop smart client. So going forward we might deprecate that because it’s not really needed if you if you if you still use it it won’t break but we might hide it for new stuff so just just to let you know that but. You can try this out on before login solution event handle deep link arcs you can skip the whole login solution and just use the form. Hope that’s clear. We did we actually updated pretty much all the main extensions because because of NG 2 so now if you look at all the extensions they you will see a bump in the version or you would have seen it in the past month during the release candidate period. And then that makes them compatible with NG 2 and actually puts the source code in that repository and bumps the version so that was done. On the you know pathway to NG 2 so you will see that they’re all updated but we also had some enhancements again the smart doc editor component which you can saw through the package manager that’s also available on the sample solution so. The sample solution to look at how that works. We have the integer types which I did are the integer cast. Distring which I just demoed and we have the advanced renders were updated which I just demoed again that advanced renders is. For advanced use we recommend that you use the list form component to build most lists but if you want to drag a drop list you can do it today with with those. Okay I’m going to leave the useful links up thank you all for your attention and we’ll take the remaining questions and please can ask that you guys. So out that poll if you haven’t already. Rutger how do we do. Quite good couple of questions. Somebody is asking about the status of the NG desktop client especially the customization of the installer. Is there an update system? Yeah, I might have to take that one offline so I can I can respond to you privately I get the list of the questions asked and I have to respond to privately about the customization of the installer. We have been working on the installers for a brandy desktop but I don’t know that off hand. Okay, somebody else is asking about the possibility to to write a connector for your own APIs as well. Okay, that’s a great question so. Writing a connector for your own APIs. I assume that means like a non commercial API that you want to connect to and you want it to be seen as a database like like I did with the baseball connector. There is a possibility for that again we have a partner vendor our connectivity partners see data and they they help us to embed these connectors and serve away and make it seamless and there’s over 100 of them for lots of commercial you know cloud services. And there is the possibility to to create the custom connectors as well. So and that’s done that’s done for fee of course but there’s a possibility for that to. To have that exposes a database and to do the optimization and stuff that they also do so. I can. You can talk to me or root curve about that and then we can we can evaluate to see if it’s a good fit. Okay. If not you can you can always consume web services with the rest plug and that’s the. The low tech way to do it and that that works in many cases. Okay. Um yeah I think one last question about sure we’re developer on our six big sir. Um any any news about that. Please. Um I am not a mac users so I don’t have the first hand experience I know that we put out like a statement on big sir when it came out. That there was a lot of there were some issues with eclips and big sir in particular some some rendering bugs. Uh in in that and we just we recommended that that you stay away from big sir. Uh I have to follow up and see what the. The status of that was it was kind of out of our hand. It was it was between mac and eclips basically. Um so I’d have to follow up on that certainly your your I do have colleagues that do use. Uh OS X big sir with server developer and I think they do some tweak or something to get around it. I’m not sure but I’m not the best person answer that so I’ll take that off line. Thanks. Okay. I guess that sits for now. Sean. Okay. Thanks a lot. Thank you all. Uh and again this is recorded the sample that you saw is available. The sample that’s here where I combine is the little ones that I added. Um and we’ll see you guys next time. Sure. Thank you guys. Bye.

Close