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 As of last time I posted in this series, I had a partially working property editor for Personalisation Groups. It could display the information stored against the property, and I'd solved a couple of challenges around retrieving external data and injecting scripts dynaically at runtime. There's not been too much progress since, but I've picked up a few more things along the way that I'll include as a bit of a "grab-bag" in this post. First step to make the data editable was wiring up some button clicks. In angularjs we are used to: <button type="button" ng-click="delete($index)">Delete</button> With Lit, the syntax is: <button type="b
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