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