Nathan Hands' Blog

UI5 applications consultant, entrepreneur, fantasy book lover and gamer

How to include a third party barcode generator in ui5

6 months ago · 2 MIN READ
#tutorial  #UI5 

I recently got a requirement to generate a barcode on the screen of one of my applications that I've been working on and given that this isn't included in UI5 as standard I had to go ahead and include a third-party library for my needs.

JsBarcode

The library that I decided on is JsBarcode, it's super easy to use and freely avaliable for commercial use so ideal for our needs.

So simply goto the download section:

Screenshot 2018-05-23 12.16.21.png

I decided to download all of the barcodes so simply click on "JsBarcode.all.min.js" and copy the contents of the new page that opens.

Inside of your UI5 project create a new folder, I've called this folder "util" and then created a new file called "jsbarcode.js" where I will copy the contents of the file we grabbed above so that it should look like this:

Screenshot 2018-05-23 12.24.09.png

including our new file

Our new file (jsbarcode.js) needs to be included/ loaded with our application. There's actually a couple of ways that we can load this into our application and I'll cover both in this post.

Including at the top of our controller

Screenshot 2018-05-23 12.33.18.png

replacing "barcode/nathan/hand" with your own application namespace. This will then load our file when we load this controller and not before. Please note with this import do NOT call it JsBarcode.

Inside of our manifest.json file

Screenshot 2018-05-23 13.12.48.png

This will load when our application loads, ideal for if we have a need to use this across our application.

Setting up our view

Our view is very simple, we simply need to add the following image to the desired location in the app:

<Image class="barcode" />

rendering our barcode

Our controller is also very simple, something of importance to note is that we'll need to trigger this render after the UI5 screen has already been rendered. In my example I'm going to make use of a standard function called "onAfterRendering" which is triggered by UI5 after the UI5 screen (and so our Image control) has been rendered/ exists in the DOM.

onAfterRendering: function() {
  JsBarcode(".barcode", "123456");
},

This is the most basic example of how to implement a barcode, there are some more parameters that we can include here to produce different results as seen in the JsBarcode documentation.

Screenshot 2018-05-23 12.43.19.png

side notes

  • If you are using SAP WebIDE as quite a lot of users are you will need to include the following at the top of your controller to stop the linter from highlighting "JsBarcode" as an error:
/* global JsBarcode:true */
  • You can also import this inside of your index.html file, but do NOT do this if you plan to upload to the Fiori Launchpad so you should follow the two methods mentioned.

conclusion

That's it! we've included our new file and generated our very first barcode! Most of these lessons can be used for lots of different external files. Please note that this is not the same as including a library like we did in our Chart.js blog post as that follows some different rules.

Feel free to leave a comment down below, this was a very quickly put together post but I thought it would be useful to see and understand how to include and use files in UI5.

···

Nathan Hand

SAP Applications consultant working as a UI5 developer, Lover of automation, technology, fantasy books & games.
comments powered by Disqus


Proudly powered by Canvas · Sign In