SyncFusion signature integration

Answered
0
0

Hi

We are trying to implement a signature control in our transition from VWG to WiseJ.

I used the article https://wisej.com/blog/integration2/ as reference. We are saving the signature string in a database after the signature is captured.

The property “Data” in the below code will have the signature string. Is there a way that we can use saved signature string to load the signature back in the control when the form is loaded.

 

thanks

praveena

public SignatureControl()
{
InitializeComponent();
widget1.BorderStyle = Wisej.Web.BorderStyle.Solid;
widget1.InitScript = $@”this.init = function()
{{
var me = this;

$(this.container).ejSignature
({{
strokeWidth: 3,
isResponsive: true,
width: this.getWidth() + “”px””,
height: this.getHeight() + “”px””,

change: function(e) {{
me.fireWidgetEvent(“”change””, {{lastImage: e.lastImage}});
}}
}});
}}”;
}

 
private void widget1_WidgetEvent(object sender, WidgetEventArgs e)
{
switch (e.Type)
{
case “change”:
OnSignatureChanged(e.Data.lastImage);
break;
}
}

public string Data
{
get;set;
}

private void OnSignatureChanged(string imageData)
{
//this.pictureBox1.Image = ImageFromBase64(imageData);
Data = imageData.Split(‘,’)[1];
}

Thanks

Praveena

 

 

 

  • You must to post comments
Best Answer
0
0

See attached fixed sample.

You cannot call a method on a third party widget when the container is created because the browser loads the javascript libraries asynchronously. In Wisej 2.x there is a Loaded event on the Widget. In any case, it’s enough to fire an event in init() and then check in the javascript function if the widget is initialized and if not, resubmit the call when the event fires.

  • praveena p
    Thank you so much. This helped me to load the saved signature.
  • You must to post comments
0
0

Hi Luca

I modified the project eSigantureSample and attaching it here.

If I call the SetSignature() method from the button_click event, it works fine.

But if I call the method from the main after the form is loaded, you can see the error I mentioned. I just did to mimic the scenario in my environment where the controls are populated after the form is loaded.

Thanks

Praveena

  • You must to post comments
0
0

Hi Luca

Below is the code that i have so far. The “SetSignature” method is called after the form and controls are loaded and when the control data is getting populated from the saved properties. So the base64 string will be passed as a parameter to this method.

I can see the log message “in apply signature”  in the console. And then it gives the attached error.

 

 

public SignatureControl()
{
InitializeComponent();
AllowDrag = false;
Movable = false;
this.AppearanceKey = “fixed-window”;
widget1.BorderStyle = Wisej.Web.BorderStyle.Solid;
widget1.InitScript = $@”this.init = function()
{{
var me = this;
console.log(“”inside init””);
$(this.container).ejSignature
({{
strokeWidth: 3,
isResponsive: true,
width: this.getWidth() + “”px””,
height: this.getHeight() + “”px””,

change: function(e) {{
me.fireWidgetEvent(“”change””, {{lastImage: e.lastImage}});
}}
}});
}}

this.loadSignature = function(data)
{{
var me = this;
console.log(“”in apply siganture””);
var obj = $(this.container).ejSignature(“”instance””); // Create object for signature control
console.log(“”after obj””);
canvas = obj._canvas[0];
context = canvas.getContext(“”2d””);
var img = new Image;
img.src = data; //specify image source
context.clearRect(0, 0, canvas.width, canvas.height); // Clear specified pixel
img.onload = function() {{
context.drawImage(img, 0, 0);
}}
console.log(“”after obj””);
}}”;
}
public void SetSignature(string imageData)
{
this.widget1.Call(“loadSignature”, imageData);
}
private void widget1_WidgetEvent(object sender, WidgetEventArgs e)
{
switch (e.Type)
{
case “change”:
OnSignatureChanged(e.Data.lastImage);
break;
}
}
public string Data { get; set; }

private void OnSignatureChanged(string imageData)
{
Data = imageData?.Split(‘,’)[1];
}

 

Thanks

Praveena

Attachment
  • Luca (ITG)
    Without a test case we cannot help you. For test case we mean a small, runnable sample that we can open in visual studio and run.
  • You must to post comments
0
0

Hi Praveena

If you prefer, the sample case could be send it to supportATwisejDOTcom

Best regards

 

  • You must to post comments
0
0

Hi Paul

Thank you for the update. But if the form and the control is already loaded, then calling the method in InitScript gives error “$ is not defined”. Any suggestions on how can this be fixed.

 

thanks

praveena

 

  • Luca (ITG)
    Attach a test case please. $ is not part of Wisej. Calling the method defined in a InitScript works regardless of a form or control being already loaded.
  • You must to post comments
0
0

Hi Praveena

You could follow the directions in this link: https://help.syncfusion.com/js/signature/how-to#pre-load-signature-image

You can add another method in the InitScript (i.e. applySignature) that takes the URL of the image as an argument.
Then just use this.widget1.Call(“applySignature”, “some/url/.png”)

HTH

Regards

  • You must to post comments
Showing 6 results
Your Answer

Please first to submit.