Update: I found this page, which describes al least, where the default views can be found:

http://umbraco.github.io/Belle/#/tutorials/Creating-Editors-Trees

Any further hints are appreciated... ;-)

Just for the records, I managed to add the siblings navigation buttons.

First one should know, that the html code resides in Umbraco/Views. The view I had to change, was in Umbraco/Views/content/edit.html.

All Angular controllers, directives, resources, etc. can be found in Umbraco/js. There is one File for all controllers, one for all directives, etc. The Html code for the directives can be found in Umbraco/Views/directives.

I searched in the Browser Explorer for the element, at which I wanted to add the navigation buttons. In my case I wanted to appear the buttons at the left side of the Actions button (see picture).

This is the Action Button in edit.html:

<div class="span5">
    <div class="btn-toolbar pull-right umb-btn-toolbar">
        <!-- Place to insert the buttons -->
        <div class="btn-group" ng-animate="'fade'" ng-show="formStatus">
            <p class="btn btn-link umb-status-label">{{formStatus}}</p>
        </div>

The first thing I needed was the treeService to supply methods for getting the NextSibling and PrevSibling. The treeService is in umbraco.services.js. In the return part of the function I added two function elements:

// someFunction: ....
,
getNextSibling: function(treeNode){
    var allSiblings = treeNode.parent().children;
    var index = allSiblings.indexOf(treeNode);
    if (index === -1 || index > allSiblings.length - 2)
        return null;
    return allSiblings[index + 1];
},
getPrevSibling: function (treeNode) {
    var allSiblings = treeNode.parent().children;
    var index = allSiblings.indexOf(treeNode);
    if (index < 1)
        return null;
    return allSiblings[index - 1];
},

The Ids of the siblings had to be provided by the controller, so that they can be used by the view in edit.html. The view starts with a line

ng-controller="Umbraco.Editors.Content.EditController"

so that it is easy to find the right controller in umbraco.controllers.js. The controller has a method syncTreeNode which sets the currentNode of the scope in two anonymous methods. I added a method setSiblings to the controller:

function setSiblings()
{
    if (!$scope.currentNode) {
        return;
    }
    var prevSibling = treeService.getPrevSibling($scope.currentNode);
    $scope.prevId = prevSibling ? prevSibling.id : null;
    var nextSibling = treeService.getNextSibling($scope.currentNode);
    $scope.nextId = nextSibling ? nextSibling.id : null;
}

If there is no previous or next sibling, the prevId or nextId is null. This is very handy to make the respective buttons invisible. The setSiblings method gets called in the two anon. methods in syncTreeNode:

$scope.currentNode = syncArgs.node;  // this line is the existing code
setSiblings();  // the currentNode is known, let's determine the siblings

Now the scope has two variables prevId and nextId, which I can use in edit.html. I added the following code just before the 'Actions' button:

<div style="float:left;" ng-show="currentNode">
    <a ng-show="prevId" class="btn" href="/umbraco/#/content/content/edit/{{prevId}}">&lt;</a>
    <a ng-show="nextId" class="btn" href="/umbraco/#/content/content/edit/{{nextId}}">&gt;</a>
</div>

The prevId and nextId variables are used to control the visibility of the buttons as well as to generate the link to the siblings.

That solves the first problem.

BUT: Is it possible to achieve this funktionality with a plugin instead of manipulating the umbraco source code?

Any suggestions?

Mirko

Hi Mirko

It is currently not possible to do, but its a very valid possibility to include. After a bit of research I'm pretty confident that we can get it working by modifying the central editor loading (happens through ng-include which we can swap out with our own) and by modifying the dialogService.

With these 2 changed, we could build a service that exposes it like so (psudo code):

eventService.beforeRender("content/edit.html", function(template, scope){
   template.find(".umb-btn-toolbar").prepend("<a href="#">{{nextId}}</a>");
   scope.nextId = 1244;
   scope.prevId = 1245;
});

The above would be applied before the template is compiled and linked and the controller scope would inherit the nextId / prevId

If we need further control over the model on the controller, we could also add events to appState and editorState services so you could subscribe to when these are updated

Should a feature request be created for this? 

I think the person in this topic is looking for the same: http://our.umbraco.org/forum/umbraco-7/developing-umbraco-7-packages/47608-Registering-Umbraco-7-Events

Jeroen

Hi Per,

thanks for your answer. I fear, that I didn't understand, how to apply your findings. It sounds as if your solution could get away with less modifications in the Umbraco files then my code. If that were the case it would be very valuable to have some demo code.

Anyway it would be a very good idea to have a plugin system as part of the Umbraco distribution.

Mirko

is working on a reply...