I’m building a form with React JSON Schema Form (RJSF) that contains arrays of items. I need to add a custom feature: a button next to each array item that, when clicked, displays an input field where users can enter a note/memo for that specific item.
For example, in my Authorization schema (which renders as an array of text areas for JWT tokens), I want each token field to have an associated “Add Note” button. When clicked, it should show an input field where users can add a memo about that specific token.
Here’s my current code:
import { RJSFSchema, UiSchema } from '@rjsf/utils';
import { Form as RjsfForm } from '@rjsf/antd';
import validator from '@rjsf/validator-ajv8';
import { App, Button, Tabs } from 'antd';
import { JSX, useEffect, useState } from 'react';
export interface AuthSchema {
id: string;
title?: string;
schema: RJSFSchema;
uiSchema?: UiSchema;
}
export interface RegisterExtractorOptions {
authSchema?: AuthSchema[];
}
// Auth schema definition
const auth = {
authSchema: [
{
id: 'authorization',
title: 'Authorization',
schema: {
type: 'array',
items: {
type: 'string',
pattern: '^[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+$',
},
},
uiSchema: {
items: {
'ui:widget': 'textarea',
},
},
},
{
id: 'account',
title: 'Account',
schema: {
type: 'array',
items: {
type: 'object',
properties: {
username: {
type: 'string',
title: 'Username',
minLength: 5,
pattern: '^[a-z0-9]+$',
},
password: {
type: 'string',
title: 'Password',
minLength: 8,
},
},
required: ['username', 'password'],
},
},
uiSchema: {
items: {
password: {
'ui:widget': 'password',
},
},
},
},
]
};
interface AccountTabProps {
source: SourceInfoClient;
}
function AccountTab({ source }: AccountTabProps): JSX.Element {
return (
<Tabs
tabPosition={'right'}
items={source.authSchema!.map((auth) => {
return {
key: auth.id,
label: auth.title,
children: <TabItem source={source} auth={auth} />,
};
})}
/>
);
}
type TabItemProps = Pick<AccountTabProps, 'source'> & {
auth: AuthSchema;
};
function TabItem({source, auth}: TabItemProps): JSX.Element{
const [formData, setFormData] = useState();
const handleSubmit = async (id: string, event: IChangeEvent): Promise<void> => {
// save data to db
};
useEffect(() => {
// Retrieve data from the database and set it in formData.
}, [auth.id, source.id]);
return (
<RjsfForm
formData={formData}
focusOnFirstError={true}
liveValidate={true}
schema={auth.schema}
uiSchema={auth.uiSchema}
validator={validator}
onSubmit={(e) => handleSubmit(auth.id, e)}
showErrorList={false}
/>
);
}
export default AccountTab;
I’m not sure how to:
- Add a custom “Add Note” button for each array item
- Display an input field when the button is clicked
- Save the notes along with the form data
- Associate each note with its specific array item
I’ve looked into custom field templates and widgets in RJSF, but I’m not sure how to implement this specific functionality. Should I modify the schema to include a note field, or is there a way to add custom UI elements outside the schema definition?
