Wijmo’s second major release of 2017 has landed, and it’s full of exciting new controls and developments— comprehensive accessibility support, a new JavaScript TreeMap control, Angular 4 support, and an interactive learning guide!
Download Wijmo Enterprise
Let’s dive in.
Major Accessibility Enhancements
Making applications accessible is very important to us. It means more people can use the software we build. Accessibility is an intimidating subject, but it is extremely important that we all make our best efforts to support it. We have spent a long time to get accessibility right in wijmo, especially when it comes to FlexGrid. It was very challenging, but we had the tremendous help of Microsoft and Thomson Reuters expertise. It took countless iterations and extensive testing in many different scenarios, but we have finished our major overhaul of accessibility. We built-in ARIA 1.1 support to the following controls:
- FlexGrid: https://www.w3.org/TR/wai-aria-1.1/#grid
- TreeView: https://www.w3.org/TR/wai-aria-1.1/#tree
- Gauge: https://www.w3.org/TR/wai-aria-1.1/#range
- ListBox: https://www.w3.org/TR/wai-aria-1.1/#listbox
- ComboBox: https://www.w3.org/TR/wai-aria-1.1/#combobox
- Menu: https://www.w3.org/TR/wai-aria-1.1/#menu
Accessibility Sample | Accessibility Blog
New TreeMap Control
TreeMap is a control for displaying hierarchical data using nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. A leaf node’s rectangle has an area proportional to a specified dimension of the data. Often the leaf nodes are colored to show a separate dimension of the data. TreeMap Intro Sample
Angular 4, TypeScript 2.2 and More Interop
Wijmo continues to our commitment to releasing support for Angular and other interops. We recently expanded to support Angular 4. We also upgraded wijmo to support TypeScript 2.2. Angular resources Beyond that, we have also added external module support for loading wijmo components in different frameworks. We have released two samples to demonstrate this in React and VueJS as well. React External Modules Sample | Vue2 External Modules Sample
Over 300 Lessons LearnWijmo
We released a new interactive documentation app called: LearnWijmo. It has over 300 lessons including fiddles that introduce the main features in all Wijmo modules. Learn Wijmo | Learn Wijmo Blog
New Samples
- Accessibility Sample | Accessibility Blog
- Learn Wijmo | Learn Wijmo Blog
- TreeMap Intro Sample
- React External Modules Sample
- Vue2 External Modules Sample
Use the SampleExplorer to search, filter by framework and even browse source code for all of our samples.
Breaking Changes
- [React] itemsSource property of Wijmo components is updated now each time when React updates component bindings. Because of this, if binding expression returns a new array or CollectionView each time it's called, even if it contains the same data (e.g. function getData { return [1, 2, 3]; }), you may get weird effects in some controls, and even get a "Stack overflow" exception, because controls detects a different data source by comparing references to the current and the new data source instances, and refreshes control if references are different. You should make sure that binding expression returns the same instance of an array or a CollectionView, until a new instance is really required by the application logic.
- In previous versions of the FlexGrid, users had to click the *first* cell in the top-left panel to select the whole grid. In new versions, clicking *any* cell in the top-left panel will select the whole grid.
- The default behavior of the Tab key when the FlexGrid has the focus has changed. By default, the Tab key cycled through the grid cells (Excel style). The new default behavior is to let the browser cycle through the elements on the page (to improve accessibility). You can revert to the old behavior by setting the new keyActionTab property to wijmo.grid.KeyAction.Cycle.
Change Log
Improved accessibility by adding ARIA 1.1 built-in support to the following controls:
- FlexGrid: https://www.w3.org/TR/wai-aria-1.1/#grid
- TreeView: https://www.w3.org/TR/wai-aria-1.1/#tree
- Gauge: https://www.w3.org/TR/wai-aria-1.1/#range
- ListBox: https://www.w3.org/TR/wai-aria-1.1/#listbox
- ComboBox: https://www.w3.org/TR/wai-aria-1.1/#combobox
- Menu: https://www.w3.org/TR/wai-aria-1.1/#menu
- Added two new properties to improve FlexGrid keyboard accessibility: keyActionTab and keyActionEnter. These properties allow you to customize the behavior of special keys so the grid becomes more accessible or more compatible with Excel.
- Added a new property to improve FlexGrid screen-reader accessibility: rowHeaderPath. If provided, this property specifies the name of a binding to use as a provider of 'row header' accessibility values. If not provided, most readers will use the content of the first visible column as the row header.
- Reduced code size of the Angular, React and Vue2 interops.
- The AngularJS Benchmark sample has been updated to the latest versions of vendor libraries.
- Added a TreeView.loadTree method to rebuild the tree after making changes to the itemsSource array.
- Added a new PivotField.sortComparer property to allow customization of the sort order in dimension fields. This is similar to the CollectionView's sortComparer property, except it applies to pivot dimensions (grid headers) as opposed to measures (summary data).
- [FlexGridPdfConverter] added support for PivotGrid.
- Added several new properties to make the Calendar control more customizable: formatYearMonth, formatDayHeaders, formatDays, formatYear, and formatMonths. All these properties represent format strings used to format different parts of the Calendar in month and year view.
- Added time zone offset date format parts ('z', 'zz', 'zzz') to Globalize.formatDate.
- Added a new FlexGrid.itemValidator property to improve validation support, especially for unbound grids (bound grids can be validated using the CollectionView.getError property which provides the same functionality).
- [Wijmo5 Mvc][FlexViewer]Internet error displays after running different report quickly in "FlexViewerExplorer" sample. (TFS 257523)
- FlexGrid exports the default border and style of merged cell to xlsx incorrectly.
- [ReportViewer][PdfViewer] ReportViewer and PdfViewer are partially localized when setting Cultures. (TFS 258374)