Backoffice extensions

With the introduction of "the new backoffice", aka. Bellissima, in Umbraco v14, the way that backoffice extensions are built drastically changed.

The old AngularJS-implementation was thrown away and a new, modern implementation using Web Components was introduced. We'll refer you to the Umbraco documentation to read about the basics of setting up a development environment.

You can also use our NewsletterStudioContrib-project as a starting point - it has all the setup you need.

Newsletter Studio comes with a couple of extension points for the backoffice. Here is an overview of the extension type aliases we support:

• nsEmailControlEditUi used when creating a email control.
• nsEmailControlDisplayUi used when creating a email control.
• nsAction used to inject actions (like remove, duplicate, export, etc.) for different entities like nsRecipient, nsMailingList, etc.
• nsEmailServiceProviderSettingsUi optionally used when building a custom Email Service Provider.
• nsTiptapConfiguration used to customize or replace the configuration for the Tiptap Rich Text Editor in the Email Editor.

NPM Package

We also ship a NPM-package with the TypeScript-types needed to create extensions for Newsletter Studio. You can install it like this:

npm i -D @newsletterstudio/umbraco

Helpful components

We ship a couple of helpful components that can be used for debugging issues during the development of an extension.

ns-validation-errors-debugging

Use this to show validation errors in the current context to understand why a form is not considered valid.

<ns-validation-errors-debug></ns-validation-errors-debug>

ns-json-debug

Used to show a nice pre-element with formatted JSON-data.

<ns-json-debug .data=${this.myModel}></ns-json-debug>