Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Michaël Vanbrabandt 863 posts 3346 karma points c-trib
    Feb 09, 2018 @ 08:48
    Michaël Vanbrabandt

    Issues when using the navigation and dialogService in custom package

    Hi all,

    in my custom package I have create a new action menu which opens a navigation window at the left side.

    There I have a button which opens a dialog of type contentPicker using the umb-overlay directive.

    I have some issues/questions about this:

    1. Issue when the placement of the overlay is left

    If I set the position of the overlay to left, then the dialog gets placed behind the left navigation tree dialog. In the less file I can see that there is a setting:

    // push left overlay when drawer is open
    .umb-drawer-is-visible .umb-overlay.umb-overlay-left {
        left: @drawerWidth;

    But this isn't set I guess.

    So for now I placed the dialog to the right, but it would be nice that the dialog gets opened at the left on top of the navigation dialog of the action menu.

    Even when you resize the left navigation tree, it should also be moved along with the navigation tree.

    2. ContentPicker inline placement of the custom navigation dialog

    To open the contentPicker I use like I said the dialogService and the directive umb-overlay. Is there no solution like a directive to use this contentPicker inside of my navigation html directly?

    Then I won't need to open another dialog to do this which is more userfriendly.

    Example: we would like to have something like the move navigation:

    enter image description here

    3. Swipe left hookup event

    If we need to use the dialogService then we have another problem with the swipe left event of the navigation tree.

    Can we hook in on the swipe left function of our navigation dialog? Because we would like to close the dialog and remove the backdrop overlay.

    Now if we swipe to the left on our navigation dialog the dialogs are gone but the backdrop remains untill we click inside of the window.


  • Michaël Vanbrabandt 863 posts 3346 karma points c-trib
    Feb 09, 2018 @ 15:32
    Michaël Vanbrabandt

    For anyone interested in solving this, I managed to get the contentPicker inline in my navigation view by:

    <div class="form-horizontal">
           <div ng-if="vm.view" ng-include="vm.view"></div>

    And set the vm.view in my controller using:

      if (vm.view) {
          if (vm.view.indexOf(".html") === -1) {
                var viewAlias = vm.view.toLowerCase();
                vm.view = "views/common/overlays/" + viewAlias + "/" + viewAlias + ".html";

    then we need to set the $scope.model which will be passed to the contentPicker:

          $scope.model = {
                view: 'contentPicker',
                title: 'Select content',
                multiPicker: false,
                show: true,
                hideSubmitButton: true,
                submit: function (model) {
                    // Get the first selected content node
                    var data = model.selection[0];


  • Arjan Woldring 123 posts 230 karma points
    Mar 07, 2018 @ 09:26
    Arjan Woldring

    Thanks for the feedback Michaël.

    How did you do the 'Swipe left hookup event' part?

    I'm particularly interested in disabling this in a custom section. Because it's annoyingly closing the dialog when clicking with the mouse.

    Thanks, Arjan

Please Sign in or register to post replies

Write your reply to: