appsmith
appsmith copied to clipboard
appsmithorg
[Feature] Signature Pad Widget
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
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.
Hey @sanjus-robotic-studio no we haven't been able to prioritise this yet. Could you please let us know your use-case?
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.
My use case would be an app where a supervisor has to sign their name after an inspection
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 😄.
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.
@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!
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
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
any updates on this? this should be implemented asap, almost every other low-code platforms already have this...
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/[email protected]/dist/signature_pad.umd.min.js"></script>
any way to load via {{SignaturePad}} instead?
@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
as i said, the only issue im facing, that i cannot load from appsmith library, so i have to use external source
@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
Is this not working for you?
@dilippitchika
the iframe is working when using the
my question is: Can we use the {{SignaturePad}} from library, instead of using
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.
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
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
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
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