I'm trying to get started extending the backend of Umbraco - I'd like to do this in the spirit of v7 and ensure it's using Angular / MVC as appriopriate. I've set myself the task of creating a menu item for bespoke tools and having a few tabs with a button or similar that will allow the editors to run a bespoke tools (for example picking up new products from an unrelated DB etc. - basically stuff I code for the end-customer).
I'm imagining I've got a few jobs:
1) Create a custom section
2) Create a set of bespoke classes inheriting Umbraco and creating new nodes.
3) Wiring up a button in the panel under my new section to call the relevant methods.
4) Packaging this up to enable me to redeploy this to other projects?
So first things first - let's start with 1) !
My first major challenge of getting a custom panel, the documentation is incomplete and there is a lot of confusing older documentation muddying the water - I've found the following resources:
I followed the instructions dropping the various files into the App_Code and App_Plugins folder and running the SQL against my DB. First of all I had an exception. I modified PeopleTreeController.cs as line 34 throws an Exception - looks like a missing parameter (guessing this was an early V7 version). CreateTreeNode seemed to need the id so I changed it:
//FROM: // var node = CreateTreeNode(person.Id.ToString(), queryStrings, person.Name, "icon-user", false);
var node = CreateTreeNode(person.Id.ToString(), id, queryStrings, person.Name, "icon-user", false);
It then compiles but I don't see anything in the contents section (e.g. I can't allow a user to see the "People" section). What am I missing here - surely I don't have manually change the config files?
This example seems to be strucured nicely and would be the perfect starter - if I could get it to work!!
This seems to be the best starter - aside from a small typo on one of the methods (for anyone following it's noted in the comments) I end up with my custom section. I'm a bit lost here and not sure where to put my custom class and how to wire up a button - any tips appreciated! I'm slightly confused why this is putting everything into different places from the first example - which is "right"!?
This is the most comprehensive documentation but doesn't seem to give you a leg up .. I'm not really sure how to get this going. I'd imagine this will be an essential resource once you've got that "Starter-for-ten" leg-up.
Searching the forum I think I'm not alone in needing a walkthrough - I'm happy to write it up if the Community can nudge me in the right directions.
I agree that we need some better and more thourugh documentation on this and what umbraco properties that can be acessed , best practices etc.
I have been thinking about doing a blogpost about localizing property editors based on the approach used in the Archetype property editor, which is a really nice approach. Could be nice with a "best practice" when localizing in such a guide/documentation.
The most important thing to note (which I only noticed after hours of debugging) is that the UKFest sample does not actually add a custom section, it is a added as a sub-node of the "Settings" section.
To get it to work you also need to change the folder structure, since the placement of the HTML files in the "App_Plugins" directory has changed since the Umbraco version that UkFest was targeted at.
If you do not know AngularJS, you will absolutely need to read a tutorial of some sort. I went with this:
My conclusion so far, is that it is next to impossible to accomplish even a simple "click button and save content" operation without Angular (I'm personally not a big fan of this decision, but if you can't beat them...).
OK - I'm keeping notes as I go and I've hit a wall... so close! Can anyone advise where the dialogs.controller.js should live as it seems like it's very nearly there but I'm not sure where the route is looking for this controller?!
Steps taken to get demo to work:
STEP 1: Change the Update the CreateTreeNode funciton in the Controller
/App_Code/PeopleTreeController.cs/ Line 34 throws an Exception - looks like a missing parameter (guessing this was an early V7 version). CreateTreeNode seemed to need the id so I changed it:
//FROM: // var node = CreateTreeNode(person.Id.ToString(), queryStrings, person.Name, "icon-user", false);
//TO:
var node = CreateTreeNode(person.Id.ToString(), id, queryStrings, person.Name, "icon-user", false);
STEP 2: Change the TreeController name
/App_Code/PeopleTreeController.cs/ Line 20
// Change the class name to PeopleTreeController
// FROM: public class MyCustomTreeController : TreeController
// TO
public class PeopleTreeController : TreeController
STEP 4: Move the detox.html and drink.html
Move these from:
App_Plugins\People\umbraco\peopleTree
to:
App_Plugins\People\backoffice\peopleTree
STUCK!! Change the mapped URLs or move the dialogs.controller.js ??
I noticed that clicking the drink from the menu requests:
PS. I have actually got a barebones custom section with dynamically generated tree running now in v7, if anyone wants to see some anonymised code for that let me know. I haven't gotten the actions working yet, and it's a bit of a mess as it's a WIP, but again, shout if it would help to see it.
Yeah, i would really like a copy. Maybe come with some feedback before you release it. Cant find a Pm function here, can you send me a mail? [email protected]
After working through all of the links and issues above, I've created a tutorial / walkthrough on how to extend the backend. It takes you through setting up a custom tree, adding a button and then wiring up this to an MVC Umbraco API.
The demo imports some products from a third party database but you could do whatever you like in the API.
I'd really appreciate some of the Umbraco community reviewing the approach and providing feedback - perhaps, unlike my last tutorial on creating a website from scratch, this isn't suited to the official documentation though if people would like it there I'm happy to convert it to Github markdown and create a pull request?!
Thanks to Herman for reviewing and everyone else above providing hints and tips. .
Excellent work Steve!! I'll be working on other things for the next week or so, but I'll be returning to my tree project after that and I'll look through your tutorial in more detail then.
Getting started extending Umbraco v7
I'm trying to get started extending the backend of Umbraco - I'd like to do this in the spirit of v7 and ensure it's using Angular / MVC as appriopriate. I've set myself the task of creating a menu item for bespoke tools and having a few tabs with a button or similar that will allow the editors to run a bespoke tools (for example picking up new products from an unrelated DB etc. - basically stuff I code for the end-customer).
I'm imagining I've got a few jobs:
1) Create a custom section
2) Create a set of bespoke classes inheriting Umbraco and creating new nodes.
3) Wiring up a button in the panel under my new section to call the relevant methods.
4) Packaging this up to enable me to redeploy this to other projects?
So first things first - let's start with 1) !
My first major challenge of getting a custom panel, the documentation is incomplete and there is a lot of confusing older documentation muddying the water - I've found the following resources:
https://github.com/perploug/UkFest-AngularJS-Demo
It then compiles but I don't see anything in the contents section (e.g. I can't allow a user to see the "People" section). What am I missing here - surely I don't have manually change the config files?
This example seems to be strucured nicely and would be the perfect starter - if I could get it to work!!
http://www.enkelmedia.se/blogg/2013/11/22/creating-custom-sections-in-umbraco-7-part-1.aspx
This seems to be the best starter - aside from a small typo on one of the methods (for anyone following it's noted in the comments) I end up with my custom section. I'm a bit lost here and not sure where to put my custom class and how to wire up a button - any tips appreciated! I'm slightly confused why this is putting everything into different places from the first example - which is "right"!?
http://umbraco.github.io/Belle/#/tutorials/Creating-Editors-Trees
This is the most comprehensive documentation but doesn't seem to give you a leg up .. I'm not really sure how to get this going. I'd imagine this will be an essential resource once you've got that "Starter-for-ten" leg-up.
Searching the forum I think I'm not alone in needing a walkthrough - I'm happy to write it up if the Community can nudge me in the right directions.
Hi Steve
Nice post!
I agree that we need some better and more thourugh documentation on this and what umbraco properties that can be acessed , best practices etc.
I have been thinking about doing a blogpost about localizing property editors based on the approach used in the Archetype property editor, which is a really nice approach. Could be nice with a "best practice" when localizing in such a guide/documentation.
Just my 2 cents
/Jan
Hi Steve,
I went through the exact same pains as you:
http://our.umbraco.org/forum/developers/extending-umbraco/49861-Getting-the-UKFest-sample-to-work
The most important thing to note (which I only noticed after hours of debugging) is that the UKFest sample does not actually add a custom section, it is a added as a sub-node of the "Settings" section.
To get it to work you also need to change the folder structure, since the placement of the HTML files in the "App_Plugins" directory has changed since the Umbraco version that UkFest was targeted at.
If you do not know AngularJS, you will absolutely need to read a tutorial of some sort. I went with this:
http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html
My conclusion so far, is that it is next to impossible to accomplish even a simple "click button and save content" operation without Angular (I'm personally not a big fan of this decision, but if you can't beat them...).
Best,
Torben
OK - I'm keeping notes as I go and I've hit a wall... so close! Can anyone advise where the dialogs.controller.js should live as it seems like it's very nearly there but I'm not sure where the route is looking for this controller?!
Steps taken to get demo to work:
STEP 1: Change the Update the CreateTreeNode funciton in the Controller
/App_Code/PeopleTreeController.cs/ Line 34 throws an Exception - looks like a missing parameter (guessing this was an early V7 version). CreateTreeNode seemed to need the id so I changed it:
STEP 2: Change the TreeController name
/App_Code/PeopleTreeController.cs/ Line 20
// Change the class name to PeopleTreeController
// FROM: public class MyCustomTreeController : TreeController
// TO
public class PeopleTreeController : TreeController
STEP 4: Move the detox.html and drink.html
Move these from:
App_Plugins\People\umbraco\peopleTree
to:
App_Plugins\People\backoffice\peopleTree
STUCK!! Change the mapped URLs or move the dialogs.controller.js ??
I noticed that clicking the drink from the menu requests:
http://localhost:50580/App_Plugins/People/backoffice/peopleTree/drink.html
But the button in the right hand panel from the drink meny routes to :
http://localhost:50580/umbraco/People/PersonApi/GetDrunk?id=-1
This seems to be set in App_Plugins/People/person.resource.js and wants to route to the dialogs.controller.js but where should this live to work?
Request error: The URL returned a 404 (not found):
People/PersonApi/GetDrunk
@Jan - any best practice stuff would be appreciated!
@Torben - ahh the Settings menu!!! :D
I should have added :
http://our.umbraco.org/documentation/Extending-Umbraco/
It looks like a very good start on the doucmentation - but again not enough there to get me started!
Hi Steve
I guess the umbraco-generator by Warren Buckley should also be mentioned as a ressource since it makes a pretty good starting point for building property editors doing all the mundane tasks of setting up a src dir, build dir etc. - https://github.com/warrenbuckley/generator-umbraco Warren has blogged about it here as well. http://creativewebspecialist.co.uk/2014/03/24/yo-umbraco/
I'll keep it coming if I remember something of use.
/Jan
STEP 5 Change the URL routes in the person.resource.js
Add backoffice to the URLs returned on each http request
e.g. line 16
return $http.get("backoffice/People/PersonApi/GetDrunk?id=" + id);
Get's me a step further! Now the buttons seem to return something but the resonse is:
I've popped up a bitbucket containing my tweaked angularjs custom section code.
My memory isn't great, but I think I did get the detox and drink buttons to actually amend the users.
Bitbucket is here - there's no .bak file for the db in there, if anyone wants it added, please yell.
https://bitbucket.org/ShaunChatterton/testumbraco
PS. I have actually got a barebones custom section with dynamically generated tree running now in v7, if anyone wants to see some anonymised code for that let me know. I haven't gotten the actions working yet, and it's a bit of a mess as it's a WIP, but again, shout if it would help to see it.
Hi Shaun, Can u please add a dB for the first project? I would really like to get the project running.
Thanks in advance
Herman I'm just putting the finishing touches to a full step by step tutorial. Pm if you'd like a copy before I publish it online.
Yeah, i would really like a copy. Maybe come with some feedback before you release it. Cant find a Pm function here, can you send me a mail? [email protected]
Thanks in advance
Hi chaps. I've popped the db in the bitbucket.
After working through all of the links and issues above, I've created a tutorial / walkthrough on how to extend the backend. It takes you through setting up a custom tree, adding a button and then wiring up this to an MVC Umbraco API.
The demo imports some products from a third party database but you could do whatever you like in the API.
I'd really appreciate some of the Umbraco community reviewing the approach and providing feedback - perhaps, unlike my last tutorial on creating a website from scratch, this isn't suited to the official documentation though if people would like it there I'm happy to convert it to Github markdown and create a pull request?!
Thanks to Herman for reviewing and everyone else above providing hints and tips. .
The tutorial is here: http://siempresolutions.co.uk/blog/Extending_Umbraco_Custom_Tree_and_MVC_API_Part_1
Steve
Excellent work Steve!! I'll be working on other things for the next week or so, but I'll be returning to my tree project after that and I'll look through your tutorial in more detail then.
Hi Steve
Big #h5yr! I can't wait to read the post :)
Took the liberty to turn the link into a real link in your post above btw.
/Jan
Thanks Jan. I think I've been using the expiremental markdown do everything thing for you editor too much!
is working on a reply...