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

1. BUILDING CUSTOM
SECTIONS IN UMBRACO
THE DIFFERENCES BETWEEN V6 AND V7
4F1 F* ./ )*-#.F¥F´2* ut

2. WHY USE CUSTOM SECTIONS
0./*(F. /$*).F- F$ 'F2# )F4*0F2)/F4*0-F $/*-.F/*F()
¨ 3/ -)'©F/F$)F/# F(-*F )

3. TECHNOLOGY
# F($)F$!! - ) F$)F0$'$)F0./*(F. /$*).F /2 )FyF)
zF$.F/# F/ #)*'*4

4. TECHNOLOGY
UMBRACO 6 AND EARLIER
‡F !*-(.
‡F
)0'-
FF‡F +$

5. TECHNOLOGY
UMBRACO 7
)0'-
FF‡F +$
‡F
‡F !*-(.
/$*).F0$'F!*-F1yF.#*0'F2*-F$)F1zF2$/#F.*( F($)*-F
/2 $)‡

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. 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. CREATING A CUSTOM TREE
IN UMBRACO 6
- / FF'..
)# -$/F!-*(Fumbraco.cms.presentation.Trees.BaseTree
*-/ F'..F2$/#Fumbraco.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
}
protected override void CreateRootNode(ref XmlTreeNode rootNode)
{
// create root node of tree
}
}

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. 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.

13. $)0.F*-1'.

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. 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. 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. 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. 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. 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. TALK IS CHEAP. SHOW
ME THE CODE.

21. $)0.F*-1'.

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. 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. 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. 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. TALK IS CHEAP. SHOW
ME THE CODE.

27. $)0.F*-1'.

28. WRAP UP
(-*FzF0. .F*)1 )/$*).F*1 -F* ¥*)!$

29. ..F )F*
-*)/ )FF )F* -.F)F2*-F/* /# -
.$ -F/*F- 0. F 3$./$)F*(+*) )/.
*0F*)Þ/F) F/*F FF)0'-F 3+ -/

30. QUESTIONS ?

31. USEFULL LINKS
(-*F*0( )//$*)
$(F 4.. ).F'*
) '( $F'*
1$F- ) 'Þ.F'*
*0- F* F!*-F/#$.F+- . )//$*)

32. THE END