2019.12 Launch Part 2 – December 18 – extensions
2019.12 Launch Part 2 – December 18 – extensions
Today we are going to look at a brand new extension called SVY pop-up filter and we’re happy to bring this to you. You might remember this if you were at Servoy World, Paolo Arone had a bright and early tech session on Friday and he showed a lot of cool extension. Some of them are new, some of them are updated, but this one was kind of the rock star of the demo because it’s brand new and people have been asking for it. And I am very pleased to announce that today we built the binary release for this and it is now available and I’m going to show you how it works so that after this webinar is done, you can go ahead and download it and get started. As is the tradition with the tech webinar series, we like to start with a demo and then review what we looked at. So I’m going to switch over to a running application that I have here. This is a very simple screen with a grid on it having a list of orders from the sample database that ships with Servoy. Above the grid you’ll see there’s a search box and a filter button. What I’m going to show you is the new filter functionality that we’ve added that you can use to enrich your grids. So I’m going to go through this. First I’m going to click the filter button here you see I get a drop down list of my available filters starting with the columns as they go across from left to right. One thing that’s nice is it’s this functionality is looking inside the grid and seeing what columns are in the grid and how they’re configured to determine whether or not to show them and how to proceed with the filters. So let’s start with customer to begin with. Notice that now there’s a customer filter here. I have a list of customers so I can select discrete customer values. I could also search within that if I wanted to filter some that way. So now you can see I have my list of customers that I’m filtering on. And here and I could also remove some of them let’s remove this one. And now my list is smaller. That is a text based filter. It’s actually using a value list though that is connected to this column and I’ll show you how that’s configured when we go look under the hood. I can do the same thing with the sales rep column. This is the employee table. So I can grab a few here. And now the list is filtered even further. One thing that I can do is also remove an entire filter by clicking the X and you can see it goes back. We can filter by things other than text here I can filter by a date so I’m going to click ahead to the date column. And this is where things get interesting. It’s off to the side. Let me clear this to make it a bit nicer. There we go. So the options you have for dates are before and after as well as between so you can use both or you can target specific dates as well. Let’s start with specific dates. I’m going to go ahead and pick. I believe it’s this one. I have to go back a ways for the sample data. Let’s go into 1996 and to my birthday because I think there’s an order on that day. There we go. So I filter down just by one date. The other options are to do before and after. So I will do a before one. Let’s jump ahead to 1997 January 1 so we should get. Oops, that should be this one. So I’m going to disable because I’m doing it before. So we go ahead into 1997 January 1 so we should get everything in 1996 now. So now you can see that all of the dates here are filtered to 1996. Finally you could do a between filter which kind of just uses both sides here. But now I could have before January 1, 1997 but maybe we’ll stick with this one here at July 24, 1996. And now everything there you see is after July but going to be before. And I can sort to prove it so you can see the final one I have there is on New Year’s Day in 1997. So these filters can all work in concert too. If I were to say reapply my customer filter you can see that it works together. I don’t know if I pick the right customers or not. Yeah, I got a few. Okay. Finally you can also. Well, apply. I did put one on the country filter as well. This is also text. The country column. And again you can do a type ahead searching. To window down the list. Go ahead and grab a country here. And finally we can filter on numeric. So I have the freight column here for the order. That’s a numeric column. And it knows that it’s a numeric column. So it’s going to give us a different choice. So we have kind of like the dates, you know exact match or greater or less than or between. So I’m going to go ahead and do a say between 100 and 200. So now you can see I have everything between one and 200 that was shipped to Germany that was in the second half of 1996. One thing that you can also do I’m going to go ahead and clear my country filter. So now I get a lot more is you can combine this with searching too because filtering and searching are, you know, semantically different. One is is really, you know, kind of a stateful filter that you apply to a result. And then when you search you can kind of play with it. So suppose I wanted to look for something and say Venezuela type in a string fragment. And you can see I get an exact match there on Venezuela. I could clear it. Hit enter it goes back out. I could go get Ireland. So that that uses the text based searching, which is another. Another feature, but one thing that’s neat is it’s actually looking at the grid to determine what columns are available for searching and it’s building the search for you. So you really have to write very little code. All right. So let’s let’s look under the hood and see how to set it up. So I’m going to switch over to the IDE. And I’m going to. Look at the order form here. So the first thing I did is I placed one of the ng grids on the form. You can see if I filter down here, I just dragged the data grid on here and then I drag some columns on there. You can see the data that’s going to be on it that’s been around for a while. And then really what you have to do after you set it up the normal way by picking data providers and such. You set the filter type. So you can see here that for the customer ID, which is a foreign key, I set the filter type text. Now I could have also set a related data provider like orders to customers dot customer name. I like that discrete list of customers when I when I get the pop up. So I use this and I used a value list down here. And when the filter provider looks at this column, you can say, oh, there’s a value list attached to it. I’m going to show the value list. And that makes it a lot easier. You can still search within the results of the value list. So you get kind of the best of both worlds there. It’s the same setup for employee ID. It’s a foreign key. The filter type is text and it applies a value list. Order date is a bit different because it’s a date column. I set the filter type here as date and there’s no value list. Ship country doesn’t really have a value list. So I just did ship country and filter type text. However, I was still able to generate that distinct list of countries by doing sort of a custom handler that I’m going to show you. And this was a bit more of an advanced topic. But when I go into the code, I’ll show you that. And then finally, freight was a numeric one. You can see the filter type here as number. So your options here are text number and date. So once you set up the grid and you set the filter types, you can now set up the filter components to be able to get going. Now one thing that you’ll need to understand is that we introduced a component that is kind of a generic component used to render. Because it’s not built into the grid, it’s something you could put up top of the grid or beside the grid. Whatever you want. So we placed a component here. This is called an advanced render and it’s really for rendering sort of multi line. Things that aren’t really bound to a data source. So it’s not really like a list component or grid component. It’s sort of like a generic multi line render, which actually has use. And we use it in other projects and we have customers that have been using this, although we never made an official release until until this release. But this component and its dependencies are available from the package manager. So if you were to download and install with Servoy package manager. And go to. Components, I guess it’s loading still. You can see right there advanced renders. So I have the latest version of that. I guess there was minor minor bump made to it. But I add that and then I also added the lookup or sorry the pop up. Filter. Maybe I have to refresh this. I don’t see this, but it can be added through the package manager. So when I drag the component on here. I want to go ahead and take note of the name property here custom list. Because this is going to be the sort of filter component here. The other thing is I just put a button here to trigger the filter, but that just captures the on action event that I can use to show the filter. Finally, to get things started, what you have to do is configure this. The best time to do that is in the on load event of the form. So let me just pop that open. So the first line here in the on load event, what I’m doing is I’m creating the filter toolbar, which creates that basically binds the. That component custom list to. The table or the grid that I’m showing so you’re basically just binding one component to the other. And then it returns this object toolbar filter, which I’ve stored here. Now this this is the object that has the extensive API that that I would be working with. After that I set some events and I’ll get into the events in a little bit. So once I’ve done that, that’s all you need to do is that one line of code. And then what you get is what we have here where you have this component here, which becomes the toolbar. And by the way, I’ve anchored this to run all the way to the end of the form. So it takes up most of the space horizontally and we’ll begin to stack if it gets constrained horizontally. So you could do this, for example, I think in a responsive screen or down the side of your grid. And it doesn’t have to be this orientation. So what it does is that that one line of code binds this component to this grid. And then when I’m everything else works automatically because it looks at those columns, it looks at the filter type. It looks at the value list, the things that I showed you in the setup. And that’s what generates the actions going on here. Everything else is handled by that module, the SFI pop up filter module. Some other things to note are how I show it. There is this component here, which is just a little button if I go to the form. You can see I handle the on action. I jump into that guy and it’s one line of code. And again, it’s this API toolbar filter show pop up filter picker. And then it’s the target that you want to show with. And I just use the source of the event for that. So it will show right there next to it. And that really just shows it and then the library takes over from there. Finally, you saw that I mixed it with some searching. So I also made a search text variable here, just a text variable. And I put this bound to a text box on the form. You can see the binding right there. And then for the on action event, you can see that I jump right back into here. Now, if you’re familiar with the SFI search module, you probably recognize the functionality. However, this takes it one step further. Normally you set up what are the search providers like which columns from which tables do I really want to search on. In this case, you take the search text and you pass it into the toolbar filter object. And then you set it to run the search. And so that’s all I’ve done here is really one or two lines of code. And then it takes over and says which columns are applied in the grid. And then it uses those to do the searching. That’s how I was able to mix and match the filter and the search at the same time. I’m going to go back to the demo. And I’m going to also show you how we can persist the filter statepublic state. And so what I’d like to have in this example is I’m a user, I’ve set up a filter. Maybe I have a hundred screens like this and I want each screen to remember the way it was filtered. So when I come back to it, I get a personalized experience and it remembers what I had set up. So what I’m going to do here is close out this tab, come back to Servoy developer IDE, launch the launch the, the demo and you can see that I come right back in the date was filtered the way I had it. The second half of 1996, I have the freight from one to 200. So what I’ve done is persisted that in some ways so that I get a personalized experience. The way that I did that is I tapped into some of the events of the filter object. And I used a way to serialize the state of it in and out. So let’s take a look at how that was set up. What I’m going to do is go back into the form load of n. And so you remember this line here where I was just binding the, the filter to the grid. The next thing I’m going to do is bind some event listeners to it. So let’s look at these first two. One is to set the on filter apply callback and the on filter remove callback. And what that does is anytime you apply a filter or you X out that filter and remove it, it’s going to fire those events and you can handle that with your own custom function. So I jump into this one here and all I’ve done is forwarded that call to a save filter state. Same for the on filter remove event. So if I jump into that save filter state, what I’m doing is calling the toolbar filter API and I’m getting sort of an object. It’s just a JavaScript object that has the state of the filter as it is right now. And then you can store it anyway you like you could store it in a database so that if I, if I log in from any device, any location, it’s going to remember exactly what I was doing. The other thing you could do is you could also just do it for this device, put it in a web storage or in this case, the easiest thing is I just put it into a cookie. So I did set user property. I had a little private function to generate a key based on the, the form name and the table name. And then I just put it into a JSON format and store it as a cookie. Then what I want to do is I want to read it back. So the next thing that I want to do is on, I did this in the on show event on the first show of the form, I call a function to restore the filter state. And again, what I’m doing is I’m pulling it out of storage in a cookie. But this part here is the one we want to pay attention to where I’m calling the restore toolbar filter state on the filter object API. So, and then I’m passing in that, that JavaScript object that I’ve parsed from JSON that was stored in the cookie. So really it’s one line of code to, to capture the state and you can save it any way you like and one line of code to restore that state from where you’ve saved it. And that’s how I got that effect right can log in and out. There’s one last thing that that I’d like to show you and that was, you may remember when I started to filter on country. This one did not have a value list. However, I do get this nice discrete pick list here. It’s not pulling that from a value list. Also, it’s, you know, I can do type and filter and I get, I get to choose the countries that way. And I want to show how to do that because that was sort of a custom handler to the filter action. So again, I’m going to go back to the on load event of the form when I was setting up everything. And the final thing here is toolbar filter set on filter create and there’s a callback for that. So when a filter is being made, it’s going to call your method and you get a chance to determine what exactly to do for that filter. So I’m going to jump into this method. This is a bit more advanced, but it’s just to show you that you have extensibility with this API and you can handle things in a custom way. So in this case, what I’ve done is I’m checking to see if the data providers ship country. And if it is, then I proceed otherwise I just, I return null which lets it go to the default action. And then what I’m doing is I’m creating a custom query that’s doing a select distinct on that data source and returning that list that way. And then finally at the end, what I’m doing is I’m creating a look up object, which is related to the SVY lookup extension that we updated and we did a small demo of that on Monday. So if you missed that one, we already posted the recording you can get back to it. But really what I’d like you to pay attention to here is this last one, which is the create select filter, which goes ahead and passes in that lookup object. So a lookup object is really an abstraction of, you know, a kind of lookup that you could have, which is functions a lot like the value list or a multi grid value list, a multi column value list. And I’m just passing that back in to say, I want to go ahead and replace that with with what’s being generated here. So don’t worry if you don’t follow this one, I just wanted to show it to point out that you have some extensibility here. There’s a lot of functionality baked in that you get without having to write code, but if you want to go deeper, you can write some code and handle it in a custom way. There’s also some customization that I’m not showing which has to do with actually customizing the UI part of the of the filter. So I think that’s all that I wanted to show you, maybe it makes sense to jump back and just do a quick review of everything that we’ve seen. So, in order to get things set up getting started is pretty easy. You go ahead and place a grid on a form, you got to specify that filter type. And then you got to place one component at least, which is that advanced renderer component. I know that it’s a little bit weird that it’s a separate component, but that gives you the most flexibility to set this up any way you like UI wise. And that’s a component that we release that you just kind of connect one to the other, and you can best place to do that as in the onload of them. The filter types that you can set for those columns are text, numeric and date, and those drive the interface that you get when you’re doing the filter. If you do not set a filter type, then it won’t appear in the filter. I set a filter type for every grid there, but you might have a grid with 20 columns on it, but you only want to filter on two. You just set those two, and that’s all that’s going to show up. It works in combination with searching. And I showed that all you have to do is capture a search on a like on a text box and a text string variable, and then just pass that right in and the object will handle the rest because it looks at the grid to determine what to be searchable. One thing I did not show is that you can also customize the search as well, because it does use that SVY search API, which is an extension we’ve had that’s very mature. You can actually get access to the search object. You just ask the filter object for the search object. You can get it back and you can go in and tweak it. You want to add like an additional element to the where clause every time the search runs, you can do that and just sort of get in between the filter object to the search object and inject whatever custom logic you want. There’s a way to do that and it’s documented on the project wiki. One thing I did show you was the event model. So you can capture events that are happening on the filter object and there are three wants to know on filter applied and on filter remove is really when you’re changing the filter. Also on filter create is when a filter is getting created and that’s when you can inject again some custom code some custom logic to how you want your look up object to work. And again that third one is kind of advanced. You don’t need to handle that unless you want to get into customizing it. Another thing I demo it was being able to save and restore the state of the filter so you get a personalized experience when you are using this component. So you can save it any way you like. It’s just one line of code to save and restore and you can save it in a database in web storage, however you like. One thing I did not show was doing the customized filter templates so that’s those are the template objects that you can create your own and then insert that into into the filter object and it will use your template instead of the default ones you can you can change the the UI if you want to. One thing I did show was the customized logic that was when I handled that on filter create method I injected my own logic back into it to handle that. Something that I didn’t really point out except for a minute when I showed the package manager is that there are some dependencies you have to have installed. This is the list of them here. One thing that’s nice and it’s kind of a new addition in Servoy is that if you have a blank workspace with no without these packages already installed or modules already installed. And you’re installing the SUI pop up filter module it’s actually going to look at the dependencies now and prompt you to to go and grab them and it will go and install them for you so that you get everything all in one go. If you’re already set up in a project and you maybe have some of these dependencies already installed the best way is to to go ahead and and finish setting up the dependencies manually and then when you install the pop up filter it will just work. Okay, I think that’s all that I wanted to show one other thing before we take questions is I just want to show where this lives. There is the SUI pop up filter project on GitHub. You can see that we have our first release built there with the binaries and the binaries are also available through the package manager. And there’s excellent wiki documentation here as well, including a quick start guide which will walk you through the very same steps that I took to build this sample that I built this morning following the wiki guide. I want to thank my colleague Paolo who put a lot of work into this over the past few weeks and got it ready for release it’s been in a in a state for a while where it’s functional but you know getting it released is the next push which requires a lot of testing and documentation and polishing things up. And so I’m really excited to be able to deliver this to you and I want to thank him for his hard work. Evo do we have any questions? Yeah, quite a few actually and good job by the way, very very nice. Paolo says that the SUI pop up filter is now available in package manager. I think he responded to when you were trying to refresh that. Okay. I got one, maybe a generic question Sean and could be a good one somebody says I see warnings and errors in Sean’s solution in in detail of her and it’s confusing me a little bit doesn’t matter that they see errors and warnings when you know you’re showing this. You’re not supposed to look at those. It could be it could be you see you see stuff in like the console like stack traces. If you see build markers I know there was one warning I was getting about a custom type that it was expecting it was I think when I was setting the in the onload event. And so I’m getting a warning there and we got to look into this it’s it’s it’s saying that that it’s expecting a function that takes this argument and then I make a function. That takes that argument and it doesn’t like it we introduced these custom types to be supported recently in Servoywhich is really nice because now you actually do that and you you’re getting a class from from a component and you get code complete on everything. So that’s really nice and now we’re adding strong typing to this method and also to inside the component so might be a byproduct of that but overall that’s a good thing but this might be an illegitimate warning down here this is likely what you see here. artifacts from me starting and stopping the client and developer and that sort of thing so I wouldn’t worry about that too much. And these are all debug those aren’t warnings those are really low level logging so. I don’t know if that answers your specific question but yeah. Yep, I guess so. Let’s see I got another question here can you modify the look and feel or. Yes, can we can we modify the look and feel. Yes, you can it can be done via CSS there’s CSS file for this also you can modify the template the underlying template so you’ll notice that you know there’s a layout when you for example do the date filter or the numeric filter. There’s a way that it looks and and that’s provided by default because what we don’t want you to have to do is to sort of build stuff or extend a form to get started we want to do it more out of the box at the same time we know that people like to customize so. There is a way it’s documented on the wiki but I didn’t show it because it’s a bit more advanced example for this type of webinar where you can extend the templates and provide your own looking field but you can also do with CSS. On the surface. Okay, there are two questions about I 18 and you can I interrupt you I also want to point something out on on that note. This is using the the theming that’s built in. So you notice like there’s like primary colors and stuff here that happens automatically so I set like a primary color and you’ll see that it flows through here so there’s there’s some theming and the theming applies to all the components we ship so when we. ship a new module like this that happens automatically so if I were to customize my underlying theme that would apply to to this filter as well so that and that doesn’t require any you know any customization on the module. Okay. Let me jump back to I’ll come back to the I 18 and question the screen that you just showed I think this question is about that screen. The question is is this completely localized with weak starting on Monday, etcetera, and I think that has to do with that date, pick or not. Yeah, that does that that that can be modified there the I don’t want to get to into that the details of that but the when it comes to the calendar itself. It follows what you have set up and you can either go with localized or with ISO, but if you want to get like I’ve heard requests to do some stuff more even more custom than that than then that’s really difficult to do. But you can go with localized or with ISO standard but one or the other. Okay. Cool, then as I said there were two questions about I 18 and one generic one and one person was more specific is the text in the filter box I 18 and capable. For example, between I don’t know what that means for example between well it’s between an English instead of you know whether whether that would translate or not I believe we put keys for everything related to that, but I would double check with with the documentation and with the source code so I have to answer that offline. Okay, and if not, it can be done. Yes, yeah. So, somebody’s asking can I add my own filter type for example allowing to type in the zip code. I’m not sure I understand exactly zip code is typically treated as text so that could be supported. Okay, well, if there are follow up questions please. So, type them in and we’ll have time to answer them probably. Oh, they’re replying immediately, validation and filter validation and filter. Yeah, but that would have to be one of the templates that I discussed I didn’t show an example of that so you could provide a zip code template filter and then set that. There’s some in again in the wiki documentation here’s the custom template section. So, I would read this how you can set you can see the template for the pop up render form the form that’s actually it’s actually just a Servoy form. That’s being that’s the nice part about this that’s being shown in a pop up so if you if you experience with Servoy and you have made forms and you’ve done the form pop ups which are the these dismissible. Pop ups that show and hide that’s actually just built in Servoy forms so you can extend that and make your own pop up filter so if there’s a lot of interest in that maybe we can do a follow up webinar and show how that’s done. Okay, cool. This could be an interesting one. Can you share your filter state with other users. Yeah, so I think I understand the question suppose I’m some power user I want to configure like a prebuilt filter state and save it and then my users can log in and sort of select that to load up you know the resulting data set absolutely the the component itself is just has methods to. Save and restore or to get into set the filter state. What you do with that is up to you so in my example I just put it in a cookie because I just want to show it for for quick demo but what I could do is save that in a database and have a pick list and when I log in I can pick from my pick list like a named filter and then it will apply it. That’s sort of thing so that’s that’s a nice use case and that’s a good question. Okay, then I got on not quite sure if I totally understand it. Can I filter on another screen and the ng grid like for example the record for you. Okay, in theory yes, right now we have it coupled with the grid. We discussed being able to couple it with the. With the server extra table component which is like a really lightweight version of the grid. Not sure if that use case is really strong. If you’re doing it on a record view though one of the things like the question I would ask to that question is where do you get the the grid columns from because this is it’s that one of the powers of this is that it’s it’s looking inside your grid. And understanding the way it’s configured and then generating the filter for that if you were to do this and show a record view. How would that work but what I would add to that is that this is just found set based so if I were showing a grid and then I I maybe have a split screen or slide or something like that to show the detail. The result is going to be the same. I’m just filtering a found set so data binding is fully applied. All right. I think that’s it for the questions that we’ve got. Okay, like I said this is available through the like Ballow said it’s available through the package manager including the dependencies. If you have if you’d like to start you can start now you have to use the latest version of Servoy I believe and the latest version of those dependencies as well. And then if you have issues getting started please post them on the forum related that we were we announced this or email me either way. Okay, fantastic so we’re back in two days Friday Friday morning eight o’clock my time 11 a.m. your time Sean and that’s I think it’s 5 p.m. 5 p.m. and all in all and yeah fantastic okay and people see reminders for this for this webinar with the link and we’ll post recording of today as well as soon as we can. Yeah we’ll have we’ll have the recording up soon the recording from Mondays already available and we’ll send out reminders via all the channels. Okay fantastic. All right, good job Sean thanks for your help. Thank you, Evo. Bye everyone. Bye bye.