diff --git a/docs/developers/frontend/index.rst b/docs/developers/frontend/index.rst
index 1d28088f91..d8b088b363 100644
--- a/docs/developers/frontend/index.rst
+++ b/docs/developers/frontend/index.rst
@@ -145,3 +145,42 @@ 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
+
+Admin styling
+=============
+Custom styling of admin components can be realized by adding/updating .scss files,
+which are located in ``path/to/open-forms/src/openforms/scss``.
+
+Adding a custom style
+---------------------
+See below for an example on adding custom styling for a ``div`` component in the admin:
+
+.. code-block:: html
+
+
+ ...
+
+
+1. Create a file called ``_json-dump-variables.scss`` in ``../scss/components/admin``
+
+2. Add styling, for example:
+
+ .. code-block:: scss
+
+ .json-dump-variables {
+ display: flex;
+
+ &--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 (in this case ``../scss/components/admin/_index.scss``):
+
+ .. code-block:: scss
+
+ ...
+ @import './json-dump-variables';
+ ...
diff --git a/src/openforms/js/compiled-lang/en.json b/src/openforms/js/compiled-lang/en.json
index 75b04f71e7..32ef48ff35 100644
--- a/src/openforms/js/compiled-lang/en.json
+++ b/src/openforms/js/compiled-lang/en.json
@@ -2305,6 +2305,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 c4b72ebca8..c5d068d972 100644
--- a/src/openforms/js/compiled-lang/nl.json
+++ b/src/openforms/js/compiled-lang/nl.json
@@ -2326,6 +2326,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 bdd11f7084..193f48b6dd 100644
--- a/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js
+++ b/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js
@@ -1029,7 +1029,7 @@ export const JSONDump = {
options: {
service: 1,
path: 'example/endpoint',
- variables: [],
+ variables: ['firstName', 'lastName'],
},
},
],
@@ -1039,7 +1039,7 @@ export const JSONDump = {
formDefinition: null,
name: 'First name',
key: 'firstName',
- source: 'user_defined',
+ source: 'component',
prefillPlugin: '',
prefillAttribute: '',
prefillIdentifierRole: '',
@@ -1055,7 +1055,7 @@ export const JSONDump = {
formDefinition: null,
name: 'Last name',
key: 'lastName',
- source: 'user_defined',
+ source: 'component',
prefillPlugin: '',
prefillAttribute: '',
prefillIdentifierRole: '',
@@ -1071,7 +1071,7 @@ export const JSONDump = {
formDefinition: null,
name: 'Attachment',
key: 'attachment',
- source: 'user_defined',
+ source: 'component',
prefillPlugin: '',
prefillAttribute: '',
prefillIdentifierRole: '',
@@ -1082,6 +1082,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: [
{
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 b06998a6df..8ca2247044 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,17 @@
import {useField} from 'formik';
-import React from 'react';
+import React, {useContext} from 'react';
import {FormattedMessage} from 'react-intl';
+import {FormContext} from 'components/admin/form_design/Context';
+import {VARIABLE_SOURCES} from 'components/admin/form_design/variables/constants';
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 [fieldProps, , {setValue}] = useField('variables');
+
+ const {formVariables} = useContext(FormContext);
return (
@@ -28,16 +32,34 @@ const Variables = () => {
required
noManageChildProps
>
-
+
+
+
+ onAddAllComponentVariables(formVariables, setValue)}
+ >
+
+
+
);
};
+function onAddAllComponentVariables(formVariables, setValue) {
+ const componentVariables = formVariables.filter(v => v.source === VARIABLE_SOURCES.component);
+ setValue(componentVariables.map(v => v.key));
+}
+
export default Variables;
diff --git a/src/openforms/js/lang/en.json b/src/openforms/js/lang/en.json
index 20a972fe60..735c23b2f6 100644
--- a/src/openforms/js/lang/en.json
+++ b/src/openforms/js/lang/en.json
@@ -1084,6 +1084,11 @@
"description": "JSON editor: \"interpolate\" variable source label",
"originalDefault": "Text with (embedded) form field(s)"
},
+ "Is9K3/": {
+ "defaultMessage": "Add all form variables",
+ "description": "JSON registration options 'add all form variables' label",
+ "originalDefault": "Add all form variables"
+ },
"ItH6EY": {
"defaultMessage": "Time",
"description": "data type time",
diff --git a/src/openforms/js/lang/nl.json b/src/openforms/js/lang/nl.json
index d2a973cf30..a1383d73b4 100644
--- a/src/openforms/js/lang/nl.json
+++ b/src/openforms/js/lang/nl.json
@@ -1093,6 +1093,11 @@
"description": "JSON editor: \"interpolate\" variable source label",
"originalDefault": "Text with (embedded) form field(s)"
},
+ "Is9K3/": {
+ "defaultMessage": "Add all form variables",
+ "description": "JSON registration options 'add all form variables' label",
+ "originalDefault": "Add all form variables"
+ },
"ItH6EY": {
"defaultMessage": "Tijd (time)",
"description": "data type time",
diff --git a/src/openforms/scss/components/admin/_index.scss b/src/openforms/scss/components/admin/_index.scss
index 219400399f..1ef7bcc3fe 100644
--- a/src/openforms/scss/components/admin/_index.scss
+++ b/src/openforms/scss/components/admin/_index.scss
@@ -19,6 +19,7 @@
@import './column-field-value';
@import './confirmation-email-template';
@import './variablemapping';
+@import './json-dump-variables';
// Form design UI
@import './select';
diff --git a/src/openforms/scss/components/admin/_json-dump-variables.scss b/src/openforms/scss/components/admin/_json-dump-variables.scss
new file mode 100644
index 0000000000..22e100c63e
--- /dev/null
+++ b/src/openforms/scss/components/admin/_json-dump-variables.scss
@@ -0,0 +1,8 @@
+.json-dump-variables {
+ display: flex;
+
+ &--horizontal {
+ align-items: center;
+ gap: 0.5em;
+ }
+}