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.