Copied to clipboard

Flag this post as spam?

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


  • Jeremy Coulson 61 posts 143 karma points
    Jun 16, 2017 @ 21:46
    Jeremy Coulson
    0

    How can I add a button to call a JavaScript in back office?

    I need to add a button to the back office to call some JavaScript:

    enter image description here

    I see lots of documentation and resources on creating a back office plugin, but I don't think this is the same. I just need a button that calls a small JavaScript function. Any good ideas or forum topics to read?

    Thanks!

  • Marc Goodson 2157 posts 14431 karma points MVP 9x c-trib
    Jun 17, 2017 @ 18:13
    Marc Goodson
    2

    Hi Jeremy

    There isn't an extension point to add a button 'there'

    But you can add a custom menu item to the Actions button.

    enter image description here

    If you see the Menu Rendering paragraph, on this page, in the documentation:

    https://our.umbraco.org/documentation/extending/section-trees/trees-v7

    see an example here:

    https://github.com/marcemarc/uSpinMeRightRound/blob/master/Solution/tooorangey.uSpinMeRightRound/App_Start/RegisterEvents.cs

    If you are dead set on adding a button 'there', you might be able to achieve this by intercepting the angular view, have a read of this article for inspiration: https://24days.in/umbraco-cms/2015/umbraco-7-back-office-tweaks/

    regards

    Marc

  • Jeremy Coulson 61 posts 143 karma points
    Jun 19, 2017 @ 13:22
    Jeremy Coulson
    0

    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!

  • Marc Goodson 2157 posts 14431 karma points MVP 9x c-trib
    Jun 19, 2017 @ 14:51
    Marc Goodson
    1

    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

  • Jeremy Coulson 61 posts 143 karma points
    Jun 19, 2017 @ 16:12
    Jeremy Coulson
    0

    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.

  • Marc Goodson 2157 posts 14431 karma points MVP 9x c-trib
    Jun 19, 2017 @ 16:53
    Marc Goodson
    1

    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/

  • Jeremy Coulson 61 posts 143 karma points
    Jun 19, 2017 @ 17:21
    Jeremy Coulson
    0

    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

  • Jeremy Coulson 61 posts 143 karma points
    Jun 19, 2017 @ 18:27
    Jeremy Coulson
    0

    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);
                    }
                }
            }
    
  • Jeremy Coulson 61 posts 143 karma points
    Jun 19, 2017 @ 18:39
    Jeremy Coulson
    0

    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

  • Marc Goodson 2157 posts 14431 karma points MVP 9x c-trib
    Jun 19, 2017 @ 19:32
    Marc Goodson
    1

    Yes, you need to reference the file that contains your javascript controller in the package manifest, otherwise Umbraco won't load it, and yes, well, for the time being I'd focus on putting your code inside the controller, theres a whole bunch of things you can do with angularJS and directives to make your code neater and reusable, but for now you just want to get it loading and console.log the id of current node!!

    So another thing to realise is that you are not building a property editor, this is a custom menu actoin and so your package.manifest file would look something more like this:

    {  
        javascript:[
            "/app_plugins/tooorangey.uSpinMeRightRound/selectrotation.controller.js"    
        ],
        css:[
        "/app_plugins/tooorangey.uSpinMeRightRound/uSpinMeRightRound.css"
        ]
    }
    

    the custom menu item is loading the html view, umbraco looks for a file called package.manifest in the same folder of the view, and loads any extra resources specified there, eg javascript and css, the javascript needs to reference the controller.js file that contains the angularJs controller that your view references...

    fingers crossed

  • Jeremy Coulson 61 posts 143 karma points
    Jun 19, 2017 @ 20:34
    Jeremy Coulson
    0

    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!

    enter image description here

    enter image description here

    enter image description here

  • Marc Goodson 2157 posts 14431 karma points MVP 9x c-trib
    Jun 19, 2017 @ 20:59
    Marc Goodson
    0

    Nice!

    Now you need a custom dashboard to show when notifications were sent and to which blog!

  • Jeremy Coulson 61 posts 143 karma points
    Jun 20, 2017 @ 12:34
    Jeremy Coulson
    0

    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.

Please Sign in or register to post replies

Write your reply to:

Draft