possible to call url no angular view with action in tree - Extending Umbraco and using the API

Press Ctrl / CMD + C to copy this to your clipboard.

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

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

Extending Umbraco and using the API

Umbraco 8

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!

Copy Link

Marc Goodson 2141 posts 14344 karma points MVP 8x c-trib

Aug 18, 2019 @ 07:47

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

Copy Link

Tom Madden 252 posts 454 karma points MVP 4x c-trib

Mar 16, 2020 @ 14:09

0

Massive thanks for this Marc,

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

Copy Link
is working on a reply...

Please Sign in or register to post replies