[Feature] Signature Pad Widget

[rishabhsaxena]

Summary

Widget that allows drawing on canvas using touch or a mouse pointer

Motivation

It could be used as a signature pad input for forms
Should support touch (mobile screens) since that would be a primary use-case

Additional Context

Quoting from discord:

...was wondering if there's a way to have a signature pad... I.e. a place holder where the form user can
scribble a signature especially on a smart phone screen

Front conversations

[Nikhil-Nandagopal]

Another user asked for this today

[dilippitchika]

Another user asked this today

[ame-appsmith]

Another user is interested in this feature. This is the use case:

As a school district, they upload information in fields or in documents for parents to review on their child. When the parent approves of the child's situation (e.g. a special needs track), then the parent signs the form by drawing their signature within a signature box.

[sanjus-robotic-studio]

Hey, will this issue be solved anytime soon

[dilippitchika]

Hey @sanjus-robotic-studio no we haven't been able to prioritise this yet. Could you please let us know your use-case?

[sanjus-robotic-studio]

My use case is just to add a widget to a form which allows the user to sign in order to verify that it was successful approved or verified so.

[BKRademan]

My use case would be an app where a supervisor has to sign their name after an inspection

[dreinon]

Hi! I also need this widget. I think the way of prioritizing this widget has to be different. We can keep on providing use cases, but this widget is as common as a text input widget in any kind of form where being able to prove who filled in the form is compulsory. From then, we can imagine all kind of use cases 😄.

[dilippitchika]

Hi @dreinon thanks for the adding more context here, in this scenario who are your users who actually have to prove that they are the ones who filled this form? Like are you not controlling the users who are using your apps, since login itself is a way to authenticate users.

[dreinon]

@dilippitchika Sorry, forgot to mention that this would provide a proof of the user who filled the form in case the form is public, there wouldn't be any authentication so no user would be available, so we "trust" that who filled in the form is the person whose information is in the form, and we ensure that with a signature. Or sometimes, if that form works as a substitution of a paper form, where you want to be able to generate the paper form filled in with the data filled in by the user in the e-form, signature is also needed.
Thanks!

[dhruvikn]

I picked this up for Hackday on 13 Jan 2023. We have a basic widget ready at #19797. However, this certainly needs more work.

cc: @somangshu @dilippitchika

[somangshu]

We will need to details on what functionalities we need, Based on what is available in the component, can you draft one @dhruvikn? If it looks good with small change, we will see if can actually ship it.

We will need a Design audit and and icon for the widget as well

[dhruvikn]

Surely @somangshu. I'll draft a doc once I get some bandwidth.

[ghost]

Another user asked for this today

[somangshu]

cc @GreenFlux reference for you on this new widget.

[BRM-SMS]

any updates on this? this should be implemented asap, almost every other low-code platforms already have this...

[dhruvikn]

Let me take a look and get back on what we can do to ship this.

[BRM-SMS]

ive managed to use a workaround for this.
Using an iFrame with the script src and send/post messages between the iFrame/Function and Appsmith, so the Signature is saved to a local database.

<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.5/dist/signature_pad.umd.min.js"></script>

any way to load via {{SignaturePad}} instead?

[GreenFlux]

@BRM-SMS that's how I have done it as well.

I haven't found a way to make a signature pad with a library imported into the Appsmith editor. I've only done it using an iframe like the first method you described.

[dilippitchika]

@BRM-SMS are you facing any challenges in the iframe way?

[BRM-SMS]

@dilippitchika

as i said, the only issue im facing, that i cannot load from appsmith library, so i have to use external source

[dilippitchika]

@BRM-SMS

What do you mean by load from appsmith library? Are you saying that you need a native widget or does the iframe method not work for you?

i see you are using a script to fetch signature pad component

<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.5/dist/signature_pad.umd.min.js"></script>

Is this not working for you?

[BRM-SMS]

@dilippitchika

the iframe is working when using the <script src>

my question is: Can we use the {{SignaturePad}} from library, instead of using <script src> ?

[dilippitchika]

We haven't prioritised it as we are redoing all our widgets to make them consistent. Only after we are done upgrading all our current widgets, we will pick up new ones.

[dilippitchika]

We will soon be adding reusability support, which can be used to create an interface on an iframe and use it as a regular widget in your apps

[GreenFlux]

I've posted a tutorial on how to use signaturepad.js in an iframe:
https://community.appsmith.com/tutorial/building-signature-capture-widget-iframe-and-signaturepadjs

[bigfinaleeeeeeee]

This is a deciding factor for using Appsmith over other tools like Retool. Having this without going through the coding route is tedious and against the low-code environment. We would use this to get our clients to fill out application forms and expedite getting them to sign it
Very important, i hope this gets more attetion

[Nikhil-Nandagopal]

We recently launched our custom widget which allows you to create a signature pad!
Check out the post below where you can fork the widget and start using it.
https://community.appsmith.com/template/signature-pad