Servoy 2019-12 launch part one – Dec 16 – Servoy Tech Webinar series

Today is the 69th installment of our tech webinar series. This is a series that we bring new almost every two weeks. No marketing, no fluff, just updates, what’s new, cool stuff, tips and tricks. And definitely we always do a small campaign when we have a new product launch and Servoy Switch to Quarterly releases at the beginning of 2019. And here we are at the end of 2019. So we named these releases after the month that they’re released in. So we had 201903 to start then six and nine and now we’re at 12 for the fourth quarter. And you may have caught notes on the forum last week. We released the first release candidate of this launch for Servoy Core. And we’ll be making updates to that pending people’s bug. bug and requests that are associated with that release. And we’ll probably tidy that up and make a final cut of that just after the new year. So what’s in this release? Well, per usual, there’s a lot of small fixes. You can always go to the wiki.servoy.com and you go to the what’s new page or just the RC page. And you’ll actually see the list of all the cases associated with this. There are literally dozens of them. Most of them are small fixes. There are also a few enhancements to the core and I’ll get to that in a few minutes. But at the same time, we try to coordinate all the extensions that we release around the quarterly release cycle. And I’m happy to say that we have, I think at least 10 packages that are updated. And plus we’ll be introducing a couple of new packages that we’ve been working on that you, if you are at Servoy world, you might have had a preview of and we’ll be doing that on Wednesday and on Friday. But I think it makes sense to go into a little bit of detail about what’s in each one of these updates. And then I have reserved a time for a few small demos. But of course, the the stars of this week will come on Wednesday and Friday when we demo those new packages. I will start with the bootstrap components package. This is really a standard package that has a list of usual business controls like text box and buttons and things like that. There were some fixes and a few enhancements. Most of those are around the calendar component as well as the tab panel. And I’ll jump into a demo and show those in a minute. It’s worth pointing out that there was a potentially breaking change as well. I like to always highlight those because when you do an update, there’s a lot of documentation and things. And if you don’t read everything, you might get caught with some warning or error that you’re confused about. So trying to preempt that here. There are two types of components that were previously in this package called the form component and the list form component. Those have been deprecated from this package and moved to the default components that are installed by default in every project in Servoy. So if you were using these, you might get a warning or an error in your build markers in the developer. If you right click those and select quick fix, it’ll sort of reimport those packages from the proper location. So there’s an easy workaround for that. But basically these have moved because they’ve become really core components of the platform. There’s another package that’s been, it was actually our first extension package that we officially put on GitHub over three or four years ago. And it’s called SUI Utils. It’s a sort of low level kind of programming utilities package for every little odd and end you can think of as we’re working on projects helping customers. We come into little things where something took five lines of code and we like to say, hey, well, there’s why don’t we make a method for that in a utility scope and then it becomes only one line of code and that sort of thing. We haven’t updated that package in a really long time. And there were methods that had been deprecated and that sort of thing. So major house cleaning going on there, although the number went only from one three to one four so not a fully a major release, but some major house cleaning that was long overdue and we’ll be keeping this project now that we got through that. We’ll be keeping it up to date every quarter like all the others. And most of those are enhancements around data utilities and date utilities and quite some around the Excel utilities and some of the IO and system and network and JavaScript. There’s a whole bunch of scopes in there. If you’ve never used it, it’s worth checking out. But that’s that’s been upgraded and yeah, I’m not going to demo anything from that because it’s mostly API, but all of the release notes for any of these packages releases are available on each one of their respective GitHub project sites. One of the things that I would like to demo today is the S3Y Lookup. Extension. This is a module that allows you to show inline sort of searchable lookups in your applications without having to design anything upfront. It’s just a few lines of code and you get a nice pop-up screen that’s fully searchable. It takes advantage of another package, the S3Y search module. We introduced this a number maybe two two and a half years ago and it works nicely, but it hadn’t been updated in a while and we started to get some cases around it having to do with like multi-select or being able to show it as a normally shows as a pop-up like your inline editor type thing. But being able to show it as a modal or window type implementation. Also, we switched the implementation over to the NG grids which are the more rich component. So now you can really extend it and you can also make your own implementations of it without having to really write any code. So if you want to change the design or the overall layout, that will sort of show a short demo of that as well. If you are building mobile applications that you like to release through the app stores and you like to have native integrations to things like the GPS or gyroscopes or the other available sensors or devices on the phone, you may be familiar with the S3Y Phone Gap project. This allows you to bridge over and call some plugins on the native device. For example, I think we have camera and GPS and already a number of those in there. So this is an actual API that you get to use when you run the NG mobile setup. We had some implementations with customers where they were using the Zebra Barcode scanner which is a popular vendor of the handheld laser barcode scanners and they wanted to use that and capture the events of that. So there is an API and a Cordova plugins and such. So we made the bridge API to call that so you don’t have to get into the down in the device. It makes it easy. You just call the API for that. So we updated that. It’s a minor release but it does add extra API for calling those scanners if those are types to use. If you have other devices that you’re trying to use on a mobile application that connect and have APIs and you would like us to explore it, for you just please make a post in the forum under the announcement we normally make for this webinar or send me an email at stevlinetservoy.com and we will take a look at your case. There is a utility plug in just around NG clients that’s our HTML5 client. Just general functionality and a couple of items were added since the last release. This ships by default with Servoy so think of it kind of like a core update. One of which is an event just to capture the browser back button. Sometimes people want to handle that event in different ways. Servoy already supports a setup where you have a single page application and an SPA which allows you to essentially function with the back buttons disabled and without any real browser navigation getting in the way. Other people want to preserve that. You can do both in Servoy. That’s the nice thing. However, prior to this release there wasn’t any way to know that the user hit the back button. You would know implicitly say maybe if you went back and showed a different form in the form show event went off and that prior forms hide event went off but you don’t know that that’s because they hit the back button for example. We had some requests to be able to pick up that event and we worked that into this release. Another request that we worked into this release is the ability to show PDF printing documents directly to the browser’s default print dialog. The use case for this is really that you have a PDF file, maybe it’s static or you just generated it programmatically and you would like to print this but you don’t want to preview the file first. You want because it’s like one extra click because we have a PDF previewer where you could have it and then they could show it and they can hit the print button. Also, you could do it work at it like a download but then it sort of like downloads it and then you click on it and it opens in another tab or your default setting for how to handle PDF files and then you print it. In either case it’s one extra click. In this case we updated this to be able to just directly open the browser’s print dialog and have the PDF ready to go and print to the destination of your choice and I can do a little demo of this. I’m not sure I have it set up perfectly so Peter if I forget you can remind me at the end I can show this because it’s just one line of code and you can see what it looks like. All righty. Another plugin that was updated that ships by default with Servoy is the OAuth 2 plugin. It’s not version 2.0 of the plugin, it’s version 2.0 of OAuth they’re quite different. We enhanced this plugin after we had a request for I think an integration with the QuickBooks service. The idea being that a lot of the web services out there that you might want to integrate with, they all secure themselves with the OAuth spec and we have an OAuth plugin and the services that we supported were kind of hard-coded into the plugin but the under allowing APIs that we use really allow us to use many more services but we weren’t taking advantage of that. So when this request came in we decided to refactor this plugin and set it up the right way. Now we expose literally dozens of new service APIs that you might want to use such as LinkedIn, Facebook, some of the social ones but also some of the more business-oriented ones like Dropbox or maybe if I can remember when we’re in the IDE I’ll just bring up code complete of them and you can see some of the ones that are supported. Also we added a service builder class to this and the reason we did that is before it was more of like a singleton method where you just said you know create a service and you pass in a few arguments and you get the service but a lot of these services have sort of custom options that are required for some but totally not relevant to others and so it makes sense that instead of having a big overloaded method that accounts for everything we instead make like a service builder factory type thing where you put in all the options and then and then you go and you build it. So we’ve done a few webinars on OAuth I’m not going to get into all the details about this but I’m happy to go in and show kind of how it works from a coding point of view. Another area of the application of the product that was updated is the NG desktop project so this is a lot like the NG mobile project that allows you to take an NG client application and distribute it in this case for native desktop so it gives you access to file system hardware that sort of thing. So this project has been out for about a year now and has been evolving and a couple of other things we did is we added some options to the branding settings so now you icon for when you export it the image path for the sort of installer image when it’s installing some default sizes that you can set one time and then it will remember it. In addition to that through through the APIs we added directory watching so we had a file watch before but it was only for watching files now you can monitor a whole directory and find out what goes on there. I’m not going to get into demoing that it is you can check out the release notes and the updated APIs for that however we did a webinar on this project once or twice in the past and I if you’re interested I recommend you watch those and then catch up on the documentation and the release notes. One other feature that was added was the ability to set and get a clipboard access and that only reliably works through the NG desktop it’s not supported in all browsers but it is supported in the desktop version so we get access to that as well. Okay some some core updates that I do want to highlight in addition to the many cases which you can check in the release notes which are mostly fixes and small enhancements are some some changes that might mess with you a bit when you go to upgrade. We’d like to highlight these so that you don’t have some mysteries when you make the switch. The first one here if you are doing dynamic database server switching I would pay attention to this if not you don’t need to but that’s that’s when on startup you do have a reference database and then you dynamically forward all of the clients activity onto a clone of that database so those of you who are familiar with this you know what I’m talking about. One of the things that we fixed for that is that when you actually do the switch it reloads all the i18n data it didn’t use to use to cache it up front and then if you once you switch if you were if your i18n data was in one of the you know in the reference table then it got cache and it got left there and you may want to have different you know i18n messages or translations depending on which database they switched to that’s probably the right implementation. Now if you had this setup and this wasn’t a problem for you and now it switches and for some reason your translations are different or they’re not there that’s why so if you this really only applies if you have if you do database server switching and you do i18n and it wasn’t a problem for you before that your i18n data wasn’t refreshing after the switch which could be entirely possible. I don’t know we don’t know if it breaks for you but now you know if you have a mystery there. Another thing we we fixed is that low-cal formatting is now pegged at the country first and then the language the prior implementation was the inverse of that because that makes the most sense for for translations but if you think about for example i’m in my country as the United States and my language is english supposed that i want to ship the same application in the United States but for Spanish speaking users and I wish my language to Spanish what was happening is all of a sudden for example the currency format was showing up as euro because it’s pegged to the language and not the country the same is true for date and numeric formats so if you think about it that’s kind of a backwards implementation and we fixed that so now if i’m in the US and I switched to Spanish I still get a US dollars is my default currency unless I were to switch my my country to Spain for example then I would be if I was in Spain but in English I would still get euros so it’s the same thing in in inverse so that’s a good thing it’s a good change however it might break some some formatting for someone who wasn’t expecting this so keep an eye on that one only applies to people doing i18n and low-cal formatting another change we made this one is related to how certain numeric types map and Servoy so what we were doing in the past was the database column type is actually numeric but it’s a zero precision and that was getting mapped to an integer that was a problem and we switched that to keep it now in numeric and so people were noticing this when they were letting Servoy create their data model and it was it was like switching I mean it wasn’t Servoy never touches your database schema that’s already created so for most people this doesn’t apply but if you were letting Servoy generate the schema either during an import or in developer when you sync with the dbi files and you let it create columns for example and it sees this column type it was creating in this integer which was incorrect now it’s creating it as numeric which is correct however if you were expecting this now to be integer for some reason because that’s the way it was doing it that I guess could be a problem we don’t know if this would be a problem but it could potentially another breaking change that could occur is for in-memory data sources these are tables that you can bind to as data sources that are generated from either a SQL query or a REST call or something like that it used to be that if you call it get column names either from the data source object or from the database manager API JSTable class but if you ask for what are the column names for my in-memory data source if there wasn’t already a primary key specified it would return an internal ID which was like underscore SV something or other not one of your columns and that should be filtered out because that’s kind of an internal system column it’s actually in the in-memory database implementation it has nothing to do with your data source it shouldn’t be there if for some reason you were getting this and you were using it maybe you had like you know an array of column names and you know the count is now different or something like this this could break for that I don’t know if it’s possible but it could be finally we just found this out recently CSS and less files that use an import statement for fonts could raise a content policy violation in your browser so this would be if you use like the import tag and use a URL for a third party type of font then could raise a security exception in your browser and we just found this out so we are working on a fixed for it for the final release of this but so if you see this for now don’t panic we’re working on a fixed for it it probably involves something like a setting to whitelist different sources where you can actually import stuff in your CSS and less files which are accepted and we’ll probably create that right list by default based on components and things that are we know about but it could be something that you want to use that’s custom that then gives the exception so then we’ll give you a way to configure the the whitelist it’ll probably be a properties file setting or something like that so there’s a case for that now that just came up recently but don’t panic if you see that I guess a lot of people had just run into that all right finally some little bits and bots we changed the Java version that ships with the the complete installations and out the Servoyfor for a while has now shipped Java because of the changes to Oracle and OpenJDK and that’s a long backstory but now we ship Java with servoi and we up to our version for this one so now it’s 13.01 we there’s a couple API changes we have an ad remove style class on responsive containers that’s just added so if you’re doing responsive design and you use those responsive tanners containers now you can dynamically programmatically add and remove style classes and the date API utilities has a third argument used to just be too you know like the the date in the format now it’s a third argument to plug into time zone and that’s optional of course so you could put in something like plus to GMT I would have you okay I think that covers everything now I’d like to go through a couple of demos so I’m going to bring up a servoi developer one of that again these are just be a couple quick demos and we get into some nicer fancier demos that show new stuff on Wednesday and Friday however there’s a couple things so bootstrap components had a major update there was some enhancements around how calendars are handled so one of which is keyboard shortcuts I’m going to try this so you can see it by bringing up my touch keyboard and then coming in here to the calendar so now you can see the calendar drop down so we have some keyboard shortcuts now for the end of the month I think is e the beginning of the month is b and I think yesterday is why and then you can also flip through the days with the arrow keys so those are supported now in keyboard shortcuts everything that I’m mentioning is also in the release notes for any of these packages as well another thing is that for the inline picker now supports enable and disable so you can see that after I click it it’s now disabled or enabled and you can also associate style classes with that so I just wanted to point a couple of those out another thing in the bootstrap major upgrade is the tab panels now support fun awesome icons or the icons if you want so icons style classes and you can just plug those in if I bring up the design for that here you can see that I just plug in icon style class there to get that so I just wanted to show a couple of the updates that go to the bootstrap components package another thing that I would like to show you is the sfy lookups module that if you if you don’t know what this is you’ll you’ll learn right now but we did do a whole webinar dedicated to it so if you want to catch up on kind of everything that’s in it I would go back and watch the recorded archives and because this is going to focus just on what’s new so real quick the way this works is it shows a searchable grid implementation so you get by default something like a type ahead like this right where I can I can put in the customer and get type ahead and that’s that’s quite nice for selecting the customer but suppose I wanted to search on something else I can I can also put this in and have searches on multiple columns this is the pop-up implementation it shows a pop-up which you can submit dismissed by clicking out you can also add multiple columns what I thought I’d do is go into the order details here and show you a couple of of the new implementations one of the new implementations is modal and multi-select but just for reference real quick this is the way you can look with multiple columns and what I can do is I could pick a couple of products like I could look up in this case not just on the product name like you would get in a type ahead but I could look up say breweries and get a beer and then you can see that it added it suppose I wrote my logic here that suppose I did we’ll pick Chai here then I get it just increases the quantity that’s just the logic that I put in the callback and I’ll show you what that is but the idea here is that it’s a searchable grid and anything that’s in the grid can be searchable and those can be relations so you notice I searched on I don’t think I actually showed you I can search on categories like produce and you can see that now as I’m typing it filters down and I can pick produce the other implementation that was added in the 2.0 release for this is the ability to show a modal window so this one’s going to show in I did some problem with the sizing here so there’s that gap there but that can be easily fixed but this shows it in the modal form and also with the multi-select so now suppose I want to pick out some produce in produce maybe I don’t I don’t know what’s going on there which is I don’t know why the produce doesn’t show up the beverages here and I can I can grab a few of these and then suppose that I also wanted to get some seafood it’s going to remember what I had select and then I can also grab a couple of a couple of these and then when I close out I should have the beverages that I chose here you can see that duplicate ones I increased the quantity but also the the two seafood products here were added and I looked up the unit price and all of that so that’s the the it’s a modal dialogue here but it’s also multi-select enabled and it’s also based on the ngGrid so it’s been updated a bit to use the ngGrid one thing that’s really cool about that is you can extend it and you can provide your own implementation of the form it’s not like you have to write a lot code you just extend a form and then you could change the implementation slightly so it’s really easy to use I can show you the code a bit at how that works if we go into the lookup example form when I click the find customer button this is the the most basic version of that and I create a lookup object I add a field based on the data provider Oops and then I show the the pop up and with a callback the callback returns an array of records and I just set the customer ID to be the the records customer ID so a way to set a foreign key if I go into the order details form and I look at the show product lookup the first one I picked where it will it was still the pop up you can see that I can add fields I can use related data providers I set the the uniprice to not be searchable another thing I could have done is I could set that to be a currency format so I could call set format and I could put in well I’ll put in at least so that it gets a decimal place and then if I come back out here you’ll notice that and now as the decimal place here where’s before it was it was not so you can set formatting on different different fields so you can even use value lists you can apply those so a lot of that has been in there since the first version but some things we added the ability to set style classes on individual fields as well or style class data providers but if we go and we look up at the multi-select one that I showed you it’s basically the same thing but the two differences that I do multi-select true on this line and then instead of show pop up like I did here I do show modal window and I’m providing the same callback and again the callback just returns an array of records I iterate over the records the first thing I do is is I try to if they exist in the found set then um or if they don’t exist in the found set I create them otherwise I just increment the quantity so it’s it adds it or it or it increments it depending on if it’s there so that is the look up those are the two key demos I wanted to show you there’s a couple odds and ends too that I said we would get to I believe um one of them was the NG desktop exporter and I’ll just show you what this looks like suppose I were wanted to export this solution to NG desktop on the latest version you get these four additional fields you always had the platform before and so also the directory you want to save it in but now you can you can specify an icon also an image that shows with the installer and some copyright information as well that you can type in there after you pick your architecture so again we had another webinar all about that I don’t want to get into too much detail there the other thing that I said I would show is the um the OAuth plugin and the the enhancements to that I’ll just sort of type that into the code editor here it’s plug-ins.oAuth and you’ll notice that there’s a new method here that wasn’t there before it’s called service builder and you would put in your your client ID which would be a string that you get from your service we have a webinar on this as well and then the service builder is a chaining JavaScript style so then you can do dot you can do the different things like set the client secret set the scopes which are like the things you have permission to and these things like state and tenant are parts of the OAuth spec that aren’t really you know their optional Facebook for example requires state which is kind of like a date or something that you have to store and then pass in again and then tenant is for some of the Microsoft services they can be multi-tenited and you can actually specify the tenant when you’re authorizing because you might have a multi-tenant service that you’re you want to access and you specify which tenant you’re accessing it for so because of the different parameters for OAuth that different service providers can provide we added those now the last thing you do is you build it and there’s an example if you move sample code it moves it all over but the last thing you do is you build it right here and you specify the API and if I go into the plugins here you’ll see the all the the constants and believe it’s OAuth oh I forget one of these has a OAuth providers that should have been obvious so now you can see here I could pick any one of the supported providers in the list and there’s a lot more than there used to be now so I just put that in there and then and then it just at that point it’s when the code execution hits that it sends out the authorization request the browser directs to the third-party authorization they fill in their stuff and then it sends a callback back to your server which you can handle in a deep link callback method just the way that it was in the previous version so that is new and that’s a really nice one because now we support a lot more out of the box that weren’t in there okay I think we’re starting to go over time Peter I’ll ask you to help me with the question and answer and if I forgot to demo anything I can jump back in and show it let’s do that I got a question of able service the question is how is the performance for this lookup when you have more than 500,000 records does any benchmark testing being done about this okay yeah it’s an interesting question so the question from a bell is how is the performance when you have a lookup but the target table of the lookup is it’s really large that depends it could be horrible or could be just fine and what it depends on is what the lookup is searching on and how well the database is indexed so the lookup under the hood doesn’t do anything magical it’s all SQL-based it’s in fact it’s based on the SFI search module which is another extension that we’ve had for a really long time and what that does is it generates SQL based on some something the user types now in most cases what they what the the user puts in doesn’t really break or make the performance really bad they can put in multiple terms which I didn’t show there but you can put in like two words and it will actually narrow down the search so if I put in beverages and then I put in a supplier name I would have gotten in my product search less fewer results because it would it would be restricted to both and there’s a whole webinar on the SFI search search module so I don’t want to get too much into that but to answer the question of a bell the what it does is it generates the SQL so it’s really up to the developer to not put in a column in that is searchable that could be not indexed and therefore make for a really poor performing query there’s different ways you can monitor what queries are sent you can also programmatically get the query that will be sent out of the search API as well but it’s just like anything else in Servoyyou can build forms and write code that generates really poor performing stuff if you choose to that that makes sense yeah I think so far that was the only question okay did I forget to demo anything that I went through or said I would well you promised the OAuth file yes and you did so on but then no okay yeah and there’s there’s demos of stuff that I didn’t cover and you know probably there’s OAuth and ng desktop and that sort of thing are already covered in prior webinars okay well thanks everyone I just want to remind you that this is a three-part series so we’ll be back on a Wednesday and again that’s going to be about the if you were at servoi world and you were at the bright and early session of my colleague Paulo he demoed some some cool stuff we’ve been working on he has wrapped that up and got it releaseable a lot of work and I thank him for it and we’d like to start to show some of that so we’re going to show the pop-up filter which was a an EQX pattern for working extending the functionality of grids and then on Friday we’re going to get into some more comprehensive type framework stuff like introducing navigation and combining it with security and that sort of thing so those are those are some new packages that were excited to release and get into the community and start to refine and those will be more demo oriented this was more of a hit you over the head with slides and tell you everything that’s updated so we’ll be recording all of these and you can check out the recordings for reference all right thank you Peter all right thank you Sean all right bye for now bye bye

Close