How to include a third party barcode generator in 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:
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:
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
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
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.
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.
···
