Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Giu 23 posts 141 karma points
    Feb 08, 2023 @ 11:45
    Giu
    1

    How to build a custom property editor using UI / W3C Web components

    Hi. I currently have a v11 project and I am in the process of creating a custom property editor using W3C web components like the ones available here:

    https://github.com/umbraco/Umbraco.UI/

    however I have some questions regarding this approach:

    1. The current doc only mentions the 'angularjs way' : https://docs.umbraco.com/umbraco-cms/tutorials/creating-a-property-editor/ - is it normal ?
    2. Do I need to create ts files instead of js files and then compile them ? Is it going to be built-in for Umbraco 12/13 ? Can I "declare" my compiled file inside the manifest ?
    3. I heard that there's a goal to completely replace angularJS with W3C web components. I think it's a great initiative. Is there any doc where it is documented at a high level ? I am not aware of things like routing, DI, etc. with the Web components.

    Many thanks, I am looking forward to know more about this new cool tech :)

  • Matt Brailsford 4125 posts 22223 karma points MVP 9x c-trib
    Feb 09, 2023 @ 08:45
    Matt Brailsford
    101
    1. Angular is currently the only way, but you could get around this by having minimal angular entry points that offload things to your web component. This is an old project, but you may want to look at this React Angular Chimera repository by CSS Squirrel https://github.com/cssquirrel/React-Angular-Chimera as whilst it's about react, the approach should probably work for web comonents too.

    2. Type Script is optional, but yea, you'll need to setup a build system to compile your web components into standalone javascript files. You'd then create your own App_Plugins folder and setup a package.manifeset to have Umbraco load your files into the back office.

    3. This is correct, but it's very early in development yet so it's unlikely you'll find any docs on it. I did start a blog series on my findings exploring the new codebase which you can find here https://dev.to/mattbrailsford/series/20031 which should also contain links to various documents HQ have produced so should be a good place to start.

    Hope this helps

Please Sign in or register to post replies

Write your reply to:

Draft