Skip to Content
Author's profile photo Bollu Spandana

How to develop the Custom Control QR Code in SAP UI5.

Dear all,

                 

             In this Blog I am going to  give you an explanation regarding generation of “QR Code using Custom Control”

             Initially, I have used Google API for developing the QR Code, For downloading the QR Code image and converting it into pdf I have used the htmltopdf library and converting the QR Code HTML data into pdf I have used the  base64 format. I have faced an issue in the above-mentioned process and I have solved the error using the custom control method.

Custom Control:

                
            Custom controls are small “reusable” components that can be created within the App very easily, Once you integrate this custom controller in you application it can be reused in any other applications also. This is the main advantage of the custom control. Below I am going to describe how to integrate the custom controller and how to generate the QR Code by using that custom controller. 
Step 1:
             First we need to create a project in SAP Web IDE, Here I am creating a project with the name “ customControl” which is shown n the below  Workspace.

 
                   After creating the project we will get a view(custom.view.xml)and controller(custom.controller.js) as show in the below screenshot.

Step 2:(customControl.webapp.custom.view.xml)
                  
                 In my XML view,  I have  designed the Customer Address details by using simple form as shown  below code.

<content>
     <VBox class="sapUiSmallMargin">
					
             <f:SimpleForm adjustLabelSpan="false" columnsL="1" columnsM="1" columnsXL="1" editable="true" emptySpanL="4" emptySpanM="4" emptySpanS="0" emptySpanXL="4" id="SimpleFormChange354" labelSpanL="3" labelSpanM="3" labelSpanS="12" labelSpanXL="3" layout="ResponsiveGridLayout"
	                    singleContainerFullSize="false" title="{i18n>customeraddress}">
							
               <f:content>
		  <Label text="Name"/>
		    <Input id="name" value=""/>
		      <Label text="Street/No."/>
		        <Input id="street" value=""></Input>
			<Input id="houseNum" value="">
		      <layoutData>
                 <l:GridData span="XL1 L2 M2 S4"/>
	      </layoutData>
	     </Input>
	     
             <Label text="ZIP Code/City"/>
	        <Input id="ZIPcode" value="">
		 <layoutData>
		    <l:GridData span="XL1 L2 M2 S4"/>
		 </layoutData>
		</Input>
	     <Input id="city" value=""/>
	  <Label text="Country"/>
	 
             </f:content>
	     </f:SimpleForm>
	</VBox>
	
        <VBox>
        <Button class="makeButton" id="buttonId" press="onButtonpress" text="Submit"></Button>
	<Image class="image2US" crossOrigin="anonymous" id="newQrcode" src=''/>
	</VBox>
</content>

XML  View displayed like this,




 In custom view, we have a number of Fields (Name, Street No, ZIP Code, City) and a submit button  as shown in above screen. Once Customer fills all the fields and clicks the submit button to get the QR Code.
 
               
             For generating the QR Code first we need to integrate the custom controller in our application as show in below.

Step 3:(customControl.webapp.custom.model.qrcode.js)
How to Integrate the custom control: 
              
               Here I have integrated the custom controller File in model Folder with the name as qrcode.js as shown below.



Click on the below link to get the qrcode.js File
https://drive.google.com/drive/folders/0B4TU8_8X_pjCbnFmZVo5UmlDdUk
        
                  After integrating the qrcode.js file, Now we need to call that file in our controller as shown in below.
Step 4:(customControl.webapp.custom.controller.js)
How to call the qrcode.js File in controller: 



                                   
               Here I have given the following path (“customControl/model/qrcode”)  for calling the js file, In this path   “customControl” is the Namespace of the Application, “model” defines the folder name in the application and “qrcode” is the file name.

Step 5:
                Customer fills all the fields what are the mentioned in the above form, Now the view is shown as below.
 
                     
          By clicking on the submit button to we can get  the customer field values that are stored in a variable (customerdetails) as shown in below code.

custom.controller.js code.
     
return Controller.extend("customControl.controller.custom", {

onButtonpress: function() {

var NAME = this.getView().byId("name").getValue();
var STREET = this.getView().byId("street").getValue();
var ZIPCODE = this.getView().byId("ZIPcode").getValue();
var CITY = this.getView().byId("city").getValue();

			
if (NAME !== "" && STREET !== "" && ZIPCODE !== "" && CITY !== "") {
				
var address = '/NAME:' + NAME + '/STREET:' + STREET + '/ZIPCODE:' + ZIPCODE + '/CITY:' + CITY + '';
var customerdetails = address.replace(/[/:]/g, "");

				
       var qrcode = new QRCode(document.getElementById("__xmlview0--newQrcode"), {
		width: 150,
		height: 150
		});
		
        var testImage = qrcode.makeCode(customerdetails);
      
          Image = qrcode._oDrawing._el.children[1].currentSrc;
	  this.getView().byId("newQrcode").setSrc(Image);
             } else {

	sap.m.MessageToast.show("Please enter your complete address");
			
                  }

		}
	});

 

