Signature widget not supported in React client – recommended approach?

0
Hi all,We are currently working on a Mendix 11 application with the React client enabled.We need to implement a signature capture feature, but the available Signature widget is not supported in the React client.We explored the following options:Using Migration mode, but the widget shows as unsupported in the UIDisabling the React client, which allows the widget to work, but introduces concerns around performance and future compatibilityBefore proceeding, we would like to understand the recommended approach from the community:Are there any React-compatible signature widgets available that we might have missed?Is it advisable to temporarily disable the React client for such use cases in production?Has anyone implemented a custom signature widget using the pluggable widget framework (React)? Any guidance or references would be helpful.Is there any official plan or roadmap to make the current Signature widget compatible with the React client?We want to ensure that the solution is aligned with Mendix best practices and future roadmap.Thanks in advance!
asked
3 answers
1

For a Mendix 11 app, I would not recommend disabling the React client just to support one legacy widget.


I'm sure that, in Mendix 11, the React client is the default for new apps, and the legacy Dojo client is deprecated. Mendix also states that Dojo-based widgets do not work in the React client. In migration mode they are only replaced by placeholders so the app can still build, which is useful for transition, but not a real production solution.


So for your specific case, the most future-proof approach is: build or adopt a React/pluggable signature widget. :)


Mendix positions pluggable widgets as the successor to custom widgets, and for web they are React-based. That makes a custom pluggable widget the cleanest long-term solution for a signature use case in a React-client application.


About the current Marketplace Signature widget: the official widget documentation describes how it works, but I could not find evidence in the current Mendix docs that it is React-client compatible. More broadly, Mendix explicitly says that not all Marketplace components are React-ready yet and refers developers to the React status documentation to verify support.


So my recommendation would be:


Use the React client and keep your architecture aligned with Mendix 11.

Do not rely on migration mode as a production workaround.

Do not switch the whole app back to Dojo for this one feature unless this is only a very short-lived temporary fallback and you fully accept the migration debt.

Prefer a custom pluggable web widget wrapping a standard React signature library and storing the result in Mendix as an image or base64, depending on your model.


If this resolves your question, please mark it as accepted.


answered
1

Hi,


In Mendix 11 (React client), legacy Dojo-based widgets like the Signature widget are not supported, and this is by design. Migration mode is only meant for transition and should not be relied on for production use.

Recommended and working approach: build a pluggable widget using a JS signature library.

1. Use a pluggable widget with signature_pad

This is the most common and proven approach in the community.

  • Create a pluggable widget (React)
  • Integrate a library like signature_pad inside the widget
  • Render a <canvas> and capture the signature

2. Store the signature in Mendix

Convert the canvas to Base64:


const dataUrl = canvas.toDataURL("image/png");

Then:

  • Either store as Image (System.Image) using a nanoflow/JS action
  • Or store as String (Base64) and convert server-side if needed

Recommended: store as System.Image for better compatibility

3. Pass data back to Mendix

In your widget:

  • Use a property bound to an attribute
  • Set the Base64 string or trigger a nanoflow to store the image

4. Why this works (and is recommended)

  • Fully compatible with React client
  • No dependency on legacy widgets
  • Used in multiple real projects (community approach)
  • Future-proof with Mendix roadmap

5. What to avoid

  • Do not disable React client in production
  • Do not rely on migration mode
  • Avoid HTMLSnippet hacks for long-term solutions

6. Alternative (if you don’t want full widget dev)

A lighter working option:

  • Use HTMLSnippet + signature_pad CDN
  • Capture Base64
  • Send via nanoflow → JS action → store as Image

This works, but is less clean than a proper pluggable widget.



The only robust and production-ready solution today is to implement a custom React-based pluggable widget using a library like signature_pad, and store the result as a Mendix Image. This aligns with Mendix 11 architecture and avoids all compatibility issues.

answered
0

I built a React widget for it https://marketplace.mendix.com/link/component/259503 . It is somewhat more work because the base64 encoded string should be passed to Community Commons's Base64DecodeToFile.

answered