In the last post we talked about how to add a new custom application (or section) and a new custom tree to your Umbraco 7 backoffice. Now I’ll show you how to add views so that your sections can do something meaningful.

You could use legacy views as well but since I was rewriting Newsletter Studio to work use AngularJS and work really nice with Umbraco 7 I took this approach.

The routing

Since we added the PluginController(“CustomSection“)-attribute to our tree-class, Umbraco will route the cliend side requests to a folder in the app_plugins-folder. The logic is something like: /app_plugins/{applicationName}/{treeAlias}/{action}/itemId so in our case we’re looking at the url /#/CustomSection/CustomSectionTree/edit/dashboard and Umbraco will look for /app_plugins/customsection/backoffice/CustomSectionTree/edit.html to show as the view – so let’s create that file.

The view

Add this content to our new edit.html-file:

<script>

    function CustomSectionEditController($scope, $routeParams) {
        $scope.content = { tabs: [{ id: 1, label: "Tab 1" }, { id: 2, label: "Tab 2" }] };

        $scope.EditMode = function() {
            return $routeParams.create == 'true';
        };
    }
</script>

<div ng-controller="CustomSectionEditController">

    <umb-panel>
    <umb-header tabs="content.tabs">
        <div class="umb-headline-editor-wrapper span12 ng-scope">
            <h1 class="ng-binding">My custom section {{id}}</h1>
               </div>
    </umb-header>

    <umb-tab-view>
        <umb-tab id="tab1" rel="svensson">

        <div class="umb-pane">
            This is tab content for tab 1<br/>
           <p ng-show="EditMode()">
                   <span class="label label-warning">In create mode, this label is only showed when the controller sees the create-querystring item.</span>
           </p>
        </div>
        </umb-tab>

        <umb-tab id="tab2" rel="kalle">

        <div class="umb-pane">

                    This is tab content for tab 2
         </div>
        </umb-tab>

    </umb-tab-view>
</umb-panel>

</div>

This code will give us a view that looks like this:

Even if we could have added regular HTML in the view, I choose to include some AngularJS-stuff and some stuff that Umbraco adds on to AngularJS. The umb-tab, umb-tab-view, umb-panel-elements are something called directives which is a core concept in AngularJS. These directives hide complex logic for generating the view that’s on the right and side of our backoffice. Directives are very powerfull and can be used to create reusable code and "widgets" in your application – let’s just ignore the details of this for now and focus on the code above.

In the script-tag I create a regular JavaScript function that will act as the controller for the view, this function take a $scope-variable as parameter which will act as the "glue" between the controller and the view. $scope is a funamental part of AngularJS and should be familiar to you if you have worked with Angular before. Since the Umbraco's custom directives looks at the $scope.content.tabs-property when creating the tabs we need to populate this property with some static data – in this case the “Tab 1” and “Tab 2”-objects.

The only “magic” that you’ll need to be aware of is that Umbraco will match the id of the tab with the id of the <umb-tab>-tag. So <umb-tab id="tab1"> will be showed when you click the tab with id 1 – and <umb-tab id="tab2"> will be showed when you click the tab with id 2. Let’s look closer at the $routeParams and the CreateAction that we added to the TreeController-class in the last post.

The menu items

The MenuItemCollection, that the TreeController we created in the last post, returns a collection that just contains a ActionNew-item. This action will look for the view /app_plugins/CustomSection/Umbraco/CustomSectionTree/create.html which will be displayed when the user clicks the “Create new” button.

I have use some code from the create content-dialog – lets add this to our create.html-view.

<div class="umb-dialog-body with-footer">
    <div class="umb-pane">
    <h5><localize key="create_createUnder">Create something under </localize> {{currentNode.name}}</h5>

    <ul class="umb-actions umb-actions-child">
        <li>            
            <a href="#/CustomSection/CustomSectionTree/edit/dashboard?create=true" ng-click="nav.hideNavigation()">
                <i class="large icon-car"></i> 
                <span class="menu-label">New custom item
                    <small>Click here to create this super custom item</small>
                </span>
            </a>
        </li> 
    </ul>
    </div>        
</div>
<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
        <button class="btn" ng-click="nav.hideDialog()">
            <localize key="buttons_somethingElse">Do something else</localize>
        </button>
</div>

Yesterday we finally got the the first release of Umbraco 7 which introduce a new look and feel for the backoffice. Not only that – the technicall differences from V6 is huge.

Since I'm writing the popular newsletter-package Newsletter Studio for Umbraco I had look really deep into the source of Umbraco 7 to get things right.

I now want to show you how to add a custom section with a custom tree to the Umbraco backoffice – some of the things is similar to how it used to work (in V4-6) and some things are new.

Creating the application

Every section in Umbraco is called an application, so sections and applications is basically the same thing.The first thing we’ll need to do is to create the application. In this examples I will not fiddle with the xml-files or the database – I’ll use class annotations to create my section.

The first thing I’ll need to do is to create a class that implements the IApplication-interface so that Umbraco will initialize this class on start up.

[Application("CustomSection", "CustomSection","icon-car", 15)]
public class CustomSectionApplication : IApplication {}

This is not something new for V7, The "Application"-attribute basically tells Umbraco to create a new application:
Name: CustomSection
Alias: CustomSection
Icon: icon-car (the css class for the icon that will be displayed in the left side bar of the backoffice)
Sort order: 15

The next time Umbraco runs it will add an XML-element to the /config/applications.config-file that will add our new section/application to the Umbraco backoffice.

Creating the tree

Before adding the tree, Umbraco will not care about your new application. An application without a tree is not worth anything =D Right?

