umbraco create treeview content menu item passing in value possible querystring - Extending Umbraco and using the API

David Armitage 505 posts 2073 karma points

Apr 22, 2017 @ 10:22

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

Extending Umbraco and using the API

Umbraco 7

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 505 posts 2073 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 505 posts 2073 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...

Flag this post as spam?

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