We have already introduced you to our solution for a digital signature for SharePoint documents. In this post we would like to give you more insights into setting the signature position. If you want to have the digital signatures at very specific positions in the PDF, you can now define them with our solution. The creator of a workflow can set the positions for all users in advance. If the creator does not need the exact specification of the positions, the user can set his position himself when it is his turn to sign.

Assignment of the signature position

The creator of a workflow has the possibility to assign the signature positions for all added users. To do this, he can click on the button “Assign position” in the view of the workflow per user. Then we display the document preview and the creator can set the desired position for the related user by clicking on the document.

The creator can assign a position for each user. We also display already assigned signature positions for users in the document preview.

If the creator of the workflow does not want to specify positions for the users, each user can set his own position when it is his turn to sign.

Calculation of the position

We render the document preview in an HTML canvas element. For the canvas we add a click handler, which is called when you click on the canvas. This allows us to calculate the coordinates of the selected position.

<canvas id="canvas" onClick={(ev) => markPosition(ev)}></canvas>
function markPosition(event: any) {
        var rect = canvas.getBoundingClientRect();

        var templateWidth = getTemplateWidth();
        var templateHeight = getTemplateHeight();

        var x0Percent = (event.nativeEvent.layerX - (templateWidth / 2)) / rect.width * 100;
        var y0Percent = (rect.height - event.nativeEvent.layerY - (templateHeight / 2)) / rect.height * 100; 
        // height - value -> because 0/0 in pdf is corner left/bottom

        var x1Percent = x0Percent + (templateWidth / rect.width * 100);
        var y1Percent = y0Percent + (templateHeight / rect.height * 100);

        let newMarkedPosition: SigningPosition = { pageNumber: pageNum, x0: x0Percent, y0: y0Percent, x1: x1Percent, y1: y1Percent };
        renderPage(pageNum, newMarkedPosition);   // Render page again with new marked position
    }

Then we add a marker to the canvas, where the signature will be inserted later.

function drawMarkAtPosition(markedPosition: SigningPosition, particpantTitle?: string) {
        let markText: string = particpantTitle ? `Signatur ${particpantTitle}` : "X";

        var rect = canvas.getBoundingClientRect();
        let x = (markedPosition.x0 / 100) * rect.width;                 
        let y = rect.height - (markedPosition.y0 / 100 * rect.height); 
        
        ctx.fillStyle = "#000000";
        ctx.font = "12px Arial";
        ctx.beginPath();
        ctx.strokeStyle = "black";
        ctx.lineWidth = "1";
        let templateWidth = getTemplateWidth();
        let templateHeight = getTemplateHeight();
        let y1 = rect.height - (markedPosition.y1 / 100 * rect.height); 
        ctx.strokeRect(x, y1, templateWidth, templateHeight);

        // fill canvas with text -> every word on separate line
        var lines = markText.split(' ');
        for (var i = 0; i < lines.length; i++)
            ctx.fillText(lines[i], x, (y-templateHeight) + ((i+1) * 15));
    }

A-Trust Service with determination of the digital signature position

For the digital signature by mobile phone signature we use the interface of the A-Trust service. Using this service, we have the possibility to specify the position for the signature.

public PrepareSignResponse PrepareSignWithPosition(string filename, byte[] content, SigningPosition signingPosition)
        {
            var client = new HandySignaturPdfClient();

            uint page = (uint)signingPosition.PageNumber;
            client.StartSignatureTemplateEx(ApiKey, content, filename, SuccessUrl, ErrorUrl, string.Empty, 4633, "NoLocation", "NoReason",
                signingPosition.X0, signingPosition.Y0, signingPosition.X1, signingPosition.Y1, page, out string ticket, out string redirectUrl);
        }

 

The coordinates of the lower left and the upper right corners must be specified. The coordinates of the lower left corner are set by clicking on the PDF by the user. The correct coordinates of the upper right corner were calculated by us in the code. They are obtained by adding the size of the template of the signature to the lower left corner. The size of the template can be queried by the service.

public TemplateSize GetTemplateSize()
       {
           TemplateSize templateSize = null;

           var client = new HandySignaturPdfClient();

           client.GetTemplate(ApiKey, 4633, out byte[] template);
           string xmlTemplate = Encoding.Default.GetString(template);

           XmlDocument doc = new XmlDocument();
           doc.LoadXml(xmlTemplate);
           var positionNodes = doc.GetElementsByTagName("Position");

           if (positionNodes != null && positionNodes.Count > 0)
           {
               var positionNode = positionNodes[0];
               templateSize = new TemplateSize()
               {
                   Width = Convert.ToDouble(positionNode.Attributes["w"].Value),
                   Height = Convert.ToDouble(positionNode.Attributes["h"].Value)
               };
           }

           return templateSize;
       }

Have we aroused your interest and would you like more information about our solution for digital signature for SharePoint documents? Then please get in touch with us.

Contact