Hi Robbie,

No experience, but what's the problem you're having? Did you read the instructions on README.md? (within the jSignature's source code)

Hi Robbie,
to assign values from JavaScript to variables inside the screen you can use hidden input fields
assign the input field to the screen variable that you want and ste tha value of the input using JavaScript.
If you are able to put the signature into a input field then the variable associated with that input will have the same value.

Regards
Carlos Rocha

Hi Robbie,

Check the FakeNotifyWidget block in RichWidgets.
It avoids the hidden input workaround that Carlos suggested.

Regards,
João Rosado

Thanks Carlos and Joao.

I dont know how to implement the FakeNotifyWidget in this scenario. Could you please explain this to me?

Thanks

Robbie

Hi Guys,

I am still stuck with this issue. Can somebody take a look and see if they can figure out how to communicate with the JS to capture the output varibale data that is the signature.

Thanks

Robbie

Hi Robbie,

It depends on your implementation of the signature javascript / your page.
But the bottom line is, you follow the instructions in the FakeNotidyWidget description.

Then in your javascript code (or on a button onclick...will depend on your page and how you want the interaction) you call in javascript the OsNotifyWidget method.
I gave here a similar sugestion on how to do it on a button.

In the screen action that you associated with the FakeNotidyWidget in your eSpace you can then call NotifyWidgetGetMessage to get the value you passed to OsNotifyWidget.

Regards,
João Rosado

Thanks Joao,

Any chance for a sample?? I cant seem to get it working. 

Any help would be appreciated.

Thanks

Robbie

Not to worry. I got it working. Thank-you to all for their valid and constructive input.

Robbie

There are also a lot of other nice signature capture libs around ...

How to remove the horizontal line in the canvas?

I downloaded Robbie Nati's oml and that's what i'm looking for but there is a horizontal line in the canvas so I want it to be removed but idon't know how 'cause I don't know javascript.

This is really cool, guys! Any chance of sharing it as a component in Forge?

Hey guys.

I've downloaded the OML attached by Robbie onto a 7.0 platform (doing the required upgrade).

After publishing and opening it on the browser, I got the following error in firebug:

Error: We need jQuery for some of the functionality. jQuery is not detected. Failing to initialize...

Any idea how to fix this?

Thanks

Carlos Almeida

Not to worry, I got it working

My problem now is with the FakeNotifyWidget.

I don't know much about JavaScript, nor jQuery, so after I do the NotifyWidgetGetMessage, I don't know how to pass it into the RunJavaScript action that's suposed to give me the code for the image.

"<script>
var $sigdiv = $('#" + DivSignature.Id + "')
$sigdiv.jSignature() // inits the jSignature widget.

// Getting signature as SVG and rendering the SVG within the browser.
// (!!! inline SVG rendering from IMG element does not work in all browsers !!!)
// this export plugin returns an array of [mimetype, base64-encoded string of SVG of the signature strokes]
var datapair = $sigdiv.jSignature('getData', 'svgbase64')
var i = new Image()
i.src = 'data:' + datapair[0] + ',' + datapair[1]
$(i).appendTo($('#" + txtSignature.Id + "') // append the image (SVG) to DOM.
</script>"

This is all from the oml Robbie uploaded.

Anyone, please?

Carlos -

I don't understand the question, what do you mean by " I don't know how to pass it into the RunJavaScript action that's suposed to give me the code for the image."

What are you trying to pass into "RunJavaScript"?

J.Ja

Carlos,

If you want to obtain the signature, you can have a hidden input in your page and use the script you posted to place the contents of datapair[1] (which contains the base64 of the SVG code of the image) into that input. You can then submit the input to the server.

In order to do that, create the input in the page and give it a Name such as SignatureHolder and create a button for triggering the submission and call it SignatureSender. On both widgets, set the Extended Property style to "display:none".

Then modify the script you've posted to, right before the closing tag, do something like

$('#" + SignatureHolder + "').val(datapair[1]); // fill in the data
$('#" + SignatureSender + "').click(); // submit the form

Once the form is submitted, you can obtain the data on the Screen Action that is triggered by the SignatureSender button.
Please verify that the SignatureHolder input has a sufficiently large maximum length, otherwise the base64 of the signature may be truncated, which will cause invalid signature data to be collected.

Cheers,
Miguel

Thanks Miguel :)

Hi Guys,

Just published a component to help you do that.

Check it out: https://www.outsystems.com/forge/component/501/signature/

Cheers,

RG

Just tested this - fantastic!!

Hi,

This works fantastic on 8.0.

I'm trying to create it on 7.0, but got this error Uncaught TypeError: Property '$' of object [object Object] is not a function

Any solution?

Thanks,
Ricardo Brito

Hi Ricardo,

Just include the jQuery (it defines the $) on your app.
The jQuery Goodies component has a webblock that will help to do it (if I'm not wrong).

Let me know if you need further assistance.

Cheers,

RG

Hi all,

Hi Ricardo,

Can you explain (or show us), what you mean by "does not work somehow"?
What's your device?

Cheers,

RG

I take some screenshots from my pc step by step.

1. 

2.

3. Bu if rotate the screen or "Restore Down" on browser...


4. Finnaly i can sign

Can you test this demo.
Let me know if it had the same behaviour.

All good with this demo, but I cannot use this component because it is flash and I'm gonna use the application in ios.

Thanks for your help.

RB

Ricardo,

It is only flash if the browser that you're using doesn't support HTML5 canvas ("Works in all mainstream browsers that support Canvas or Flash"), see docs here.

Hi,

is there a version of this for platform 7?

thanks

No. But it should be fairly easy to convert.

Let me know if you need anything.