React signature canvas

Content Type: Widget
Categories: User Interface

Overview

Signature widget, usable for react-client.

Documentation

Signature Canvas

Capture digital signatures directly in your Mendix application. Users can draw signatures on an interactive canvas using mouse or touch input, and the result is stored as a base64-encoded image in a string attribute.

Features

  • Draw signatures with mouse or touch input
  • Export as PNG or JPEG
  • Load and display previously saved signatures
  • Customizable pen color, background color, and canvas dimensions
  • Clear button to reset the signature
  • Read-only mode support
  • Offline capable
  • On signature end event for triggering microflows/nanoflows
  • React-client

Usage

  1. Place the widget inside a data view with an entity that has a string attribute (unlimited length recommended) to store the signature data.
  2. Configure the Signature Attribute to point to that string attribute.
  3. Optionally customize the appearance and attach an action to the On Signature End event.

The signature is stored as a base64 data URL (e.g. data:image/png;base64,...). To use just the raw base64 string (for example when saving to a System.Image), extract the part after the comma.

Configuration

Data

Property

Type

Required

Description

Signature Attribute

String Attribute

Yes

The attribute that stores the base64-encoded signature data.

Appearance

Property

Type

Default

Description

Pen Color

CSS Color

black

Color of the drawing stroke.

Background Color

CSS Color

white

Background color of the canvas.

Canvas Width

Integer

500

Width of the canvas in pixels.

Canvas Height

Integer

200

Height of the canvas in pixels.

Image Format

Enumeration

png

Output format: png or jpeg.

Events

Property

Type

Required

Description

On Signature End

Action

No

Action to execute after the user finishes drawing.

Issues, Suggestions and Feature Requests

Send a mail to request@lowcodeconnect.nl

Compatibility

  • Mendix 10.21.0 and above
  • Supported platform: Web
  • Offline capable: Yes

based on https://www.npmjs.com/package/react-signature-canvas

Releases