Community Post

Creating Online Excel Viewer with Webix

Sergey Laptick
👁️ 0 views
💬 comments

The common desire to get rid of the necessity to use a particular device to access the required data have led to the massive migration of familiar software from desktop to the web. Using web-based office software allows you to take the working process to the new level. The ability to work from anywhere using any of your devices without worrying about the safety of your files makes usage of online services indispensable nowadays.

In this article, we'll discuss Webix excel document viewer, a tool that can help you create online office applications. Webix is a JavaScript and HTML5 framework for developing cross-platform data-rich web applications with responsive user interfaces. The library is easy to learn, fast and lightweight and can be integrated with the popular JavaScript frameworks such as Backbone.js, Angular.js and jQuery. We'll start with the introduction that will give you a basic understanding of how you can use this tool and then discuss some of its features that, we hope, you'll be curious about.

Including the Required Files

There are a different ways of including the required files in your project. You can download the library package, and add the JavaScript and CSS files from the codebase folder:

Alternatively you can use CDN:

Or NuGet:

nuget install Webix

In case of Microsoft Visual Studio, you can execute this from Package Manager Console:

install-package Webix

And it's always possible to use Bower:

bower install webix

Using the Excel Viewer Component

To see how the Excel viewer component works, let's learn the basics of its usage.

Just like the most of Webix data components, we'll need only a couple of properties to make everything work. After we initialize UI, it's time to define the type of component that we're going want to create and the source of the data we’re going to use:

webix.ui({
    //type of the component
    view:"excelviewer",
    //let's add the header
    excelHeader:true,
    //data source
    url:"binary->path/to/file.xlsx"
});

Let’s take a look at the used properties more closely:

  • view:"excelviewer" - this property doesn’t contain any secrets. It tells that the excel viewer is exactly what we need
  • url:"binary->path/to/file.xlsx" - this code line, as you may have guessed contains the path to the required excel file. But besides the path itself, it contains something else. You see, we’ve added some power of Webix proxy objects to our code. They can be used to include additional loading logic. In this particular case, the “binary” option allows getting the content of the file as ArrayBuffer. Then, the component parser will turn it into a standard JavaScript array
  • excelHeader: true - this optional property was added to turn the first row of our table to a header. It's not required, but if the first row of your document contains column headers, it is a good reason to use it

Well, let's take a look at the results:

Here's our Excel table, so it seems that we've achieved our aim. But it doesn't mean that there's no room for improvements. If we want to display files that consist of more than one sheet, it’ll be a reasonable decision to add the Excel toolbar to your application. To do so, we should add to our layout one extra row that will contain the header. The second row will contain the code we used earlier with one small addition.

Here's the example:

webix.ui({
    rows:[
        //first row definition
        {
            view: "excelbar",
            id: "my_toolbar"
        },
        //second row definition
        {
view:"excelviewer",
        excelHeader:true,
        url:"binary->path/to/file.xlsx"
            toolbar:"my_toolbar"
        }
      ]
});

Well, let's take a look at we have here. Using the rows and cols properties allows you create layouts represented as a combination of rows and columns. The first row in our example, according to the view: "excelbar" property, is an excel toolbar. The id: "my_toolbar" defines the ID of this component which we used a few lines of code later to show that its related exactly to this excel viewer component.

The result is shown below:

enter image description here

You can check the demo here.

Now you have the basic understanding of how this component can be initialized and used. But these examples do not cover the full available functionality and to take a closer look at them we need to go a little bit deeper.

Possible Alternatives and Reasons to Prefer Webix

Off course, the Webix developers weren't the first ones who decided that creating an Excel sheet reader component for the web applications will be a good idea. For example, there's Hadsontable, a JavaScript spreadsheet component for building web apps. Extensibility of this component allows you to add new functionalities and the intention of developers to follow the ECMAScript 2015 (ES6) standards can be pretty attractive to the fans of the cutting-edge technologies.

Or you can take a look at GroupDocs.Viewer, an HTML5-based document viewer that works with PDF, Microsoft Office, CAD, TIFF and other types of documents. This viewer support all common file formats, provides a developer with the cross-platform compatibility and can be used for creating web, desktop and mobile applications.

Each of the previous components has its strong and weak sides according to which you can choose one or another. But let's concentrate on the core features of the Webix excel viewer and turn our attention at the advantages that can be a cause to prefer this solution over the others. The DataTable component that is used to render the data has some useful features. Besides the most obvious of them that any office application should have, such as editing, sorting, and filtering, DataTable provides you with the possibility of virtual rendering. It means that the application won't render the cells outside the viewport until a user scrolls the table down to see them. Since the component displays only the visible part of the data, it renders on the screen in a blink of an eye which is particularly important in the case of web applications especially if you work with the large data sets. Excel viewer allows export, importing, and customize the data. For example, you can display headers or control the number of the loaded rows.

But the most important feature that makes Webix different from the previous technologies is the possibility to combine the viewer with the other UI components. You can use a wide range of them, from a simple button to charts of different types. For example, if you want to create the web app that displays the Excel file, visualizes the data in the form of a chart and allows use the calendar to change the displayed period.

Here's how the code may look like:

var myChart = { view: "chart", /* more properties */ };
var myViewer = { view: "excelviewer", /* some more properties */ };
var myCalendar = { view: "calendar", /* calendar properties */ };

webix.ui({
    rows:[ 
        myViewer,
        {cols: [
            myCalendar,
            {rows: [
                myChart,
            ]},
        ]},
    ]
});

There are two rows in this example, one with the viewer, and one that contains calendar and chart.

The result is shown below:

enter image description here

You can check the demo here.

Using such approach you can split the application into the several modules and use them over and over in other projects. Moreover, if you're in doubt if the user experience of your app is good, you can change it with ease by adding, replacing, or swapping the components. It's easy to experiment pursuing the best possible solution.

Conclusions

One of the main features of Webix is the possibility to use full-functioned UI components with out-of-the-box functionality with minimum efforts. As shown by example with the excel viewer all you need to do is to define the type of the component and the path to the data that should be displayed. Using the combination of nested rows and columns, you can create complex layouts for your future responsive web application. You can add, change, and swap the existing components by changing a couple of lines of code. Finally, after you find the better location for each and every component of your app, you can use the rich API to be sure that your app behaves and responses to the user's action the way you want.

If you're interested in further exploration of the Excel document viewer, you can check the detailed documentation page. In the case of any questions, feel free to ask for a solution. There's a forum for you. And remember that there's always the possibility to play with the code and realize a couple of your ideas using the Webix snippet page. Enjoy.