Copied to clipboard

Flag this post as spam?

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


  • Remko 118 posts 283 karma points
    Aug 16, 2019 @ 09:21
    Remko
    0

    How to call url (so not an (angular)view) with action in tree?

    Hi all,

    We created a method to download media folder as zip. To use this, we added a Download surface controller with an action, so simply this url is enough to download the folder: /download/downloadaszip?id={nodeid}

    Now I would like to add an action to the media section, so a user could simply click Download as zip and the download url is called.

    I already created a component to add the action, this is quite simple, but I cannot get the url to work.

    I now have this code:

        // the event listener method:
        void TreeControllerBase_MenuRendering(TreeControllerBase sender, MenuRenderingEventArgs e)
        {
            // this will add a custom menu item for all admin users
            // for all media tree nodes
            if (sender.TreeAlias == "media"
                && sender.Security.CurrentUser.Groups.Any(x => x.Alias.InvariantEquals("admin")))
            {
                // creates a menu action that will open /umbraco/currentSection/itemAlias.html
                var i = new Umbraco.Web.Models.Trees.MenuItem("downloadMediaAsZip", "Download als zip");
    
                i.AdditionalData.Add("actionUrl", $"/download/FolderAsZip?id={e.NodeId})");
    
                // sets the icon to icon-wine-glass 
                i.Icon = "download-alt";
    
                // insert at index 5
                e.Menu.Items.Insert(5, i);
            }
        }
    

    Could anyone give advice in how I could get this url called when clicking the action?

    Thank you!

  • Marc Goodson 2157 posts 14434 karma points MVP 9x c-trib
    Aug 18, 2019 @ 07:47
    Marc Goodson
    1

    Hi Remko

    Looking here:

    https://github.com/umbraco/Umbraco-CMS/blob/853087a75044b814df458457dc9a1f778cc89749/src/Umbraco.Web/Models/Trees/MenuItem.cs

    you have two options on a MenuItem

    LaunchDialogView and LaunchDialogUrl - which will either trigger an angular view to be loaded in a dialog, or a Url to be loaded via an IFrame.

    i.LaunchDialogUrl($"/download/FolderAsZip?id={e.NodeId})")
    

    I'm not sure if the IFrame option will 'just work' with your download url, I expect it may not! and will leave an empty iframe on the screen.

    So what I think you might have to do is have a simple accompanying angular view + controller, that the menu item calls that then has the download option available... have done something similar in V7 in the past:

    i.AdditionalData.Add("downloadUrl", $"/download/FolderAsZip?id={e.NodeId})");
    i.LaunchDialogView("/App_Plugins/ZipDownload/Download.html", "Zip Download");
    

    and then have a confirmation step in your download.html

    <div class="umb-dialog umb-pane" ng-controller="ZipDownload.ZipDownloadController">
        <div class="umb-dialog-body" auto-scale="90">
    
            <p class="umb-abstract">
                Are you sure you want to download <strong>{{currentNode.name}}</strong> ?
            </p>
    
            <umb-confirm on-confirm="performDownload" on-cancel="cancel">
            </umb-confirm>
    
        </div>
    </div>
    

    and in the controller have something like:

    function zipDownloadController($scope,
        $filter,
        $http,
        $routeParams,
        editorState,
        contentResource,
        notificationsService,
        navigationService,
        appState,
        $timeout) {
    
        $scope.currentNode = appState.getMenuState("currentNode");
    
        $scope.performDownload = function () {
            var dialogOptions = $scope.dialogOptions;
            var downloadUrl = dialogOptions.currentAction.metaData.downloadUrl;
    
            navigationService.hideDialog();
            document.location.assign(downloadUrl);
        };
    
        $scope.cancel = function () {
            navigationService.hideDialog();
        };
    };
    
    
    angular.module("umbraco").controller('ZipDownload.ZipDownloadController', zipDownloadController);
    

    hopefully that gives you the gist.

    regards

    Marc

  • Tom Madden 253 posts 455 karma points MVP 4x c-trib
    Mar 16, 2020 @ 14:09
    Tom Madden
    0

    Massive thanks for this Marc,

    I struggled for a while trying to find where $scope.dialogOptions.currentNode went

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies