Skip to Content

how to develop digital signature in sap ui5 master-Detail template?

Hi Experts,

I have one requirement, digital signature on master-detail template.

can you please share some code for that development

I used this link

https://blogs.sap.com/2017/05/31/sapui5-digital-signature-pad/ it's working fine on eclipse views and web ide index.html file. but it could not worked on web ide views please give me suggestions.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

6 Answers

  • Best Answer
    May 14 at 08:28 PM

    Hi,

    Did you get any success to make it work? For me also, it worked from WebIDE as running with index.html. But, when I run it through Fiori launchpad, it is not working.

    -Bhavik

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 20 at 10:06 AM

    I got Solution for above Question, please find

    In Xml View
    	<f:SimpleForm id="signature" editable="true" layout="ResponsiveGridLayout" title="Manager's Signature:" labelSpanXL="4" labelSpanL="4"
    					labelSpanM="4" labelSpanS="12" adjustLabelSpan="true" emptySpanXL="0" emptySpanL="0" emptySpanM="0" emptySpanS="0" columnsXL="3"
    					columnsL="2" columnsM="2" singleContainerFullSize="true">
    					<f:content>
    						<!--<core:Title text="Manager's Signature:"/>-->
    						
    							<VBox>
    									<core:HTML id="html"></core:HTML>
    								</VBox>
    								<VBox>
    									<HBox>
    									
    										<Button id="Signature" text="Signature" press="onSign"></Button>
    										<!--<Button id="Save" text="Save" press="saveButton"></Button>-->
    										<Button id="clear" text="Clear" press="clearButton"></Button>
    									</HBox>
    								</VBox>
    					
    						<!--<u:FileUploader id="UploadCollection" name="myFileUpload" width="400px" tooltip="Upload your file to the local server"-->
    						<!--change="onChange"	uploadComplete="handleUploadComplete"/>-->
    			
    						<!--			<Image id="imgPreviewForm1" width="100px" height="80px" visible="true" src=""></Image>-->
    					
    					</f:content>
    				</f:SimpleForm>
    
    In Controller:
    
    	onInit: function() {
    			debugger;
    			this.getView().byId("html").setContent("<canvas id='signature-pad' width='400' height='200' class='signature-pad'></canvas>");
    			
    		},
    
    	// /******************Signature Pad Draw************************/
    		onSign: function(oEvent) {
    			var canvas = document.getElementById("signature-pad");
    			var context = canvas.getContext("2d");
    			canvas.width = 300;
    			canvas.height = 200;
    			context.fillStyle = "#F0FFFF";
    			context.strokeStyle = "#444";
    			context.lineWidth = 1.5;
    			context.lineCap = "round";
    			context.fillRect(0, 0, canvas.width, canvas.height);
    			var disableSave = true;
    			var pixels = [];
    			var cpixels = [];
    			var xyLast = {};
    			var xyAddLast = {};
    			var calculate = false; { //functions
    				function remove_event_listeners() {
    					canvas.removeEventListener('mousemove', on_mousemove, false);
    					canvas.removeEventListener('mouseup', on_mouseup, false);
    					canvas.removeEventListener('touchmove', on_mousemove, false);
    					canvas.removeEventListener('touchend', on_mouseup, false);
    					document.body.removeEventListener('mouseup', on_mouseup, false);
    					document.body.removeEventListener('touchend', on_mouseup, false);
    				}
    				function get_coords(e) {
    					var x, y;
    					if (e.changedTouches && e.changedTouches[0]) {
    						var offsety = canvas.offsetTop || 0;
    						var offsetx = canvas.offsetLeft || 0;
    						x = e.changedTouches[0].pageX - offsetx;
    						y = e.changedTouches[0].pageY - offsety;
    					} else if (e.layerX || 0 == e.layerX) {
    						x = e.layerX;
    						y = e.layerY;
    					} else if (e.offsetX || 0 == e.offsetX) {
    						x = e.offsetX;
    						y = e.offsetY;
    					}
    					return {
    						x: x,
    						y: y
    					};
    				};
    				function on_mousedown(e) {
    					e.preventDefault();
    					e.stopPropagation();
    					canvas.addEventListener('mouseup', on_mouseup, false);
    					canvas.addEventListener('mousemove', on_mousemove, false);
    					canvas.addEventListener('touchend', on_mouseup, false);
    					canvas.addEventListener('touchmove', on_mousemove, false);
    					document.body.addEventListener('mouseup', on_mouseup, false);
    					document.body.addEventListener('touchend', on_mouseup, false);
    					var empty = false;
    					var xy = get_coords(e);
    					context.beginPath();
    					pixels.push('moveStart');
    					context.moveTo(xy.x, xy.y);
    					pixels.push(xy.x, xy.y);
    					xyLast = xy;
    				};
    				function on_mousemove(e, finish) {
    					e.preventDefault();
    					e.stopPropagation();
    					var xy = get_coords(e);
    					var xyAdd = {
    						x: (xyLast.x + xy.x) / 2,
    						y: (xyLast.y + xy.y) / 2
    					};
    					if (calculate) {
    						var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
    						var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
    						pixels.push(xLast, yLast);
    					} else {
    						calculate = true;
    					}
    					context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
    					pixels.push(xyAdd.x, xyAdd.y);
    					context.stroke();
    					context.beginPath();
    					context.moveTo(xyAdd.x, xyAdd.y);
    					xyAddLast = xyAdd;
    					xyLast = xy;
    				};
    				function on_mouseup(e) {
    					remove_event_listeners();
    					disableSave = false;
    					context.stroke();
    					pixels.push('e');
    					calculate = false;
    				};
    				canvas.addEventListener('touchstart', on_mousedown, false);
    				canvas.addEventListener('mousedown', on_mousedown, false);
    			}
    		},
    
    Add comment
    10|10000 characters needed characters exceeded

  • Aug 20 at 10:23 AM

    Hi Lakshman,

    Signature is working fine.Can you please send me clear functionality.

    Thanks & Regards,

    Priyanka.G

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 20 at 10:40 AM

    Hi Lakshma,

    Thank you for your response.It is working fine.

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 20 at 10:27 AM

    Hi Priyanka,

    Please use below source in your clear functinality.

    		
    			var canvas = document.getElementById("signature-pad");
    			var context = canvas.getContext("2d");
    			context.clearRect(0, 0, canvas.width, canvas.height);
    
    
    Add comment
    10|10000 characters needed characters exceeded

  • Aug 20 at 10:46 AM
    Add comment
    10|10000 characters needed characters exceeded