Introducing Wijmo 5 FlexSheet: A Spreadsheet for HTML5/JavaScript and AngularJS

December 01 2015

Spreadsheets Land in Wijmo

It’s been less than a year since we moved Wijmo5 out of beta and released it to the world. Wijmo5, a new generation of JavaScript controls, focused on lightweight, flexible controls for developers targeting the latest and greatest web browsers and leveraging the newest technologies. Thanks to our customers providing their feedback, we're extremely happy with how the library has matured over the last year, and we're happy to announce our newest control, FlexSheet. Wijmo FlexSheet On the surface, FlexSheet is a fast, lightweight spreadsheet control. The core control behind any spreadsheet is a quality grid or table. Grids have always been a strong point and focus for Wijmo and ComponentOne over the last twenty years, so it was only natural that we took our experience and created an Excel-like alternative for working with and analyzing data in the web stack. FlexSheet offers the most important spreadsheet features from Microsoft Excel, including:

Formula/calculation engine
Cell formatting
Freezing
Filtering
Undo/redo

FlexSheet also supports importing and exporting Microsoft Excel files (xlsx), so there's a clear migration path for your end-users. Add Excel-like spreadsheets to your web applications and give your users a powerful and familiar tool for analyzing data. In this blog post, we'll cover how to add a FlexSheet to your application. We'll also look at some of the features and explain how they benefit not only you as a developer, but your end users, as well.

How to Get Started

Getting started with Wijmo5 is very easy. To begin, we add the references to AngularJS, Wijmo, Wijmo’s AngularJS library, and Wijmo's CSS. After we've had added either local references or reference the CDN, we include the Wijmo5 directives in the app module.

var app = angular.module('app', ['wj', 'wj.flexsheet']);

Next, we'll add a controller to provide some logic. Inside the controller is where we define our data provider. I choose not to copy the getData function into this blog, but you can see the logic in the attached sample.

angular.module('app').controller('basicController', function ($scope, dataService) {  
data: dataService.getData(50)  
}

Now we add the FlexSheet control host element to our view and define some properties. In this case, the sheets: Finally, we add some CSS to customize the appearance of the control.

Product Highlights

There are tons of new things to talk about since this is a brand new control, but here's a look at the features I find most helpful:

Fast and Flexible

FlexSheet is small, fast and meant to be extended. In our Excel-Like sheet sample, you'll see that we added our own customized ribbon menu. All of the events that occur in our FlexSheet are available to you as a developer to customize the behavior. For example, in our angular directive, we can apply the follow watch on a button in the ribbon above.

$scope.$watch('ctx.cboFontName', function () { });

Once we have a listener to handle a "third-party" event (such as a drop-down list change), we can apply cell styles to the cell. In this case, we're looking at Font-Style so we can do some logic to ensure that it's a valid font name. We can apply that cell style by doing something like the following:

$scope.ctx.flexSheet.applyCellsStyle({ fontFamily: $scope.ctx.cboFontName.selectedItem.value });

Different Fonts FlexSheet is focused on the key features from Excel and offers extensibility for you to add more. Some of these features include a context menu, triggered by the right-click, that allows you to insert or remove rows or columns. You can freeze rows or columns for analyzing large data sets, sort and filter data, add dropdown or combo lists into cells for user selection, and more features that we'll get to later. This philosophy allows us to maintain a small core and still offers the possibility to extend the control in limitless ways. We're very excited for our users to get their hands on the control to really push the boundaries.

Familiar Experience

FlexSheet offers familiar features that people expect from Microsoft Excel. From keyboard navigation to data entry, you users will feel at home using FlexSheet. We tried to make this experience as close to native Excel as possible, including the styling and layout. We include the ability to switch between sheets using the bottom tabs, which also allow users to add additional sheets. Additionally the navigation buttons are included to make it easier. We even included undo and redo operations to streamline your users' workflow. We have that familiar formula bar at the top that we know data entry fans are excited about. Of course, due the flexibility of the control, all of these features are easily locked down, depending on the product requirements.

By offering Excel-like features to your users, they can quickly familiarize themselves with your application and become productive very quickly.

Formula Support

FlexSheet includes a calculation engine for built-in formula support. FlexSheet supports about 100 formulas and offers auto-completion when typing them into cells. FlexSheet has formula operations for aggregation, mathematics, logic and text. FlexSheet offers very similar formula support as Microsoft Excel.

Import and Export Excel Files

We've mentioned Excel-Like a few times already, but the truth is, you can never truly be "Excel-Like" without the ability to convert Excel documents into something your application can understand, and vice versa. Fortunately, FlexSheet supports importing from and export to Excel files, so all of that hard work your users put into those hundreds of Excel sheets won't be lost. More important, they can take their work from FlexSheet and port it back over to Excel at any point. They can also modify spreadsheets in FlexSheet, via web browser on any device, and then export them to an Excel file for sharing purposes. In our sample, we have provided some buttons for importing and exporting When you click Load, it opens a file dialog box where you can browse to your local Excel file. This opens a new FileReader call, and you can load them into your application. The Save button will allow you to convert it to an Excel file and save it on the local machine. New will simply clear the sheet and give you a blank canvas.

Data Binding

FlexSheet supports data binding like a grid: bound and unbound. In bound mode, columns can be defined and data bound just like our FlexGrid; in fact, FlexSheet uses and extends FlexGrid. We can take a look at some code and see our data being bound.