Copied to clipboard

Flag this post as spam?

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


  • Warren Buckley 2106 posts 4836 karma points MVP ∞ admin hq c-trib
    Sep 30, 2014 @ 16:56
    Warren Buckley
    0

    Umbraco 7 Event - Remove/Hide tab for User X

    Hello All,
    I am currently working on a tiny bit of code about hiding/removing a tab for a specific user on a content node from displaying.

    Imagine some basic editor for them not to see a tab that may have settings or other values that do not need to be changed often perhaps.

    I am curious to know is there a way from the Content API that Umbraco uses to render out the JSON to drive the AngularJS back office UI, that we could remove a specific tab from the object & JSON that gets served down the pipe to the users browser & thus hide/s the tab.

    https://github.com/umbraco/Umbraco-CMS/blob/eae00873073f20c60e355ec6e95ff6259ad2652b/src/Umbraco.Web.UI.Client/src/common/resources/content.resource.js#L364

    https://github.com/umbraco/Umbraco-CMS/blob/872aff0c96769a0db3ec2b8b35fd66f21bfd4c99/src/Umbraco.Web/Editors/ContentController.cs#L128

    The core guys are doing something similar in the last link above, when they scaffold out an empty new content node of a document type. If has ListView enabled on the doctype then they remove a certain tab from the collection.

    Any ideas or thoughts on this. If I attempt to do this will Umbraco blow up because when the other user does a publish there is inconstant data?

    Cheers,
    Warren

  • Warren Buckley 2106 posts 4836 karma points MVP ∞ admin hq c-trib
    Sep 30, 2014 @ 17:24
    Warren Buckley
    0

    Hello all,
    Just a thought whilst walking to the shop.

    I was going to approach this with JS only and load in a custom JS file, but I am unsure how to load a JS file on the content editor without an associated editor/property on the document type/content node to fire the AngularJS controller with the associated Dependencies on Umbraco's services.

    Next thought is could I listen for a specific event that the Umbraco backoffice JS fires/emits and allows me to do something similar.

    Anyway look forward to any thoughts/suggestions on how this could be approached, if at all.

    Thanks,
    Warren

  • Danny Drogt 10 posts 121 karma points c-trib
    Sep 30, 2014 @ 17:39
    Danny Drogt
    1

    I'm working on something similair, already am able to disable/hide properties. (now working on tabs)
    Just some quick pointers that might help you while I complete my solution (which I'll share when complete :-) )

    I'm using a big hack using CSS3 animations/keyframes to "emulate" DOMNodeInserted, which you can find here: http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/
    This will basicly fire a custom event when a DOM node is inserted (so we can hook intro Angular). I have "injected" this into the Backoffice as a simple Plugin which only adds some Javascript and CSS through package.manifest

    On the server I have hooked in the Web API using DelegatingHandler, more information here: http://issues.umbraco.org/issue/U4-2670#comment=67-15418
    I'm intercepting calls to /umbraco/backoffice/umbracoapi/content/getbyid and adding custom information in the Config property.

    The "emulated" event then uses jQuery to do some DOM manipulation to "disable"/hide properties. Next stop will be tabs.

    I'll try to post some code in the next couple of days.

    Hope this helps!
    Danny 

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Oct 01, 2014 @ 06:30
    Jeroen Breuer
    1

    Hello,

    I did something similar like what Danny said, but for the media picker start nodes which I mentioned in the last uHangout. If you want a full working example check the Hybrid Framework :-). https://github.com/jbreuer/Hybrid-Framework-for-Umbraco-v7-Best-Practises/blob/master/Umbraco.Extensions/Utilities/WebApiHandler.cs

    Jeroen

  • Ayo Adesina 430 posts 1023 karma points
    Oct 03, 2014 @ 10:48
    Ayo Adesina
    1

    I want to hide tabs too :-) Was just about to start a new thread then I saw this one.

    This package seems to do what I would want: http://our.umbraco.org/projects/backoffice-extensions/attackmonkey-tab-hider

    Seems pretty popular, does anyone know if this works with umbraco 7?

  • Warren Buckley 2106 posts 4836 karma points MVP ∞ admin hq c-trib
    Oct 07, 2014 @ 11:05
    Warren Buckley
    0

    Hi Ayo,
    I don't believe it is works with V7 but I would recommend trying to get in touch with Tim Payne aka @attackMonkey the developer to see if it is or not.

    @Danny & @Jeroen thanks for the replies I will take a look into your suggestions.

    Cheers,
    Warren

  • keilo 568 posts 1023 karma points
    Oct 08, 2014 @ 14:02
    keilo
    0

    Hi Warren

    Have you figured out a workaround (even if its a hack) to simply disable a certain tab to a user/group?

    I came across this post while wondering if there is a simple way to just hide a tab on v7.

    Would appreciate if you can share your findings/progress so far.

    cheers

  • Zac 239 posts 541 karma points
    Oct 14, 2014 @ 20:04
    Zac
    0

    Attack Monkey doesn't work for v7, as it relies on WebForms.

    We created a tab hider via a hack, which is working fine for us, but it's not really extensible.  I'll need to research Jeroen's result to see if I can integrate this into our current solution to make it more extensible.

    I'd be glad to build this functionality correctly, but haven't been able to get any good info from Core about how to integrate this (http://our.umbraco.org/forum/developers/extending-umbraco/53754-Extend-umbraco-backoffice-content-editor-and-disable-validation-hook-into-angular-controllers).

    Anyhow, here's what we did:

    1. umbraco/js/umbraco.controllers.js - created tab hider function which injects a tabVisible property (setHiderVisibleData)
    2. umbraco/js/umbraco.controllers.js - call tab hider function
    3. /umbraco/views/edit.html - minor code modifications to only show visible tabs
    You can see our modified v7.1.6 files here:
      umbraco.controllers.js: https://db.tt/Vwka8ZrW
      edit.html: https://db.tt/sjMATkL9

    If anyone has good architecture suggestions for the questions posted here: http://our.umbraco.org/forum/developers/extending-umbraco/53754-Extend-umbraco-backoffice-content-editor-and-disable-validation-hook-into-angular-controllers, we'd be happy to review them and potentially implement an extensible package for this functionality. 

     



     

  • Danny Drogt 10 posts 121 karma points c-trib
    Nov 20, 2014 @ 12:30
    Danny Drogt
    1

    While I am too busy to actually complete my solution, I just wanted to share it with you guys anyway.
    This solution allows you to hide tabs and properties, without breaking anything and without the need to modigy any core files :-)

    I don't think it'll work on older browsers and have only tested myself in IE11 and the latest Chrome.
    Please note that this is not a fool-proof solution as it is clientside only.

    But perhaps some of you still find it useful in some scenarios.
    Keep in mind that this is still a prototype.

    The important part takes place in TabsAndPropertiesHiderApplication.cs in the FilterTabsAndProperties() method.
    Currently, this prototype hides tabs and properties based on their aliases defined in hide-props.txt and hide-tabs.txt in App_Data.
    Obviously you want to refactor that code to fit in your own logic, based on username/group/whatever.

    You can find my prototype at https://dl.dropboxusercontent.com/u/23094523/TabsAndPropertiesHider.zip

    Please give us any feedback so we can work together to get a good tabs/property hider package working! :-)

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Nov 20, 2014 @ 12:37
    Jeroen Breuer
    0

    Thanks for posting this. It's exactly what I need for a new project I'm working on. H5YR

    Jeroen

  • keilo 568 posts 1023 karma points
    Nov 20, 2014 @ 13:10
    keilo
    0

    Thanks Danny for taking the time to share the complete solution. Im sure it will become handy for quick fixes when required.

  • Danny Drogt 10 posts 121 karma points c-trib
    Nov 20, 2014 @ 14:14
    Danny Drogt
    0

    I noticed it does have some bugs, I need to use it now for a project of my own as well.
    Am fixing the bug and extending it so simple configuration can occur through an XML file.
    Will post later this day! :-) 

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Nov 20, 2014 @ 14:29
    Jeroen Breuer
    0

    Cool thanks!

    I'll probably add it to the Hybrid Framework and will try to make it configurable through a custom table in the database. The same as Content Override that is used for the media picker start node.

    Jeroen

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Nov 20, 2014 @ 14:31
    Jeroen Breuer
    0

    Another tip. In your event you only use getbyid, but you should also use getempty. That way the code is also executed when you create a new node instead of only editing existing nodes.

    Jeroen

  • Danny Drogt 10 posts 121 karma points c-trib
    Nov 20, 2014 @ 14:32
    Danny Drogt
    0

    Good thinking, thanks! :-) maybe we can team up on making it a package?

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Nov 20, 2014 @ 14:33
    Jeroen Breuer
    0

    I'm also thinking about making the media picker start node a package. Only thing is that it also needs a UI to edit the database rows. Don't have time for that currently.

    Jeroen

  • Danny Drogt 10 posts 121 karma points c-trib
    Nov 20, 2014 @ 14:35
    Danny Drogt
    0

    Same here for UI making, that's why - for myself - I am currently configuring through XML.

  • Danny Drogt 10 posts 121 karma points c-trib
    Nov 20, 2014 @ 15:10
    Danny Drogt
    1

    Just uploaded a quick update:

    https://dl.dropboxusercontent.com/u/23094523/TabsAndPropertiesHide_v2.zip

    Things that changed:

    • Bug removed - when no properties from the first tab were hidden, tabs wouldn't get hidden
    • TabsAndPropertiesHider.config added to /Config (you are able to use comma-delimited lists of UserTypes
    • Just hides tabs and properties now in stead of showing a message that you can't edit them
    • Also works for creating new items (thanks Jeroen!)
    HTH!

     

    Edit: just found out it screws up some Contour related field. Will look at it tonight, but just so you know!

    Edit: bug fixed, above link still applies!

  • Robert Foster 459 posts 1820 karma points MVP 2x admin c-trib
    Jun 27, 2016 @ 03:14
    Robert Foster
    0

    Hi Danny, I was wondering whether you ever turned this into a package or not; and whether the code is still available? The dropbox link is now a 404...

    We gave a client looking for this exact solution.

    Thanks, Rob.

  • Danny Drogt 10 posts 121 karma points c-trib
    Jun 28, 2016 @ 07:53
    Danny Drogt
    0

    Hi Robert,

    I did not turn this into a package, but someone else (Alain) has though! You can find it here: https://our.umbraco.org/projects/collaboration/backoffice-tweaking/

    HTH, Danny

  • Zac 239 posts 541 karma points
    Nov 20, 2014 @ 15:44
    Zac
    0

    As an FYI, we created a property hider that works great.  It overrides the GetById and GetEmpty calls and utilizes a pretty extensible xml config file for easy management.

    We haven't extended this for tabs yet, but I'll try and upload the config files and config singleton later.

  • keilo 568 posts 1023 karma points
    Nov 21, 2014 @ 12:24
    keilo
    0

    Hi Zac

    Can you share the implementation on property hider?

    It definitely compliments tab hiding as there are times one dont want to shop optional field X (instead of entire tab) to certain user/group;

     

    group A: can see tab 1,2

    groub B: cant see tab2, a (opt.) field in tab 1

  • Danny Drogt 10 posts 121 karma points c-trib
    Nov 21, 2014 @ 12:36
    Danny Drogt
    0

    Hi keilo,

    My updated solution allows that through XML config, you can check the Dropbox link in the previous post.
    You can hide properties and/or tabs for usertypes.

    Zac, does your solution require modified files or not? If not, than your solution sounds great! 

  • Zac 239 posts 541 karma points
    Nov 21, 2014 @ 16:45
    Zac
    0

    Keilo, I'll try and post it soon.

    Danny, my solution requires one modified line (not a ton of modifications like the previous hack).  This is because we need to support older browsers (IE9+) and we hadn't figured out a way to inject js changes without touching the angular view.  Does your solution work with older browsers?

    I'll try and download your code and compare it with ours.  Ours has a lot of configuration options for property hiding too.  It allows properties to be hidden by doc type, user type, site id (multi site environments), etc.

     

  • Ismail Mayat 4511 posts 10090 karma points MVP 2x admin c-trib
    Dec 08, 2014 @ 14:57
    Ismail Mayat
    0

    Guys,

    Further to this post, here is what I am looking to build.  I need to have a property editor with checkbox list (was going to do with prevalues but do not think that will work) when the user checks an item it will show a tab, user can select more than one checkbox.  So I guess I can use the code built by Jeroen, however in my property editor on check call api method eg "/umbraco/backoffice/umbracoapi/content/checkBoxChecked" then in webapi handler class do my show hide?  

    Regards

    Ismail

  • Rahul Sekhar 9 posts 85 karma points
    Mar 17, 2017 @ 08:22
    Rahul Sekhar
    5

    This is a very old post, but I was looking for a simple way to hide tabs in the UI purely with JS. I found a simple solution of my own, hijacking an existing angular directive (valTab) - angular will run both directives. I didn't need to use animation events, so this easily has full browser support. This hides a tab called "Internal" for any non-admin user:

    angular.module('umbraco.directives')
    .directive('valTab', ['userService', function (userService) {
      return {
        restrict: 'A',
    
        link: function (scope, element) {
    
          // Check the tab label - we only need to hide the internal tab
          if (scope.tab.label === 'Internal') {
    
            // Check if the user is an admin user - we only hide the tab for non admin users
            userService.getCurrentUser().then(function (user) {
              if (user.userType !== 'admin') {
    
                // Hide the tab
                element.hide();
              }
            });
          }
        }
      }
    }]);
    
  • Gerhard Grossberger 54 posts 178 karma points
    Jun 11, 2018 @ 19:54
    Gerhard Grossberger
    0

    not exactly update safe, but it does the job. #h5yr!

  • Marcel van Helmont 68 posts 259 karma points c-trib
    Jun 12, 2018 @ 07:26
    Marcel van Helmont
    0

    The best way i can find is to use a server side event.

    protected override void ApplicationStarting(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
    {
    EditorModelEventManager.SendingContentModel += EditorModelEventManager_SendingContentModel;
    }
    
    private void EditorModelEventManager_SendingContentModel(System.Web.Http.Filters.HttpActionExecutedContext sender, EditorModelEventArgs<global::Umbraco.Web.Models.ContentEditing.ContentItemDisplay> e)
            {
                e.Model.Tabs = e.Model.Tabs.Where(x => x.Alias.ToLowerInvariant() != "content".ToLowerInvariant()).ToList();
            }
    

    No hacks or anything required

Please Sign in or register to post replies

Write your reply to:

Draft