Post on 05-Dec-2014
description
BUILDING CUSTOMSECTIONS IN UMBRACO
THE DIFFERENCES BETWEEN V6 AND V7by Dave Woestenborghs / @dawoe21
WHY USE CUSTOM SECTIONSCustom sections are ideal when you want your editors to manage
(external) data in the Umbraco backend
TECHNOLOGYThe main difference in building custom sections between V6 and
V7 is the technology
TECHNOLOGYUMBRACO 6 AND EARLIER
ASP.NET WebformsASP.NET MVCAngularJS & ASP.NET WebApi
TECHNOLOGYUMBRACO 7
AngularJS & ASP.NET WebApiASP.NET MVCASP.NET Webforms
Sections build for v6 should work in v7 with some minor UItweaking.
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 { }
CREATING A CUSTOM TREEA tree provides a navigation for your (external) dataThe source of the data can be anythingA section can have multiple trees
CREATING A CUSTOM TREEIN UMBRACO 6
Create a classInherit from umbraco.cms.presentation.Trees.BaseTreeDecorate class with umbraco.businesslogic.TreeAttribute
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 } }
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
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) { } }
TALK IS CHEAP. SHOWME THE CODE.
Linus Torvalds
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)
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
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
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.
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' ]}
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
TALK IS CHEAP. SHOWME THE CODE.
Linus Torvalds
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
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
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>
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
TALK IS CHEAP. SHOWME THE CODE.
Linus Torvalds
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
QUESTIONS ?
USEFULL LINKSUmbraco documentationTim Geyssens blogEnkelmedia blogDavid Brendel's blogSource code for this presentation
THE END