Marc,

You're my hero. The GitHub link you provided really got me far on this. I have a button now that only displays on a certain document type and opens an HTML page when it is clicked. Awesome. Now, one more question: how do I get the ID of the current item to the HTML page? If I simply try to attach the ID as a parameter to my URL (like notifyItem.AdditionalData.Add("actionView", "/app_plugins/Trex/blog-notify.html?thisblog=" + umbracoItem.Id)), it comes up as null in my HTML page.

If I can just get the current ID to my HTML page, I have some JavaScript waiting there to grab that ID and work with it. Getting the ID to the HTML page is the only thing left for me here.

Thanks!

Hi Jeremy

It depends a little on what you are trying to do...

If you look at the repo for uSpinMeRightRound you'll see the html view that the menu item is linked to is wired to an angularJS Controller:

https://github.com/marcemarc/uSpinMeRightRound/blob/master/Solution/uSpinMeRightRound/App_Plugins/tooorangey.uSpinMeRightRound/selectrotation.html

<div class="umb-editor umb-mediapicker rotation-picker" ng-controller="tooorangey.SelectRotationController as vm">

This angularJs controller file is here:

https://github.com/marcemarc/uSpinMeRightRound/blob/master/Solution/uSpinMeRightRound/App_Plugins/tooorangey.uSpinMeRightRound/selectrotation.controller.js

and you can see that I'm getting a reference to the current node from the 'dialogOptions' that are available via the $scope

 // get the current media id
    var dialogOptions = $scope.dialogOptions;
    var currentMediaItem = dialogOptions.currentNode;
    vm.mediaInfo.mediaId = parseInt(currentMediaItem.id);

regards

Marc

Marc,

I was able to get the data to my page this way, but when I add JavaScript, the data disappear. So, the following code works, but I need to add JavaScript to do something with the ID and title:

<div ng-controller="Umbraco.Editors.Content.SendBlogNotification">
<div class="umb-dialog-body form-horizontal">
    <div class="umb-pane">
        <h5>Send blog notification</h5>
        <ul>
            <li>ID: <span id="blogID">{{BlogID}}</span></li>
            <li>Title: <span id="blogTitle">{{BlogTitle}}</span></li>
        </ul>
        <div id="buttons">
            <input type="submit" name="btnSendBlogEmail" id="btnSendBlogEmail" value="Send" class="btn btn-primary">
        </div>
        <div class="control-group umb-control-group" style="">
            <p id="notificationStatus"></p>
        </div>
    </div>
</div>
<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
    <a class="btn btn-link" ng-click="nav.hideDialog()">
        <localize key="general_cancel">Cancel</localize>
    </a>
</div>

Once I add the JavaScript, the ID and title no longer display on the page. I see no JS errors in my console: just blank spaces where the data should be.

In case you couldn't tell, this is my first time ever working with Angular.

Hi Jeremy

No problems can you post the contents of your Umbraco.Editors.Content.SendBlogNotification controller file ?

also it's not obvious but in the folder that you have the .html file in, you need to have a package.manifest file, telling Umbraco to load the javascript file which contains the controller js...

eg

https://github.com/marcemarc/uSpinMeRightRound/blob/master/Solution/uSpinMeRightRound/App_Plugins/tooorangey.uSpinMeRightRound/package.manifest

so if you could post the contents of your package.manifest file we can maybe see whether it's all wired up correctly to read the id...

regards

Marc

ps I'm biased but the Extending the Umbraco Backoffice training course is ace for getting your head around AngularJS and extending Umbraco in this way: https://umbraco.com/training/course-details/extending-the-backoffice-details/

Marc,

I appreciate your help! I definitely need to take that course, but I jumped into this because the deadline here doesn't really allow me a lot of education time this week :)

Right now, I have made some more changes and I have the manifest in place, but the JavaScript is just not loading.

Here's my controller:

angular.module("umbraco").controller("Umbraco.Editors.Content.SendBlogNotification", function ($scope, editorState) {
        $scope.BlogID = editorState.current.id;
        $scope.BlogTitle = editorState.current.name;
    });

Here's my manifest:

   {    
    propertyEditors: [      
        {
            alias: "BlogNotifier",
            name: "Blog Notifier",
            editor: {
                view: "~/App_Plugins/TrexBlogNotifier/blog-notify.html"
            }
        }
    ],
    javascript:[
        "/App_Plugins/TrexBlogNotifier/blog-notify.js"  
    ]
}

Thanks for any other advice!

Jeremy

And if it's any help, here's my MenuRendering:

private void TreeControllerBase_MenuRendering(TreeControllerBase sender, MenuRenderingEventArgs e)
        {
            if (sender.TreeAlias == "content")
            {
                var umbracoHelper = new UmbracoHelper(UmbracoContext.Current);
                var nodeId = e.NodeId;
                var umbracoItem = umbracoHelper.TypedContent(nodeId);
                if (umbracoItem != null && umbracoItem.DocumentTypeAlias == "uBlogsyPost")
                {
                    var notifyItem = new Umbraco.Web.Models.Trees.MenuItem("SendBlogNotification", "Notify Subscribers");
                    notifyItem.Icon = "share-alt";
                    notifyItem.SeperatorBefore = true;
                    notifyItem.AdditionalData.Add("actionView", "/App_Plugins/TrexBlogNotifier/blog-notify.html");
                    notifyItem.AdditionalData.Add("BlogName", umbracoItem.Name);
                    int intMenuLength = e.Menu.Items.Count;
                    e.Menu.Items.Insert(15, notifyItem);
                }
            }
        }

I found that I can just add my JavaScript right in my controller js. Is that actually the proper way to do this instead of having a second JS file in the manifest?

Jeremy

Sah-weet! I just moved it from my localhost to our dev server (where things are a little more real) and it flew fine. I need to improve the UX just a tad for our marketing folks, but this has me well on my way. I owe you a drink, sir!

You have inspired version 2 of my plugin! Now that I think I understand the basic process, I foresee many extensions to our Umbraco installation in the future.