BUILDING CUSTOM SECTIONS IN UMBRACO

Size: px

Start display at page:

Download "BUILDING CUSTOM SECTIONS IN UMBRACO"

Ashley Boone
6 years ago
Views:

1 BUILDING CUSTOM SECTIONS IN UMBRACO THE DIFFERENCES BETWEEN V6 AND V7 by Dave Woestenborghs

2 WHY USE CUSTOM SECTIONS Custom sections are ideal when you want your editors to manage (external) data in the Umbraco backend

3 TECHNOLOGY The main difference in building custom sections between V6 and V7 is the technology

4 TECHNOLOGY UMBRACO 6 AND EARLIER ASP.NET Webforms ASP.NET MVC AngularJS & ASP.NET WebApi

5 TECHNOLOGY UMBRACO 7 AngularJS & ASP.NET WebApi ASP.NET MVC ASP.NET Webforms Sections build for v6 should work in v7 with some minor UI tweaking.

6 CREATING A CUSTOM SECTION Creating a custom section is almost identical in V6 & V7 Create a class Implement umbraco.interfaces.iapplication Decorate with umbraco.businesslogic.applicationattribute [Application("duug-customers", "Customers", "icon-people", 15)] public class Section: IApplication { }

7 CREATING A CUSTOM TREE A tree provides a navigation for your (external) data The source of the data can be anything A section can have multiple trees

8 CREATING A CUSTOM TREE IN UMBRACO 6 Create a class Inherit from umbraco.cms.presentation.trees.basetree Decorate class with umbraco.businesslogic.treeattribute

9 CREATING A CUSTOM TREE IN 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 }

10 CREATING A CUSTOM TREE IN UMBRACO 7 Create a class (class name suffixed with Controller) Inherit from Umbraco.Web.Trees.TreeController Decorate class with umbraco.businesslogic.treeattribute Decorate class with Umbraco.Web.Mvc.PluginControllerAttribute

11 CREATING A CUSTOM TREE IN 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) { } }

12 TALK IS CHEAP. SHOW ME THE CODE. Linus Torvalds

13 EDITING YOUR DATA Now that we have created our tree we want the editors to be able to edit the data In Umbraco 6 we will create a Webform page In Umbraco 7 we will create a angular view (plain html + angular controller)

14 EDITING YOUR DATA IN UMBRACO 6 Set the action of your tree node (js function) In RenderJS method you need create the function Create your edit webform Use umbraco.uicontrols (tabview, panes, propertypanels) to keep look and feel of the backend Validate input with.net validation controls

15 EDITING YOUR DATA IN UMBRACO 7 Set the route for your tree node (if needed) Create your editor view Create your editor angular controller Create/update package manifest Use directives to keep look and feel of the backend (umb-pane, umb-tab,...) Validate input with angular directives

16 EDITING YOUR DATA IN UMBRACO 7 : ANGULAR EDITOR ROUTES The main angular route to load editors is /:section/:tree/:method/:id Umbraco will load in the view for this route based on conventions Views will be loaded from: /App_Plugins/{mypackage}/BackOffice/{treetype}/{method}.html Developers can specify a custom RoutePath for any tree node which will cause umbraco to route to that specific location.

17 EDITING YOUR DATA IN UMBRACO 7 : PACKAGE MANIFEST The package.manifest is a json file that tells Umbraco what client side 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' ]

18 REUSING EXISTING EDITORS In Umbraco 6 you can achieve this in several ways, but all feel like a hack In Umbraco 7 you can use the umb-editor directive

19 TALK IS CHEAP. SHOW ME THE CODE. Linus Torvalds

20 CREATING MENUS & DIALOGS Menu items appear in the context menu of your tree node Each node type can have a different context menu Clicking on a menu item can open a dialog

21 CREATING MENUS & DIALOGS IN UMBRACO 6 Add your menu item to your treenode customernode.menu.add(actiondelete.instance); Default actions can be found in umbraco.businesslogic.actions namespace Custom actions can be created by implementing umbraco.interfaces.iaction

22 CREATING MENUS & DIALOGS IN UMBRACO 6 Create a user control for your created dialog Create a class that implements umbraco.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>

23 CREATING MENUS & DIALOGS IN UMBRACO 7 Add your menu item to your treenode in the GetMenuForNode method The alias of your menu node will also be the angular route action Create a view and angular controller for the dialog Dialogs will be loaded from /App_Plugins/{mypackage}/BackOffice/{treetype}/{action}.html

24 TALK IS CHEAP. SHOW ME THE CODE. Linus Torvalds

25 WRAP UP Umbraco 7 uses conventions over code/config Less backend code Frontend & backend coders can work together Easier to reuse existing components You don't need to be a angular expert

26 QUESTIONS?

27 USEFULL LINKS Umbraco documentation Tim Geyssens blog Enkelmedia blog David Brendel's blog Source code for this presentation

28 THE END

David Brendel [EVENTCALENDAR DOCUMENTATION] Short documentation for the Umbraco EventCalendar package

2013 David Brendel [EVENTCALENDAR DOCUMENTATION] Short documentation for the Umbraco EventCalendar package Table of Contents Installation... 2 Creating a new calendar... 2 Edit calendar settings... 2 Google