building custom sections in umbraco
DESCRIPTION
Slides about my presentation on the DUUG meetup of 25 september 2014 about creating custom sections in Umbraco and the differences between V6 and V7TRANSCRIPT
![Page 1: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/1.jpg)
BUILDING CUSTOMSECTIONS IN UMBRACO
THE DIFFERENCES BETWEEN V6 AND V7by Dave Woestenborghs / @dawoe21
![Page 2: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/2.jpg)
WHY USE CUSTOM SECTIONSCustom sections are ideal when you want your editors to manage
(external) data in the Umbraco backend
![Page 3: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/3.jpg)
TECHNOLOGYThe main difference in building custom sections between V6 and
V7 is the technology
![Page 4: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/4.jpg)
TECHNOLOGYUMBRACO 6 AND EARLIER
ASP.NET WebformsASP.NET MVCAngularJS & ASP.NET WebApi
![Page 5: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/5.jpg)
TECHNOLOGYUMBRACO 7
AngularJS & ASP.NET WebApiASP.NET MVCASP.NET Webforms
Sections build for v6 should work in v7 with some minor UItweaking.
![Page 6: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/6.jpg)
CREATING A CUSTOM SECTIONCreating a custom section is almost identical in V6 & V7
Create a classImplement umbraco.interfaces.IApplicationDecorate withumbraco.businesslogic.ApplicationAttribute
[Application("duug-customers", "Customers", "icon-people", 15)] public class Section: IApplication { }
![Page 7: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/7.jpg)
CREATING A CUSTOM TREEA tree provides a navigation for your (external) dataThe source of the data can be anythingA section can have multiple trees
![Page 8: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/8.jpg)
CREATING A CUSTOM TREEIN UMBRACO 6
Create a classInherit from umbraco.cms.presentation.Trees.BaseTreeDecorate class with umbraco.businesslogic.TreeAttribute
![Page 9: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/9.jpg)
CREATING A CUSTOM TREEIN UMBRACO 6
[Tree("duugcustomers", "duugcustomerstree", "Customers")] public class CustomerTree : BaseTree { public CustomerTree(string application) : base(application) { }
public override void RenderJS(ref StringBuilder Javascript) { // render javascript for tree }
public override void Render(ref XmlTree tree) { // render tree items }
protected override void CreateRootNode(ref XmlTreeNode rootNode) { // create root node of tree } }
![Page 10: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/10.jpg)
CREATING A CUSTOM TREEIN UMBRACO 7
Create a class (class name suffixed with Controller)Inherit from Umbraco.Web.Trees.TreeControllerDecorate class with umbraco.businesslogic.TreeAttributeDecorate class withUmbraco.Web.Mvc.PluginControllerAttribute
![Page 11: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/11.jpg)
CREATING A CUSTOM TREEIN UMBRACO 7
[Tree("duug-customers", "duug-customers-tree", "Customers")] [PluginController("DUUG")] public class CustomerTreeController : TreeController { protected override TreeNodeCollection GetTreeNodes(string id, FormDataCollection queryStrings) { }
protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings) { } }
![Page 12: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/12.jpg)
TALK IS CHEAP. SHOWME THE CODE.
Linus Torvalds
![Page 13: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/13.jpg)
EDITING YOUR DATANow that we have created our tree we want the editors to be able
to edit the dataIn Umbraco 6 we will create a Webform pageIn Umbraco 7 we will create a angular view (plain html +angular controller)
![Page 14: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/14.jpg)
EDITING YOUR DATAIN UMBRACO 6
Set the action of your tree node (js function)In RenderJS method you need create the functionCreate your edit webformUse umbraco.uicontrols (tabview, panes, propertypanels)to keep look and feel of the backendValidate input with .NET validation controls
![Page 15: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/15.jpg)
EDITING YOUR DATAIN UMBRACO 7
Set the route for your tree node (if needed)Create your editor viewCreate your editor angular controllerCreate/update package manifestUse directives to keep look and feel of the backend(umb-pane, umb-tab,...)Validate input with angular directives
![Page 16: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/16.jpg)
EDITING YOUR DATAIN UMBRACO 7 : ANGULAR EDITOR ROUTESThe main angular route to load editors is/:section/:tree/:method/:id
Umbraco will load in the view for this route based onconventionsViews will be loaded from:/App_Plugins/{mypackage}/BackOffice/{treetype}/{method}.html
Developers can specify a custom RoutePath for any tree nodewhich will cause umbraco to route to that specific location.
![Page 17: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/17.jpg)
EDITING YOUR DATAIN UMBRACO 7 : PACKAGE MANIFEST
The package.manifest is a json file that tells Umbraco what clientside resources to load when the custom tree is loaded
{ javascript : [ '~/App_Plugins/DUUG/scripts/customer.edit.controller.js', '~/App_Plugins/DUUG/scripts/customer.create.controller.js', '~/App_Plugins/DUUG/scripts/customer.delete.controller.js', '~/App_Plugins/DUUG/scripts/customer.resource.js' ]}
![Page 18: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/18.jpg)
REUSING EXISTING EDITORSIn Umbraco 6 you can achieve this in several ways, butall feel like a hackIn Umbraco 7 you can use the umb-editor directive
![Page 19: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/19.jpg)
TALK IS CHEAP. SHOWME THE CODE.
Linus Torvalds
![Page 20: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/20.jpg)
CREATING MENUS & DIALOGSMenu items appear in the context menu of your treenodeEach node type can have a different context menuClicking on a menu item can open a dialog
![Page 21: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/21.jpg)
CREATING MENUS & DIALOGSIN UMBRACO 6
Add your menu item to your treenodecustomerNode.Menu.Add(ActionDelete.Instance);
Default actions can be found inumbraco.BusinessLogic.Actions namespaceCustom actions can be created by implementingumbraco.interfaces.IAction
![Page 22: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/22.jpg)
CREATING MENUS & DIALOGSIN UMBRACO 6
Create a user control for your created dialogCreate a class that implementsumbraco.interfaces.ITaskReturnUrl
Register your dialogs & tasks in/umbraco/config/create/ui.xml
<nodetype alias="duugcustomerstree"> <header>Customer</header> <usercontrol>/../App_Plugins/duugV6/CustomerCreateDialog.ascx</usercontrol> <tasks> <create assembly="Duug.CustomSectionV6.Core" type="CustomerSection.CustomerTasks"> </create></tasks> </nodetype>
![Page 23: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/23.jpg)
CREATING MENUS & DIALOGSIN UMBRACO 7
Add your menu item to your treenode in the GetMenuForNodemethodThe alias of your menu node will also be the angular routeactionCreate a view and angular controller for the dialogDialogs will be loaded from/App_Plugins/{mypackage}/BackOffice/{treetype}/{action}.html
![Page 24: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/24.jpg)
TALK IS CHEAP. SHOWME THE CODE.
Linus Torvalds
![Page 25: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/25.jpg)
WRAP UPUmbraco 7 uses conventions over code/configLess backend codeFrontend & backend coders can work togetherEasier to reuse existing componentsYou don't need to be a angular expert
![Page 26: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/26.jpg)
QUESTIONS ?
![Page 27: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/27.jpg)
USEFULL LINKSUmbraco documentationTim Geyssens blogEnkelmedia blogDavid Brendel's blogSource code for this presentation
![Page 28: Building custom sections in Umbraco](https://reader034.vdocument.in/reader034/viewer/2022042515/547cdd9b5906b561378b45e1/html5/thumbnails/28.jpg)
THE END