Wijmo 2018 v1 has landed

Wijmo’s first major release of 2018 has landed, and it includes new licensing, new controls, and new React support.

Watch the release video

Download Now!

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:

  1. Purchase a copy of Wijmo, and register your serial number on our website.
  2. Create a deployment distribution key using our website.
  3. Apply the deployment distribution key to your application using Wijmo's setlicenseKey method:

Example:
wijmo.setlicenseKey(key); Note: We used to release 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!

Read the Building Web Apps with Wijmo and NPM blog

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.

Download Now!

Chris Bannon

Global Product Manager of Wijmo
comments powered by Disqus