Copied to clipboard

Flag this post as spam?

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


  • Remko 70 posts 189 karma points
    4 days ago
    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 941 posts 6259 karma points MVP 4x c-trib
    2 days ago
    Marc Goodson
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft