This minor release of Wijmo has some nice new features! This build includes improvements to Date Picker Accessibility, FlexGrid touch support, CollectionView change tracking, and more.
The new InputDateRange control extends InputDate to allow easy editing of date ranges.
As soon as the control was released, people asked about accessibility. We take accessibility very seriously and decided to do a review of the best practices. One of the best articles we found on date picker accessibility was Hampus Sethfors' Accessible datepickers.
The main points in the article are:
Don’t force people to use the datepicker
Make it possible to navigate with a keyboard (here is where most fail)
Don’t hide the calendar button from screen readers
Don’t hide the calendar button from screen readers
Make sure that the buttons and icons in the calendar view have proper labels
Let's take a look at each of those points and how we address them in our Date Picker components.
Make it possible to write directly in the input field as well. And make sure the required format is specified in the label.
We do allow people to type the range directly into the input. We do not automatically add an aria-label attribute to the control specifying what the date means (the control doesn't know that) or the format expected, but developers can add that easily. For example:
inputDate.inputElement.setAttribute('aria-label', 'enter trip dates in the format XXX');
For example, by tabbing to the calendar and using arrow keys to pick the right date.
We do support keyboard navigation. Users can press F4 to open the drop-down, use cursor keys to select the start date, shift-cursor to extend into a range, and press Enter to commit the change.
We’ve met a few clients who considered setting aria-hidden to ”true” and forcing screen reader users to input directly in the text field. But that is not a great idea.
We do not hide the calendar button.
This is important so those elements get correctly read by screen readers. For example, the dates of the month should not just be “1”, “2", etc. They should be read “1 January, Thursday” or something similar.
All elements on Wijmo Calendar controls have aria-labels set correctly and are localized automatically using our culture files.
In this latest release, we improved consistency in several FlexGrid methods, allowing them to accept column names or bindings in addition to column indices.
For example, the select, startEditing, getCellData, setCellData, and getCellBoundingRect methods allow you to provide a binding instead of a numeric index. For example:
// select the first cell in the 'country' column flexGrid.select(0, 'country');
By default, the FlexGrid allows users to sort columns by clicking the column headers. Users can remove the sort by ctrl+clicking the headers.
On touch devices, users can sort columns by tapping the column headers. However, since there is no way to control-click a cell on touch devices, users could not remove the sort... until now.
In the latest release, the grid detects whether the click is a touch event and applies a three-state cycle to the sort: None => Ascending => Descending => None.
We feel this is an important detail that significantly improves our support for touch devices.
The FlexGrid cellTemplate property allows you to customize data cells easily, without using the formatItem event.
In the latest release, cell templates can also be used to render row header cells.
The code below shows how you can use this feature to add numbers to the row header cells as Excel does:
// get row header column let col = theGrid.rowHeaders.columns; // assign template that adds the row index to the header // (but preserves glyphs such as edit and new row template) col.cellTemplate = ctx => ctx.text || (ctx.row.index + 1).toString();
The FlexGridDetailProvider class allows you to add a collapsible details row to FlexGrid controls.
This new version also supports the MultiRow control, so now you can have data items that span multiple rows and can be expanded to show row details.
This is an improvement many users requested.
The CollectionView class has a trackChanges property that provides lists of items that have been edited, added, or removed from the collection. These lists are important when updating the data on the server.
In previous versions, once you changed an item, it was added to the itemsEdited list and stayed there (unless you later removed the item). In the latest version, if you apply another edit that restores the original item value, the item is automatically removed from the itemsEdited list. This means a little less work on the server.
Many Wijmo controls provide custom handling for wheel events. For example, the FlexGrid allows users to scroll the grid vertically or horizontally; the ComboBox, InputDate, and InputNumber controls allow users to increment or decrement values with the wheel, and the Calendar control allows users to change months with the mouse wheel.
This works well in most scenarios, but sometimes you may want to prevent this custom handling and let the browser handle the wheel to scroll through the document.
The best example is probably a large Calendar showing multiple months (monthCount > 2). In this case, the calendar probably occupies a large part of the screen, making the wheel almost useless for navigating the document.
To support these scenarios, we added a handleWheel property to the controls that support wheel events. The property defaults to true, so existing applications work the same as before. But you can set it to false to let the browser handle all-wheel events.
In this new version, we improved the wijmo.cloud.Collection class by adding a new getSubCollection method. The new method allows you to use sub-collections, one of the many features supported by Firestore databases.
In case you are not familiar with Firestore, it is Google's Serverless NoSQL database. Firestore does not replace SQL databases, but for many applications, it can be an effective alternative. Firestore databases are easy to set up and provide incredible performance and advanced security.
We did run some tests to compare performance between a Firestore Collection and an ODataCollectionView. One of the tests was to check the time needed to load the Northwind Orders table, which contains 830 items.
On average, the Firestore Collection loaded the data in 550 milliseconds, while the ODataCollectionView took 1,940 ms to load the same data. Firestore lived up to its reputation, loading the data about 3.5 times faster than the ODataCollectionView.
In this new version, we reviewed and expanded the type of information in all Wijmo modules to support TypeScript's "strict" mode.
The main change was the addition of an "| null" to the type specification of all nullable properties.
In this new version, we focused on quality improvement, including:
[FlexGrid] Users can now clear a column's current sort with touch. To remove a column's sort with the mouse, users can CTRL+click the column header. To remove a column's sort with touch, users can touch the column header to cycle through the three possible sort orders: ascending, descending, and none
// show row indices in the row header cells: let col = theGrid.rowHeaders.columns; col.cellTemplate = ctx => ctx.text || (ctx.row.index + 1).toString();