Configuring SheetJS (Optional Library)

Beginning with Canvas version 1.2.2, optional libraries will be included within assets folder but will need to be enabled before it can be used. This will involve:

  • Adding the link to the JS/CSS file in the header
  • Pushing the Angular module of the library into your application

Enable SheetJS

SheetJS a library that helps working with spreadsheets on the web! Check their website for more info. 

To enable the functionality in Canvas, do the following steps:

    1. Update WEB-INF/pages/header.library.ftl file with the following:

<script src="assets/js/optional/libs.opt.sheetjs.js"></script>

    2. Update WEB-INF/pages/header.script.init.ftl file by adding below line of code:

customAngularModules.push('angular-js-xlsx');

It is now enabled!

Create upload button

To check it out, create a simple Canvas Blank page with the following HTML line of code:

<js-xls onread="read" onerror="error"></js-xls>

And on the page's corresponding controller:

$scope.read = function (workbook) {
      /* DO SOMETHING WITH workbook HERE */
      console.log(workbook);
};
    
$scope.error = function (e) {
      /* DO SOMETHING WHEN ERROR IS THROWN */
      console.log(e);
};

You should be able to see on your HTML page, something similar to:

Clicking the "Choose File", will open up a Windows dialog to select an Excel file example to load. You will get the following response in the console showing the contents of the file:

That is it!