This part contains some new concepts for V7. Let's start with creating a new class that inherits from Umbraco.Web.Trees.TreeController, make sure to suffix the class name with “Controller” ie. CustomSectionTreeController.

public class CustomSectionTreeController : TreeController
{
}

Now we need to give Umbraco some extra information about our tree. Let's add two attributes on the class, the Tree and the PluginController-attributes.

[PluginController("CustomSection")]
[Umbraco.Web.Trees.Tree("CustomSection", "CustomSectionTree", "My custom section", iconClosed: "icon-doc")]
public class CustomSectionTreeController : TreeController
{
}

PluginController

This attribute tells Umbraco that this class is part of a plugin, and it also tells Umbraco the name of that plugin. This will make Umbraco look for views inside the /app_plugin/{NameOfApplication}/-folder and not in the folder of the core-views which is the default.

Tree

This attribute is “older” and has been around since somewhere around 4.7 I think. It tells Umbraco that this is a tree-class and Umbraco will add this to the /config/trees.config-file. In V7 this attribute is mandatory for a tree that inherits from the TreeController-class as some underlying logic is looking at the attribute values to determine the name of the tree.

The properties are:
Application: CustomSection (must match the name of the application we added before)
Alias: CustomSectionTree (the name/alias of the tree)
Title: The title of the tree (used as the name of the root node)
Icon: The icon (or class) used as the tree icon.

Alright. Almost there. Now we need to add some code to show items in the tree.

[PluginController("CustomSection")]
[Umbraco.Web.Trees.Tree("CustomSection", "CustomSectionTree","My custom section", iconClosed: "icon-doc")]
public class CustomSectionTreeController : TreeController
{
    protected override TreeNodeCollection GetTreeNodes(string id, FormDataCollection queryStrings)
    {
        var nodes = new TreeNodeCollection();
        var item = this.CreateTreeNode("dashboard", id, queryStrings, "My item", "icon-truck", true);
        nodes.Add(item);
        return nodes;
    }

    protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
    {
       var menu = new MenuItemCollection();
       menu.DefaultMenuAlias = ActionNew.Instance.Alias;
        menu.Items.Add<ActionNew>("Create");
        return menu;
    }
}

This will give us something like this:

This code has two methods that are the least we need to do to create a new section.

GetTreeNodes (TreeNodeCollection)

This returns a collection of tree items, in our case we just return one item but we could of curse add more items to the collection. We use the CreateTreeNode-method from the base class to create a new node called “My item” with the id “dashboard”. Umbraco will append the id of the node to the URL later on so that we can handle the routing from our AngularJS-controllers.

GetMenuForNode (MenuItemCollection)

This method handles the “right click alternatives”. The “DefaultMenuAlias” configures which action that should be fired when we click the “touch dots” .

There's a lot of actions that you can use and you can also build your own ones.

Displaying our new section

To display our new section we need to give the current user access to it. Go to the users-section and open the edit-view for the current logged on user. In the bottom, check the checkbox for [CustomSection] and hit save. Now you’ll probably need to refresh the page using F5 to show the new section in the left side bar.

Making the [CustomSection]-text look better

Since Umbraco can’t find any language translation for our section it will use the brackets and the application name. To make this nicer, open the /umbraco/config/lang/en.xml-field and look for the <area alias=”sections”>-element. Inside that element, just add:

<key alias="CustomSection">Super Custom Section</key>

You may need to touch the root web.config file to restart the application before the new translation gets visible.

This is my first blog post about custom sections and custom trees in Umbraco 7 – next time I’ll you show how you can create the views for the new tree items.

After weeks of hard work from the guys in the core team Umbraco 7 was released today! The biggest news is the new look and feel of the backoffice.

If you have used Umbraco before you’ll probably find your way around as the over all concepts are the same. If you know how to build websites with previous versions of Umbraco you’ll feel comfortable with V7 as well. The new backoffice has been built with the editors in mind and I must say that we’re seeing a lot of improvements! I really love the why that the people behind the design is thinking.

I’ve looked at the beta and RC-versions of V7 and provided some feedback (ie. the drag and drop into the media dialog) and I really recommend you to download the latest version and play with it! Start building your new sites with it! But it’s important to don’t leave your frustrations in your mind – share them at issues.umbraco.org so that the core team can do something about it! It’s the least each and everyone can do to contribute to this great project!

Niels Hartvig posted a nice video of the new backoffice, have a look at it here: http://umbraco.com/follow-us/blog-archive/2013/11/21/umbraco-7.aspx

Last week I hosted the first Umbraco Training Courses in Sweden. We now have more than 20 new certified Umbraco developers and some new companies have become Certified Partners.

Since it was my first course I can admit that I was a little bit nervous i the beginning of the week – I always get that feeling when stepping out of my “comfort zone” and doing something that I have never done before. So far I have only got good feedback from the attendees, some even called me “excellent” – thank you very much for that. =D

I’ve been asked if we are going to have a new round of training in Sweden. Of course! But we have not decided the exact dates yet. If you want to be noticed – sign up for our newsletter.

I also would like to share to share some photos from the course =D

Level 1 attendees working on one of the exercises.

The Level 2 workbook, razor-sheet sheet and the super fancy Umbraco USB that all attendees got a copy of.

Attendees at the level 2 course.

Closest in this picture we see attendees from Chalmers in Gothenburg and from the Örebro-based company Impera

I you’re a long time reader of this blog you know that I’m working hard with my newsletter-package for Umbraco – Newsletter Studio.

Today I announced some news that I hope will make some of all the web agencies out there happy. As web agencies over the world will all get a free Newsletter Studio license for their own website.

So if you your company web site runs on Umbraco, don’t wait – request your free license today!