Background
In Spira, like many critical business applications, we make heavy use of grids and tables for displaying data. In the end user modules of the system we use a variety of in-house AJAX based grid controls that have been developed by Inflectra to provide a fast and fluid user experience. We have dedicated grids that are hierarchical (for requirements and releases), allow sorting (for most other artifacts) or allow drag and drop positioning (for test steps, requirement scenarios and test set test cases). For example, in requirements we have:
These dedicated AJAX grids allow you to filter, sort, making bulk inline edits, save filters, adjust columns and create saved views.
However in the administration section of the application, we mainly use off the shelf Microsoft ASP.NET grid controls. For example, for managing users we have:
These grids offer a basic experience, with simple sorting and filtering available. You can make simple inline edits, but there is limited functionality for making bulk changes, filtering or sorting by more than one column. With the release of Spira v8.2 we are making the first big change to the administration UI that will eventually transform the entire application! We have purchased the professional version of AG Grid and will be implementing it throughout Spira! So what is AG Grid and what does it mean for you?
Introducing the AG Grid
AG Grid is a powerhouse data grid solution for JavaScript frameworks like Angular, React, Vue, and pure JavaScript/TypeScript. It’s the go-to choice for developers building complex, data-intensive web applications. Here’s why AG Grid excels, and explains why we have decided to use it in Spira:
-
Unmatched Performance: Designed for speed, AG Grid handles large datasets with ease. Experience smooth scrolling, rapid rendering, and top-tier performance, making it perfect for enterprise-level applications.
-
Packed with Features: AG Grid is a feature-rich platform. From sorting, filtering, and pagination to row grouping, aggregation, pivoting, and infinite scrolling, it’s equipped with everything you need for advanced data manipulation and presentation.
-
Highly Customizable: Flexibility is key with AG Grid. Customize its look and behavior to suit your needs. Whether it’s custom cell renderers, editors, or complex grid layouts, AG Grid adapts to your requirements seamlessly.
-
Enterprise-Grade Features: For those advanced scenarios, AG Grid offers enterprise features like server-side row models, complex data grouping, tree data structures, and range selection. These robust features are designed for the most demanding applications and require a commercial license.
-
Accessibility: Committed to inclusivity, AG Grid includes features that make it accessible to users with disabilities, adhering to WAI-ARIA standards. Applications built with AG Grid will be usable by everyone.
For the v8.2 release of Spira, we have completely rebuilt the Product Membership and Team Membership pages to use the new AG Grid.
Refreshed Product/Team Membership
When you first access the product membership pages after upgrading to Spira v8.2, you will see the new grid in action:
This new grid allows you to manage the membership of a product and assign both a product role and a global team in the same grid. Lets explore some of the key features this new grid offers beyond the incredible speed and responsiveness that you'll see from the first time you use it.
Advanced Filtering
The new grids allow you to create complex, positive and negative matching filters (contains, begins with, does not contain, etc.) on a field by field level:
With the advanced query builder, you can create combinations of filters, either requiring all conditions be fulfilled (AND) or requiring just one condition be fulfilled (OR) in a simple graphical interface:
Multiple Sorts
In addition to the advanced filtering, the new grids allow you to sort by more than one column. You can sort either column ascending or descending to get the data exactly the way you want it:
Column Customization
To improve flexibility, the new grids let you choose which columns are visible in the grid:
In addition to choosing which columns to display, you can also pin certain columns to the left/right and change the width (size) of the column for the ultimate in flexibility:
Bulk Edits
With the new grid you can select multiple columns using the checkbox, put them in edit mode and then edit all of the fields inline:
When you want to change multiple rows to the same value, there is the option to "Paste cell value to rows being edited", which acts like the "Fill" option on the requirements and test case grids.
Data Export in CSV Format
Finally, in addition to all of the existing CSV data export options and reports already in Spira, these new grids make exporting the current filtered, sorted view to CSV as easy as a simple click:
Future Plans
Now that we have implemented the grid for product membership, we anticipate rolling out the new grid initially for the most heavily used administration pages, especially those that customers either use frequently or have lots of editing requirements that will take most advantage of the new features. In addition to the new grid, behind the scenes we are using the new grids as an opportunity to modernize much of the Spira architecture, including migration from Microsoft WCF REST web services to ASP.NET Web API and from ASP.NET AJAX to Razor.
Once we have refreshed the administration experience, we anticipate that AG Grid will become the standard grid across the entire application, eventually replacing the existing AJAX grids that we use for requirements, test cases, etc. We are very excited about the improvements to the user experience this will bring, and we hope you are too!