Step 6:
Generating New QR Code:

Generate the new QR Code as show in above.

Step 7:
       Now we want to pass that above variable(customerdetails) into makecode function, after clicking on the submit button which triggers the  makecode Function in the qrcode.js file. Finally that variable(customerdetails) is converted in to a QR Image by using qrcode.js file,  as shown in the below image.

 

 

Step 8:
              After generating the QR Code by using makecode function, now we want to get the source path of the QR Code, as shown in below.

 

 

Step 9:
Set the Generated QR Code in the view.
            After getting the QR Code, the source path is stored in a variable name as Image, now we want to bind that image to the view, for that we need to get the Image tag Id (newQrcode) from view and set the src to the Image tag as shown in the below code snippet.

 

 

                  Now click on the “submit” button to display the “QR Code” image in the view as shown in the below image. When the user scan this QR Code using using some external Scanner Application he can view the data that is embedded in the QR code generated before.

 

 

                      Finally in this way we can use the custom controller to generate the QR code for a particular data in SAP UI5.
Thanks,
Spandana Bollu,
spandanab.in@mouritech.com,
Technical.

                                              

 

 

 

Assigned Tags

      14 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Emanuele Ricci
      Emanuele Ricci

      Hi, if you want you can give a try to my custom library that allows you to integrate the QRCode library.

       

      This is the GitHub repo: https://github.com/StErMi/openui5-qrcode

      And this is the blog post that help you to understand how to build the library and integrate it inside your apps:  https://medium.com/@stermi/openui5-qrcode-an-easy-custom-control-to-render-qr-code-sapui5-openui5-tipoftheday-9cf8eb5748df

      Author's profile photo Prashanth varikuppala
      Prashanth varikuppala

      HI Bollu Spandana,

      Thankyou for creating great,useful Blog, i am trying to integrate QRCode in APP , while I am using

      your code I got an Error in custom.Controller :

      please help me how to fix it.

      THANK YOU IN ADVANCE.

      Author's profile photo Bollu Spandana
      Bollu Spandana
      Blog Post Author

      Hi Former,

       

      I think you didn't give correct ID for generating the new QRcode Image, that's why you are getting that error. please inspect and get the element ID and attach it to your ID, As shown in below.

       

       

      Thank you:)

      Author's profile photo Chandeep Mudigolam
      Chandeep Mudigolam

      Hi Bollu Spandana,

      I am trying to create qr code as per your guide lines. here i am using view button to create qr code. After pressing view button qr code is not created.

      after clicking twice on view button  qr code is created. It is not generated on first click. Let me know please why it is not created on single click.

      Thanks & Regards

      Chandeep

       

      Author's profile photo Simmy Sharma
      Simmy Sharma

      Hi Chandeep,

      Have you got the solution for this?

      I am also facing same issue..QR code is not getting generated in first click..

       

      Best Regards,

      Shilpi

      Author's profile photo Luca Tartaggia
      Luca Tartaggia

      For me it worked fine with the tag Div instead of Image

       <--! to define on XML view dependencies  xmlns:html="http://www.w3.org/1999/xhtml"  -->
      
      <html:div id="divId">
      </html:div>

       

      
      var imgQrCode = new QRCode(document.getElementById(this.getView().byId("divId").getId()), {
      	width: 150,
      	height: 150,
      });
      
      imgQrCode.makeCode("text you want to use");

      With this workaround don't need call Timeout function because it works on first time

      Author's profile photo Rakesh M B
      Rakesh M B

      can you please share source code?

       

      Author's profile photo Rakesh M B
      Rakesh M B

      How did you defined QRCode?

       

      new QRCode

       

      Author's profile photo Chandeep Mudigolam
      Chandeep Mudigolam

      Hi Shilpi,

       

      No, try to give set time out function for 2 sec. I think i will work.

       

      Regards,

      Chamdeep

      Author's profile photo Happy Chhillar
      Happy Chhillar

      Hello Bollu,

      Thank you for this nice blog. Could you help me with qrcode.js file as it is on your private Google drive.

      Thank you in advance.

       

      Regards,

      Happy

      Author's profile photo Bollu Spandana
      Bollu Spandana
      Blog Post Author

      Hi Chhillar,

      Please go through this git link to get the qecode.js file.

      Link: https://github.com/davidshimjs/qrcodejs

      Thank you,

      Spanadana Bollu

       

      Author's profile photo Rakesh M B
      Rakesh M B

      Can someone help me for this issue.. how to define QRcode ?

      Author's profile photo Bollu Spandana
      Bollu Spandana
      Blog Post Author

      Hi Rajesh,

      Once we have integrate the js library to load the library in controller file.

      You can find it from Step 4 in blog please check once.

      Thanks,

      Spandana.

      Author's profile photo Rakesh M B
      Rakesh M B

      I followed same steps but still same issue