From e1305ba9e6a80ad4a93d9aa70a1ed0ffb88a3dec Mon Sep 17 00:00:00 2001 From: Rick Butterfield Date: Thu, 30 Oct 2025 09:42:50 +0000 Subject: [PATCH 1/3] Add reference to types available in `@umbraco-forms/backoffice` --- .../developer/extending/adding-a-fieldtype.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/16/umbraco-forms/developer/extending/adding-a-fieldtype.md b/16/umbraco-forms/developer/extending/adding-a-fieldtype.md index 8ab71b312c6..4b398306370 100644 --- a/16/umbraco-forms/developer/extending/adding-a-fieldtype.md +++ b/16/umbraco-forms/developer/extending/adding-a-fieldtype.md @@ -403,20 +403,24 @@ The following code shows the structure for these converter elements. ```javascript import type { UmbPropertyValueData } from "@umbraco-cms/backoffice/property"; +import type { FormsSettingValueConverterApi, Setting } from "@umbraco-forms/backoffice"; -export class SliderSettingValueConverter { - - async getSettingValueForEditor(setting, alias: string, value: string) { +export class SliderSettingValueConverter + implements FormsSettingValueConverterApi +{ + async getSettingValueForEditor(setting: Setting, alias: string, value: string) { return Promise.resolve(value); } - async getSettingValueForPersistence(setting, valueData: UmbPropertyValueData) { - return Promise.resolve(valueData.value); + async getSettingValueForPersistence(setting: Setting, valueData: UmbPropertyValueData) { + return Promise.resolve(valueData.value?.toString() || ""); } - async getSettingPropertyConfig(setting, alias: string, values: UmbPropertyValueData[]) { + async getSettingPropertyConfig(setting: Setting, alias: string, values: UmbPropertyValueData[]) { return Promise.resolve([]); } + + destroy(): void { } } ``` From a24001e61c2dc5bf8c3aa4cc3fdb9d49fad143bd Mon Sep 17 00:00:00 2001 From: Rick Butterfield Date: Thu, 30 Oct 2025 10:05:37 +0000 Subject: [PATCH 2/3] Add documentation for Umbraco Forms NPM package --- 16/umbraco-forms/developer/extending/README.md | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/16/umbraco-forms/developer/extending/README.md b/16/umbraco-forms/developer/extending/README.md index 635b9fd8f8e..6e69c1c6ee9 100644 --- a/16/umbraco-forms/developer/extending/README.md +++ b/16/umbraco-forms/developer/extending/README.md @@ -1,9 +1,24 @@ # Extending -Umbraco Forms functionality can be extended in different ways. In this section we focus on techniques available to a back-end/C# developer. +Umbraco Forms functionality can be extended in different ways. For front-end extensions, specifically via theming, see the [Themes](../themes.md) section. +## Extending the Backoffice +Umbraco Forms publishes an NPM package called `@umbraco-forms/backoffice` that holds typings and other niceties to build extensions. + +{% hint style="warning" %} +Ensure that you install the version of the Backoffice package compatible with your Umbraco Forms installation. You can find the appropriate version on the [@umbraco-forms/backoffice npm page](https://www.npmjs.com/package/@umbraco-forms/backoffice). +{% endhint %} + +You can install this package by running the command: + +```bash +npm install -D @umbraco-forms/backoffice@x.x.x +``` + +This will add a package to your devDependencies containing the TypeScript definitions for Umbraco Forms. + ## Developing Custom Providers Although the Forms package comes with many fields, workflows and other built-in types, you can still create and develop your own if needed. From f5072aea66ca06ced4eb227c283c92bf9df6422c Mon Sep 17 00:00:00 2001 From: Rick Butterfield Date: Thu, 30 Oct 2025 10:09:59 +0000 Subject: [PATCH 3/3] Add information specifically to FieldTypes page --- .../developer/extending/adding-a-fieldtype.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/16/umbraco-forms/developer/extending/adding-a-fieldtype.md b/16/umbraco-forms/developer/extending/adding-a-fieldtype.md index 4b398306370..fda753b0551 100644 --- a/16/umbraco-forms/developer/extending/adding-a-fieldtype.md +++ b/16/umbraco-forms/developer/extending/adding-a-fieldtype.md @@ -172,6 +172,18 @@ With Forms 14+, aspects of the presentation and functionality of the custom fiel To create custom backoffice components for Umbraco 14, it's recommended to use a front-end build setup using Vite, TypeScript, and Lit. For more information, see the [Extension with Vite, TypeScript, and Lit](https://app.gitbook.com/s/G1Byxw7XfiZAj8zDMCTD/tutorials/creating-your-first-extension#extension-with-vite-typescript-and-lit) article. +The examples here are using the `@umbraco-forms/backoffice` package to get access to Forms-specific types and contexts. It is recommended to install this package as a development dependency in your project. + +{% hint style="warning" %} +Ensure that you install the version of the Backoffice package compatible with your Umbraco Forms installation. You can find the appropriate version on the [@umbraco-forms/backoffice npm page](https://www.npmjs.com/package/@umbraco-forms/backoffice). +{% endhint %} + +```bash +npm install -D @umbraco-forms/backoffice@x.x.x +``` + +This will add a package to your devDependencies containing the TypeScript definitions for Umbraco Forms. + To display a name and description on a custom field, you need to register a JavaScript file as shown in the [Localization](https://app.gitbook.com/s/7MBVdnTbFiAgWuRsHpNS/customizing/extending-overview/extension-types/localization) article. ### Field Preview