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?
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.
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
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!
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
is working on a reply...