NG grid component for Servoy

Welcome to today’s webinar and today we’re going to talk about a major upgrade of the Servoy grid components that is used in the NG client and Sean is going to show everything about it and talk about it and again as usual we’ll be here to answer any end all of your questions so feel free to post them during the webinar in the questions channel and we will take them either during or at the end of the webinar it’s quite some content to cover so Sean let’s get started with number 40 welcome. Thank you Yawn you can see my screen okay. Yes I can we can all see you’re free. Excellent. I want to also point out before I forget that this announcement also coincides with the availability of Servoy version 8.3.1 which is available now as a release candidate so we’re looking for you all to please download and try it out the more feedback we get the more bugs we can fix before we put it to the stable version so today we are happy to announce a new web package a new suite of components available for the platform we’re calling the Servoy NG grid components and what we include here is sort of a multi-purpose component set that allows you to do typical things that you have in a business application with respect to grids. Now as is the tradition in the Servoy Tech webinar series we’re going to begin with a demo and show you a few things what I plan to show you are two different grid modes one is the data grid which involves being able to do typical grid stuff including grouping and also now editing. For the second demo is going to be what we call the power grid which is similar but it is involving summaries so being able to aggregate data how how you like as a user and also as a developer and also what we call pivot mode so being able to see aggregates in two dimensions so let’s get to the demo. So what we’re looking at here is a grid which is generated from a back end relational database table the northwinds orders table and so I point out a few things here the functionality of the grid first of all it’s like other components in Servoy which are data bound it’s it’s bound directly to a back end data source which means you don’t ever have to worry about paging or caching that is built in so we have infinite scrolling as you go through the orders you can continue to scroll because it’s data bound you can use all of the Servoy business objects that you use to such as relations calculations formats etc so I would point out here that although we’re looking at the orders table the column here for customer and sales rep are both joined in via relations as well as we have a format on these two columns for data and the total and the total itself is a calculated value so all of the stuff that you would normally expect are available on the grid. The functionality inside the grid from the user’s perspective is what I hope they would expect they can do things like drag to reorder they can click sort they also support multi column sort so if you were to select several columns you can see that now we’re supported sorting by multiple columns at the same time and you can change or remove any of them by holding down the shift key. There is if I move my good meeting console here there’s a tool panel out here to the right which you can show optionally and here we can also turn off and on columns and we can also let’s say we want to turn off the I don’t have the date column and the sales rep column and resize so we can also click drag to resize so they make our customer column bigger and our country column very small and if I wanted to save the state of that I’ll click the save state button and now if I were to log out and log back in I would expect as this user that I would see the grid as I have left it so you can see that the and the columns that I’ve turned off are preserved as well as the the widths that I had to be sized so that’s built into the component now how you save that or rather where you save that and when it’s entirely up to you so in this case I was just saving the column state into local web storage so on the browser’s local storage this would be something you might do automatically so that as you you come back in you could all your grids could be the same as you last left them but it could be that it’s something you want across all devices or all machines that you log in from so you may want to serialize that into a column in a database connected to the user that’s logged in or maybe you do it on a tenant basis or a group basis it’s entirely up to you now we can do a bit of grouping here as well and there’s a couple ways to do it so let’s say I I wanted to see this data set grouped by country I could drag down here into my row groups I could also click the little context menu here and group by the customer as well so now you can see that I could see all the distinct customers as well as expanding that I get the groups or sorry the exploded records within that group I could group by multiple groups as well so if I wanted to add city there now I can group by city and you can see that oh I think it makes sense to I thought I did country let’s do country and city that makes a bit more sense and maybe let me drag this over I guess it doesn’t really make sense to have the the country or the city turned on if you’re grouping by that’s why I’m confusing myself so we could turn those off so they don’t they don’t clutter the view so now you can see that we can expand countries and cities now I would point out that this is infinite grouping as we like to call it so this is really still bound to the back end data source meaning this will work on a table a very large table with millions of rows where the results of a group could be very large we’re paging that in and managing that for you because this is connected to servoise back end caching mechanism so again you don’t have to worry about how large the data set is for this type of component again this is a because of the data bound component all of the other traditional tools are available to you such as searching filtering working with related data etc so I could say I’m looking for all orders fulfilled fulfilled by a a certain sales rep I don’t know if I do this so you can see that the sales rep here is fuller and that will still be preserved as I go into grouping mode so if I wanted to see everything that fuller so sold to by country you can see that all of the results here still have that same sales rep I could clear the search and I believe when it’s grouped I have to refresh which I didn’t do but if I sort of ungroup it and regroup it we should get the same effect so now you can see that it’s back to all sales reps so again any of the typical data APIs that are used to working with in Servoywill work in this grid as well finally what I’d like to show about this grid is that it’s it’s now editable so some of these columns are editable and some are not what I’ve done is I’ve made the city and the country and the date editable and you can see that I can tab through these I can shift tab through these there’s different editor types so I could use a date picker say for the order date and change that I can come in here and type this to another city that country etc because this is data bound saving typical crowd management works the same as it does in in all of your other data bound servoic components there’s also data change events too so as you type in you tab off fields you can handle the the data changes as you see fit another thing that works on this grid and I’ll switch over to excuse me to the developer the IDE put this in HTML 5 view let’s say for example on our our column for customers right now you can see that I’m showing orders to customers dot company name so I’m using that relation object here to get data from the other table let’s say I wanted to make that editable and perhaps I want to put that to just a customer ID and I’ll change the edit type to type ahead and apply a value list so now when I come back and I’d be in editing in here you can see that I get the value list so I could I could change I could change the customer for that order just by clicking in and getting the value list so value lists are also supported in the editor and showing in the grid what I’d like to show next is another mode of the grid we call this the power grid and in this situation in this example I think I’ve done something that it didn’t like I’m going to relaunch in terms of I made some edit that it didn’t care for so let me switch to the power grid now and in this example we’re showing a bunch of related data but however this is coming from from a query and sent to the grid so this is not really connected to the back end data source the whole purpose of this grid is a little bit different although the implementation looks almost the same and many of the the features are common to the the other grid I just showed you this is more for doing inquiry and analysis so what I’ve done is put a bunch of fields on on this grid we could group by but I put a couple fields here units and sales and maybe I should move these out here because we’ll look better so these are looking at individual order items items that were ordered and so let’s say I want to do some kind of sales analysis I can I can get in here and I can start to say group by product category so now you can see that I have 366 dairy products that I sold and the drag this over here and you can see the dollar amount here in total sales and the number of units sold and and even though those are aggregates those are also a sortable so I could sort this descending and really show you you know the top grossing product categories that I have I could further group this and say I want to drag product up here and so now when I expand one of these groups you can see that it’s aggregated also by product so within the grains and cereals product category I can look at the individual products and I can see the breakdown both in the number of the number of orders that they appear on and their aggregate values for the individual products here. Another nice feature is that I could turn this into a pivot mode so I’m going to click that and I’m going to turn on the year which I’ve set in the configuration as a column group instead of a row group and so now if I want to look at my product sales so for example how much dairy product I’ve sold in total but also throughout each year so separated here by 1996-1997-98 coming from the data and I can look at the units and the sales for each item even as I expand. So pivot mode is also possible. What I’d like to do now is switch back and just do a few slides of overview and talk a bit about about this this new web package. So I showed you two different implementations the first one being what we call the data grid and the main aspect of this is that it’s really connected to the back end data source so we can support very large tables. Paging is automatic when we expand groups the groups are paged in automatically for you so even if a group could have you know a large number of members it’s not a problem. In fact the grid is also updateable so you can use this to to edit with and it’s fully data-bound so everything that you use to if you have been using servois is available such as you saw the related values you saw value lists it will both initiate and an update from data broadcasts you saw there was a calculation on the end for the order total we saw some fields that we’re using formatting and I showed you how we connected to the text based searching API to easily limit the results inside the grid. So pretty much you can just put this on the form and plug it into your back end data sources and start working with it. The second grid I showed you is more for an analytic type thing and the biggest difference between this in the first one you could think of it is you’re working with a finite data set so the first example I showed doesn’t matter how many rows are in the back end database it’s basically going to load those on demand. The second one because we’re doing summaries inside the component we do have to get all of the results upfront and then give it to the component so that means that you would generate the data source in advance so what I did is I used servois query builder API I queried out the values that you had seen the columns and the values that you’d seen and I gave it to the grid to work with and there is a limit to that you can work with up to 100,000 records of course that depends on if you had many columns that could go down or if the machine you were working on was very the client machine was very limited that that number could change but it really gives the end user analytic capabilities the key differences you can do summaries in this one so in the first grid I showed you where it has the infinite scrolling and infinite grouping we couldn’t do summaries in the component with that but when we use this version and we have the data upfront then we can do dynamic summaries let the user group and summarize how they please and also enter the pivot mode or you can do column grouping and row grouping seen together some of the features that are common to both and I didn’t get into everything because this is supposed to be kind of a quick overview both groups can do both grids can do grouping the columns behave the same in both so you can drag reorder resize you can turn columns off and on with the the little pop out tool panel you can configure the collapse and expand icons and those sorts of things you can configure the way this grid displaced completely with CSS all the columns are click sortable or they will also render what the sort is of the underlying data set that you’re using so if it’s already pre sorted it should render in the grid is that you can do multi-column sorting as I showed you by shift clicking you can also persist the state of the grid so an edit that applies to both grids so at any point you can save out the column state of the grid and at any point you could restore it or revert it back to what the design was which is not something that I showed but that’s easy to do you can dynamically style rows and cells based on values so let’s say I was looking at a list of products and for discontinued products I wanted to show the the background is gray or something like that that’s perfectly easy to do in this using a dynamic row or cell style class and as I showed you there’s a built-in tool panel so you can the user can drag or to group or turn columns on or off as far as editing goes currently we support the following editor types possibly in the future we would add more but that would be sort of per request we have to see what what’s of you know what’s being demanded from the community but right now it’s you know you don’t have to have the field to be editable of course but if you do then it’s pretty much text field date pickers and a combo box type ahead one thing that I didn’t really show but that is supported is the event model so we support all the clicks as well as whenever the grid state changes and by grid state I mean not the data but the structure of the grid if you were to reorder columns resize them change the grouping etc that would be that would trigger an event so you could although I put a button on the screen to save state to for demo purposes I could just do it in background as the user changes that I always want to save it so the next time they come in it’s exactly how they left it also of course because we’re editing we want to support data change just like all the other editing paradigms and Servoyis so anytime you’re typing in a field and you tab off of it after a data change or click out you will get an event I’m gonna leave up some useful links here I didn’t go under the hood too much into the IDE perhaps we could do that if there are questions that weren’t it but I see there’s a lot of questions coming in so I’ll stop now and leave some room for questions and again I’ll leave these links up with some useful links about this webinar series and also the project home for this this project cool quite impressive this this grid there’s a question from Quail is there a big performance hit on having a lot of columns editable no there’s not really a large performance hit on editable columns it it I’ve seen it with quite many more columns on it and it edits and performs really well so I haven’t seen that in the data set in the the sort of the the power grid where it’s the kind of coming from a data set that’s offline or already been pre-cashed there is a performance limitation on really the number of rows you could use so the one that’s used for analysis for summaries and pivot if you get up over a hundred thousand base rows then then you may run into some performance issues okay and that could also change based on the number of you have columns you have of course and another question is our button supported in the data grid so if you wanted a button that links to a detail view buttons themselves are not currently supported so right now it is it is those values plus the editors we do support images or font icons so that would be an option so not quite a a real HTML button but an image and of course we support the click event so if you were to click an image to go to a detail view that’s definitely supported or double click on a row or anything like that yeah the double click event may make a most sense from a UX point of view then there is another question and and for the audience feel free to post some more questions if you have questions or you would like to see stuff in the ID then post that as a question please and does the traditional Servoytable components can the traditional Servoytable component be completely replaced by this grid component yeah that I’m glad that question was asked because I wanted to make sure I mentioned that this does almost effectively replace the traditional Servoytable view not the table component which is really has that’s a there’s a third component that we’ve had available for some time which is very high performing read only data grid so if you’re doing a read only view I would use that component because the performance is much higher but if you need to do any it doesn’t do grouping it doesn’t do editing but there is the sort of the legacy table view form for those veterans out there which if you wanted to do editing in the ng client up until this point you would have had to use that this can effectively replace that there will be a few feature differences I think there’s a a few editors that aren’t yet supported in this that would be supported in the in the classic editor but but I think you know going forward that the aim is to replace that that table view form with this component okay so is your conclusion if you need a simple read only table then use the table component and otherwise use this component if you’re using ng client correct okay and the question from John can the grid be made responsive yes you can you can make the grid responsive you can also set the responsive height of the component as well so if you need this in a responsive container or work okay excellent how easy is it to change an existing table to one of these new grids well I guess that depends a bit you know in an existing table meaning a table view form is also a form so there’s lots of you know code behind it that potentially etc but in another example I’ve done with this grid in proof of concepts with with Servoy prospects and customers we were auto generating this grid based on the data model so looking at all the columns in the data model are looking at some metadata and completely dynamically generating these grids and that’s that’s also a possibility so if you can do that then you could you could even automate the generation of of a grid component from a a legacy table view I think that would be possible okay so for for base table editing you would recommend creating a more dynamic way to do it so that you don’t have to create a form per table view well you no longer have to create a form yeah you can do this as a component on a form which I didn’t show but I could have in addition to that grid put a bunch of fields on the form as well and they would be automatically synced so it does also reduce the number of forms you need and it’s up to you if you wanted to do it dynamically or at design time everything I did here was at design time but we’ve done other implementations where it’s generated from code right so all the stuff you did now design time can also be done at runtime using JavaScript functions everything yeah cool let’s see here I think we’ve answered most questions if there are any last minute questions please post them quickly when is the next webinar shall before we get to that I do want to say that this component is available now if you go to your web package manager in the IDE if you right click the web package manager or right click the web packages and open up the manager you will see it under the Servoy ng grids web package and this is we’re calling this a release candidate so we would like your feedback to help us improve this offering before we put this to the final release of this component the next webinar is scheduled July 25th and right now it’s to be determined look for some messages in the IDE we now push messages out to the IDE with regular updates of events and notifications if you are using Servoy 82 and above you will get those notifications in the IDE and we will announce the webinar again and the topic we have a few topics that have been floating around so we just have to pick one excellent and if anybody has suggestions for topics then please join us in the forum there is a general forum thread to discuss and talk about the tech webinar series so feel free to to join the discussion over there or if you have any questions about today’s session after this webinar we will post the recording shortly thanks all for attending and Sean thank you again for presenting

Close