Skip to content

Commit

Permalink
🚸 [#4969] Improve form tab UX - introduction page vs explanation
Browse files Browse the repository at this point in the history 
Separate the fields for the introduction page content and the form
explanation content on the start page.

The introduction page is optional, and that's highlighted by putting it
in a collapsed fieldset, separated from the explanation template on
the start page.
  • Loading branch information
@sergei-maertens
sergei-maertens committed Jan 2, 2025
1 parent 8a0e7c2 commit 172babf
Show file tree
Hide file tree
Showing 5 changed files with 216 additions and 139 deletions.
36 changes: 24 additions & 12 deletions src/openforms/js/compiled-lang/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2897,6 +2897,12 @@
"value": "Zaaktype status code for newly created zaken in StUF-ZDS"
}
],
"P7Wd+/": [
{
"type": 0,
"value": "Content"
}
],
"PC7ICN": [
{
"type": 0,
Expand Down Expand Up @@ -3239,12 +3245,24 @@
"value": "Static variables"
}
],
"ShUATL": [
{
"type": 0,
"value": "Explanation"
}
],
"SjbNyf": [
{
"type": 0,
"value": "Add variable"
}
],
"SlvZKo": [
{
"type": 0,
"value": "You can (optionally) configure an introduction page shown before the form start page. Leave the content field blank to disable this page - users will then immediately go to the start page."
}
],
"Su4nqf": [
{
"type": 0,
Expand Down Expand Up @@ -3863,12 +3881,6 @@
"value": "Content of the registration email message (as html)."
}
],
"Z5lydZ": [
{
"type": 0,
"value": "Introduction page"
}
],
"Z8f4hI": [
{
"type": 0,
Expand Down Expand Up @@ -4337,6 +4349,12 @@
"value": "Remove item"
}
],
"d6q6wz": [
{
"type": 0,
"value": "Introduction page"
}
],
"dD9O3Q": [
{
"type": 0,
Expand Down Expand Up @@ -4415,12 +4433,6 @@
"value": "When the form component"
}
],
"ddR92A": [
{
"type": 0,
"value": "Explanation template"
}
],
"deoN5r": [
{
"type": 0,
Expand Down
36 changes: 24 additions & 12 deletions src/openforms/js/compiled-lang/nl.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2914,6 +2914,12 @@
"value": "Zaakstatuscode voor de nieuw aan te maken zaak."
}
],
"P7Wd+/": [
{
"type": 0,
"value": "Inhoud"
}
],
"PC7ICN": [
{
"type": 0,
Expand Down Expand Up @@ -3252,12 +3258,24 @@
"value": "Vaste variabelen"
}
],
"ShUATL": [
{
"type": 0,
"value": "Toelichting"
}
],
"SjbNyf": [
{
"type": 0,
"value": "Variabele toevoegen"
}
],
"SlvZKo": [
{
"type": 0,
"value": "Je kan (optioneel) een extra introductiepagina instellen die vóór de startpagina getoond wordt. Laat de inhoud leeg om deze pagina uit te schakelen - gebruikers komen dan meteen op de startpagina uit."
}
],
"Su4nqf": [
{
"type": 0,
Expand Down Expand Up @@ -3876,12 +3894,6 @@
"value": "Inhoud van de registratiemail (HTML)."
}
],
"Z5lydZ": [
{
"type": 0,
"value": "Introductiepagina"
}
],
"Z8f4hI": [
{
"type": 0,
Expand Down Expand Up @@ -4355,6 +4367,12 @@
"value": "Item verwijderen"
}
],
"d6q6wz": [
{
"type": 0,
"value": "Introductiepagina"
}
],
"dD9O3Q": [
{
"type": 0,
Expand Down Expand Up @@ -4433,12 +4451,6 @@
"value": "Als de formuliercomponent"
}
],
"ddR92A": [
{
"type": 0,
"value": "Toelichtingssjabloon"
}
],
"deoN5r": [
{
"type": 0,
Expand Down
223 changes: 128 additions & 95 deletions src/openforms/js/components/admin/form_design/FormDetailFields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,63 @@ import TinyMCEEditor from './Editor';
import LanguageTabs from './LanguageTabs';
import {slugify} from './utils';

const IntroductionPageFields = ({translations, onChange}) => (
<Fieldset
title={
<FormattedMessage
description="Introduction page fieldset title"
defaultMessage="Introduction page"
/>
}
collapsible
>
<LanguageTabs forceRenderTabPanel>
{langCode => (
<>
<div className="description">
<FormattedMessage
description="Introduction page description"
defaultMessage={`You can (optionally) configure an introduction page shown before
the form start page. Leave the content field blank to disable this page - users
will then immediately go to the start page.`}
/>
</div>
<FormRow>
<Field
name={`form.translations.${langCode}.introductionPageContent`}
label={
<FormattedMessage
description="form.introductionPageContent label"
defaultMessage="Content"
/>
}
helpText={
<FormattedMessage
description="form.introductionPageContent help text"
defaultMessage={`Content for the introduction page that leads to the start page of the
form. Leave blank to disable the introduction page.`}
/>
}
>
<TinyMCEEditor
content={translations[langCode].introductionPageContent}
onEditorChange={(newValue, editor) =>
onChange({
target: {
name: `form.translations.${langCode}.introductionPageContent`,
value: newValue,
},
})
}
/>
</Field>
</FormRow>
</>
)}
</LanguageTabs>
</Fieldset>
);

/**
* Component to render the metadata admin form for an Open Forms form.
*/
Expand All @@ -31,105 +88,81 @@ const FormDetailFields = ({form: {slug, translations, appointmentOptions}, onCha
};

return (
<Fieldset
title={
<FormattedMessage defaultMessage="Form details" description="Form details fieldset title" />
}
>
<LanguageTabs forceRenderTabPanel>
{langCode => (
<>
<FormRow>
<Field
name={`form.translations.${langCode}.name`}
label={
<FormattedMessage defaultMessage="Name" description="Form name field label" />
}
helpText={
<FormattedMessage
defaultMessage="Name/title of the form"
description="Form name field help text"
<>
<Fieldset
title={
<FormattedMessage
defaultMessage="Form details"
description="Form details fieldset title"
/>
}
>
<LanguageTabs forceRenderTabPanel>
{langCode => (
<>
<FormRow>
<Field
name={`form.translations.${langCode}.name`}
label={
<FormattedMessage defaultMessage="Name" description="Form name field label" />
}
helpText={
<FormattedMessage
defaultMessage="Name/title of the form"
description="Form name field help text"
/>
}
required
>
<TextInput
value={translations[langCode].name}
onChange={onChange}
onBlur={setFormSlug}
maxLength="150"
/>
}
required
>
<TextInput
value={translations[langCode].name}
onChange={onChange}
onBlur={setFormSlug}
maxLength="150"
/>
</Field>
</FormRow>
</Field>
</FormRow>

{!isAppointment && (
<>
<FormRow>
<Field
name={`form.translations.${langCode}.introductionPageContent`}
label={
<FormattedMessage
description="form.introductionPageContent label"
defaultMessage="Introduction page"
/>
}
helpText={
<FormattedMessage
description="form.introductionPageContent help text"
defaultMessage={`Content for the introduction page that leads to the start page of the
form. Leave blank to disable the introduction page.`}
/>
}
>
<TinyMCEEditor
content={translations[langCode].introductionPageContent}
onEditorChange={(newValue, editor) =>
onChange({
target: {
name: `form.translations.${langCode}.introductionPageContent`,
value: newValue,
},
})
{!isAppointment && (
<>
<FormRow>
<Field
name={`form.translations.${langCode}.explanationTemplate`}
label={
<FormattedMessage
description="Start page explanation text label"
defaultMessage="Explanation"
/>
}
/>
</Field>
</FormRow>

<FormRow>
<Field
name={`form.translations.${langCode}.explanationTemplate`}
label={
<FormattedMessage
defaultMessage="Explanation template"
description="Start page explanation text label"
/>
}
helpText={
<FormattedMessage
defaultMessage="Content that will be shown on the start page of the form, below the title and above the log in text."
description="Start page explanation text"
/>
}
>
<TinyMCEEditor
content={translations[langCode].explanationTemplate}
onEditorChange={(newValue, editor) =>
onChange({
target: {
name: `form.translations.${langCode}.explanationTemplate`,
value: newValue,
},
})
helpText={
<FormattedMessage
description="Start page explanation text"
defaultMessage="Content that will be shown on the start page of the form, below the title and above the log in text."
/>
}
/>
</Field>
</FormRow>
</>
)}
</>
)}
</LanguageTabs>
</Fieldset>
>
<TinyMCEEditor
content={translations[langCode].explanationTemplate}
onEditorChange={(newValue, editor) =>
onChange({
target: {
name: `form.translations.${langCode}.explanationTemplate`,
value: newValue,
},
})
}
/>
</Field>
</FormRow>
</>
)}
</>
)}
</LanguageTabs>
</Fieldset>

{!isAppointment && <IntroductionPageFields translations={translations} onChange={onChange} />}
</>
);
};

Expand Down
Loading

0 comments on commit 172babf

Please sign in to comment.