Signature capture does not work from Fiori Launchpad

[former_member188396]

HI,

We have a requirement to add Signature capture option in the Fiori application. I have referred different links out here in the forums on how to implement it.

Some of those are below:

https://blogs.sap.com/2017/05/31/sapui5-digital-signature-pad/

https://archive.sap.com/discussions/thread/3533708

I have developed the application in WebIDE utilizing the SAPUI5 template.

It works perfectly fine when I do test as Web Application (using index.html)

But, as soon as I try to run as App in the Fiori launchpad, I can see the canvas. But when I try to draw signature in the canvas, nothing is happening.

In debug, I could see that JS files are getting loaded on the browser but no mouse down or other events being triggered except Mouse Up.

Can someone help what needs to be changed to make it run within Fiori Launchpad?

Thanks,

Bhavik

[former_member188396 · Accepted solution]

Hi,

Finally after lot of debugging, I finally could resolve this issue by myself. Pasting the solution here so that others can benefit it from.

In Signature.js file (which is a JS file for the custom control) there is a method named: "activate" Below was the code...

activate: function(){
    	var canvas = document.querySelector("canvas");
    	try
    	{
    		this.signaturePad = new SignaturePad(canvas);
    	}
    	catch(e) {
    		console.error(e);
    	}
       },

This method is being called from the onAfterRendering method of the controller where this custom control is being used. In this method, there was a code to find the DIV element for the canvas. Once element is found, it creates the SignaturePad object which in turn calls another signature_pad.js file.

Now, in this activate method, there was a assumption that there is ONLY one canvas div element exists in the application. Because of that if you have plain SAPUI5 application with ONLY one signature pad, it works fine. However, when we run our application from Fiori Launchpad, there are other canvas div elements found before even our application gets loaded. As, code was using "querySelector" method for document object, it was returning first div element found for "canvas".

In order to find right canvas element for our sign pad, activate method code need to be updated with below code.

activate: function(){
    	var canvasList = document.querySelectorAll("canvas");
    	var canvas;
    	for(var i=0; i< canvasList.length; i++)
    	{
    		if(canvasList[i].id.indexOf("signpad") !== -1)
    		{
    			canvas = canvasList[i];
    		}
    	}
    	try
    	{
    		this.signaturePad = new SignaturePad(canvas);
    	}
    	catch(e) {
    		console.error(e);
    	}
       },

In above code, we are calling "querySelectorAll" method of document to get all matching canvas div elements. Now, we are looping through all the elements and checking the ID to see which one is our. In our case, ID for Signature element added in our View was with name "signpad". So, with above code, if you first find correct element, then drawing on the canvas will work fine.

In summary, just replace activate method code given above (obviously change the "indexOf" method parameter to match with the ID given for your signature element on the View.) and it will start working fine for you in Fiori launchpad as well.

I hope this helps.

Thanks,

Bhavik

[former_member188396]

Another link which I followed were: https://archive.sap.com/discussions/thread/3737268

https://blogs.sap.com/2017/07/12/custom-control-for-digital-signature/

-Bhavik

[raghuramsun]

Hi!! Bhavik,

Is the issue resolved with SAP UI5 Digital Signature? Could you please share the points with me. I am also working on same requirement Digital Signature.

It would help me.

@ raghurn15@gmail.com

Thanks in Advance.