Sharing my JS Item signature field

hotemetoot · December 11, 2025, 4:41pm

Thanks to the new JS items and the AI assistants in Nocobase V2 I was able to design a simple signature component to sign forms using a mouse or finger on a mobile device. The signature is saved as a base64 string in a text field inside you collection, and can be displayed in table and detail blocks.

If anyone is interested the javascript is available here:

github.com

hotemetoot/nocobase/blob/7749a2c41599d972d78d1ca3201a0a90548efc2e/signaturePad

/**
 * JSItemModel – Signature Pad (fixed size, SES-safe, base64)
 */

(function renderSignaturePad() {
  var signatureFieldName = 'signature_image'; // <-- change if needed

  if (!ctx || !ctx.element || !ctx.form) {
    ctx.element.innerHTML =
      '<div style="padding:8px 12px;border-radius:4px;border:1px solid #ff4d4f;color:#ff4d4f;font-size:13px;">' +
      'Signature pad requires form context (ctx.form) to work.' +
      '</div>';
    return;
  }

  // Fixed logical and visual size to avoid layout scaling issues
  var fixedCanvasWidth = 600;   // px
  var fixedCanvasHeight = 220;  // px

  var containerHtml =

This file has been truncated. show original

You can adjust the width and height of the pad as required by changing the fixedCanvasWidth and fixedCanvasHeigth variables.

fabio.costa · December 11, 2025, 6:29pm

Very nice

unclefine · December 12, 2025, 6:38am

If you have the capacity, I hope you can package this JS code into a Nocobase plugin. This capability would make a significant contribution to the world. Thank you!