2020.06 Launch Part 2

Today is all about grids. So we did a webinar on Tuesday in case you missed it. It was part one of the 20-2006 launch and that was a general update. However, we have the Servoy NG grids Web package which contains a couple of advanced feature-rich grid components and there was a lot of work done on those and a lot of enhancement So I think that it warrants its own webinar. I think there’s enough new stuff here to show that you’d be interested in that we could take up a whole 20-30 minutes just to go over what’s new. Moreover, these grid components are used by almost everyone that I see because it’s a very common functionality. So I think this is applicable to everyone that’s why I selected it to do an update webinar about it. So I’m going to go through a bunch of micro demos of the different enhancements that we’ve added covering the two main components that we ship here the data grid and the power grid. These demos are going to be really focused on what’s new like what’s changed and not necessarily an introduction to these components. So it assumes that you know a bit about what these components do. It doesn’t mean that you wouldn’t understand what’s going on here, but it’s kind of starting with just what’s changed. So if you want to catch up on how to use these components if you’re new to Servoy or new to the NG client there are prior webinars about this as well. Yeah, so I’m going to go through a list of little demos and we can answer questions along the way or at the end. So please send those questions in as you think of them. Real quick, there’s one potentially breaking change in these enhancements and that was the on sort event. We improved it to be able to handle when you click sort on multiple columns. So the on sort event is when you are clicking on column headers and it’s sorting the data in the grid and you can of course shift click to to select more than one column to sort by now this sort of that that that’s always worked. But the sort event is when you want to capture that click and override it. The main use cases for this are when you are clicking on things that can’t naturally be sorted in the database. So that would be the value list display values or calculations. Those won’t sort or at least won’t sort the way you kind of want the user would expect them. So you can intercept that and sort it on your own. And if you are using one of those sorts, it now sends in multiple columns. So you’ll have to refactor that method. So you can see the old implementation just passes in the column that was clicked or the index of the column that was clicked and what the direction was either sending or descending. And now it’s going to pass in an array of column indexes and array of directions for the sort. I can show you what that looks like quickly in the IDE. I have a demo solution running here with with a grid up and I can sort by say city and if I shift click or sorry shift click, then you can see I have my primary country and cities, the secondary sort. So this is calling that event and if I look at the binding I have in the IDE. So we have our example grid here. I’m handling the on sort event with a method. I wrote some code but but commented it out and this would be for example for sorting on the employee ID which is shown with a value list. You don’t want it to sort on the ID. You want to sort on the display value. That’s one use case. Anyway, it’s passing in, you can see an array of numbers in array of strings which will be ascending or descending. Which then you can manipulate. So suppose a user clicks on a natural column and a calculation, you kind of want to pick up that they click on that calculation and maybe ignore it or sort it differently and then send it back into the found set to do the sort. So that’s one kind of use case here. Anyway, if you’re using this already that’s a bit of a breaking change. You’ll have to go in and refactor that. So that’s why I want to do that one first because that’s that’s good to know. So we’ll just go through these enhancements one by one. One thing we added was now support for a filter type of value list on the grid column headers. So I’ll show what that looks like and then I’ll show how to set it up. Over in the grid we have here. I have this country, sorry, the city column here. I can choose to filter this and now I have a type of head here which will use a value list for all the city. So I created a value list for cities and I can go ahead and do the type of head for that and apply the filter. So that was that was added if we look at the IDE for what was done there. Again, if I go to my grid here and go to the city or ship city column, you can see that I’ve set the filter type to value list. So that’s the property that was added. And then of course you have to supply a value list. So that’s coming from cities which is just getting all cities from the orders table or sorry from the customers table. So you can just use that as your filter type. So that’s again, that’s a property on the column called the filter type is set to value list and you have to supply a value list. There is a similar enhancement for grid header filters because we also support a radio option. So that would be when you want to have an exclusive selection. Ideally for boolean type values, although it doesn’t have to be boolean, but if you think about if you have orders with a status and you want status open or closed, but not both. But it can really apply to anything. It just shows the values and value list as a discrete choice with the radios instead of something like a type head. So let me show what that looks like. So for the for the country column, I set up a filter type here with a country’s value list and with a radio option. So I can do Argentina and apply and it’s only going to do Argentina or Austria. So that’s a new filter type. Let me clear that out. And then if I go into the IDE, I’ll show what that looks like. So on the column here where I set up the the ship country data provider, you can see that again we added another filter type here for for radio. And if you select that and provide your value list, this is just country is coming from the coming from the customer’s table. But you got to provide a valueless property as well. It’ll show each value in the value list as a as a radio option. So it’s pretty easy to set up. Again, it’s I wouldn’t show a whole list of countries like that. You know, private type ahead works better. But if it’s something, you know, with one of those custom value lists, where you just have a few values and you only want the user to be able to select one. That’s that’s the idea. Something which was requested. This is a small programming enhancement. But it adds to convenience when you’re when you’re handling some of the click events. Those click events used to pass. And I guess this could potentially be a breaking change as well. Probably should have listed that as such. The events used to pass kind of like a record info object. But it wasn’t it was kind of just a simple object that had the record contents. But it wasn’t the really the like the class object of the class JS record. So now those events have been updated so that they pass in the actual JS record object. So you can handle it directly into all the things that a record API can do. And so I’ll sort of show what that looks like here. I think I’ve handled the double click event here. And so if I double click in my grid, I’m showing what that it was double clicked and what the total was. And if you look at any order, the order ID as well. No, I didn’t put the order ID. Sorry. If you look at the event handler for this, you can see that JS record object is now passed in. And I’ve typed it to the order’s table. And so now I can quickly get anything off that record, a related value, a column value, some of the record API doesn’t matter. Something that’s nice is grids now have a built-in aggregate for a row counts. And all you have to do is take one property to display that. So you may notice once I group here, let me group by country, that in my groups here, it’s showing the record count for each of the groups. And so that’s something that you previously could only do with a power grid with a cached result. And then the aggregates were done actually in the component, you know, which is the cached result. This is done server-side. So what that means is that suppose that if in this group Argentina, rather than 16, I had 16,000, I don’t need to send 16,000 records to the component for them to be aggregated. That’s done automatically with the SQL aggregate server-side. So it figures out the definition of the groups, and it does that for you. And you can see if I add a secondary group, the city, it does it. However, you know, however, D2Go. The way to set that up is pretty simple. You select your grid, and there’s one property here called Show Group Count. It’s disabled by default, but if you ticket and set it to true, then your group counts will show up. So that’s a pretty nice addition. Another area where the grid was enhanced was having to do with whether or not groups are expanded or collapsed and getting programmatic access to that. But the first step of that was just making them persistent between data reloads. So the way it used to be is if you were to say come in here and I don’t know, expand Austria and Graz, and then suppose we lost the data, we did a search or here I’ll filter on a different country and go to Argentina. And then if I were to clear the filter and come back, I’d have to go in and everything would be already just expanded. So I’d have to come in and go and reset up my grouping in which rows were expanded or collapsed. Now I’ll actually remember that between data loads. So no matter what, when I come back, this is persistent between data loads. That’s just within a given session. Now we added a new event to capture when a group is expanded or collapsed. It’s called on row group opened. And it passes in, it’s sort of like the path to the group. So it passes in the, because you could have nested groups. So it passes in the group column indexes. So that’s the columns that it’s grouped by. Then it passes in the keys that it’s grouped by. And then whether or not, it’s expanded or collapsed. So you could use that information for different things. For example, you may want to persist it and set it later, but there’s a different way to do that. So I’ll show how to handle this and what it looks like. You can see that under the events, I have a new event here on row group opened. And if I look at my handler for that, I’ll get to this storing the expanded groups in a second. But I’m just going to uncomment this and save it. And if I come back here and collapse, you can see that the column indexes there, three, two is country city, Austria, and Graz. And Graz was collapsed. And then if I expand it again, you can see it’s the same path to get there, but now the value is true because it was expanded. So you can really tell what’s expanding collapsing. And that comes in handy for different reasons. Now, I didn’t really use the information in this method handler, but I did do the next thing which was to persist the row group expansion state between client sessions. So I’ll show what that looks like. First, I want to talk about how I got there. We added another API call to set or get the expanded groups, which is an object that preserves that state, which you can serialize to storage, either in a database or local web storage, whatever you feel. So it’s ideal for doing that between sessions. Another thing you could do is you could use this in some sort of navigation, like if you had a back button or something and you went back to a form and you wanted to reset some sort of grouping. You could persist it between navigation events. But in my example, I combined the first property here, the on-row group open event that we added with this API to set and get. And I take it so that I can persist the row group expansion state between sessions. So I’ll show what that looks like. And more generally, the topic of persisting the state. Well, I should show in the client before I get in the IDE. So looking in the client here, you can see that I have grouped by country city. I’ve expanded Austria and I’ve expanded cross. So what I’m going to do is just close this. I’m going to come in and relaunch the the NG client. So I get a new session and navigate to this form. And you can see that it groups of the way I had it and it expands the groups that I had set. So it’s fully persistent. So the way that I did that, again, is I handled that on row group open. I didn’t really use this information. That’s why I had it commented out. I just wanted to show what was passed in. But I wrote another method here, store expanded groups. And you can see that down here. I just use that get set functionality. I get the expanded groups. And then I just write that to local web storage, getting this tool tip popping up. I write that to local web storage and persisted between sessions. So if I actually look at, I don’t know why that was set to mobile, I’ll turn that off. But I’ve actually looked at the local storage. For what’s going on here, you can see that, well, the grid column state, that’s an old property. We supported that for a while. But this is actually storing the way the grid is. The columns are set up. So whether or not they’re visible, what order they’re in, what width the user might have customized, whether or not there’s grouping. That’s all done by this grid column state, which is an API that we’ve already had for a while. This expanded groups is what I’ve done here. And this has the Austria-Graws setting. So if I were to say expand or collapse-Graws, you can see now that it’s changing, expand Brazil, and expand companies, then you can see how it’s storing all of this. So it just keeps kind of this nested object to keep track of what’s been expanded. And you don’t really have to worry too much about the internal structure that if you look at what I’ve done, I used the JSON API and I just serialize it and put it to web storage. Of course, you could do this server side, put it to a database link, it’s the user so that no matter what device they come in back on, they get the same exact state that they left it in. So, and then in the form is loading and showing, I do load expanded groups. And I actually used the on-ready event of the grid. So if you look at the grid events, there’s this on-ready. I restored the column state in the forms on load event. But if I try to do the grid, the row group expansion state, on load, the found set hasn’t yet loaded and the grid hasn’t rendered all the stuff. So it’s too early. And it won’t take. So I do it on the on-ready event. And then I just call into my load expanded groups. And I read that value out of web storage and I call this set expanded groups. So that’s kind of how it’s done. It’s really though this set gets API that was added that lets me do that. Something else that we added was the power grid, which is another version of the grid component that’s used more for deals with totally cache data and let’s you do more powerful analytics like aggregates on grouping and pivot table rendering, etc. And we have other webinars just about sort of introducing that component. Just something that changed on this though was the support inline editing. And you can just do that by changing a column property. So if we look at example two here and this loads up a grid here, I don’t really have it set up for any of the the more powerful analytics. But what I can do is work with a cache data set, do some analytics on it. But if I wanted to, I could also edit a value. So if I wanted to come in and change the quantity I can do that, which previously I could only do it with a specialized edit form. So it pop up a form that I designed and I’d have to make that for myself. Now we can do inline editing on the columns and it’s pretty easy to set up. If we look at this example two form and I only made a quantity editable, it has now this edit type property which you can set. It used to be that you would set the edit form and that was it and that’s the form it would show as the what you can use to edit. But now we support text field and a date picker. So you can edit directly inline. Now keep in mind that this is not a found set like a real data bound object. It’s bound only to a JS data set which is purely in memory. There’s no server side loading and caching and all that stuff. So what happens when you make an edit is it writes the value back to the underlying data set that you sent to the grid. So there are still events to handle the change. You can see that there’s an on column data change you could use to capture the event. But at some point if you want to do something with that data either maybe you loaded it from a web service or you generated it from a query or something. You figure out how to write it back to your back end. You have to take it from the data set and use that. So it’s up to you to figure out where that goes because it’s not directly data bound. Something interesting that was added, this was requested by a user who was familiar with the underlying libraries that the, this says data grid but this is actually true of both grids. It’s a bit of a typo on this data grid and power grid. Now support built-in charting because the underlying libraries that we use support charting. So it was a matter of just exposing it and someone, one of our customers who was aware of that functionality said, hey, why don’t you expose the charting functionality so that we can do some visualizations right in the grid. So we did that in this release. Really all you have to do is enable a couple of properties and you can do some interesting kind of inline charting the end user can do. So again in this this power grid here what I’ve done is enabled the range selection so I can I can select a range of grid cells and with that I can enable a context menu. So if I right click I can go in and do some charting on the ranges and say I’m going to set up a pie chart here and I’ll go ahead and blow this up and suppose I want to make the data limited to just price and product something. And then you can see the chart renders here. I can also download this as an image. You can see that here’s the image file that I downloaded. So it’s not like an embedded analytics or something where the user can share it directly like you would get with a report server or something. But if the users want to, the reason this was requested is the users want to do their own kind of ad hoc analytics with the remembering that this is a pretty powerful the power grid here is pretty powerful analytics it can do aggregates and pivot that sort of thing. So already the user is doing a fair amount of ad hoc analytics why not do some visualization and then save an image and maybe they want to put that into a document or an email or a report or something they’re free to do that. So that that just works in line in the component only it’s not connected to any other sort of modules or anything like that. Okay that’s it for the little demos I have about this component. Again, I can share the example solution here and we’ll post the recording so why don’t we move to take some questions now? Yeah thank you Sean looks good. I guess your demos are crystal clear because no questions so far. Okay one thing that I want to mention there was it wasn’t really a demo and it wasn’t really an enhancement it was a small fixture enhancement is the there is there are ways to configure globally all your grids and we had a small change where the individual grid configurations should override the global configurations and they weren’t so it was like once you set the global configurations all your grids would work the same and you you couldn’t override them and that’s not ideal so one thing I can show here is that if we look at the on open event of this solution I’m using the the NG grid service so that’s a separate extension that you can install and just do this by right clicking and download the Servoypackage manager and you get the extensions that are available and you can see the I added the latest NG grids component but there’s also the service which is like an API that goes along with it and I added that one and so what I’m doing is saying hey all all of my data grids here have a header height of 20 and a row height of 40 and so if I were to come in now to my actual form here and and set a configuration say row height other than what the default is then say I make it 18 instead of 40 now you can see I have in the very tight uh growth spacing there so that used to not work it used to be that hey if you set it in the service then it applied and it never got overwritten if you put this back to default restore default value then it’ll take whatever the service sends so now you can see it’s it’s back to the spaced out view that we set globally so that’s a small change it didn’t really wasn’t like sure to call that an enhancement or not but it’s worth knowing that that that now works well in the meantime there’s a question popping up um one very important question when will the final release be out uh it should be out in about a week or so like right at the beginning of July I think we just have to go through we made some some more fixes and small changes based on feedback from the RC candidates um so we just have to go through some testing and then that should be out um so and there will be an announcement on the forum when that’s available yeah um another question um is it possible to have the range selection to to copy and paste the selected data to other parts of the same grids or to uh to other grids no I don’t believe that supported so I think I think he means if you if you use the range selection here and you know drag and select these could you copy and then insert those into you know a different range like down here like it like it were an Excel spreadsheet or something um no that’s not supported that would be I think a non-trivial implementation so if that’s something you really want or need then please file a request at support.servoy.com okay I should point out the the home for this is um the package home is uh github.com slash Servoy AG grid components uh and the release notes are all here if you go to the releases uh with links to the cases and a description um so there you can find out about the releases you can install it directly just through the the package manager uh how I showed so you don’t have to go to the the github for that and there’s also uh the wiki there to learn about if you haven’t used these before there’s pretty comprehensive documentation on how to quickly get started there as well so if this is a bit of a new subject for you I recommend you go to go to this location to to learn about it all right um I don’t see any other questions um so I think uh we can end this uh this webinar okay thank you Jean thank you thanks all we back we’ll be back in July 15th is the next scheduled tech webinar with some more updates yeah so um we’ll write it down put it in your agenda and help see you all on July 15th thanks all for watching and have a nice day or uh already thank you everyone bye bye

Close