Andy Butland

This is one of a series of posts looking at migrating Umbraco packages to Umbraco 14 and the new backoffice. Other posts in this series: Introduction Upgrading to Umbraco 14 Preview Creating a Property Editor With Umbraco 14 Adding and Deleting Criteria A "Hello World" Property Editor The Umbraco documentation is a good guide for getting started, with details on creating an extension and creating a property editor . Using the scripts provided I created an extension within a folder created in my main package project that I called client-src . npm create vite@latest -- --template lit-ts personalisation-groups cd personalisation-groups npm install npm install -D @umbraco-cms/backoffice@next This sets up some files that make up an extension to the backoffice, using the latest preview release from the Umbraco prereleases feed. Next step as described in the docs is to add a vite.config.ts file. I set mine up to export the built files rather than to t

This is one of a series of posts looking at migrating Umbraco packages to Umbraco 14 and the new backoffice. Other posts in this series: Introduction Upgrading to Umbraco 14 Preview Creating a Property Editor With Umbraco 14 Adding and Deleting Criteria Prerequisites As indicated in the official documentation , to work with Umbraco 14 it's likely your development machine needs some updates, which was the case for me. You'll need: To be running .NET 8, which is available at the time of writing in a first release candidate . To be on at least the v17.8 latest preview version of Visual Studio. To download and install this you may need to change the channel used by the installer . To install a minimum version of Node.js 18.16. I have Node Version Manager for Windows installed, which is handy tool both for installing new versions and also switching between versions that you may need for different projects. Package Update The package I'm worki

Probably the largest change coming in the Umbraco ecosystem is the development of a new backoffice , removing the dependency on the legacy angularjs and moving to a modern front-end stack based on web components and Typescript. Not just for HQ in the work needed to update the CMS itself and associated commercial products. But also for the community, whether that be package developers or custom solution implementors looking to extend the backoffice. It reminds me a little of the time coming up to Umbraco 9, the first version running on modern .NET. There was a lot of collbarative effort and information sharing then, as many people were learning new technology and ways of doing things. I'm hoping the next nine months or so leading up to Umbraco 14 will be a similar experience. Although I'm now working at HQ, I'm in a similar position to many in finding a lot of the change new and something I'm going to need to get up to speed with. Like, I suspect, a number of Umbraco

In some recent work with Umbraco I’ve been looking to migrate an API from using the Newtonsoft.Json serialization library to the newer, Microsoft one, System.Text.Json . The reason for doing this was to align the API we created for Umbraco Forms with the content delivery API available in Umbraco 12. We’re keen to ensure these APIs across Umbraco products are similar both in terms of behaviour but also behind the scenes when it comes to the libraries we are using. As such I had a few updates to make – mostly straightforward, and some that needed a bit more research and development. Deserialization via a Model Binder When a form is submitted, a model binder is referenced in the controller’s action method to deserialize the incoming request to a strongly typed model: Within the model binder we had the following code to deserialize the request into the appropriate type: To convert this it was just necessary to change JsonConvert.DeserializeObject to JsonSerializer.Deser