Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BUILDING CUSTOM 
SECTIONS IN UMBRACO 
THE DIFFERENCES BETWEEN V6 AND V7 
4F1 F* ./ )*-#.F¥F´2* ut
WHY USE CUSTOM SECTIONS 
0./*(F. /$*).F- F$ 'F2# )F4*0F2)/F4*0-F $/*-.F/*F()  
¨ 3/ -)'©F/F$)F/# F(-*F )
TECHNOLOGY 
# F($)F$!! - ) F$)F0$'$)F0./*(F. /$*).F /2  )FyF) 
zF$.F/# F/ #)*'*4
TECHNOLOGY 
UMBRACO 6 AND EARLIER 
‡F !*-(. 
‡F
 
)0'-
FF‡F +$
TECHNOLOGY 
UMBRACO 7 
)0'-
FF‡F +$ 
‡F
 
‡F !*-(. 
 /$*).F0$'F!*-F1yF.#*0'F2*-F$)F1zF2$/#F.*( F($)*-F	 
/2 $)‡
CREATING A CUSTOM SECTION 
- /$)FF0./*(F. /$*)F$.F'(*./F$ )/$'F$)FyFFz 
- / FF'.. 
	(+' ( )/Fumbraco.interfaces.IApplicat...
CREATING A CUSTOM TREE 
F/-  F+-*1$ .FF)1$/$*)F!*-F4*0-F¨ 3/ -)'©F/ 
# F.*0- F*!F/# F/F)F F)4/#$) 
F. /$*)F)F#1 F(0'/$+' F...
CREATING A CUSTOM TREE 
IN UMBRACO 6 
- / FF'.. 
	)# -$/F!-*(Fumbraco.cms.presentation.Trees.BaseTree 
 *-/ F'..F2$/#Fumbr...
CREATING A CUSTOM TREE 
IN UMBRACO 6 
[Tree(duugcustomers, duugcustomerstree, Customers)] 
public class CustomerTree : Bas...
CREATING A CUSTOM TREE 
IN UMBRACO 7 
- / FF'..F¨'..F)( F.0!!$3 F2$/#F*)/-*'' -© 
	)# -$/F!-*(FUmbraco.Web.Trees.TreeContr...
CREATING A CUSTOM TREE 
IN UMBRACO 7 
[Tree(duug-customers, duug-customers-tree, Customers)] 
[PluginController(DUUG)] 
pu...
TALK IS CHEAP. SHOW 
ME THE CODE.
$)0.F*-1'.
EDITING YOUR DATA 
*2F/#/F2 F#1 F- / F*0-F/-  F2 F2)/F/# F $/*-.F/*F F'  
/*F $/F/# F/ 
	)F(-*FyF2 F2$''F- / FF !*-(F+  
	...
EDITING YOUR DATA 
IN UMBRACO 6 
 /F/# F/$*)F*!F4*0-F/-  F)* F¨%.F!0)/$*)© 
	)F ) -
F( /#*F4*0F)  F- / F/# F!0)/$*) 
- / F...
EDITING YOUR DATA 
IN UMBRACO 7 
 /F/# F-*0/ F!*-F4*0-F/-  F)* F¨$!F)   © 
- / F4*0-F $/*-F1$ 2 
- / F4*0-F $/*-F)0'-F*)/-...
EDITING YOUR DATA 
IN UMBRACO 7 : ANGULAR EDITOR ROUTES 
# F($)F)0'-F-*0/ F/*F'*F $/*-.F$. 
/:section/:tree/:method/:id 
(...
EDITING YOUR DATA 
IN UMBRACO 7 : PACKAGE MANIFEST 
# F+ ‡()$! ./F$.FF%.*)F!$' F/#/F/ ''.F(-*F2#/F'$ )/ 
.$ F- .*0- .F/*F'...
REUSING EXISTING EDITORS 
	)F(-*FyF4*0F)F#$ 1 F/#$.F$)F. 1 -'F24.ˆF0/ 
''F!  'F'$ FF# 
	)F(-*FzF4*0F)F0. F/# Fumb-editorF$...
TALK IS CHEAP. SHOW 
ME THE CODE.
$)0.F*-1'.
CREATING MENUS  DIALOGS 

 )0F$/ (.F++ -F$)F/# F*)/ 3/F( )0F*!F4*0-F/-   
)*  
#F)* F/4+ F)F#1 FF$!! - )/F*)/ 3/F( )0 
'$$...
CREATING MENUS  DIALOGS 
IN UMBRACO 6 
F4*0-F( )0F$/ (F/*F4*0-F/-  )*  
customerNode.Menu.Add(ActionDelete.Instance); 
 !0...
CREATING MENUS  DIALOGS 
IN UMBRACO 6 
- / FF0. -F*)/-*'F!*-F4*0-F- / F$'* 
- / FF'..F/#/F$(+' ( )/. 
umbraco.interfaces.I...
CREATING MENUS  DIALOGS 
IN UMBRACO 7 
F4*0-F( )0F$/ (F/*F4*0-F/-  )* F$)F/# FGetMenuForNode 
( /#* 
# F'$.F*!F4*0-F( )0F)...
TALK IS CHEAP. SHOW 
ME THE CODE.
$)0.F*-1'.
WRAP UP 
(-*FzF0. .F*)1 )/$*).F*1 -F* ¥*)!$
Upcoming SlideShare
Loading in …5
×

DUUG meetup Colours - Custom sections v6 vs v7

817 views

Published on

Slides about the presentation of Dave Woestenborghs on the DUUG meetup of 25 september 2014 about creating custom sections in Umbraco and the differences between V6 and V7.

  • Be the first to comment

  • Be the first to like this

DUUG meetup Colours - Custom sections v6 vs v7

  1. 1. BUILDING CUSTOM SECTIONS IN UMBRACO THE DIFFERENCES BETWEEN V6 AND V7 4F1 F* ./ )*-#.F¥F´2* ut
  2. 2. WHY USE CUSTOM SECTIONS 0./*(F. /$*).F- F$ 'F2# )F4*0F2)/F4*0-F $/*-.F/*F() ¨ 3/ -)'©F/F$)F/# F(-*F )
  3. 3. TECHNOLOGY # F($)F$!! - ) F$)F0$'$)F0./*(F. /$*).F /2 )FyF) zF$.F/# F/ #)*'*4
  4. 4. TECHNOLOGY UMBRACO 6 AND EARLIER ‡F !*-(. ‡F )0'- FF‡F +$
  5. 5. TECHNOLOGY UMBRACO 7 )0'- FF‡F +$ ‡F ‡F !*-(. /$*).F0$'F!*-F1yF.#*0'F2*-F$)F1zF2$/#F.*( F($)*-F /2 $)‡
  6. 6. CREATING A CUSTOM SECTION - /$)FF0./*(F. /$*)F$.F'(*./F$ )/$'F$)FyFFz - / FF'.. (+' ( )/Fumbraco.interfaces.IApplication *-/ F2$/# umbraco.businesslogic.ApplicationAttribute [Application(duug-customers, Customers, icon-people, 15)] public class Section: IApplication { }
  7. 7. CREATING A CUSTOM TREE F/- F+-*1$ .FF)1$/$*)F!*-F4*0-F¨ 3/ -)'©F/ # F.*0- F*!F/# F/F)F F)4/#$) F. /$*)F)F#1 F(0'/$+' F/- .
  8. 8. CREATING A CUSTOM TREE IN UMBRACO 6 - / FF'.. )# -$/F!-*(Fumbraco.cms.presentation.Trees.BaseTree *-/ F'..F2$/#Fumbraco.businesslogic.TreeAttribute
  9. 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 } protected override void CreateRootNode(ref XmlTreeNode rootNode) { // create root node of tree } }
  10. 10. CREATING A CUSTOM TREE IN UMBRACO 7 - / FF'..F¨'..F)( F.0!!$3 F2$/#F*)/-*'' -© )# -$/F!-*(FUmbraco.Web.Trees.TreeController *-/ F'..F2$/#Fumbraco.businesslogic.TreeAttribute *-/ F'..F2$/# Umbraco.Web.Mvc.PluginControllerAttribute
  11. 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. 12. TALK IS CHEAP. SHOW ME THE CODE.
  13. 13. $)0.F*-1'.
  14. 14. EDITING YOUR DATA *2F/#/F2 F#1 F- / F*0-F/- F2 F2)/F/# F $/*-.F/*F F' /*F $/F/# F/ )F(-*FyF2 F2$''F- / FF !*-(F+ )F(-*FzF2 F2$''F- / FF)0'-F1$ 2F¨+'$)F#/('Fá )0'-F*)/-*'' -©
  15. 15. EDITING YOUR DATA IN UMBRACO 6 /F/# F/$*)F*!F4*0-F/- F)* F¨%.F!0)/$*)© )F ) - F( /#*F4*0F) F- / F/# F!0)/$*) - / F4*0-F $/F2 !*-( . Fumbraco.uicontrolsF¨/1$ 2ˆF+) .ˆF+-*+ -/4+) '.© /*F +F'**F)F! 'F*!F/# F ) '$/ F$)+0/F2$/#F‡F1'$/$*)F*)/-*'.
  16. 16. EDITING YOUR DATA IN UMBRACO 7 /F/# F-*0/ F!*-F4*0-F/- F)* F¨$!F) © - / F4*0-F $/*-F1$ 2 - / F4*0-F $/*-F)0'-F*)/-*'' - - / ¥0+/ F+ F()$! ./ . F$- /$1 .F/*F +F'**F)F! 'F*!F/# F ) ¨0(ž+) ˆF0(ž/ˆ‡‡‡© '$/ F$)+0/F2$/#F)0'-F$- /$1 .
  17. 17. EDITING YOUR DATA IN UMBRACO 7 : ANGULAR EDITOR ROUTES # F($)F)0'-F-*0/ F/*F'*F $/*-.F$. /:section/:tree/:method/:id (-*F2$''F'*F$)F/# F1$ 2F!*-F/#$.F-*0/ F. F*) *)1 )/$*). $ 2.F2$''F F'* F!-*(‰ /App_Plugins/{mypackage}/BackOffice/{treetype}/{method}.html 1 '*+ -.F)F.+ $!4FF0./*(FRoutePathF!*-F)4F/- F)* 2#$#F2$''F0. F0(-*F/*F-*0/ F/*F/#/F.+ $!$F'*/$*)‡
  18. 18. EDITING YOUR DATA IN UMBRACO 7 : PACKAGE MANIFEST # F+ ‡()$! ./F$.FF%.*)F!$' F/#/F/ ''.F(-*F2#/F'$ )/ .$ F- .*0- .F/*F'*F2# )F/# F0./*(F/- F$.F'* { 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' ] }
  19. 19. REUSING EXISTING EDITORS )F(-*FyF4*0F)F#$ 1 F/#$.F$)F. 1 -'F24.ˆF0/ ''F! 'F'$ FF# )F(-*FzF4*0F)F0. F/# Fumb-editorF$- /$1
  20. 20. TALK IS CHEAP. SHOW ME THE CODE.
  21. 21. $)0.F*-1'.
  22. 22. CREATING MENUS DIALOGS )0F$/ (.F++ -F$)F/# F*)/ 3/F( )0F*!F4*0-F/- )* #F)* F/4+ F)F#1 FF$!! - )/F*)/ 3/F( )0 '$$)F*)FF( )0F$/ (F)F*+ )FF$'*
  23. 23. CREATING MENUS DIALOGS IN UMBRACO 6 F4*0-F( )0F$/ (F/*F4*0-F/- )* customerNode.Menu.Add(ActionDelete.Instance); !0'/F/$*).F)F F!*0)F$) umbraco.BusinessLogic.ActionsF)( .+ 0./*(F/$*).F)F F- / F4F$(+' ( )/$) umbraco.interfaces.IAction
  24. 24. CREATING MENUS DIALOGS IN UMBRACO 6 - / FF0. -F*)/-*'F!*-F4*0-F- / F$'* - / FF'..F/#/F$(+' ( )/. umbraco.interfaces.ITaskReturnUrl $./ -F4*0-F$'*.FF/..F$) /umbraco/config/create/ui.xml nodetype alias=duugcustomerstree headerCustomer/header usercontrol/../App_Plugins/duugV6/CustomerCreateDialog.ascx/usercontrol tasks create assembly=Duug.CustomSectionV6.Core type=CustomerSection.CustomerTasks /create/tasks /nodetype
  25. 25. CREATING MENUS DIALOGS IN UMBRACO 7 F4*0-F( )0F$/ (F/*F4*0-F/- )* F$)F/# FGetMenuForNode ( /#* # F'$.F*!F4*0-F( )0F)* F2$''F'.*F F/# F)0'-F-*0/ /$*) - / FF1$ 2F)F)0'-F*)/-*'' -F!*-F/# F$'* $'*.F2$''F F'* F!-*( /App_Plugins/{mypackage}/BackOffice/{treetype}/{action}.html
  26. 26. TALK IS CHEAP. SHOW ME THE CODE.
  27. 27. $)0.F*-1'.
  28. 28. WRAP UP (-*FzF0. .F*)1 )/$*).F*1 -F* ¥*)!$
  29. 29. ..F )F* -*)/ )FF )F* -.F)F2*-F/* /# - .$ -F/*F- 0. F 3$./$)F*(+*) )/. *0F*)Þ/F) F/*F FF)0'-F 3+ -/
  30. 30. QUESTIONS ?
  31. 31. USEFULL LINKS (-*F*0( )//$*) $(F 4.. ).F'* ) '( $F'* 1$F- ) 'Þ.F'* *0- F* F!*-F/#$.F+- . )//$*)
  32. 32. THE END

×