diff --git a/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js b/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js
index 0b573447bd..b1a0a458ff 100644
--- a/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js
+++ b/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js
@@ -1,12 +1,8 @@
-import {useField} from 'formik';
import PropTypes from 'prop-types';
import React, {useContext} from 'react';
import {FormattedMessage} from 'react-intl';
-import Field from 'components/admin/forms/Field';
import Fieldset from 'components/admin/forms/Fieldset';
-import FormRow from 'components/admin/forms/FormRow';
-import {TextInput} from 'components/admin/forms/Inputs';
import ModalOptionsConfiguration from 'components/admin/forms/ModalOptionsConfiguration';
import {
ValidationErrorContext,
@@ -14,26 +10,10 @@ import {
filterErrors,
} from 'components/admin/forms/ValidationErrors';
-
-const RelativeAPIEndpoint = () => {
- // TODO-4098: is this the serializer name?
- const [fieldProps] = useField('relativeApiEndpoint');
- return (
-
-
- }
- >
-
-
-
- );
-};
+// TODO-4098: maybe create separate file (JSONOptionsFormFields) for all the fields?
+// Though, no need to use multiple FieldSets, so adding the fields to the form is pretty
+// straightforward.
+import RelativeAPIEndpoint from './fields/RelativeAPIEndpoint';
const JSONOptionsForm = ({name, label, formData, onChange}) => {
@@ -67,7 +47,7 @@ JSONOptionsForm.propTypes = {
name: PropTypes.string.isRequired,
label: PropTypes.node.isRequired,
formData: PropTypes.shape({
- apiEndpoint: PropTypes.string,
+ relativeApiEndpoint: PropTypes.string,
}),
onChange: PropTypes.func.isRequired,
};
diff --git a/src/openforms/js/components/admin/form_design/registrations/json/fields/RelativeAPIEndpoint.js b/src/openforms/js/components/admin/form_design/registrations/json/fields/RelativeAPIEndpoint.js
new file mode 100644
index 0000000000..66ea4a3c1b
--- /dev/null
+++ b/src/openforms/js/components/admin/form_design/registrations/json/fields/RelativeAPIEndpoint.js
@@ -0,0 +1,30 @@
+import {useField} from 'formik';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import Field from 'components/admin/forms/Field';
+import FormRow from 'components/admin/forms/FormRow';
+import {TextInput} from 'components/admin/forms/Inputs';
+
+
+const RelativeAPIEndpoint = () => {
+ // TODO-4098: is this the serializer name?
+ const [fieldProps] = useField('relativeApiEndpoint');
+ return (
+
+
+ }
+ >
+
+
+
+ );
+};
+
+export default RelativeAPIEndpoint;