Signature Field Options

Questions
4

Sorry I haven’t replied before. It’s just that my business just keeps running, and I’m using Bubble to build some stuff on the side, and it isn’t my core business :wink:

To be quite frank with you, I don’t have in-depth knowledge of Javascript myself. I know enough to be dangerous, I always say. I learned how to code in Python and I’m pulling from that knowledge to know what the code does and adjust it. But not enough to really alter it exactly to what I would want.

To answer your questions, Yes. I did throw in some Javascript to create the function “Post”, which I need to send a POST to the Bubble API that I created. The POST method is not something you can call in standard Javascript, so that’s why that first code block is in the HTML field.

The second bit you mention is the actual POST method, that sends the data to the Bubble API. and what it sends is “signaturePad.toDataURL()”, which is the Base64 string of the image of the signature. Since I send that to an API we can put it into a thing and use it inside of Bubble.

And what you said with “The main change I think I’d need to make with this prototype is to figure out how to suppress…” is exactly what I tried with this bit of code:

setTimeout(function (){
signaturePad = new SignaturePad(canvas);
}, 50);

As I try to reset the canvas after save has been pressed. But I didn’t seem to get that to work.

That all being said. After writing the above I did another attempt at making it work, and I think I figured it out :slight_smile:

The code is a LOT messier now, since the HTML A block should NOT be an iFrame. Otherwise this bit of code:

$("button:contains('...edit me...')").click();

can’t ‘virtually click’ the bubble “…edit me…” button. Obviously you can stuff away this button somewhere in a corner. Just make sure it’s “visable” for the HTML. So don’t use the “This element is visible on page load” option to hide it. Or the page won’t know it’s there.

I made the “edit me” button toggle the visibility of the HTML block, but you can obviously make some kind of “popup” appear telling the user that their signature has been saved, or whatever workflow you want to trigger.

This bit of code:

$.ajax({
    url:'https://lenex-test-environment.bubbleapps.io/version-test/api/1.0/wf/receivesignature',
    type:'post',
    data: {signature: signaturePad.toDataURL()}
});

Is the javascript that calls the POST method to send the signature to the Bubble API. In my test app there is an API Key generated, but since everyone can read the Javascript, it wouldn’t be hard to get hold of the key as well. So I suggest you have 1 endpoint that JUSTS handles storing the signature, to make sure you have minimal security risks. Again: I am no expert, I have merely managed to piece some stuff together :slight_smile:

Also make not that I copied the entire SignaturePad Javascript into the HTML A block, as I was having problems loading it in using the <.script> tags. If you can get it to work with the tags, that’d be a lot cleaner :wink:

And last but not least: I added the CSS sheet to the Page header. Edit the page and scroll to the bottom. You will find it there, so that it would be able to load in the header, since the HTML block is no longer an iframed block.

If you have any questions, feel free to shoot me another reply. It’s been fun working this out. I had need of something like this myself, as well. And you gave me the motivation to work something out! :thumbsup:

Disclaimer:
This is most definitely not supported by Bubble. If something breaks they will not be able to help you. :slight_smile:

Credits:
@gurun - Native JS Bridge - two way bridge for Javascript addons in Bubble
Thank you for showing me how to use Javascript to click on Bubble buttons. That definitely made this possible.

Regards,
Olrik

1 Like