Skip to content

Schema Form Dialog

The schemaform dialog in Uhuu enables developers to create interactive forms for editing structured data within the Uhuu editor.

video

Parameters

The editDialog method is configured with the following options for schemaform editing:

  • type (string, required): Set to "schemaform" to enable the JSON Schema-based form dialog.
  • path (string, optional): Specifies the path in the payload where the data is saved after editing. For example,"person".
    • If not provided, the entire payload will be passed as data.
  • schema (object, optional): A JSON Schema object that defines the structure of the form fields.
    • If provided, the form will follow the specified schema.
    • If not provided, Uhuu will automatically generate a schema based on the structure of the data at the specified path in the payload.

Example Setup

Use $uhuu.editDialog to open a schemaform dialog.

javascript
$uhuu.editDialog({ 
  path: "person", 
  type: "schemaform", 
  schema: { 
    "$schema": "http://json-schema.org/draft-07/schema#", 
    "type": "object",
    "properties": {
      "firstName": {
        "title": "First Name",
        "type": "string"
      },
      "lastName": {
        "title": "Last Name",
        "type": "string"
      }
    }
  }
});

This dialog uses JSON Schema to define editable fields and can automatically generate a schema based on the specified data path if no schema is provided.

Automatic Schema Generation

If no schema is provided, Uhuu dynamically generates one based on the data structure at the specified path. This default schema generation allows you to use schemaform dialogs without explicitly defining a schema, simplifying the setup process for straightforward data structures.

For example, if your payload contains:

json
{
  "person": {
    "firstName": "John",
    "lastName": "Doe"
  }
}

Calling $uhuu.editDialog({ path: "person", type: "schemaform" }) will generate a form with fields for firstName and lastName, based on the current structure of the person object.

The schemaform dialog allows users to interact with structured data directly within the Uhuu editor.