Allow object key/value pairs to be added in the form

[kuhlaid]

Prerequisites

• I have read the documentation

What theme are you using?

core

Is your feature request related to a problem? Please describe.

I manage metadata for data tables generated from research surveys. Many variables of the data tables are categorical data, so a data value of "1" may represent "Yes". The number of keys and values varies wildly but I simply use strings for both key and value for simplicity (as there are other ways to define if the key/value pairs are numeric, string, etc. using other schema elements). An example of variable/columns with categorical data might be the following (where 'category' represents the data possibilities):

{
      "name": "E03PASKR",
      "surveyQuestion": "On MOST days of ANY ONE MONTH in the LAST 12 MONTHS did you have pain, aching, or stiffness in any of the following? Please rate as none, mild, moderate, or severe. - Right - Knee",
      "label": "Right Knee - pain, aching, or stiffness on MOST days of ANY ONE MONTH in the LAST 12 MONTHS",
      "source": "Online survey",
      "value": {
         "format": "categorical",
         "dataType": "Int64",
         "unique": "False",
         "category": {
            "0": "None",
            "1": "Mild",
            "2": "Moderate",
            "3": "Severe",
            "888": "No response"
         }
      }
   }

My schema typically looks like:

"category": {
  "title": "Categorical variable",
  "description": "For categorical variables, this value lists the numeric values and their labels.",
  "type": "object",
  "patternProperties": {
    "^.*$": {
      "type": "string"
    }
  }
}

It would be useful if the jsonschema form would allow a user to create object key/value string pairs of data. This would be similar to how arrays are handled in the form I'm assuming. Validation of patternProperties would likely be a nightmare so I'm not asking for that.

I had thought of splitting out my category keys and values into separate arrays, but I cannot have the keys and values disassociating from one another as they are explicitly linked together, so the possibility of the keys or values getting out of order in the arrays is preventing that approach.

Describe the solution you'd like

Instances of the following would trigger the form to allow the user to add string key/value pairs to a data object. No validation would be triggered. This would be a good starting point for addressing the need for key/value data pairs in the form.

  "patternProperties": {
    "^.*$": {
      "type": "string"
    }
  }

The form elements would function like an array with a new item button at the least (ordering would be nice). Instead on one field per item there would be two with maybe a simple format of the following per item (where the underlines represent data fields):

____________ : ____________

Describe alternatives you've considered

Again, I considered separate key/value arrays for my categorical data but the most important thing is that the key/value pair remain paired together. So separating the pairs into individual arrays can lead to data being mislabeled.

[heath-freenome]

@kuhlaid Give the highly configurable nature of RJSF, you could create your own custom Field to do what you need. Off the top of my head I'm not quite sure how to go about implementing this. If you run into any issues in doing this, do reach out.

[kuhlaid]

Thank you @heath-freenome, this is good to know. This looks like a good starting point for working out a solution. I will close this feature request until myself or someone else has the bandwidth to hack away at a solution.

[Dimfred]

@kuhlaid would really be interested in your solution, have a very similar issue, just with a more complex inner type.

[Dimfred]

For anyone stumbling upon this. Generated by claude, so take it with a grain of salt.

Custom Component:

import React from "react";
import { FieldProps, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils";
import validator from "@rjsf/validator-ajv8";
import Form from "@rjsf/core";

interface DynamicEntry {
  key: string;
  value: any;
}

const DynamicPatternField = <
  T = any,
  S extends StrictRJSFSchema = RJSFSchema,
  F extends FormData = any,
>({
  schema,
  uiSchema,
  formData,
  onChange,
  registry,
}: FieldProps<T, S, F>) => {
  console.debug("DynamicPatternField: schema", schema);

  const valueSchema = schema.patternProperties?.[".*"] || {};
  const [entries, setEntries] = React.useState<DynamicEntry[]>(() => {
    return Object.entries(formData || {}).map(([key, value]) => ({
      key,
      value,
    }));
  });

  const handleAdd = () => {
    setEntries([...entries, { key: "", value: undefined }]);
  };

  const handleRemove = (index: number) => {
    const newEntries = entries.filter((_, i) => i !== index);
    setEntries(newEntries);
    updateFormData(newEntries);
  };

  const handleKeyChange = (index: number, newKey: string) => {
    const newEntries = entries.map((entry, i) =>
      i === index ? { ...entry, key: newKey } : entry,
    );
    setEntries(newEntries);
    updateFormData(newEntries);
  };

  const handleValueChange = (index: number, newValue: any) => {
    const newEntries = entries.map((entry, i) =>
      i === index ? { ...entry, value: newValue } : entry,
    );
    setEntries(newEntries);
    updateFormData(newEntries);
  };

  const updateFormData = (newEntries: DynamicEntry[]) => {
    const newFormData = newEntries.reduce(
      (acc, { key, value }) => {
        if (key) {
          acc[key] = value;
        }
        return acc;
      },
      {} as Record<string, any>,
    );

    onChange(newFormData);
  };

  return (
    <div className="dynamic-pattern-field">
      {entries.map((entry, index) => (
        <div key={index} className="dynamic-entry flex gap-2 mb-4">
          <input
            type="text"
            value={entry.key}
            onChange={(e) => handleKeyChange(index, e.target.value)}
            placeholder="Enter key"
            className="border p-2 rounded"
          />
          <div className="flex-1">
            <Form
              schema={valueSchema as RJSFSchema}
              formData={entry.value}
              onChange={(e) => handleValueChange(index, e.formData)}
              uiSchema={uiSchema?.[".*"]}
              registry={registry}
              validator={validator}
            >
              <></>
            </Form>
          </div>
          <button
            onClick={() => handleRemove(index)}
            className="bg-red-500 text-white px-3 py-1 rounded"
          >
            Remove
          </button>
        </div>
      ))}
      <button
        onClick={handleAdd}
        className="bg-blue-500 text-white px-3 py-1 rounded"
      >
        + Add Field
      </button>
    </div>
  );
};

export default DynamicPatternField;

Usage

const fields = {
  ObjectField: DynamicPatternField,
};

<Form schema={activeSchema} validator={validator} fields={fields} />