DUUG meetup Colours - Custom sections v6 vs v7
-
Upload
colours-bv -
Category
Presentations & Public Speaking
-
view
109 -
download
1
description
Transcript of DUUG meetup Colours - Custom sections v6 vs v7
![Page 1: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/html5/thumbnails/1.jpg)
BUILDING CUSTOMSECTIONS IN UMBRACO
THE DIFFERENCES BETWEEN V6 AND V7by Dave Woestenborghs / @dawoe21
![Page 2: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/html5/thumbnails/3.jpg)
TECHNOLOGYThe main difference in building custom sections between V6 and
V7 is the technology
![Page 4: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/html5/thumbnails/4.jpg)
TECHNOLOGYUMBRACO 6 AND EARLIER
ASP.NET WebformsASP.NET MVCAngularJS & ASP.NET WebApi
![Page 5: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/html5/thumbnails/12.jpg)
TALK IS CHEAP. SHOWME THE CODE.
Linus Torvalds
![Page 13: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/html5/thumbnails/19.jpg)
TALK IS CHEAP. SHOWME THE CODE.
Linus Torvalds
![Page 20: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/html5/thumbnails/24.jpg)
TALK IS CHEAP. SHOWME THE CODE.
Linus Torvalds
![Page 25: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/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: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/html5/thumbnails/26.jpg)
QUESTIONS ?
![Page 27: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/html5/thumbnails/27.jpg)
USEFULL LINKSUmbraco documentationTim Geyssens blogEnkelmedia blogDavid Brendel's blogSource code for this presentation
![Page 28: DUUG meetup Colours - Custom sections v6 vs v7](https://reader034.fdocuments.in/reader034/viewer/2022051610/5482d8c4b4af9f820d8b48ae/html5/thumbnails/28.jpg)
THE END