Displaying the Text in the format of Barcode in SAP UI5

In this tutorial, I am going to explain how to display the Bar Code in the SAP UI5 application.

For example, if you have a Serial Code to display on the UI, you can instead display it as below.

The purpose is basically to hide the data from being visible and it can also be used by end user to scan from the screen.

This can be achieved simply by adding the Style class to your application asking the text to be displayed as a Barcode using the style class for barcode.

To do that it requires a specific type of font that are used to display the barcode. Ideally these fonts are not loaded in the browser by default by your web application. Hence we need to load these specific fonts to the application and then make use of these font to display barcode.
There are several resources that offers the font for Barcode display for free. You can google the font and download them. One example is to download the font barcode 3 of 9 font.

Please make sure you download the fonts in all the different format to support different types of browser and devices. Fonts highlighted as below.

Now let’s go ahead and create an application and load the fonts into the application and make use of them.

Step 1: Create the application project. File -> New -> Project -> SAP UI5 Application Development.

Enter the name for project and select the view of your choice.

Enter the name for the view and choose the preferred mode of development and Click on Finish.

Modify the code in the view file as below. Create a text control and add the text. Make sure the text is enclosed within * symbol.

Now run the application and the result should look like below.

Now let us add the required style classes and convert the Text to Bar Code.

In the Web Content folder, create a Folder named fonts and load the downloaded fonts into the folder.

Then Create a folder named CSS and add a stylesheet with the name main.

In the style sheet, add the font family to create a font name for the downloaded fonts.

Note: The font family name is created with name barcode.

Now create a style class to enforce the text to use the font barcode.

Add the style class barCode to the control to use the barcode.

Link the stylesheet to the webpage. Modify the index.html page as below.

Retest the application.

You can now see that the text is converted to Bar Code display.

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

About Arun