Clone
2
jsonform.js
Chris edited this page 2025-09-20 23:44:44 +00:00
import { JsonForm, TextField, NumberField } from './jsonform.js';

class JsonForm

constructor()

property editable

This is a boolean property that determines whether the form can be edited. If editable is false, the form is view-only; if editable is true, the form becomes editable.

myForm.editable = true; // make form editable
myForm.editable = false; // make form view-only and update the model

property model

This property holds the data model used to populate the form. It should in most cases be an object.

let record = { id: 42, type: "note", description: "This is a note." };
myForm.model = record;

property layout

Access the FormLayout of the form.

dom() → Element

Get the DOM of the form. This can be passed to a new dialog as the body, or appended to an element on the webpage.

const formContainer = document.querySelector('#formcontainer');
formContainer.appendChild(myForm.dom());

class FormLayout

This class can not be created, only accessed via JsonForm.layout.

addRow() → FormRow

let newRow = myForm.layout.addRow();

class FormRow

This class can not be created directly, only via FormLayout.addRow().

append(field) → self

let newRow = myForm.layout.addRow();
newRow.append(new TextField({ label:"Description", path:".description" }));

class Field

Common field options:

  • label - string: the field label
  • path - string: the JSON path in the model for this field
  • locked - bool: make field read-only
  • nullable - bool: assume null for this value if the field is empty

class TextField

class NumberField

  • fixed - int: save the number as a string, with n decimals.
  • float - bool: save the number as a float, unrounded.

Note: If neither fixed or float is set, the value will be saved as an integer.