Object Data Type

[Chris GNB]

Hi,
Im using the backend services / kendoui and Im trying to save a signature captured using jSignature.js. The capture appears well on screen in the list view but i cant work out how when i save to get the signature data into the backend service. 
Everything else on the form is saved without issue.
If anyone has any ideas on how this can be achieved i would be very grateful.

Thanks Chris

[Anton Dobrev]

Hi Chris,

You can choose between two options for saving the signature in Telerik Backend Services:

• Save the created signature as a picture.
• Save the created signature as a base64 string.

Which one to choose may depend on the jSignature library's import/export specifics and the scenario of your app.

1. Upload the exported signature to the system "Files" installment.

var $sigdiv = $("#signature");
var datapair = $sigdiv.jSignature("getData", "svgbase64");

var file = {
    "Filename": "myfile.svg",
    "ContentType": "image/svg+xml",
    "base64": datapair[1]
};

var el = new Everlive("MyApiKeyHere");

el.Files.create(file,
    function(data) {
        console.log(JSON.stringify(data.result.Uri));
    },
    function(error) {
        alert(JSON.stringify(error));
    });

You will receive the URL of the image in the data.result.URI field.

2. You can create a dedicated content type and save the created signatures as a JSON object:

var $sigdiv = $("#signature");

var datapair = $sigdiv.jSignature("getData", "svgbase64")

 

var obj = {

    "datatype": datapair[0], // backend type "Text"


    "content": datapair[1], // backend type "Text" or "Object"


    "signatureName": "MySignature"


};

 

var el = new Everlive("MyApyKeyHere");

 

var data = el.data('MySignatures');

data.create(obj,

    function(data) {

        console.log(JSON.stringify(data.result.Id));

    },

    function(error) {

        alert(JSON.stringify(error));

    });

You can retrieve an item by using the following snippet:

data.getById('IdOfTheItemHere',
    function(data) {
        var i = new Image()
        i.src = "data:" + data.result.datatype + "," + data.result.content;
        $(i).appendTo($("#signature-container"));
    },
    function(error) {
        alert(JSON.stringify(error));
    });

I hope that this helps. Please, let us know if you have further questions.

Regards,
Anton Dobrev
Telerik

 

 

[Chris GNB]

Thanks that worked a dream.