Wijmo Build 5.201801.462 is Available

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.

Get started with Wijmo

Download the 30-day free trial of Wijmo

Download Now!

Angular 6

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.

We also have an interesting blog about using Wijmo with Angular Elements: Angular 6 Support blog

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.

Web components in Wijmo JavaScript controls

If you're not familiar with web components, here's a good introduction to this technology.

The key aspects of the current state of the Wijmo web components implementation:

  1. 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".

  2. 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.

  3. 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.

  4. JavaScript code can subscribe handlers to Wijmo control events using native Element.addEventListener('event', handler) method.

  5. 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.

Please send us feedback while our WebComponent interop is in beta: Web Components Intro sample | Web Components In Angular sample

ECMAScript 6

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. Feedback here is also welcome.

Change Log

  • [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 Intro sample
  • [Web Components] Added a sample that demonstrates how to use Wijmo web components in an Angular application. Web Components In Angular sample
  • [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). Read more about Wijmo licensing | How to deploy a Wijmo app with distribution licensing blog
  • [licensing] Fixed issue of license validation in older versions of Chrome.
  • [npm] Wijmo is published to the global npm registry as the 'wijmo' package. Read the blog on Wijmo and NPM
  • [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.

New Samples

Breaking Changes

  • [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.

Get Build 5.20181.462 now


Wijmo 2018 v1

 

New Licensing Mechanism

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:

Licensing popup

To use Wijmo in production, follow these simple steps:

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:

Wijmo Licensing Info | Deploying a Wijmo Application blog

Published to NPM

The biggest benefit from adding our new licensing mechanism is that we now have a single distribution and can publish it to NPM! We've all waited a long time for this, and we're happy to finally publish Wijmo on NPM.

NPM logo

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';

That’s all there is to it! We hope you enjoy how much more accessible Wijmo will be for modern web development. We are happy to be published to NPM!

New TabPanel Control

Another big request has been to add a tab control. As usual, when we hear common requests, we add them to our roadmap, and we now have a no-frills TabPanel control:

New TabPanel Control

One nice benefit of our TabPanel is that it's smart: it refreshes Wijmo controls when the tabs become visible. Because controls need to be visible on the screen when they're rendered (for calculating dimensions), other tab controls force you to refresh our controls manually. So this is a nice feature for customers using our TabPanel with embedded Wijmo controls (like FlexGrid).

Another nice benefit of having our own tab control is that we removed Bootstrap tabs from all our samples, and thus completely removed jQuery from all samples.

TabPanel Intro sample | TabPanel Blog | TabPanel documentation

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.

Wijmo OLAP connections

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.

OLAP Server sample | OLAP and SSAS Cube Blog | OLAP PivotEngine documentation

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. This cutting-edge ReportViewer complements a cutting-edge report engine.

ActiveReports support in ReportViewer

ReportViewer sample | About ActiveReports

FlexSheet Tables

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:

FlexSheet tables

FlexSheet Intro sample

React Child Component Support

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>

React FlexGrid Intro sample | React documentation

HTTPS CDN

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>

Read more about how to reference Wijmo in our documentation.

Accessibility Enhancements

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.

New Samples

Change Log

  • [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. OLAP SSAS Cube sample | OLAP and SSAS Cube Blog

    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. ActiveReport ReportViewer sample
  • 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. TabPanelIntro sample | TabPanel blog
  • [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.

See Wijmo release history