What's New in Wijmo 2020 v1
- Updates for Wijmo 2020 v1
- Related Links
- Wijmo Blogs
- Demos
- Documentation
Wijmo Build 5.20201.680 - May 28, 2020
This minor release of Wijmo has some major features! This build includes a new wijmo.cloud module for easily connecting to Google Sheets, Firestore, and OAuth services.
It also includes a new touch module and a new WebGL rendering engine for charts with millions of data points.
Wijmo Cloud
We are introducing wijmo.cloud as a new module for more easily integrating cloud services into wijmo. The first integrations in this module are for connecting to Google services:
The GoogleSheet class makes it easy to show and edit data from Google Sheets in your Wijmo applications.
Google Sheets are easy to set up and use, and they perform well with relatively small datasets. Of course, they are not real databases. You should not use them to store large tables (say with a hundred thousand items), and you should not store mission-critical data in them. But they can be super useful in many situations, and many people have lots of data stored in Google sheets.- Read more about Using Google Sheets with Wijmo
- Read more about Wijmo and Cloud Data
The Firestore and Snapshot classes make it easy to show and edit data from Firestore databases in your Wijmo applications.
Firestore is Google's new flexible, scalable NoSQL cloud database. They are designed to store and sync data for the client- and server-side development. Unlike Google Spreadsheets, Firestore is a real database. You can use it to store vast amounts of data, and it is much easier to set up and use than traditional SQL products.- Read more about Realtime Firestore Updates with Wijmo Snapshot Class
- Read more about Using Firestore Databases with Wijmo
The OAuth2 class makes it easy to integrate authentication with these Google services too.
- Read more about Authorization with OAuth2 Class in Wijmo
WebGL Chart for Handling Millions of Points
We have had some customers that needed to render millions of points on a scatter chart. We have a lot of performance tuning in our SVG chart to render a lot of data with speed, but we can only do so much when working with many DOM elements. So for this scenario, we are introducing a WebGL chart renderer for FlexChart. This renderer is in a new wijmo.chart.webgl module. If you are working with charts with millions of data points, you should consider trying it!
Note, that WebGL rendering has certain limitations for now (like being unable to style chart elements with CSS). So it should only be used when needed.
- Read more about how to Render Millions of Data Points in Charts with WebGL
Wijmo Touch
We are introducing a new wijmo.touch module with a polyfill that makes drag-drop work on touch devices the same way it does on desktop machines.
- Read more about Wijmo and Touch Devices
Improved Input Labels
We have improved labeled-control CSS class to make it easier to layout form labels in inputs in any app.
- Read more about How to Use Labeled Inputs in a JavaScript Application
Change Log
- [Cloud] New wijmo.cloud module for easy integration with some cloud services from google
- [Cloud] Added Firestore class to wijmo.cloud module for connecting to Firestore databases using REST API
- [Cloud] Added Snapshat class to wijmo.cloud module for connecting to realtime Firestore database using official client library
- [Cloud] Added GoogleSheet class to wijmo.cloud module that makes it easy to show and edit data from Google Sheets.
- [Cloud] Added an OAuth2 class to wijmo.cloud module so that you can easily integrate authentication with Google services too
- [Touch] Added new wijmo.touch module with a polyfill that makes drag-drop work on touch devices the same way it does on desktop machines.
- [FlexChart] New module wijmo.chart.webgl with high performance WebGLRenderEngine. Set new FlexChart.renderEngine property to use it: flexChart.renderEngine = new WebGLRenderEngine();
The following sample is added to demonstrate the feature: Chart\Performance\WebGL\Scatter
- [input] improved wj-labeled-control CSS class to make it easier to layout form labels in inputs in any app
- [FlexSheet] Request to add the EXACT formula in FlexSheet.
- [ReportViewer/PdfViewer] Added the zoomModeChanged event.
- [MultiRow] Added an isRowHeader property to the column groups. This makes it possible to show bound and unbound cells with custom layouts in row headers.
- [MultiRow] Improved support for rowspan property in cell groups.
- [Styles] Updated Material sub-themes to use scss (used to be less). Now all themes are stand-alone CSS files, they don't require other theme files (or wijmo.css).
- [Popup, Tooltip] Added a PopupPosition parameter that allows the caller to specify the preferred position of the popup/tooltip with respect to the reference element.
- [Popup] Added dragging, dragged, resizing, resized events to the Popup control.
- [GroupPanel] Added a globalized version of the default placeholder content. If you did not set this property and want to keep the control empty, please set the "placeholder" property to an empty string setting it to null will show the default/localized message).
- [Globalize] The formatNumber function now treats format specifiers "F" and "G" like "f" and "g" (fixed point and general), but with thousand separators.
- The onSaved callback of the FlexGridXlsxConverter.saveAsync method now called with an empty 'base64' argument when the fileName parameter is empty.
- [wijmo.grid.pdf] Added PdfFormatItemEventArgs.drawBackground method.
- [Vue] Added v-wjTooltip attribute directive, which allows you to define a tooltip for any element in the Vue template. The following sample is updated to demonstrate the use of the directive: Input/Menu/ContextMenus
- [Vue] v-wj-context-menu attribute directive can be defined using the v-wjContextMenu camel-case name now.
[React/Redux/ImmutabilityProvider] Added support for column bindings to nested properties, like 'persons[1].surname'.
[React/Redux/ImmutabilityProvider] Added cloningItem event, which allows you to use custom logic for cloning items before mutating in complex data scenarios.
Wijmo Build 5.20201.664 - April 7, 2020
We found a critical issue in build 5.20201.663 where FlexGrid was flickering when scrolled on iOS 13. We have fixed this issue as of build 5.20201.664. Please update to use the latest version of wijmo to ensure your applications run smoothly on iOS 13.
Build 5.20201.664 is available on NPM, CDN and to download from our website.
If you aren't able to quickly upgrade, you can alternatively add this CSS patch to your application:
.wj-flexgrid [wj-part=root] {
-webkit-overflow-scrolling: touch;
}
Wijmo 2020 v1 - March 31, 2020
We are pleased to announce the release of Wijmo 2020 v1. Designed to be small, flexible, and efficient, this release carefully balances new features with control size and complexity. We have new security updates, many FlexGrid and FlexChart enhancements, in addition to a new editable React Redux DataGrid feature. As always, we modularize our components and features, so your app only loads what it needs. We optimize rendering (often with virtualization), so our components are efficient no matter how large your dataset.
Build a Stock Portfolio App with OpenFin and Wijmo's JavaScript Components
Wijmo Stock Portfolio is a financial sample that demonstrates the usage of Wijmo Components in an OpenFin application. This application consists of several windows. OpenFin’s new Platform API allows users to arrange these windows in the desired workspace.
The stock portfolio app consists of several windows. Each window is implemented using different web frameworks (like React, Angular, and Web Components). OpenFin’s new Platform API allows users to arrange and customize windows into the desired workspace.
See the app in action! This video demonstrates how the app works while arranging windows like a dashboard:
Strengthening Security
The latest version of Wijmo is fully CSP-compliant. It does not require you to add “unsafe-inline” or “unsafe-eval” to your CSP, nor does it require “nonces” or hashes. Our components can work seamlessly in your strictly secured JavaScript application without any compromises to your policy.
What’s New in React
Editable React Redux DataGrid
FlexGrid is offering the first enterprise solution for editable datagrids in React Redux applications!
FlexGrid updates the underlying data array typically with the changes made by a user via the grid. This approach doesn't work with state management systems, like Redux, which requires data immutability. This problem can be solved by the use of the ImmutabilityProvider extension component.
React Redux Editable DataGrid Demo | Read more about the Editable React Redux DataGrid
Release Details - FlexGrid
- Easier-to-Click Checkboxes in FlexGrid
- FlexGrid Column Selection, MultiRange Copy, and Paste
- Checkbox Selector Column for FlexGrid
- Improved Resizing for Hidden Columns and Rows in FlexGrid
- RadioButton and AutoComplete DataMap Editors for FlexGrid
- Improved Validation Behavior in FlexGrid
- Expanded Column Pinning Options in FlexGrid
- FlexGrid Button Columns with CellMaker
- FlexGrid Hyperlink Columns with CellMaker
- FlexGrid Image Columns with CellMaker
- FlexGrid Star Rating Column with CellMaker
- FlexGrid Sparkline Columns with CellMaker
- Excel Export Progress Indicator for FlexGrid
- PDF Export Progress Indicator for FlexGrid