diff --git a/docs/developers/frontend/admin-styling.rst b/docs/developers/frontend/admin-styling.rst
new file mode 100644
index 0000000000..6371656652
--- /dev/null
+++ b/docs/developers/frontend/admin-styling.rst
@@ -0,0 +1,42 @@
+.. _developers_frontend_admin_styling:
+
+Admin styling
+=============
+Custom styling of admin components can be realized by adding/updating .scss files,
+which are located in ``src/openforms/scss``.
+
+Adding a custom style
+---------------------
+The steps below describe how to add custom styling for a component in the admin, with the
+help of an example ``div`` component:
+
+.. code-block:: html
+
+
+ ...
+
+
+1. Create a new file called ``_component-file-name.scss`` in ``src/openforms/scss/components/admin``,
+ where ``component-file-name`` reflects the class name of the component. For example: ``_json-dump-variables.scss``
+
+2. Add the custom styling. For example:
+
+ .. code-block:: scss
+
+ .json-dump-variables {
+ display: flex;
+
+ @include bem.modifier('horizontal') {
+ align-items: center;
+ gap: 0.5em;
+ }
+ }
+
+3. To ensure it gets picked up, add an import of the file name (without underscore) to the ``_index.scss``
+ file of the parent directory. For example, in ``src/openforms/scss/components/admin/_index.scss``):
+
+ .. code-block:: scss
+
+ ...
+ @import './json-dump-variables';
+ ...
diff --git a/docs/developers/frontend/index.rst b/docs/developers/frontend/index.rst
index 1d28088f91..4ca62bae56 100644
--- a/docs/developers/frontend/index.rst
+++ b/docs/developers/frontend/index.rst
@@ -145,3 +145,12 @@ This script can handle current and future NPM packages published in the
.. _FormatJS: https://formatjs.github.io/
.. _react-intl: https://formatjs.github.io/docs/getting-started/installation
.. _react-intl storybook addon: https://storybook.js.org/addons/storybook-react-intl
+
+
+Topics
+======
+
+.. toctree::
+ :maxdepth: 1
+
+ admin-styling
diff --git a/src/openforms/js/compiled-lang/en.json b/src/openforms/js/compiled-lang/en.json
index 4eb42e76f0..9f47e5745e 100644
--- a/src/openforms/js/compiled-lang/en.json
+++ b/src/openforms/js/compiled-lang/en.json
@@ -2311,6 +2311,12 @@
"value": "Text with (embedded) form field(s)"
}
],
+ "Is9K3/": [
+ {
+ "type": 0,
+ "value": "Add all form variables"
+ }
+ ],
"ItH6EY": [
{
"type": 0,
diff --git a/src/openforms/js/compiled-lang/nl.json b/src/openforms/js/compiled-lang/nl.json
index 45b1bcbacd..b6969d4172 100644
--- a/src/openforms/js/compiled-lang/nl.json
+++ b/src/openforms/js/compiled-lang/nl.json
@@ -2332,6 +2332,12 @@
"value": "Tekst met (ingesloten) formulierveldwaarde(n)"
}
],
+ "Is9K3/": [
+ {
+ "type": 0,
+ "value": "Add all form variables"
+ }
+ ],
"ItH6EY": [
{
"type": 0,
diff --git a/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js b/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js
index 3c545a2f7f..71a16ec384 100644
--- a/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js
+++ b/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js
@@ -1085,7 +1085,7 @@ export const JSONDump = {
options: {
service: 1,
path: 'example/endpoint',
- variables: [],
+ variables: ['firstName', 'lastName', 'foo'],
fixedMetadataVariables: ['form_name', 'form_version', 'public_reference'],
additionalMetadataVariables: ['auth_bsn'],
},
@@ -1097,7 +1097,7 @@ export const JSONDump = {
formDefinition: null,
name: 'First name',
key: 'firstName',
- source: 'user_defined',
+ source: 'component',
prefillPlugin: '',
prefillAttribute: '',
prefillIdentifierRole: '',
@@ -1113,7 +1113,7 @@ export const JSONDump = {
formDefinition: null,
name: 'Last name',
key: 'lastName',
- source: 'user_defined',
+ source: 'component',
prefillPlugin: '',
prefillAttribute: '',
prefillIdentifierRole: '',
@@ -1129,7 +1129,7 @@ export const JSONDump = {
formDefinition: null,
name: 'Attachment',
key: 'attachment',
- source: 'user_defined',
+ source: 'component',
prefillPlugin: '',
prefillAttribute: '',
prefillIdentifierRole: '',
@@ -1140,6 +1140,22 @@ export const JSONDump = {
serviceFetchConfiguration: undefined,
initialValue: '',
},
+ {
+ form: null,
+ formDefinition: null,
+ name: 'Foo',
+ key: 'foo',
+ source: 'user_defined',
+ prefillPlugin: '',
+ prefillAttribute: '',
+ prefillIdentifierRole: '',
+ prefillOptions: {},
+ dataType: 'string',
+ dataFormat: '',
+ isSensitiveData: false,
+ serviceFetchConfiguration: undefined,
+ initialValue: 'Bar',
+ },
],
availableStaticVariables: [
{
@@ -1177,9 +1193,28 @@ export const JSONDump = {
],
},
- play: async ({canvasElement}) => {
+ play: async ({canvasElement, step}) => {
const canvas = within(canvasElement);
await userEvent.click(canvas.getByRole('button', {name: 'Opties instellen'}));
+
+ const modalForm = await screen.findByTestId('modal-form');
+ await expect(modalForm).toBeVisible();
+ const modal = within(modalForm);
+
+ await step('Add form variables', async () => {
+ await expect(...modal.queryAllByText('Attachment')).toBeFalsy(); // Ensure component variable 'Attachment' IS NOT selected
+ await expect(modal.getByText('Foo')).toBeVisible(); // Ensure user-defined variable 'Foo' IS selected
+
+ await userEvent.click(modal.getByRole('button', {name: 'Add all form variables'}));
+ await expect(modal.getByText('Attachment')).toBeVisible(); // Ensure 'Attachment' IS selected
+ await expect(modal.getByText('Foo')).toBeVisible(); // Ensure user-defined variable 'Foo' IS STILL selected
+
+ // Close modal
+ await userEvent.click(modal.getByRole('button', {name: 'Opslaan'}));
+ });
+
+ // Re-open modal for visual regression testing
+ await userEvent.click(canvas.getByRole('button', {name: 'Opties instellen'}));
},
};
diff --git a/src/openforms/js/components/admin/form_design/registrations/json_dump/fields/Variables.js b/src/openforms/js/components/admin/form_design/registrations/json_dump/fields/Variables.js
index 3443561ca6..a15d0a8413 100644
--- a/src/openforms/js/components/admin/form_design/registrations/json_dump/fields/Variables.js
+++ b/src/openforms/js/components/admin/form_design/registrations/json_dump/fields/Variables.js
@@ -1,13 +1,20 @@
import {useField} from 'formik';
-import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {useContext} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
+import {FormContext} from 'components/admin/form_design/Context';
+import {VARIABLE_SOURCES} from 'components/admin/form_design/variables/constants';
+import ActionButton from 'components/admin/forms/ActionButton';
import Field from 'components/admin/forms/Field';
import FormRow from 'components/admin/forms/FormRow';
import VariableSelection from 'components/admin/forms/VariableSelection';
const Variables = () => {
- const [fieldProps] = useField('variables');
+ const intl = useIntl();
+
+ const [fieldProps, , {setValue}] = useField('variables');
+
+ const {formVariables} = useContext(FormContext);
return (
@@ -28,13 +35,31 @@ const Variables = () => {
required
noManageChildProps
>
-
+
+
+
+
{
+ const componentVariables = formVariables.filter(
+ v => v.source === VARIABLE_SOURCES.component
+ );
+ const newVariables = [...fieldProps.value, ...componentVariables.map(v => v.key)];
+ setValue([...new Set(newVariables)]); // Use a Set to ensure they are unique
+ }}
+ />
+