Custom property editor without AngularJS? Umbraco #help-with-umbraco

Custom property editor without AngularJS?

Josef Henryson

03/12/2024, 8:02 AM

I am planning to create a block that should replace AngularJS plugin since it will be removed in future Umbraco. But I need to have a custom property in this block and when I search the docs it still refers to AngularJS. https://docs.umbraco.com/umbraco-cms/tutorials/creating-a-property-editor Can I do this with Lit instead or solve it in another way? Or do I need to wait until U14+ is released before I can convert?

Josef Henryson

03/12/2024, 1:10 PM

Is it possible to use Web Components (LitElement) in U13 already? I read somewhere that you may "opt-in" for that, does that mean you can use some elements or does it change the whole backoffice completely?

Jemayn

03/12/2024, 2:08 PM

As far as I understand it - you can use web components because in the end it just compiles to javascript. However all the angularJS apis and the way you register a package will still need to be in the "old" way. Think most people aren't bothering doing packages in web components using Lit yet and waiting for v14

D_Inventor

03/12/2024, 6:02 PM

Hi there! you can go about 95% LIT already in the existing backoffice, but you will need to transfer some dependencies from angularJS into your Lit app. I have made a plugin that uses Lit in Umbraco 13. You can find it here as an example: https://github.com/Infocaster/ContentGenerator

D_Inventor

03/12/2024, 6:04 PM

In short: You should create a "bridge" element that transfers and wraps all your dependencies from AngularJS to Lit. In Lit. You build your app inside the bridge element. Once you update to Umbraco 14, all you need to do is burn the bridge and reattach all your wrapper services using the new Umbraco context API.

D_Inventor

03/12/2024, 6:08 PM

This is the most important folder: https://github.com/Infocaster/ContentGenerator/tree/v13/main/ContentGenerator/frontend/src/contentmenu

directive.ts

contains an angularjs directive. This is the angularJS side of the bridge.

main.lit.ts

contains the main Lit element. This is the Lit side of the bridge.

content.lit.ts

contains the actual app. This content element contains all the business logic and consumes the services from the bridge. After you upgrade to U14, you will throw away directive.ts and main.lit.ts.

Josef Henryson

03/13/2024, 1:26 PM

Thank you so much! That was a really good answer! And thank you for sharing your code 🙏🏻

Previous Next