From be4839c93244b1c6478922d75c0c30f884a795d4 Mon Sep 17 00:00:00 2001 From: Aleksei Serednev Date: Wed, 29 Jul 2026 15:48:14 +0200 Subject: [PATCH 1/2] Document NHS button texts and Save and exit link Co-Authored-By: Claude Opus 5 (1M context) --- docs/aidbox-ui-builder-alpha/configuration.md | 38 +++++++++++++++---- .../form-customisation-in-theme-editor.md | 2 + 2 files changed, 33 insertions(+), 7 deletions(-) diff --git a/docs/aidbox-ui-builder-alpha/configuration.md b/docs/aidbox-ui-builder-alpha/configuration.md index 96c3fa9..247bbf3 100644 --- a/docs/aidbox-ui-builder-alpha/configuration.md +++ b/docs/aidbox-ui-builder-alpha/configuration.md @@ -260,9 +260,11 @@ GET /$sdc-config "print-color": "#8e44ad", // Background color for the "Print" button "print-text-color": "#ffffff", // Text color for the "Print" button "print-text": "Print", // Label text for the "Print" button - "redirect-color": "#c0392b", // Background color for the "Close" button - "redirect-text-color": "#ffffff", // Text color for the "Close" button - "redirect-text": "Close", // Label text for the "Close" button + "next-text": "Continue", // Label text for the "Continue" button (NHS design system) + "review-text": "Continue", // Label text for the "Continue" button on the last question, which opens the review page (NHS design system) + "redirect-color": "#c0392b", // Background color for the "Save" button + "redirect-text-color": "#ffffff", // Text color for the "Save" button + "redirect-text": "Save", // Label text for the "Save" button; the "Save and exit" link in the NHS design system "submit-text": "Submit", // Label text for the "Submit" button "text-color": "#ffffff" // General text color for all buttons } @@ -279,10 +281,28 @@ Currently, Formbox supports three design systems: - **aidbox-desktop** – The default Formbox design system. Widgets are adaptive and optimized for forms with many questions, suitable for both desktop and mobile devices. - **aidbox-mobile** – Optimized for entry modes `sequential` and `prior-edit`, where only one question appears on screen at a time. Widgets are tailored for touch screens and mobile devices. -- **NHS** – Widgets and layouts fully follow the [NHS Design System](https://service-manual.nhs.uk/design-system/). Typically used for embedding forms into NHS applications. Supports only `sequential` and `prior-edit` entry modes. +- **NHS** – Widgets and layouts fully follow the [NHS Design System](https://service-manual.nhs.uk/design-system/). Typically used for embedding forms into NHS applications. Supports only `sequential` and `prior-edit` entry modes, and only button labels can be customized in the theme. You can set the design system using the `design-system` property. +### NHS design system + +Colors, fonts and input styles come from the NHS Design System and cannot be overridden. The only theme properties that affect an NHS form are the button labels: + +- **`button.next-text`** – the button that opens the next question. +- **`button.review-text`** – the button on the last question that opens the review page. +- **`button.redirect-text`** – the **Save and exit** link. +- **`button.submit-text`** – the button that submits the answers on the review page. + +Every question page also shows a **Save and exit** link below the main button. It saves the answers given so far, without validating them, and then leaves the form: + +- inside the NHS App the user is returned to the application home screen; +- otherwise the user is redirected to the URL passed in the `redirect-on-save` parameter of the shared link. + +The answers are saved first and the form is left only after the server confirms the save, so nothing is lost when the NHS App closes the web view. + +The link is not shown on the review page, in read-only forms, and in a regular browser when `redirect-on-save` is not set. + ## Translations The translations object in the Configuration resource allows defining custom text for Formbox Builder and Renderer. It uses a structured, hierarchical format where each key corresponds to a feature or component, and the leaf nodes specify locale-based translations. This structure supports multiple languages and regional variations by enabling you to specify locale codes such as en for English, fr for French, or more granular options like en-US for American English and fr-CA for Canadian French. @@ -434,15 +454,17 @@ The example provided below represents a comprehensive translations object for En }, "button" : { "offline-amend" : {"en" : "You are offline and cannot amend"}, - "amend" : {"en" : "Saved"}, + "amend" : {"en" : "Amend"}, "skip-item" : {"en" : "Skip Question"}, "saved" : {"en" : "Saved"}, "offline-submit" : {"en" : "You are offline and cannot submit"}, "save-and-close" : {"en" : "Save"}, "next-question" : {"en" : "Next Question"}, "offline-next-question" : {"en" : "You are offline and cannot call Next Question"}, - "next-item" : {"en" : "Next"}, - "submit" : {"en" : "Submit"}, + "next-item" : {"en" : "Continue"}, + "review" : {"en" : "Continue"}, + "redirect" : {"en" : "Save and exit"}, + "submit" : {"en" : "Submit answers"}, "repopulate" : {"en" : "Repopulate"}, "print" : {"en" : "Print"} }, @@ -501,6 +523,8 @@ The example provided below represents a comprehensive translations object for En } ``` +Button labels can also be set in the theme (`button.next-text`, `button.review-text`, `button.redirect-text`, `button.submit-text`). A label defined in the theme takes precedence over the corresponding translation. + ### Open a shared form in a specific language To make a shared link open the form in a particular language, first create an `SDCConfig` resource that defines the desired `language` (and, optionally, custom `translations`), then reference that config by its **id** in the `config` parameter of the [`$generate-link`](../reference/aidbox-sdc-api.md#config) operation. diff --git a/docs/aidbox-ui-builder-alpha/form-creation/form-customisation-in-theme-editor.md b/docs/aidbox-ui-builder-alpha/form-creation/form-customisation-in-theme-editor.md index 2c4f7cf..9d726fc 100644 --- a/docs/aidbox-ui-builder-alpha/form-creation/form-customisation-in-theme-editor.md +++ b/docs/aidbox-ui-builder-alpha/form-creation/form-customisation-in-theme-editor.md @@ -78,4 +78,6 @@ The color for the tooltip and hover will be set automatically according to the P * **Button Color:** Set the background color of the close button. * **Button Text Color:** Define the color of the text on the close button. + When the **NHS** design system is selected, only the button texts can be edited — colors and fonts come from the NHS Design System. The editor shows four fields: **Continue Button text**, **Continue Button text on the last question**, **Save Button text** and **Submit Button text**. + After creating the theme, you need to click the save button. From 35aaf0e383f40aab9aebbed0e24cf6ae59a22eff Mon Sep 17 00:00:00 2001 From: Aleksei Serednev Date: Wed, 29 Jul 2026 16:21:18 +0200 Subject: [PATCH 2/2] Clarify when the Save and exit link is hidden Co-Authored-By: Claude Opus 5 (1M context) --- docs/aidbox-ui-builder-alpha/configuration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/aidbox-ui-builder-alpha/configuration.md b/docs/aidbox-ui-builder-alpha/configuration.md index 247bbf3..aad5712 100644 --- a/docs/aidbox-ui-builder-alpha/configuration.md +++ b/docs/aidbox-ui-builder-alpha/configuration.md @@ -301,7 +301,7 @@ Every question page also shows a **Save and exit** link below the main button. I The answers are saved first and the form is left only after the server confirms the save, so nothing is lost when the NHS App closes the web view. -The link is not shown on the review page, in read-only forms, and in a regular browser when `redirect-on-save` is not set. +The link is not shown on the review page or in read-only forms. Outside the NHS App it is also hidden when the form was shared without the `redirect-on-save` parameter, because in that case there is nowhere to redirect the user to. ## Translations