umbraco create treeview content menu item passing in value possible querystring

David Armitage 414 posts 1655 karma points

Apr 22, 2017 @ 10:22

Umbraco Create Treeview Context Menu Item - Passing in Value (possible querystring)

Hi Guys,

I'm just starting to figure out how to add context menu items to the umbraco backend and then calling some backend controller.

I got the basics down but I want to know if this is possible....

So I created a menu item using the ApplicationStarted event.

private void ContentTreeController_MenuRendering(TreeControllerBase sender, MenuRenderingEventArgs e)
        {
            var item = new MenuItem("exportCsv", "Export to CSV");
            item.AdditionalData.Add("actionView", "/App_Plugins/exportCsv/index.html?nodeTypeAlias=jobClassificationIndustry");
            item.Icon = "save";
            e.Menu.Items.Insert(e.Menu.Items.Count, item);
        }

I want to know if there is anyway I can pass a value into the html file that we have to create in the AppPlugins folder. In my case AppPlugins/exportCsv/index.html

<div class="umbracoDialog umb-dialog">
    <p>Click <em>export</em> to download items to CSV</p>



<script>
        alert(window.location.pathname + window.location.search);
        alert(window.parant.location);
    </script>



    <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
        <a href="/Umbraco/Backoffice/Api/NewsItemExport/Export?nodeTypeAlias=jobClassificationIndustry" target="_blank" class="btn btn-primary">
            Export
        </a>
    </div>
</div>

You can probably see what I am trying to do from the menu item I have created. You can see I tried to add a query string on the end of the menu items. I was hoping I could pass this into the html file and then access this through javascript.

I am guessing there is a better way to do this. Any help understanding how all this works would be much appreciated.

Thanks in advanced :0

David

Copy Link

David Armitage 414 posts 1655 karma points

Apr 23, 2017 @ 07:24

This thread is a similar question. I basically want to do the same. Access information about the current node in which the menu was clicked within the html file.

https://our.umbraco.org/forum/umbraco-7/using-umbraco-7/71959-passing-data-to-angularjs-controller-from-menuitem

I couldn't get this example to work. Here is my code....

Here is the menu item

private void ContentTreeController_MenuRendering(TreeControllerBase sender, MenuRenderingEventArgs e)
        {
            var item = new MenuItem("exportCsv", "Export to CSV");
            item.AdditionalData.Add("actionView", "/App_Plugins/exportCsv/index.html");
            item.AdditionalData.Add("parent", "1234");
            item.Icon = "save";
            e.Menu.Items.Insert(e.Menu.Items.Count, item);
        }

Here is the html

<div class="umbracoDialog umb-dialog">
    <p>Click <em>export</em> to download items to CSV</p>

    <script>
        var dialogOptions = $scope.dialogOptions;
        $scope.ProductCategoryPK = dialogOptions.currentAction.metaData.parent;
        alert(dialogOptions.currentAction.metaData.parent);
    </script>

    <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
        <a href="/Umbraco/Backoffice/Api/NewsItemExport/Export?nodeTypeAlias=jobClassificationIndustry" target="_blank" class="btn btn-primary">
            Export
        </a>
    </div>
</div>

Basically the javascript didn't do anything.... Any help would be awesome.

Copy Link

David Armitage 414 posts 1655 karma points

Apr 24, 2017 @ 08:26

Hi,

After a lot of research I figured it out. Mainly from following instructions at the following URL.

http://www.wiliam.com.au/wiliam-blog/adding-a-custom-control-to-umbraco-7-action-menu

Here were the steps..

Create the menu items using similar code to my example

private void ContentTreeController_MenuRendering(TreeControllerBase sender, MenuRenderingEventArgs e)
        {
            if (e.NodeId != "-1")
            {
                var exportChildrenCsv = new MenuItem("exportChildrenCsv", "Export Child Nodes");
                exportChildrenCsv.AdditionalData.Add("actionView", "/App_Plugins/BackendExtensions/views/exportChildNodesCsv.html");
                exportChildrenCsv.Icon = "save";
                e.Menu.Items.Insert(e.Menu.Items.Count, exportChildrenCsv);

                var exportSameNodesCsv = new MenuItem("exportSameNodesCsv", "Export Same Nodes");
                exportSameNodesCsv.AdditionalData.Add("actionView", "/App_Plugins/BackendExtensions/views/exportSameNodesCsv.html");
                exportSameNodesCsv.Icon = "save";
                e.Menu.Items.Insert(e.Menu.Items.Count, exportSameNodesCsv);
            }
        }

Add some code to the umbraco javascript file (/Umbraco/Js/umbraco.controller.js) as per my example. This will push information to the html file which needs to be created in the next step.

angular.module('umbraco').controller("Umbraco.Editors.Content.exportSameNodesCsv", contentMyActionController);
    function contentMyActionController($scope, $routeParams, $http, contentResource) {
        $scope.id = $routeParams.id;

        if ($scope.id == '') {
            $scope.WelcomeMessage = 'Firstly please select a node you want to export';
        }
        else {
            $scope.WelcomeMessage = 'Click on the export button to export the nodes';
        }
    }

    angular.module('umbraco').controller("Umbraco.Editors.Content.exportChildNodesCsv", contentMyActionController);
    function contentMyActionController($scope, $routeParams, $http, contentResource) {
        $scope.id = $routeParams.id;

        if ($scope.id == '') {
            $scope.WelcomeMessage = 'Firstly please select a node you want to export';
        }
        else {
            $scope.WelcomeMessage = 'Click on the export button to export the nodes';
        }
    }

Finally create the html file for each item similar to my example. The correct directory should be clear from the first step.

<div ng-controller="Umbraco.Editors.Content.exportChildNodesCsv">
    <div class="umb-dialog-body form-horizontal">
        <div class="umb-pane">
            <p>Export Child Nodes to CSV</p>
        </div>
    </div>

    <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
        <a href="/Umbraco/Backoffice/Api/Backend/ExportChildNodesToCsv?nodeId={{id}}" target="_blank" class="btn btn-primary" ng-click="nav.hideDialog()">
            Export
        </a>
        <a class="btn btn-link" ng-click="nav.hideDialog()">
            <localize key="general_cancel">Cancel</localize>
        </a>
    </div>
</div>

I hope this helps someone.

Kind Regards

David

Copy Link

is working on a reply...

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.

Flag this post as spam?

Umbraco Create Treeview Context Menu Item - Passing in Value (possible querystring)