CODEWITHSUNDEEP
umbraco7
Michael Baarz
Michael Baarz

Reputation: 422

Umbraco 7+ backoffice development, client actions

I am new in Umbraco Backoffice development. I just followed some tutorials about that. Now I am struggling because I don't understand the client model of Umbraco Backoffice. What I have done is the following view:

<div ng-controller="UmbExtend.UmbExtendTree.ImportController">
    <div class="umb-pane">
        <h1>Datei hochladen</h1>
        <p>
            Bitte laden sie die Datei hoch, welche importiert werden soll. Es sind nur CSV Dateien erlaubt.
        </p>
        <div class="umb-actions">
            <input type="file" id="userImportFile"/>
        </div>
        <loading></loading>
        <div class="btn-toolbar pull-right umb-btn-toolbar">
            <a id="uploadNowButton" class="btn btn-primary" ng-click="runImport(99)" prevent-default>Benutzer jetzt importieren!</a>
        </div>
    </div>
</div>
<script>
    function checkUserImportFile() {
        var btn = $('#uploadNowButton');
        if (!$('#userImportFile').val().trim().endsWith(".csv")) {
            btn.addClass('disabled').fadeTo(500, 0);
        } else {
            btn.removeClass('disabled').fadeTo(500, 1);
        }
    }
    $('#userImportFile').change(function () {
        checkUserImportFile();
    });
    checkUserImportFile();
</script>

And the following client controller:

'use strict';
(function () {
    //create the controller
    function umbExtendImportController($scope, $routeParams, $http) {
        //set a property on the scope equal to the current route id
        $scope.id = $routeParams.id;

        $scope.runImport = function () {
        }

    };
    //register the controller
    angular
        .module("umbraco")
        .controller('UmbExtend.UmbExtendTree.ImportController', umbExtendImportController);
})();

e.g. I want to hide the contextMenu on runImport click, where the view is shown. So how can I do that? Are there some examples or documentations for the client model of umbraco backoffice version 7+?

Upvotes: 0

Views: 259

Answers (2)

co0ke
co0ke

Reputation: 36

Inject the navigationService into your controller and use the hideNavigation() method like so:

function umbExtendImportController($scope, $routeParams, $http, navigationService) {

    $scope.runImport = function () {
        navigationService.hideNavigation();
    }

};

Upvotes: 1

Tim
Tim

Reputation: 4257

Here is the API documentation for the v7 back office: http://umbraco.github.io/Belle/#/api it's not complete, but it gives a good starting point.

As for hiding the context menu, I can't help you there, but the best advice I can give is to look at the back office source code here: https://github.com/umbraco/Umbraco-CMS/tree/dev-v7/src/Umbraco.Web.UI.Client and have a look at how things are done in the core code. That's usually my first port if call when I'm trying to do anything in the back office!

Upvotes: 1

Related Questions