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 b1a0a458ff..8d74b07d70 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
@@ -13,12 +13,21 @@ import {
// 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 FormVariablesSelect from './fields/FormVariablesSelect';
import RelativeAPIEndpoint from './fields/RelativeAPIEndpoint';
+// import Service from './fields/Service';
const JSONOptionsForm = ({name, label, formData, onChange}) => {
const validationErrors = useContext(ValidationErrorContext);
const relevantErrors = filterErrors(name, validationErrors);
+
+ const formVariableOptions = [
+ {value: "1", label: "One"},
+ {value: "2", label: "Two"},
+ {value: "3", label: "Three"},
+ ]
+
return (
{
>
@@ -48,6 +59,7 @@ JSONOptionsForm.propTypes = {
label: PropTypes.node.isRequired,
formData: PropTypes.shape({
relativeApiEndpoint: PropTypes.string,
+ formVariables: PropTypes.arrayOf(PropTypes.string),
}),
onChange: PropTypes.func.isRequired,
};
diff --git a/src/openforms/js/components/admin/form_design/registrations/json/fields/FormVariablesSelect.js b/src/openforms/js/components/admin/form_design/registrations/json/fields/FormVariablesSelect.js
new file mode 100644
index 0000000000..544c7a6d9f
--- /dev/null
+++ b/src/openforms/js/components/admin/form_design/registrations/json/fields/FormVariablesSelect.js
@@ -0,0 +1,60 @@
+import {useField} from 'formik';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+import Field from 'components/admin/forms/Field';
+import FormRow from 'components/admin/forms/FormRow';
+import ReactSelect from 'components/admin/forms/ReactSelect';
+
+const FormVariablesSelect = ({options}) => {
+ const [fieldProps, , fieldHelpers] = useField('formVariables');
+ const {setValue} = fieldHelpers;
+
+ // TODO-4098: what does this do?
+ const values = [];
+ if (fieldProps.value && fieldProps.value.length) {
+ fieldProps.value.forEach(item => {
+ const selectedOption = options.find(option => option.value === item);
+ if (selectedOption) {
+ values.push(selectedOption);
+ }
+ });
+ }
+
+ return (
+
+
+ }
+ >
+ {
+ setValue(newValue.map(item => item.value));
+ }}
+ />
+
+
+ );
+};
+
+FormVariablesSelect.propTypes = {
+ options: PropTypes.arrayOf(
+ PropTypes.shape({
+ value: PropTypes.string.isRequired,
+ label: PropTypes.node.isRequired,
+ })
+ ).isRequired,
+};
+
+export default FormVariablesSelect;
diff --git a/src/openforms/js/components/admin/form_design/registrations/json/fields/Service.js b/src/openforms/js/components/admin/form_design/registrations/json/fields/Service.js
new file mode 100644
index 0000000000..0bcf5f0f2f
--- /dev/null
+++ b/src/openforms/js/components/admin/form_design/registrations/json/fields/Service.js
@@ -0,0 +1,5 @@
+const Service = () => {
+ return "asdf"
+}
+
+export default Service