Building custom sections in Umbraco

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'-
FF‡F +$

TECHNOLOGY
UMBRACO 7
)0'-
FF‡F +$
‡F

‡F !*-(.
/$*).F0$'F!*-F1yF.#*0'F2*-F$)F1zF2$/#F.*( F($)*-F
/2 $)‡

CREATING A CUSTOM SECTION
- /$)FF0./*(F. /$*)F$.F'(*./F$ )/$'F$)FyFFz
- / FF'..
(+' ( )/Fumbraco.interfaces.IApplication
*-/ F2$/#
umbraco.businesslogic.ApplicationAttribute
[Application(duug-customers, Customers, icon-people, 15)]
public class Section: IApplication
{
}

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

IN UMBRACO 6
- / FF'..
)# -$/F!-*(Fumbraco.cms.presentation.Trees.BaseTree
*-/ F'..F2$/#Fumbraco.businesslogic.TreeAttribute

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

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

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)
{
}
}

TALK IS CHEAP. SHOW
ME THE CODE.

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*)/-*'' -©

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*)/-*'.

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 .

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'*/$*)‡

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'
]
}

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

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$'*

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

IN UMBRACO 6
- / FF0. -F*)/-*'F!*-F4*0-F- / F$'*
- / FF'..F/#/F$(+' ( )/.
umbraco.interfaces.ITaskReturnUrl
$./ -F4*0-F$'*.FF/..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

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

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

Building custom sections in Umbraco

More Related Content

What's hot (18)

Viewers also liked (7)

Similar to Building custom sections in Umbraco (20)

Recently uploaded (20)

Building custom sections in Umbraco