DataPropertyForm

The DataPropertyForm component is a dynamic form used for rendering and editing data properties using a provided data model and property schema.

Usage

Integrate DataPropertyForm by providing it with a resolved data model, a data property schema, and initial data. The component manages form state internally and supports both read-only and editable modes.

import { DataPropertyForm } from '@socotra/ec-react-components';
import {
    DataModel,
    FieldConfigRecord,
    PropertyRef,
} from '@socotra/ec-react-schemas';

const MyComponent = ({
    dataModel,
    dataPropertySchema,
    data,
}: {
    dataModel: DataModel;
    dataPropertySchema: FieldConfigRecord;
    data: Record<string, PropertyRef>;
}) => {
    const handleSubmit = (formData: Record<string, PropertyRef>) => {
        console.log('Form submitted:', formData);
        // Handle API call or state update
    };

    return (
        <DataPropertyForm
            dataModel={dataModel}
            dataPropertySchema={dataPropertySchema}
            data={data}
            handleSubmit={handleSubmit}
            submitButtonText='Save Data'
        />
    );
};

Props

Prop

Type

Description

Default

dataModel

DataModel

The resolved data model object containing data types.

Required

dataPropertySchema

FieldConfigRecord

The schema configuration for the data properties to render.

Required

data

Record<string, PropertyRef>

The initial data to display in the form.

Required

handleSubmit

(data: Record<string, PropertyRef>) => void

Callback triggered on form submission.

() => {}

isSubmitting

boolean

When true, disables the form fields and submit button, indicating a submission is in progress.

false

disabled

boolean

Disables the entire form when true.

false

hideSubmitButton

boolean

Hides the submit button when true.

false

validateOnSubmit

boolean

Runs validation on submit and blocks submission if invalid.

false

submitButtonText

string

Custom text for the submit button.

'Submit'

readonly

boolean

Renders the form in read-only mode.

false

id

string

Unique ID for the form wrapper element.

undefined

titles

{ formTitle?: string; truthyLabel?: string; falsyLabel?: string; }

An object to override default labels for parts of the form. See “Labels and Translations” below.

{}

State Management

DataPropertyForm manages its state internally using React’s useState hook. The form data is updated via the onChange callback from the underlying JsonForms component. No external form library is used.

Validation

Form validation is handled by Ajv, a JSON Schema validator.

  • A JSON Schema is dynamically generated from the dataModel prop using the dataModelToJSONSchema utility.

  • Custom validation formats and keywords are added to the Ajv instance.

  • Validation can be configured to run when the user clicks the submit button by setting validateOnSubmit={true}.

  • Error messages are translated into a user-friendly format using the translateError utility.

Labels and Translations

The text for UI labels and validation messages can be customized.

UI Labels

Labels for sections and fields can be overridden by passing a titles object prop.

Key

Description

Default Value

formTitle

Title for the form

''

truthyLabel

Text for a true boolean value

'Yes'

falsyLabel

Text for a false boolean value

'No'