Reusing the Multi Node Tree Picker in a Custom Section

I’ve built a fair few custom sections in some of our Umbraco projects over the years. One of the things I really like about Umbraco version 7, is the ability to easily reuse the property editors (aka Data Types) that come packaged with Umbraco.

If you’ve never created a custom section and/or custom tree I recommend having a look through the Umbraco 7 tutorials site and a great 2 part walkthrough by Markus Johansson (part 1, part 2) and finally this little gem, also from Markus, about loading the rich text editor in a custom section. I know it’s a lot of reading, but for a developer it’s a great primer for extending the backoffice of your Umbraco solutions.

Assuming you’ve got your custom section and your tree setup with your data you’ll end up with a tree of data, a view to edit that data with and a couple of controllers to handle the logic (an AngularJS controller and a Web API controller to handle the .net side of things). Actually, you’ve likely got a bit more than that as you’ve setup your own custom section, however, I’ll save that for another day.

So, using the property editor lazy loading technique from Markus, in my view I add this umb-property and umb-editor directives.

<umb-property property="property" ng-repeat="property in properties">
    <umb-editor model="property"></umb-editor>
</umb-property>

These are the directives that will be rendering out the property editor I load via the controller and wrapping it with a label and description.

In my AngularJS controller I’m going add the settings for the Multi Node Tree Picker property editor to my scope.

$http.get("BackOffice/MyCustomSection/ThingsApi/GetById?Id=" + $routeParams.id)
    .success(function (data) {
        $scope.thing = data;
        $scope.properties = [
            {
                label: 'Nodes',
                description: 'Look, Umbraco nodes!',
                view: 'contentpicker',
                config: {
                    multiPicker: "1",
                    entityType: "Document",
                    startNode: {
                        query: "",
                        type: "content",
                        id: -1
                    },
                    filter: "",
                    minNumber: 0,
                    maxNumber: 5
                },
                value: $scope.thing.Nodes
            }
        ];
    })
    .error(function () {
        notificationsService.error("Error", "The Thing could not be retrieved");
    });

Some of the settings can be omitted in this setup like query as I’m not using it, however I threw it in there to have it for reference in the event you would like to use it.

The end result is loading the Multi Node Tree Picker property editor that comes prepackaged in Umbraco, allowing you to use it to select content nodes from the site and associate them to your custom data.

Once you have a fair understanding of how to load one or more of these property editors, I suspect many of the others won't be too taxing as Umbraco’s controllers and views are all in the solution. You can just crack them open and take a look see what data they require. The views are found in the folder at ~\umbraco\views in your project, and the Umbraco controller is found at ~\umbraco\Js\umbraco.controllers.js.

Good luck, happy coding.