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 > - +
+ + + +
); }; +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; + } +}