Servoy grouping grid: create powerful grids in minutes

Welcome to number 23 of the 30 minutes with Servoy webinars and today is very exciting Today we’re going to be demonstrating the web component update Developed by our own pallo And without further ado, I will hand this over to Sean As always, whoops, sorry, I’m gonna take it back from Sean as always if you have questions there is a questions panel Type reflection will do our best to to get to those questions and okay now all your Okay Yeah Web component updates days update is a brand new web component which is a powerful grid that Among many other features supports grouping so I’m pretty excited because my colleague Pallo the the component man did it did most of the work for this webinar, but I get to have the fun showed off to you all Just a reminder we do this webinar every two weeks Sometimes we took this mall break last week because many of us at Servoy we’re doing some traveling so But we’re back on schedule with webinar 23 We’re gonna keep going every two weeks giving you a variety of topics and updates and best practices and that sort of thing Today’s agenda we’re gonna always start with the demo of This component then we’ll talk about how it works in developer and then we’ll do just a quick overview of of everything that we just saw So let’s jump right into the component demo I am showing you an example that’s running off a cloud server here You can see that there’s a grid in the middle of the screen. It looks just like a regular basic grid To start with you can see that it has features like click sorting If I if I do a shift click here, I get multi-column sorting you can see that it’s sorted by customer and city Columns are resizable if I can fit my mouse in there So kind of the things that you would expect out of a full feature grid the selected record is highlighted and we have data binding So you can see that the detail screen the detail part of the screen above is also in sync with the selected record But what’s different about This component is that it is groupable. So if I were to sort of mouse over Let’s do customer And click the little hamburger icon there. I get the option to group by customer now the the UI of the grid changes dramatically and you can see that it’s listing the customers You know for better order because it’s respecting this sort here and then as I expand You can see that the orders are now grouped by customer. I could continue to group Let’s do country before city So I’ll add country and I’ll add city in there. So now you can see that We can drill in and see orders by customer then country then city then the list of orders. I guess that it makes more sense that we would group by By country first because many of the orders to a single customer go to the same city and country So we might get more interesting data if we drag over here And I use that as an example to show the drag and drop to regroup stuff. So now you can see that I can go Country city then customer and I get a bit more list of customers here there Also worth pointing out that this is an infinite scrolling grid. So The complexity of this is all handled server side which allows us to To group and show many many records. So as I scroll down Say to hear and drill in and See different records in different groups All of this can be page didn’t dynamically of course if it’s already cash in the grid it stays there, but If I scroll to a new area of the grid that hasn’t yet loaded records or I expand the group that hasn’t yet loaded It’s paging that in dynamically and it’s done on the server. So It puts a lightweight footprint in the browser in terms of loading data So this is this is an example of the The traditional example data customers orders That kind of thing. I want to show that this also works with a Large data set so I’m switching over to a grid here which has the Dutch postal codes and I guess they’re different than the American postal codes because there’s quite a lot The this table has we can see it up here A little less than half a million records in it But nonetheless we can we can do the grouping because again The data is is loaded dynamically and the complexity of this is handled server side so it’s easy to get going So we’ll start by grouping by city and you can see that you know we could continue and do by address And this response this is pretty responsive because those database queries are are Being requested dynamically and so you can see that I got the infinite scrolling as I Expand groups, you know, I can scroll down and get more and more addresses within a city That sort of thing So I just wanted to show you this example to Reinforce that you get the infinite scrolling you have the dynamic data loading and this can work well with very very large tables Also, it’s worth pointing out that This is completely databound sort of set up so Things like Doing a search on a found set can Also affect what’s in the grid. So I’ll show that by putting a string fragment in here since these are Dutch Cities and address these I put the the Dutch word dike in there and I’m sure there’s lots of streets With that name in it so you can see that although I’ve done the search on the found set The underlying grouping and such still works so Quite easily we can drop this component in on a form and just integrate it in the rest of the programming environment doing things like filtering and searching Doing things like the linking it to a selected record and showing Showing the detail etc I should also point out a bit about data broadcasting. Let me come back to our our orders example here If I am completely ungrouped You’ll notice that data broadcasting works Pretty much as expected if I modify this record here And save you can see that the country here on the selected record in the grid was also updated However, it’s worth pointing out that if I am grouped. So let’s group by country And now Let me also sort by country that makes it easier Let me go find the USA And you’ll notice that the record selection is no longer linked up so it’s It’s not supported to have that record selection In sync when you have groups and you’ll also notice that The data broadcast doesn’t happen automatically so if I switch this back to Germany That would move that record into a different group And let me just click out to get that that out of save and so This is by design. We don’t want to automatically be refreshing the grid every time we have a data broadcast event because it may or may not Affects the grid and the user may or may not want to Constantly have the grid updated because it could be quite expensive if you’re having loads of records And there’s lots of changes coming in because of high concurrency. So what we’ve done here and this is an implementation more outside the grid But this is a way to show How you might handle that from a UX point of view is that the little refresh icon here in the grid becomes enabled every time a data Broadcast is received so then the user can say, okay, well, I can see that possibly I need to refresh my grid and And I can do that in a it’ll reload the data back in from the server. So in that way you can sort of have some control Of course you could it’s up to you you could turn on data broadcasting and always push data changes into the grid But it seems like that only makes sense when we’re in this on group state and then it makes a lot more sense that okay the The record that’s we’re looking at has been changed and we can update it so Let’s jump into the developer and just talk a bit about the setup here You can see that I have the design view of that form. We were just looking at If I wanted to get started I would come into my palette of components here click Add components and it would bring up the web package manager This is now published Available on the web package manager As of eight dot two dot one so if you have a dot two dot one this will show up in your web package manager Under a g grid components you can just click and install the component into your current project Then you will see it show up in your browser under the web package a g grid components You grab the grouping table drop it on the form and then you’ll notice there’s a subtype here called column So you can go and drag the columns out onto the form because each column has a different configuration Now let’s talk about the configuration of the grid itself If I select the grid here you’ll notice that there are quite some properties Over here in the properties panel Most notably I would say is the The found set property so this is set up to use the form found set It could be configured to use a related found set a separate found set or a named found set which is a new feature of eight dot two So this is a lot like the other table component that you might have seen And any other of the default components in servoian that it’s really easy to set up data binding We just say this is bound with the same found set that’s on this form here Some other Things to note on the on the developer on the properties would be Icons so you can see that there’s the expanded and contracted icons there those are all Gliff icons, but you could make those fun awesome icons or whatever you like So you you have some control over that Also There’s like row style class data provider so you can actually have dynamic styling on a row level So if you wanted to have some Some rows have a background highlight if they were I don’t know Invices that were overdue and you wanted to make them read or something so That’s pretty easy to do CSS in general What you could do is you could you can create a CSS file and Use all of the same classes from the internal grid and and Customize the style completely the way you want it, but I won’t get into that There’s also some events available right on the grid So we handle the click event and the right click event And if you look at we’ll just look at one of these You’ll notice that it passes in the found set index the column index that was clicked so where Basically x and y location on the grid The record that was clicked and a js event to give you all the other information about the event It’s worth pointing out that when you are in a group state That the found set index is negative one because it doesn’t make as much sense That it could be a group header that was clicked for example, so it doesn’t make as much sense that That we handle that, but when you’re not on group state Sorry, I didn’t mean to say group state when a header is clicked Found set index is negative one when a row is clicked and we know the index in that found set and And you can Determine things about the record maybe when an advocate to a detail or something like that so events are supported And let’s take a look at the columns themselves So if I highlight one of these guys you can see the properties here If you’ve worked with the Servoy extra table component this might look very familiar because Again, you can get into all of the same properties Style class style class data provider so you can dynamically style individual cells Based on their values Pretty much If you’ve used the grid component pretty much everything that you have there So and you can do that on for every single component and have different properties, so there’s quite some control at design time One other thing that I’d like to show you before we kind of review what we’ve seen is The library that this is based on this is based on the aji grid library and If I go back to my browser I wanted to show you that the aji grid demo off of their website because what we’ve done is taken it’s a really feature rich library and what we wanted to do is make it easy to work with so we took sort of a subset of features and We really wanted to focus on grouping because we’ve received a lot of feedback that groupable grids would be really valuable In applications that are built by Servoy developers But I wanted to show you the The library that we built this on because there’s a lot of other features there And there’s a lot of possibility for enhancements or other fit for purpose implementations based on the same library So for example, you can see that there’s multi selection Here These are fully draggable and to be reordered Type type ahead style filters So You can see that you could filter within the grid Right there on the column header although this is already possible as you saw outside the grid It can also be shipped as a built-in experience If I click on the the menu option here you can see that there’s some some other options pending columns Custom filters There’s even the tool panel over here that lets you really go and Show and hide columns You can see that the columns are in a kind of grouping as well so There’s a lot of features here And it makes sense that we break this up into smaller fit for purpose sort of experiences But I just wanted to show this to you to get you kind of excited. There’s also Dark themes bootstrap themes that kind of thing so Now you could do the CSS yourself, but these are some pre-built themes that are shipped So possibly we could enhance it with theming But I just want to show you what’s available in the library that we’re working with to give you the idea that you know There’s there’s a lot of avenues for possible extensions and enhancements to what what I’ve shown you All right let’s quickly go over a few slides here to summarize what we’ve just seen The key features here are that first of all that this is a group of will create so we have drag and drop run time configuration By run time. I mean the end users get to choose how a group can be how a group can be grouped It’s data bound so you don’t have to Run the queries yourself to do the grouping you don’t have to do all that we do that for you on the back end of the component All you have to do is say point to this found set and in fact the the underlying query of that found set will also drive the underlying query of the group will grid Because it’s found set based You can interact with it in the same way you would other found set Bound objects search filter you can show related found sets that’s sort of the you can put related data providers on the grid etc You can even put calculations on the grid Because it’s found set based normally if this was query based you couldn’t do in memory stuff The data is loaded dynamically which means that it’s very powerful you can scale up to very support very large tables as we Saw in the Dutch postal codes. There was almost half a million records there And so that means you also get the infinite scrolling that you would get in In something that’s dynamically loaded and infinite grouping so you know if you expand a group It’s gonna page in all all of the subgroups or all of the records in that group dynamically as you expand it You have full CSS control over the component although I didn’t really demonstrate how you could do that It’s possible you just have to implement the CSS classes of the the underlying library and change them however you like There’s events and API Right now we have the two events for the clicking and there’s some API on doing things like refresh and data and Left a feature in there that’s something that is supposed to be an upcoming stuff the export that’s not currently supported That will be in possible enhancements So we’ll get back to that There are some current limitations We wanted to make a minimum viable product that solves a few key problems that we’re hearing about And let’s people get started and deliver a grouping grid experience, but we realized that To get this out quickly there are some limitations up front So it’s good to disclose those. This is a read-only grid. This is not meant to be editable at this time The data source is also for various reasons is limited to A table which has single column pks. There may be some work around for that, but right now You have to have a one one column pk to be able to work with the grouping grid Calculations and aggregations are supported because it’s found set-based however They’re not groupable because the grouping happens in a query Therefore it doesn’t happen client-side inside the component therefore grouping by a calculation Which doesn’t actually exist in the database doesn’t make any sense. It’s the same goes for Servoy aggregations So they’re supported to show In the in the record view however you can’t group by them Data broadcasting into the grid automatically is not supported When it’s grouped so we do that on purpose to limit the number of times the grid has to refresh So you saw that the workaround sort of for that or an alternate experience that you can provide Is to catch the data broadcast and then tell the grid To change the style of the little refresh button so that the user gets the indication that hey, maybe you want to refresh the grid at some point One issue that we have to work out is that it’s not yet fully persistent between form shows So if I navigate away from the grid and I come back It doesn’t leave me in the same exact setup that I had the grouping stays the same However, where I’ve expanded and what I’ve scrolled to doesn’t That’s a bit tricky and and we’re working on that I also want to point out that that summarizing in the in the grid is not supported I think some people would assume that If I can see it by groups that I want to see summarize data in the groups That’s another use case Which would be more like a pivot grid And we have some things in the works for that as well So I just want to point out that this is for really viewing data not for viewing and analyzing trends So Possible extensions that we can do based on this library to this component Or additionally other components Dragable column reorders should be possible Run time column configurations so being able to say have a chooser and say I want you know these fields I want to hide this field that sort of thing Type ahead filtering built into like the column headers so that I could just quickly type a few keystrokes and see the grid Winnow down the results Custom built-in filters being able to have that filter drop down that you saw in the the AG grid demo And give it some customized filter parameters. So maybe I show the list of the The customers and I can go and check off what customers I’m showing that should be easy to do Seems that are built in so being able to make the Steaming of the component easier out of the box as I said before you have full control via CSS But it might be easier to get a few pre-built themes in there that you can work with Multi select support right now When we’re in the ungrouped Mode the record selection is in sync with the found set however we’re not supporting a multi select Found set And then something which would be cool I think would be a master detail experience So if you were to expand a group Instead of seeing the row and there you could see a form that’s reusable. So when I get down to the actual Record view of inside a group instead of seeing a row I might see a detail form that has some some some other Components in it other than just a row It’s also worth pointing out that this library is very rich and has a lot of features So we may not deliver all of this in in one super component. It may make sense to have you know a separate grid that’s editable You know rich grid versus a lightweight grid and maybe a pivot grid as well a Little bit about the licensing so This is a partnership between the AG grid vendor and servo. We have an OEM with them so we are licensed to To distribute this component The license for the servoic component falls under the MIT license which is a very Permissive license that we use for all of the other components that we put up on GitHub This gives you unlimited deployment so you can take this component put it on your form and deploy it without any without any worries Which is great for you However, I just want to point out that that the AG grid is a proprietary library and so the sources that are That are used by the component Are not subject to the same rights if you want to Modify those sources if you wanted to distribute those sources yourself or or create your own custom implementation Using those you must purchase developer license from AG grid the license the component that we distribute is not authorized you to do those things All right now that I’ve covered myself legally How do you get started with the grid? As I showed is very easy you import the web package manager you can download the sample solution that I was just showing you The wiki docs are available on the project site which is up here on GitHub And you can see that there’s some nice documentation For your pleasure reading there and of course if you have issues or enhancement requests There’s an issue tracker on every GitHub project. So We encourage you to to use that Or just about out of time so I’m going to put up the Useful links slide so you guys can stare at that. Well Steve tells me if we had any questions We did there’s a couple some of them have already been answered there was a couple of questions about Can you use aggregates and summary data and things like that in the groups or in the group headers and I think that you already answered that question Right, right There is a question about is there a double click event? There is not a double click event. Okay, there’s right now. There’s there’s right-click and single click Okay, and Another question does drag to group work or is it done only through the group button? I think it refers to Specifying the groups you showed it by clicking the little icon in the header is there can you can you drag One header on top of another header or something to Right to the group it the short answer is not Right now you can’t just drag a column into the grouping area The long answer is that it is possible So we can look into supporting that right now the way you get to the grouping is to click the little hamburger icon and say add to group But certainly it’s a nicer user experience if you could just click once and drag and that should be possible

Close