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

[S0024873964]

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.

[former_member188396 · Accepted solution]

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

[S0024873964 · Accepted solution]

Hi Bhavik,

I got Solution for this.
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" class="sapUiSmallMarginTopBottom" 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);
			}


		},

[S0024873964 · Accepted solution]

You can use above code

[former_member590035]

https://answers.sap.com/answers/606340/view.html

[former_member590035]

Hi Lakshma,

Thank you for your response.It is working fine.

[S0024873964]

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);

[former_member590035]

Hi Lakshman,

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

Thanks & Regards,

Priyanka.G

[S0024873964]

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);
			}
		},