Give the power of Zip to your SAPUI5 applications

[abdel_dadouche]

Usually before writing any of my blog post, I try to find a catchy title and associate a funny picture.

So what funny picture can be found around zip archive and SAPUI5?

Thank you Dr Evil from Austin Powers!



To give you some context, I was looking at the SAP Leonardo Machine Learning API, more precisely the Similarity Scoring API for which I wanted to build a tutorial for the SAP Developer Center and link it to the existing series named SAP Leonardo Machine Learning services with SAPUI5 .

The Similarity Scoring API expects an archive file made of a series of text files, each one containing the vector of features extract from the Image Feature Extraction API.

With Java, no problem as you can use the java.util.zip and there are plenty of example around it.

But what about with SAPUI5 or other JavaScript-based application framework?

 

So I started looking around for a native feature, which I couldn't find. Then extended my search to my dear search engine friend.

After a few iteration, the best option I found so far was JSZip! But JSZip doesn't come with a "save as", so as recommended by them I also used FileSaver too!

 

JSZip in a nutshell

JSZip is a JavaScript library for creating, reading and editing .zip files, with a lovely and simple API.

JSZip is dual-licensed. You may use it under the MIT license or the GPLv3 license.

I highly recommend you to check the LICENSE for more details.

Website: https://stuk.github.io/jszip/

GitHub repository : https://github.com/Stuk/jszip

 

FileSaver in a nutshell

FileSaver.js is the solution to saving files on the client-side, and is perfect for webapps that need to generate files, or for saving sensitive information that shouldn't be sent to an external server.

FileSaver is licensed under the MIT license.

I highly recommend you to check the LICENSE for more details.

GitHub repository : https://github.com/eligrey/FileSaver.js

Update: Since I first wrote this blob, there was a change in the code that results in an error. Therefore, please use the links provided later and not the Git Repository.

How to use third-party library in your SAPUI5 application

I couldn't find much official documentation about that topic, The only link I can share if the sap.ui.define function.

There are a multitude of blog posts and articles with different approaches around how to achieve that. So my goal will be to share my view on it, while trying to summarize what I found..

So, how do you import a third party library in a SAPUI5 application?

Import the library file in your project structure

First you need to import the library the jszip.js (or mini-fied version jszip.min.js) in your application.

To do this, you will simply import the physical jszip.js file (or the minified version jszip.min.js) and the FileSaver.js (or the minified version FileSaver.min.js) in your project structure (usually in a libs directory under webapp).

These files are located in the GitHub repository: https://github.com/Stuk/jszip/tree/master/dist

Your project structure you look like this:



In my case I have added the minified versions.

Load the library file in your application

Loading libraries in SAPUI5 could be done in so many ways, but I think that most reliable one is to either use the Component.js file or the controller you are planning to use it in.

This is the code of my Component.js:

sap.ui.define([

	"sap/ui/core/UIComponent",

	"sap/ui/Device",

	"demomyproject/model/models",

	/* for the JSZip library    */ "demomyproject/libs/jszip.min",

	/* for the FileSaver library*/ "demomyproject/libs/FileSaver.min"

], function(UIComponent, Device, models) {

	"use strict";



	return UIComponent.extend("demomyproject.Component", {

You can see that the path to the library include the application name and the namespace. In my case my application is named "myproject" and the namespace is "demo".

You can find it in the "extend" method call at the end of the code snippet.

Use it in your application

To keep it really short, I built a SAPUI5 app and just added a button with a press event calling the onPress function of my controller.

Here is my demo.view.xml:

<mvc:View controllerName="demomyproject.controller.demo" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"

	displayBlock="true" xmlns="sap.m">

	<App>

		<pages>

			<Page title="{i18n>title}">

				<content>

					<Button text="Test JSZip &amp; FileSaver" press="onPress"></Button>

				</content>

			</Page>

		</pages>

	</App>

</mvc:View>

and here my demo.controller.js:

/* global JSZip:true */

/* global saveAs:true */

sap.ui.define([

	"sap/ui/core/mvc/Controller"

], function(Controller) {

	"use strict";



	return Controller.extend("demomyproject.controller.demo", {

		onPress: function(oControlEvent) {

			var zip = new JSZip();

			zip.file("Hello.txt", "Hello World\n");

			zip.generateAsync({

					type: "blob"

				})

				.then(function(content) {

					// see FileSaver.js

					saveAs(content, "example.zip");

				});

		},

	});

});

The global annotations at the beginning will prevent the Web IDE to raise errors when using the external library.

Now, you can run the application, and press on the button. This will trigger the creation of a zip file named example.zip containing a Hello.txt fil that contains a Hello World message.

 

If you want to learn more, you can check

• How to use JSZip
  


• How to write a file / give it to the user with FileSaver

 

Want more?

If you want to get hands on additional materials on that topic, the SAP Developer Center provides a multitude of online tutorials made by the SAP developer community for the community.

I also encourage you to::

• Subscribe to the SAP Developer News monthly newsletter for updates


• Follow us on
  
  
  
  • Twitter @sapdev
  
  
  • YouTube: SAP Community
  
  
  • Google+: SAP Developers
  
  
  
  


• Watch out for our next CodeJam events

Thank you for reading, Have fun and Remember that “sharing is caring”! ?