Skip to main content

RBGrid Inline Editors

Overview

  • RBGrid now supports rich inline editors per column, driven by optional schema and user preferences.
  • Editors include enum dropdowns, date/datetime pickers, numeric spinners (min/max), secure blurred fields, reference (QBE) pickers, and large-text editors (Markdown/JSON/YAML).

How It Works

  • Column schema: pass columnSchema to RBGrid as a map of columnKey → schema.
  • Supported schema fields:
    • type: string | number | boolean | date | datetime | enum | object | json | markdown | image
    • enumValues: string[] (required for enum)
    • min/max/step: numeric constraints
    • refType: enables reference picking via onReferencePick
    • secure: when true, renders blurred until clicked (e.g., passwords, api keys)
    • editor: default | markdown | json | yaml | spreadsheet | image
  • User preferences: provide editorPreferences mapping (e.g., WorkflowTable#meta: "json") to force a field editor.

Usage Example

Interactive playgrounds load on the client. Refresh in a browser to edit this lesson.

Behavior

  • Enum: inline <select> with enumValues.
  • Date/Datetime: <input type="date|datetime-local">.
  • Number: <input type="number"> with min/max/step.
  • Secure: value is blurred and click-to-reveal; still respects aspect masking on the backend.
  • Reference/QBE: when refType present and onReferencePick provided, shows a Pick button which calls your handler to choose or create a related object.
  • Large text: if editor preference is markdown|json|yaml, the inline editor uses a multi-line textarea; complex editors (Markdown renderer, Spreadsheet) can be integrated subsequently and toggled by the same preference.

Preferences

  • Store field editor choices under a custom key (e.g., UX:FieldEditors) via UserPreferenceService.setCustomPrefsKey() and feed them into editorPreferences.

Notes

  • Backend SecureField still governs masking/decrypt at the API boundary; the blurred UI is an additional UX safeguard only.
  • For QBE, pass onReferencePick to open your modal or inline picker and return the selected object.