implement custom schema field

src/components/FunctionForm.tsx

@@ -16,6 +16,8 @@ import validator from '@rjsf/validator-ajv8';
 import React from 'react';
 import { FormEvent } from 'react';
 
+import CustomSchemaField from './SchemaField';
+
 const log = (type: string) => console.log.bind(console, type);
 
 function FunctionForm({
@@ -38,13 +40,20 @@ function FunctionForm({
   if (typeof uiSchema === 'undefined') {
     uiSchema = {};
   }
+  if (schema.uiSchema) {
+    uiSchema = { ...uiSchema, ...schema.uiSchema };
+  }
+
+  // @ts-expect-error:next-line
   uiSchema.func_name = { 'ui:widget': 'hidden' };
   Object.entries(schema.properties).forEach(([prop, attrs]) => {
     // @ts-expect-error:next-line
     if (attrs.is_reporter) {
+      // @ts-expect-error:next-line
       uiSchema[prop] = { 'ui:widget': 'hidden' };
     }
   });
+
   return (
     <>
       <Form
@@ -53,7 +62,7 @@ function FunctionForm({
         validator={validator}
         onSubmit={typeof onSubmit !== 'undefined' ? onSubmit : log('submitted')}
         onError={typeof onError !== 'undefined' ? onError : log('errors')}
-        fields={fields}
+        fields={{ SchemaField: CustomSchemaField, ...(fields ? fields : {}) }}
         widgets={widgets}
         onChange={onChange}
       />

src/components/SchemaField.tsx

+// SPDX-FileCopyrightText: 2025 Helmholtz-Zentrum hereon GmbH
+//
+// SPDX-License-Identifier: Apache-2.0
+
+// @ts-expect-error: importing React is necessary for react@18.2.0
+import React from 'react';
+import { FieldProps } from '@rjsf/utils';
+import { getDefaultRegistry } from '@rjsf/core';
+
+const {
+  fields: { SchemaField },
+} = getDefaultRegistry();
+
+const CustomSchemaField = (props: FieldProps) => {
+  if (props.schema.uiSchema) {
+    const uiSchema = {
+      ...(props.uiSchema ? props.uiSchema : {}),
+      ...props.schema.uiSchema,
+    };
+    return <SchemaField {...props} uiSchema={uiSchema} />;
+  }
+  return <SchemaField {...props} />;
+};
+
+export default CustomSchemaField;