AccountForm
Overview
The AccountForm component is designed for creating or updating accounts within your application. It leverages the react-jsonschema-form (RJSF) framework with a Material-UI theme to provide a dynamic form based on a JSON schema that represents account data models.
This component is highly customizable, allowing for the integration of custom data types and UI schemas to tailor the form according to specific requirements.
Props
accountsModel (AccountConfigRecord): The resolved data model for accounts, containing the configuration and structure of account information to be rendered in the form.
dataTypes (DataTypeConfigRecord): Custom data types used within the accounts model, providing additional specifications for how data should be formatted and validated.
handleSubmit ((data: AccountRequest) => void): Callback function that is called when the form is submitted. It should handle the creation or update of account data based on the form’s input.
uiSchema (UiSchema, optional): A UI schema that allows customization of the form’s UI elements, such as widgets, field order, and layout. For more details, refer to the RJSF UI Schema documentation.
account (AccountResponse, optional): An account object that, if provided, pre-populates the form for updating. When omitted, the form is in creation mode.
hideSubmitButton (boolean, optional): If true, the submit button is not rendered, useful in scenarios where form submission is handled externally.
submitButtonText (string, optional): Custom text for the submit button, defaults to “Submit”.
id (string, optional): Optional ID for the form element, useful for targeting the form in CSS or JavaScript.
Plus, all props from FormProps provided by RJSF, allowing further customization of form behavior, such as live validation, custom field templates, and more.
Usage
// Import style.css anywhere in your application, preferably at the root
import '@socotra/ec-react-components/dist/style.css';
<AccountForm
accountsModel={yourAccountsModel}
dataTypes={yourDataTypes}
handleSubmit={(data) => console.log(data)}
uiSchema={yourCustomUiSchema}
account={optionalAccountToUpdate}
hideSubmitButton={false}
id="yourFormId"
/>
Customization
As this library is styled via shadcn components and tailwind, customization can be achieved by installing shadcn in your project. Follow the installation guide from [shadcn](https://ui.shadcn.com/docs/installation) and adjust your theme using the [theme creator](https://ui.shadcn.com/themes).
Once you install shadcn, or if you are using it already, delete the style.css import to avoid style collisions
Standard Account Form
Creating a New Account
To use the AccountForm for creating a new account, simply provide the accountsModel and dataTypes. The form will render all account types in a dropdown and update the fields depending on the account type selected. The handleSubmit function will receive the AccountRequest as an argument upon form submission.
For more information, see the Accounts API.
Updating an Existing Account
To pre-populate the form with existing account data, pass an account object as a prop. The form will automatically fill in the relevant fields, allowing users to update as necessary.
For more information, see the Accounts API.
Customization
The AccountForm supports extensive customization through the uiSchema prop. Define your UI schema to control the appearance and behavior of form fields, such as hidden fields, custom widgets, and thematic adjustments.
Importantly customizing specific fields requires knowledge of the shape of your data model. For example, to customize the appearance of a specific field, you must know the path to that field in the data model. If the name of the field changes, the UISchema will need to be adjusted to match.
Validation
Validation is handled via AJV (Another JSON Schema Validator) through the @rjsf/validator-ajv8 package. The validation is defined via the data model and automatically enforced by the form. You may adjust the way the form validates by using props provided by RJSF, such as live validation, custom error messages, and more.
Submitting the Form
Control form submission through the handleSubmit prop. This function is invoked with the form data, allowing you to process account creation or updates as needed.
For forms without a visible submit button, external controls must trigger form submission programmatically. An ID can be provided to the form element for targeting in JavaScript or CSS. The form also forwards the ref of the underlying form element, allowing direct access to the form’s methods and properties.