Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
SAP UI5

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.

clip_image001

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.

clip_image003

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.

clip_image004

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

clip_image005

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

clip_image006

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.

clip_image008

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

clip_image009

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.

clip_image010

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

clip_image011

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

clip_image013

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

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

clip_image015

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

clip_image017

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

clip_image019

Retest the application.

clip_image020

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

About Arun

2 Comments:

  1. It was a decent post to be sure. I completely delighted in understanding it in my lunch time. Will definitely come and visit this blog all the more frequently. Much obliged for sharing. www.55printing.com

    ReplyDelete
  2. thank you for a super allocation. Your article has proved your difficult produce an impact and experience you've got were given on this showground. top notch .i be ashore on it studying. vaporwave text generator

    ReplyDelete

Powered by Blogger.