Copied to clipboard

Flag this post as spam?

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


  • Runar Løseth 11 posts 92 karma points
    Aug 24, 2022 @ 07:10
    Runar Løseth
    0

    Use existing Umbraco properties in custom properties

    Hi there,

    I'm trying to set up a custom property that allows users to switch between text input for font-awesome icons and a media picker for using images instead when needed. I can't seem to find anything in the documentation about accessing existing properties in custom properties.

    I found this post on the forum (https://our.umbraco.com/forum/extending-umbraco-and-using-the-api/87389-altering-existing-property-editors) but this just results in a 404 error in backoffice. Any hints on how this could be achieved in Umbraco 10?

    Cheers!

  • Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib
    Aug 24, 2022 @ 09:17
    Marc Goodson
    0

    Hi Runar

    One way to tackle this without creating a custom property editor would be to use a 'Nested Content/Block List Editor' property for the Icon Selection

    You would create a Document Type without Template called FontAwesome that would have one textstring property called CssClass

    And another DocumentType called IconImage with a property that was a Media Picker called Icon.

    Then in your Nested Content/Block List Editor configuration you would enable ONLY these two Document Types to be used, and you would only allow one item to be used.

    Now when the editor visits the page, they'll find when they click on their new Icon property, they will get a choice of which block/item to use, eg either FontAwesome or IconImage, then depending which they pick they'll be prompted to add the CSS class or pick the image from the media section.

    If you installed the third party plugin called 'Contentment' there is also the possible to use the 'uCssClassName' datalist: https://github.com/leekelleher/umbraco-contentment/blob/c584e265ca6bd05e5e707dfed4285c497b7af2e7/docs/data-sources/data-source--ucssclassname.md to mean the editors wouldn't have to type in / remember the font-awesome class name, they could instead pick the icons visibly!

    But if you want to dabble with creating your own custom property editor, then this is a good place to start: https://our.umbraco.com/documentation/Tutorials/creating-a-property-editor/ it's all angularJS, and once you have your basic property editor up and running you can utilise existing Umbraco angularJS components and interactions such as the Media Picker. The documentation of the backoffice services and components is here: https://our.umbraco.com/apidocs/v8/ui/#/api the trick is knowing what the thing is called that you want to use, to be able to look up how to use it! There is a great resource called 'DoStuffWithUmbraco' that has lots of examples of extending the backoffice: https://github.com/KevinJump/DoStuffWithUmbraco/tree/v8

    regards

    marc

Please Sign in or register to post replies

Write your reply to:

Draft