I'm very new to a Umbraco, I've been developing a site in V7 since Friday and so far I'm getting on pretty well. There is one thing that confuses me, and that is how to go about creating custom plugins for Umbraco.
An example is an image gallery I created for WebForms a few years ago, it uses AJAX to dynamically load images from the server and uses a load of JQuery for dynamic formatting of the image layout etc.
I'd like to create something similar in Umbraco, but I'm not too sure what the terminology of what I want to create is. I want something that acts like a classic WebForms user control i.e. A page editor can place a tag on a page that invokes the gallery control and allows it to appear on the page. In the backend, there would be a property editor which in the case of an image gallery would allow the administrator or page creator to define properties for the gallery such as the number of images per row and the directory to hunt for pictures.
I've read about concepts such as property editors which I believe covers the backend property settings but I still don't understand how I create a reusable control that will appear on my web pages. I've read about Surface Controls, but the example I've seen show creation of data entry forms which is very different to an image gallery. However perhaps Surface controls are what I need to learn about?
Any clarity of this would be much appreciated. I have a good understanding of MVC, a long history in classic WebForms development including JSON and JavaScript (including some AngularJS too) so I believe I'm in a good position, I just need to understand how all of this relates to Umbraco development and how it all joins together.
If you have any links to tutorials to explain the concepts I'd really appreciate it. There doesn't seem to be too much documentation for V7 and I'm worried that if I look at stuff relating to V6 I might run into concepts that either do not exist or have changed in V7 - something I've already discovered when learning about macros for custom web form control wrappers.
So I followed the tutorial from the Umbraco core team and I've managed to create my first property editor which is fab :).
So the next bit I don't quite understand is how I make the property editor do something useful for example, say I've created a lovely property editor for my Image Gallery plugin which has some fields for parameters such as the path to the image gallery image folder, the number of images per row, the image size etc. which is great but I'd now like to know how do I go about adding the guts for the ImageGallery plugin so that it renders on an Umbraco webpage i.e. when I insert a field for my Image gallery into the template for the page, perhaps something like @Umbraco.Field("imagegallery") - when that tag is detected by Umbraco - I need it to run the Javascript that creates and controls my gallery and render the html that forms the structure of the gallery onto the page at that point.
Can someone point me in the right direction on how to achieve this? From what I understand so far, the Property Editor is something that can allow you to define the parameters for a Plugin, so now I need to understand how I go about creating a plugin so that the html and Javascript that it contains can be rendered / executed on an Umbraco page.
Not sure if you've got it worked out or not, but here goes...
On the front end, your property is most likely represented as a JSON object. If you do this:
@Model.Content.GetPropertyValue("myProperty")
you will get a string representation of the JSON value of the property.
However, if you do this:
@CurrentModel.myProperty
it inspects the value of the property and if it finds a JSON string it tries to Deserialise it to a Dynamic object. This means you'll be able to inspect the various properties of your object, iterate through collections, etc.
The way you use this dynamic object to produce the desired outcome is up to you, but I would suggest creating a Partial View (under render /Views/Partials) and pass the object to it using the ViewDataDictionary. You can then render whatever you want in the partial view and include javascript, etc.; and it's then re-useable.
This sounds exactly like the sort of information I need. I've done a lot of work with JSON via WebForms - using a custom http handler to service client side Javascript so what you describes sounds like it's going to be pretty straightforward to implement.
I've just been away for a week which has given me time to study the docs on Surface Controllers on Umbraco TV do hopefully now I've got everything I need to start converting my old Web Forms AJAX controls to Umbraco.
Tutorials for developing Umbraco 7 Plugins / Packages
Hi Guys,
I'm very new to a Umbraco, I've been developing a site in V7 since Friday and so far I'm getting on pretty well. There is one thing that confuses me, and that is how to go about creating custom plugins for Umbraco.
An example is an image gallery I created for WebForms a few years ago, it uses AJAX to dynamically load images from the server and uses a load of JQuery for dynamic formatting of the image layout etc.
I'd like to create something similar in Umbraco, but I'm not too sure what the terminology of what I want to create is. I want something that acts like a classic WebForms user control i.e. A page editor can place a tag on a page that invokes the gallery control and allows it to appear on the page. In the backend, there would be a property editor which in the case of an image gallery would allow the administrator or page creator to define properties for the gallery such as the number of images per row and the directory to hunt for pictures.
I've read about concepts such as property editors which I believe covers the backend property settings but I still don't understand how I create a reusable control that will appear on my web pages. I've read about Surface Controls, but the example I've seen show creation of data entry forms which is very different to an image gallery. However perhaps Surface controls are what I need to learn about?
Any clarity of this would be much appreciated. I have a good understanding of MVC, a long history in classic WebForms development including JSON and JavaScript (including some AngularJS too) so I believe I'm in a good position, I just need to understand how all of this relates to Umbraco development and how it all joins together.
If you have any links to tutorials to explain the concepts I'd really appreciate it. There doesn't seem to be too much documentation for V7 and I'm worried that if I look at stuff relating to V6 I might run into concepts that either do not exist or have changed in V7 - something I've already discovered when learning about macros for custom web form control wrappers.
Many thanks for your help,
Damien
Hi Damien,
I can see and imagine community members are adding the tutorials for U7 day by day. Below are some of the links that I have and following them:
http://umbraco.github.io/Belle/#/tutorials
http://www.nibble.be/?p=330
http://creativewebspecialist.co.uk/2013/08/23/how-i-built-my-first-property-editor-for-umbraco-belle/
http://www.nibble.be/?p=415
You can have a look on another thread also http://our.umbraco.org/forum/developers/extending-umbraco/46183-Creating-a-property-editor-in-Umbraco-7. Here you can find suggestions from core members.
Thanks
PTamang
Hey thanks for the links - I'll work my way through them and hopefully things will be chearer.
Thanks,
Damien
Right,
So I followed the tutorial from the Umbraco core team and I've managed to create my first property editor which is fab :).
So the next bit I don't quite understand is how I make the property editor do something useful for example, say I've created a lovely property editor for my Image Gallery plugin which has some fields for parameters such as the path to the image gallery image folder, the number of images per row, the image size etc. which is great but I'd now like to know how do I go about adding the guts for the ImageGallery plugin so that it renders on an Umbraco webpage i.e. when I insert a field for my Image gallery into the template for the page, perhaps something like @Umbraco.Field("imagegallery") - when that tag is detected by Umbraco - I need it to run the Javascript that creates and controls my gallery and render the html that forms the structure of the gallery onto the page at that point.
Can someone point me in the right direction on how to achieve this? From what I understand so far, the Property Editor is something that can allow you to define the parameters for a Plugin, so now I need to understand how I go about creating a plugin so that the html and Javascript that it contains can be rendered / executed on an Umbraco page.
Many thanks,
Damien
Hi Damien,
Not sure if you've got it worked out or not, but here goes...
On the front end, your property is most likely represented as a JSON object. If you do this:
@Model.Content.GetPropertyValue("myProperty")
you will get a string representation of the JSON value of the property.
However, if you do this:
@CurrentModel.myProperty
it inspects the value of the property and if it finds a JSON string it tries to Deserialise it to a Dynamic object. This means you'll be able to inspect the various properties of your object, iterate through collections, etc.
The way you use this dynamic object to produce the desired outcome is up to you, but I would suggest creating a Partial View (under render /Views/Partials) and pass the object to it using the ViewDataDictionary. You can then render whatever you want in the partial view and include javascript, etc.; and it's then re-useable.
There is a good Archetype tutorial which demonstrates this approach here: http://blog.imulus.com/tom-fulton/building-inline-complex-content-in-umbraco-with-archetype
Be aware though that this is specific to Archetype, so don't get distracted by the way they extract and handle the values.
Hope this helps,
- Rob.
Hi Rob,
This sounds exactly like the sort of information I need. I've done a lot of work with JSON via WebForms - using a custom http handler to service client side Javascript so what you describes sounds like it's going to be pretty straightforward to implement.
I've just been away for a week which has given me time to study the docs on Surface Controllers on Umbraco TV do hopefully now I've got everything I need to start converting my old Web Forms AJAX controls to Umbraco.
Thanks again for your help,
Cheers,
Damien
is working on a reply...