What's New in Wijmo 2018 v1
Check out the newest features and updates from Wijmo's first major release of 2018.
4
Wijmo 2018 v1 Build 5.201801.462 - May 17, 2020
Build 462 has released. It includes an exciting new interop with web components (beta) and some nice new PDF and ReportViewer features. It also includes a fix for license validation in older versions of Chrome.
As we already announced, Wijmo supports Angular version 6.0.0. We're still working on upgrading all our samples to Angular version 6 and our TypeScript version to 2.7. A future release will include those.
Wijmo Controls as Web Components
This build introduces a beta version of the Wijmo web components interop, which exposes Wijmo controls as web components, or more specifically as custom elements. Wijmo web components allows you to declaratively add Wijmo controls to HTML page, and manipulate them as usual DOM elements, without the use of any additional framework. Some browsers that don't fully support web components standards may require some additional polyfills.
The key aspects of the current state of the Wijmo web components implementation:
-
Wijmo "top-level" web components that represent Wijmo controls, like wjc-flex-grid component representing FlexGrid control, are inherited from the corresponding control classes. For example, WjcFlexGrid component class extends FlexGrid control class. This also means that the base Wijmo Control class extends the HTMLElement class when Wijmo is used in the "web components mode".
-
Child components that are complementary to top-level components, like wjc-flex-grid-column components that define FlexGrid columns, function as wrappers over Wijmo classes they represent. Child components are directly inherited from the HTMLElement class, and the underlying Wijmo class instance is accessible via the special control property of the component.
-
Wijmo class properties can be defined using attributes on the component element. When the attribute value changes, the corresponding Wijmo class property is updated accordingly. Changing the class property value doesn't entail changing of the corresponding attribute value. This probably can be changed in the future, but right now we have not decided whether it's necessary.
-
JavaScript code can subscribe handlers to Wijmo control events using native Element.addEventListener('event', handler) method.
-
Wijmo components don't use Shadow DOM now. This will be addressed in future versions of the interop. One of the challenges here is that Wijmo allows deep customization of its control's parts via CSS, whereas the goal of Shadow DOM is to prevent it. There are new proposals to the Shadow DOM specification that can mitigate this limitation. We continue to keep track of the changes. For now, Wijmo web components and their parts can be customized in the same way as ordinary Wijmo controls, using global CSS.
One of the benefits of web components is that the same component can be used in different frameworks and benefit from the frameworks’ additional capabilities like attribute, property, and event bindings.
For now, we added the Web Components In Angular sample that demonstrates how to use Wijmo web components in an Angular application. Samples for other popular frameworks like React, Vue, Polymer, and others are on the way.
We have also added ES6 versions of Wijmo modules (Beta version), which you can find in the NpmImages folder of Wijmo download zip:
- wijmo-es2015-esm-min – in ESM module format (ES6 import/export statements)
- wijmo-es2015-commonjs-min – in CommonJS module format
We will be continuing to research and develop our ES6 support this year.
- [Web Components] Added Beta version of the web components interop (wijmo.webcomponents.xxx.js modules). The Samples\TS\WebComponents\WebComponentsIntro sample explains the status and usage of the interop.
- [Web Components] Added a sample that demonstrates how to use Wijmo web components in an Angular application.
- [licensing] Added a wijmo.setLicenseKey method that enables single-build deployment, including npm. If the licenseKey is not set, Wijmo runs in evaluation mode (with a watermark). Setting the licenseKey (keys are provided to customers on our site) causes Wijmo to run in production mode (no watermark).
- [licensing] Fixed issue of license validation in older versions of Chrome.
- [npm] Wijmo is published to the global npm registry as the 'wijmo' package.
- [Angular] Disabled state of Wijmo components inside Angular forms now changes on the Angular AbstractControl.disable()/enable() method calls.
- Added Beta version of Wijmo npm image with ES2015 (ES6) code in CommonJS module format, in the NpmImages/wijmo-es2015-commonjs-min folder.
- Added Beta version of Wijmo npm image with ES2015 (ES6) code, in the NpmImages/wijmo-es2015-esm-min folder.
- [wijmo.pdf] Moved to PDFKit 0.8.3.
- [wijmo.pdf] PdfPageArea.openImage() method added.
- The PdfExport samples have been updated to use openImage() method to get the actual image sizes when drawing cells manually.
- [ReportViewer] Added support for new properties of string parameters, maxLength and allowBlank.
- PivotGrid now honors the allowDragging property and allows users to reorder the row fields by dragging their column headers.
- Optimized the FlexGrid.autoSizeRows method.
- [NpmImages] Npm image with modules in System format is abolished. This module format makes sense only in conjunction with the SystemJS run-time loader, but the latter is capable to load modules in CommonJS format, so there is no need to ship a separate System npm image.
Check out the Build 462 Release
_________________________________________________________________
We've implemented a new licensing mechanism in Wijmo when you deploy to a server. You'll now need to create a distribution key for applications that use Wijmo. A distribution key authorizes your application to use Wijmo.
You can generate a distribution key using your account on our website. To make a distribution key, add the domains that need to be authorized, generate the key, and apply the key to your application.
Wijmo licensing will not need a distribution key when on localhost, so your development process will go uninterrupted. You only need to generate and apply a distribution distribution key when you're deploying your application to a server.
If you deploy a Wijmo application without a distribution key, you'll see this popup:
To use Wijmo in production, follow these simple steps:
- Purchase a copy of Wijmo, and register your serial number on our website.
- Create a deployment distribution key using our website.
-
Apply the deployment distribution key to your application using Wijmo's setlicenseKey method:
Example:
wijmo.setlicenseKey(key);
Note: We used to releae two editions of Wijmo, one for evaluation and one for production. We now have a single edition that runs in two modes (eval or production), so you no longer have to replace Wijmo files when going to production.
Watch the video:
We've all waited a long time for this, and we're happy to finally publish Wijmo on NPM.
We've published NpmImages ourselves for years. All our Angular v5 samples used these to install Wijmo as modules from our own server, and we also had documentation that instructed you to install Wijmo from the local file system. The great news is that if you copied either pattern, you can easily move to NPM.
The only thing that needs to change is to remove the custom URL in the package.json that points to our server, and add the specific version of Wijmo that you want to use:
Old (hosted):
"dependencies": {
"@angular/common": "^5.0.0",
...
"wijmo": "http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.409.tgz",
"zone.js": "^0.8.18"
},
Old (local):
"dependencies": {
"@angular/common": "^5.0.0",
...
"wijmo": " ../wijmo_download/NpmImages/wijmo-commonjs-min",
"zone.js": "^0.8.18"
},
New:
"dependencies": {
"@angular/common": "^5.0.0",
...
"wijmo": "5.20181.450",
"zone.js": "^0.8.18"
},
The NPM install command is the same:
npm install Wijmo
The @import statements are also the same:
import * as wjcGrid from 'wijmo/wijmo.grid';
Wijmo now has a no-frills TabPanel control:
Microsoft SSAS Cube Support in OLAP
Wijmo OLAP is even more powerful now that it can connect directly to Microsoft SSAS Cubes. Previously, Wijmo OLAP could handle client-side aggregation so that it didn’t require a server. We also had an option for server-side aggregation, but it required installing a custom DataEngine.
Now, Wijmo OLAP can talk directly to SSAS Cubes. This is great for those of you who have existing SSAS cubes and want to create a PivotGrid (and PivotChart) bound directly to the cube.
This feature requires that you configure a few things in your SSAS Cube to make sure it's accessible via AJAX requests. Read our blog on how to setup Wijmo OLAP and SSAS cubes.
ActiveReports Support in ReportViewer
Wijmo has a modern client-side ReportViewer control that now supports ActiveReports. The Wijmo ReportViewer is written as a control in TypeScript and comes with built-in support for Angular, React, Vue and more. It's also provided in multiple module formats for use with module loaders.
We worked closely with one of our customers to add Table support to FlexSheet. Tables in FlexSheet act similarly to Excel; you can select a range of cells in a sheet and convert them to a formatted table:
We've added child component support for controls with complex properties: for example, FlexGridColumn for FlexGrid Column objects and FlexChartSeries for Chart Series objects. This makes declaring controls and bindings in markup even more powerful.
Here's an example of a FlexGrid with columns declared in markup:
<Wj.FlexGrid itemsSource={this.state.data}>
<Wj.FlexGridColumn header={this.state.countryHeader} binding="country" width="*" />
<Wj.FlexGridColumn header="Date" binding="date" />
<Wj.FlexGridColumn header="Revenue" binding="amount" format="n0" />
<Wj.FlexGridColumn header="Active" binding="active" />
</Wj.FlexGrid>
Moving forward, all new versions of Wijmo will be published to a new CDN that supports HTTPS. HTTPS is becoming the standard for hosting almost all web content, so we wanted to make sure you can host your applications on HTTPS and still use Wijmo. It also makes Wijmo easier to use on sites like jsfiddle, codepen, jsbin, etc.
The new URLs for the Wijmo CDN are as follows:
<!-- Wijmo references (required) -->
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.min.js"></script>
<link href="https://cdn.grapecity.com/wijmo/5.20181.450/styles/wijmo.min.css" rel="stylesheet"/>
<!-- Wijmo controls (optional, include the controls you need) -->
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.gauge.min.js"></script>
We also host a latest version, updated with each official release:
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/>
<!-- Wijmo controls (optional, include the controls you need) -->
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.gauge.min.js"></script>
We're committed to accessibility and added more enhancements in this release. We've improved accessibility for:
- Hierarchical FlexGrid (with ARIA treegrid attributes)
- AutoComplete & ComboBox
- FlexGridFilter Dialog
Our next focus is on FlexChart accessibility.
- [licensing] Added a wijmo.setdistribution key method that enables single-build deployment, including npm. If the distribution key is not set, Wijmo runs in evaluation mode (with a watermark). Setting the distribution key (keys are provided to customers on our site) causes Wijmo to run in production mode (no watermark).
-
[npm] Wijmo is published to the global npm registry as the 'wijmo' package.
-
To install the release builds
> npm install Wijmo // latest
> npm install wijmo@5.20173.431 // specific version
- To install RC builds
> npm install wijmo@rc // latest
> npm install wijmo@5.20181.432-rc // specific version
To install nightly builds
> npm install wijmo@nightly // latest
> npm install wijmo@5.20173.431-nightly.d20180312.t0720 // specific version (suffix denotes build date/time)
- The on-line npm packages offer Wijmo modules in the CommonJS format. Alternative module formats are available in the NpmImages folder of Wijmo download zip as before.
-
[npm] Wijmo npm images now include css styles and culture files:
-
wijmo.css in the 'styles' subfolder. Usage example: import 'wijmo/style/wijmo.css';
- themes css in the 'themes' subfolder. Usage example: import 'wijmo/themes/wijmo.theme.dark.css';
-
culture js files in the 'cultures' subfolder. Usage example: import 'wijmo/cultures/wijmo.culture.ja';
-
[accessibility] Improved ARIA support on FlexGrid, FlexGridFilter, and ComboBox components.
-
[Olap] Added support for binding PivotEngine components directly to SSAS cubes. Previously, binding to SSAS cubes required setting a server and with ComponentOne data engine services which exposed the cubes. Now, you can bind the PivotEngine directly to the SSAS cubes.
For example:
var ng = new wijmo.olap.PivotEngine({
itemsSource: {
url: 'http://ssrs.componentone.com/OLAP/msmdpump.dll',
cube: 'Adventure Works'
}
- [ReportViewer] Added support for the GrapeCity ActiveReports report generator. The PureJS ReportViewer sample has been updated to demonstrate the new feature.
- Added a wijmo.nav.TabPanel control that provides tab navigation. This new control can be used to replace bootstrap tabs, which require bootstrap.js and jQuery.
- [React] Added child components support.
-
[React] Added support for child components representing complex objects for some control properties, for example FlexGridColumn for FlexGrid Column objects and FlexChartSeries for Chart Series objects.
-
So from now, on in addition, to the static columns definition like this:
<Wj.FlexGrid autoGenerateColumns={ false }
columns={[
{ header 'Country' , binding 'country' , width '*' },
{ header 'Date' , binding 'date' },
{ header 'Revenue' , binding 'amount' , format 'n0' },
{ header 'Active' , binding 'active' }
]}
itemsSource={ this.state.data } />
... you can use the following dynamic definition:
<Wj.FlexGrid itemsSource={this.state.data}>
<Wj.FlexGridColumn header={this.state.countryHeader} binding="country" width="*" />
<Wj.FlexGridColumn header="Date" binding="date" />
<Wj.FlexGridColumn header="Revenue" binding="amount" format="n0" />
<Wj.FlexGridColumn header="Active" binding="active" />
</Wj.FlexGrid>
- This improvement makes it possible to dynamically update array property items, for example a set of grid columns, with the 'render' code like this:
<Wj.FlexGrid itemsSource={this.state.data}>
{this.state.columnsDefinitions.map((colDef) => {
return <Wj.FlexGridColumn key={colDef.binding} binding={colDef.binding} />
}
)}
</Wj.FlexGrid>
- [olap.PivotPanel] Added support for hierarchical field structures in non-cube data sources.
- [Excel] Added support for tables in the FlexSheet control and wijmo.xlsx module. The ExcelBook/FlexSheetIntro/FlexSheetExplorer samples have been updated to demonstrate the new feature.
- [FlexSheet] Expose _filter as public property instead of private.
- [FlexGrid] Added a Column.multiLine (and Row.multiLine) feature that supports multi-line text in cells. Setting multiLine to true causes the cell to honor embedded line-break characters (\n) when rendering the cell content. Users may enter line breaks by pressing alt+Enter, as in Excel.
- [FlexGrid] Added support for Column.textAlign = 'justify-all'. This new setting explicitly sets CSS properties textAlignLas and textJustify, which is important for ideograph-based languages such as Chinese and Japanese.
- [Globalize] Added support for escaped characters in date formats, e.g.
wijmo.Globalize.format(date, '\\h h \\m m'); // h 3 m 55 - Configs of all Angular and React npm module based samples are updated to support symlinked modules installation.
- Added a FlexGrid.autoScroll property that determines whether the grid should automatically scroll its contents when the user drags rows or columns near the edges of the control.
Check out the 2018 V1 Release