AccountForm

The AccountForm component is a dynamic form used for creating or updating an account. It renders form fields based on a provided data model, allowing for flexible account structures. The form can be toggled between “create” and “update” modes based on the presence of an account object.

Usage

Integrate AccountForm by providing it with a resolved data model, an account type, and a submit handler. The component is built on top of @jsonforms/react and handles rendering and state management internally.

import { AccountForm } from '@socotra/ec-react-components';
import { DataModel, AccountResponse } from '@socotra/ec-react-schemas';

// Example Usage
const MyComponent = ({ dataModel, account }: { dataModel: DataModel, account?: AccountResponse }) => {
  const handleSubmit = (data) => {
    console.log('Form submitted:', data);
    // Handle API call to create or update the account
  };

  return (
    <AccountForm
      dataModel={dataModel}
      accountType="personal"
      account={account}
      handleSubmit={handleSubmit}
      submitButtonText={account ? 'Update Account' : 'Create Account'}
    />
  );
};

Props

The component accepts the following props:

State Management

AccountForm manages its state internally using React’s useState hook. It holds the form data in a state variable that is updated by the underlying JsonForms component via its onChange callback. It does not use an external form library like react-hook-form.

Constraint Evaluation

This form supports a powerful constraint evaluation system to create dynamic relationships between fields.

• Purpose: To automatically calculate or update the values of certain fields based on user input in other fields, without requiring a full form submission. For example, selecting a specific “Region” could automatically populate a “Tax Rate” field.
• Activation: The feature is enabled by providing both the dependencyMap and getEvaluatedConstraints props.
• Mechanism:
  1. The dependencyMap tells the form which fields depend on others.
  2. When a user changes a field that is a dependency for another, a useEffect hook is triggered.
  3. This hook calls the getEvaluatedConstraints function with a payload of the changed data.
  4. The backend service evaluates the data and returns a EvaluateConstraintsResponse containing the new values for any dependent fields.
  5. This response is stored in the evaluatedConstraints state, which triggers a re-render.
  6. The dataModelToJSONSchema utility uses this response to update the JSON Schema, making the calculated fields read-only and displaying their new values.

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.