Budibase-Signature-Plugin

Description

A plugin that allows signatures to be created and saved in budibase, this plugin uses text fields to save the data and image fields to see the image

Component Fields

• Name - The name of the component
• Field - The selected text field to store the signature image data
• Label - Default budibase label for forms
• Width - The width of the component, valid inputs are css width attributes
• Height - The height of the component, valid inputs are css height attributes
• Pen Width - Set the pen width, valid values: 1-50
• Pen Colour - The colour of the writing on the canvasm, valid inputs are html colours e.g. Black, #000000, rgb(0, 0, 0)
• Background Colour - The colour of the background, valid inputs are html colours e.g. White, #FFFFFF, rgb(255, 255, 255)
• Save Background Colour - Should the background colour be saved, if unselected the image will save with a transparent background
• Border Outline - The style of the border, set to none for no border
• Border Colour - The colour of the border e.g. Black, #000000, rgb(0, 0, 0)
• Border Thickness - The thickness of the border e.g. Thin, 1px
• Show Clear Signature Button - Do you want to show a button at the top of the signature canvas to allow the end user to clear their signature
• Clear Signature Button Text - The text to display on the clear signature button e.g. ❌, Clear Signature
• Clear Signature Dialog Modal Title - The title text for the clear signature modal e.g. Erase Signature
• Clear Signature Dialog Modal Body Text - The text to display on the dialog prompt when then clear signature button is pressed e.g. This will clear the current signature, do you want to contiune?
• Clear Signature Dialog Modal Action Button Text - The text to display on the action button on the modal e.g. Erase, OK
• Show Clear Signature Button Icon - Show the eraser icon on the clear signature button
• Validation - Make sure a signature is provided
• Signature X line - Make it clear where someone needs to sign

How to display a saved siganture

To display a saved siganture use an image component and set the URL to the text field you used earlier.

Test app

Test app

Find out more about Budibase.