2

Show or hide tabs based on organization tags (Web portal)

Original topic placed here https://support.zendesk.com/entries/175801-show-or-hide-tabs-based-on-organization . But this method based on OrganizationID and is not flexible. I'll show other way to control menu tabs, based on organization tags.

For example we need to show "Create new" and "My requests" tabs for organization without tag "expired". There are two ways:

  • Create single Custom HTML widget with script. This widget will hide tabs if organization * has * a tag "expired". But you can't place this widget to all pages e.g. forum post.

  • Create two widgets. Global CSS which will hide tabs for everyone and Custom HTML which will show tabs if organization hasn't a tag "expired".

I choose second way. Let's do it.

  1. Create Global CSS widget and place next code:

.tab_new
{
display:none;
}

.tab_requests
{
display:none;
}

  1. Create Custom HTML widget and place it to all pages.

<p> Show menu widget</p>

<script type="text/javascript" charset="utf-8">

Event.observe(document, 'widgets:load', function() {

new Ajax.Request('/users/current.json',
{
method:'GET',asynchronous: true,onSuccess: function(transport)
{
var obj = transport.responseText.evalJSON();
org_id = obj['organization_id'];

new Ajax.Request ('/organizations/'+org_id+'.json',
{
method:'GET',asynchronous: true,onSuccess: function(transport)
{
var obj = transport.responseText.evalJSON();
tags = obj['current_tags'];

if (tags.search("expired")<0)                     {                     $j('.tab\_new').show();                     $j('.tab\_requests').show();                     };                 };             });         }     });          }); </script>

39 comments

  • 0

    This is exactly what I was looking for. It's so much more efficient to control access to the tabs based on the organization rather than the OrgID. Thank you!

  • 0

    I spoke too soon. While the tabs are successfully hidden the Custom HTML doesn't display them based on the org tag. I have placed the HTML widget on the Home and Forums pages, does it need to go anywhere else?

  • 0

    Hi Duke.

    Glad to see that my post is helpful for you.

    Now I'm using Global Javascript widget. This is easier than Custom HTML. In this case you no need to place widget on pages.

    Try to deactivate Custom HTML widget and create Global Javascript widget with code from sec.2 between "Event.observe"

     

     

    new Ajax.Request('/users/current.json',
        {
        method:'GET',asynchronous: true,onSuccess: function(transport)
            {
            var obj = transport.responseText.evalJSON();
            org_id = obj['organization_id'];

            new Ajax.Request ('/organizations/'+org_id+'.json',
                {
                method:'GET',asynchronous: true,onSuccess: function(transport)
                    {
                    var obj = transport.responseText.evalJSON();
                    tags = obj['current_tags'];
                        
                    if (tags.search("expired")<0)
                        {
                        $j('.tab_new').show();
                        $j('.tab_requests').show();
                        };
                    };
                });
            }
        });

  • 0

    Hi - This is also exactly what Im looking for, but unfortunately, I dont read javascript very well.

     

    What I currently use to add a menu to the menu bar is the following:

    Event.observe(window, 'load', function() {
    $$('#top-menu #green')[0].insert('<li class="main"><a class="tab">More</a><ul class="menu-drop"><li><a href="link here" target="\_self">some text</a></li></ul></li>');
    });

     

    I would like to have this menu displayed based on the user having a specific tag (like your "expired") ... How do I combine your method of testing for that Tag and conditionally executing my code?

     

  • 0

    Well, you know what they say about monkeys typing at a keyboard ... with enough hacking I figured it out ... thanks for the original idea of how to do this!! Here's what I ended up doing:

    Add a Widget using the Global Javascript with the following code:

     

    Event.observe(window, 'load', function() {

    new Ajax.Request('/users/current.json', {
    method: 'GET', asynchronous: true, onSuccess: function (transport) {
    var obj = transport.responseText.evalJSON();
    org_id = obj['organization_id'];

    new Ajax.Request('/organizations/' + org_id + '.json', {
    method: 'GET', asynchronous: true, onSuccess: function (transport) {
    var obj = transport.responseText.evalJSON();
    tags = obj['current_tags'];

    // ***** Check the tag "special_tag" *****
    if (tags.search("special_tag") >= 0) {
    // add the menu
    $$('#top-menu #green')[0].insert('<li class="main"><a class="tab">Special Menu</a><ul class="menu-drop"><li><a href="https://some-link" target="\_self">Some text</a></li></ul></li>');
    };

    }
    });

    }
    });
    });

  • 0

    Hi James,

    I'm glad that you found solution :) It's really good variation of my script.

  • 0

    Hi Mikhail - I'd like to check the tag based on the Users tags and not the organization tag. How can I reference just the user tag? 

  • 0

    James,
    If you need to operate a user tag you can also use this script. It's will be simplier.

    I post only script part here.

    Event.observe(document, 'widgets:load', function()
    {
    new Ajax.Request('/users/current.json',
    {
    method:'GET',asynchronous: true,onSuccess: function(transport)
    {
    var obj = transport.responseText.evalJSON();
    tags = obj['current_tags'];

    if (tags.search("expired")<0)
    {
    $j('.tab_new').show();
    $j('.tab_requests').show();
    }
    };
    });
    });

     

    at pastebin  http://pastebin.com/pF77LmJ3

  • 0

    Original script runs next steps

    1. Get current user data

    2. Read OrganizationID from user data

    3. Get organization data by OrganizationID

    4. Read Tags from organization data

     

    For reading only user's tags steps 2-4 can be removed.

  • 0

    Actually, I dont think its possible to read the user tags since this information is not available to a user. You can get the current user info with /users/current.json but it does not contain the current_tags data. Curiously, you can read the organization tags, as in the original example.

  • 0

    User's tags are inherited from organization. Yes, if you set up only organization tags you can see it in user info (in webpage) and tickets but not in user.json data. In this case I have to read current user data and organization data in my script.

    But If you set's user's tags directly in user info the "current_data" will contain those tags.

     

    p.s. I would be glad if Zendesk has finally made a normal comments editor, with the ability to insert images :)

  • 0

    Hi Mikhail,

    I am trying to implement your script above but I am running into issues where the user cannot execute the json and I get  the following error back when querying the organization (current user works)

    { "error": { "title": "Forbidden", "message": "You do not have access to this page. Please contact the account owner of this help desk for further help." } }

    Did you run into this and if yes how did you overcome?
    Thanks
    Daniel

  • 0

    @Daniel, Try something like this 

    $j.getJSON('/organizations/'+currentUser.organization.id+'.json', function(data){ console.log(data); });

  • 0

    Skip, I am not a javascript guy. I can copy past etc. and run firebug to debug to see where it goes and what it does, but above does not mean a lot to me.

    Could you translate that into the javascript above which Mikhail posted?

  • 0

    Skip, got it working ... I think, but when I log in as end-user I still get message below in the console.

    As admin it works fine.

    {
    
    "error": {
    
    "title": "Forbidden",
    
    "message": "You do not have access to this page. Please contact the account owner of this help desk
    
    for further help."
    
    }
    
    }
    
  • 0

    @Daniel, sorry for the confusion. I was assuming a user when testing and the call worked because of my admin session id. I tried again after logging out and logging in as a user and it fails. 

  • 0

    Daniel, Skip

    I was a little bit not understand what does not work. Authorized user have an access to objects https://yourdomain.zendesk.com/users/current.json and https://yourdomain.zendesk.com/organizations/<id>.json

    But  don't have an access to organization or user list

  • 0

    I'm still experiencing an issue getting this to work correctly. Here is what I have done:

    1. Updated my Global CSS with:

    .tab_new
    {
    display:none;
    }

    .tab_requests
    {
    display:none;
    }

    NOTE: The CSS code works perfectly

    1. Implemented the Global JavaScript widget which Mikhail posted from the 31st:

    new Ajax.Request('/users/current.json',
    {
    method:'GET',asynchronous: true,onSuccess: function(transport)
    {
    var obj = transport.responseText.evalJSON();
    org_id = obj['organization_id'];

    new Ajax.Request ('/organizations/'+org_id+'.json',
    {
    method:'GET',asynchronous: true,onSuccess: function(transport)
    {
    var obj = transport.responseText.evalJSON();
    tags = obj['current_tags'];

    if (tags.search("communitysupport")<0)
    {
    $j('.tab_new').show();
    $j('.tab_requests').show();
    };
    };
    });
    }
    });
    NOTE: I changed the tags.search criteria to meet my specific tab name.

    The result is; netiher ther new nor requests tab is visable.

    I have done all of the standard troubleshooting tihngs:
    - Verified syntax is correct
    - Testing with the appropriate user accounts
    - Verified the tag is correct, etc.
    - Both widgets are available to all peopel who are logged in and are end-users

    I'm sure I'm missing somethiung basic - any suggestions?

  • 0

    Mikhail, Duke, Skip

    I believe the issue ,at least for me, is that the first Ajax to "get current" works fine. I get the organization ID etc.

    But I get the "forbidden" message when doing the call to the organization.

    I am working in the Sandbox but logged in with a end-user account.

    It appears the end-user does not have authority to pull organization details.

     

    Is this a setup issue?

    I really need to get this working.

    Appreciate any help.

  • 0

    Hi Daniel,

    First of all it looks like I'm posted a script at 31st with a braces mistakes. When I copied it I've deleted some our specific code. Try to use this script (I fixed it)

    new Ajax.Request('/users/current.json',
    {
    method: 'GET',asynchronous: true,onSuccess: function(transport)
    {
    var obj = transport.responseText.evalJSON();
    org_id = obj['organization_id'];
    new Ajax.Request('/organizations/'+org_id+'.json',
    {
    method:'GET',asynchronous: true,onSuccess: function(transport)
    {
    var obj = transport.responseText.evalJSON();
    tags = obj['current_tags'];
    if (tags.search("communitysupport")<0)
    {
    $j('.tab_new').show();
    $j('.tab_requests').show();
    };
    });
    }
    });

     

    But I don't think that it raises "forbidden" error. Maybe It's "sandbox" specific issue. You can try to debug on production account. Only script without hiding by CSS. But in this case you should use special software like Firebug.

    Or maybe Skip will answered is it sandbox specific or not.

  • 0

    Hi,

    I'm trying to hide tabs for all users who are not "partners" of ours. I was intending to do this based on the tag associated with individual users, by modifying the Global Javascript widget to this:

     

    <p> Show menu widget</p>

    <script type="text/javascript" charset="utf-8">

    Event.observe(document, 'widgets:load', function() {

    new Ajax.Request('/users/current.json',  

    {

       method:'GET',asynchronous: true,onSuccess: function(transport)   

    {    

    var obj = transport.responseText.evalJSON();

        tags = obj['current_tags'];

       if (tags.search("partner")=1)    

    {

         $j('.tab_new').show();

         $j('.tab_requests').show();

        }

       };

      });

     });

    </script>

     

    But it doesn't work. Any thoughts?

     

     

     

  • 0

    Hi Daniel,

    Try to change line

     if (tags.search("partner")=1)  

    to

     if (tags.search("partner")>=0)

    Script will work after that. 

  • 0

    Hi Mikhail,

     

    Thanks for offering some help (and many thanks for fast help!), but it still doesn't work. I can test parts of the whole setup by:

    1. Starting with just the CSS - This properly hides the "Submit a request" and "Check your existing requests" tabs

    2. Then, if I make a Global Javascript widget and enter only these 2 lines:

                   $j('.tab_new').show();     

                   $j('.tab_requests').show();

    The tabs show up again. The Javascript properly overrides the CSS.

     

    However, when I use the full Javascript that is suggested, the tabs aren't shown. It's as if the script can't pull the user's tags properly, or can't evaluate it properly, or something...Any thoughts? or any tips on how I could debug it further?

     

    Thanks!

    Dan

     

  • 0

    Daniel, 

    Check out the json object  https://yourdomain.zendesk.com/users/current.json. Do you see a filled "current_tags" property? It's may be empty and script doesn't work. 

    The "current_tags" property can be empty when tag assigned not to User but to Organization. When you assign tag to Organization you can also see this tag at User's page. But it's only inherits from Organization but not present in current.json. In this case you should read tags from user's Organization like described in topic. Or assign tag to User directly.

     

    About debugging. There are two tools for it. If you using FIrefox you can install Firebug plugin. If you using Chome debugging tools ebbedded into it.

  • 0
  • 0

    Thanks for your work on this, Mikhail! 

  • 0

    @Mikhail, thanks for the code that works. I would add that you can avoid the /users/current.json by using the built in javascript obj for currentUser

    new Ajax.Request('/organizations/' + currentUser.organization.id + '.json', {
    method:'GET',
    onSuccess: function(transport) {
    var obj = transport.responseText.evalJSON(); 
    tags = obj['current_tags'];
    console.log(tags);
    }});

  • 0

    When I navigate to https://yourdomain.zendesk.com/users/current.json, I see all kinds of details about the current user. (it's a fake customer user that I have set up from a personal email account).

    However, there is no "current_tags" property, or anything like it. It's not even listed, let alone populated with the "partner" tag that I have assigned to that specific user. (Note: the tag is not assigned to an Organization, nor is the User even connected to an Organization.)

    Is there some setting that I need to enable in order to have User tags exposed to these scripts?

    Thanks!

  • 0

    Hi Daniel,

    I'm confused. I'm thought I saw this property in "current.json" object. But now there isn't.

    Skip, thank you for tip. I also try to check currentUser.isTagged and currentUser.tags properties but all of them returns false and *empty. *I directly assigned a tag for user but also cannot get it.

    Skip can you give some help to us =)

    Test script

    alert(currentUser.isTagged());
    alert(currentUser.tags());

  • 0

    Hi Mikhail,

    Thanks for continuing to look into this. I've filed a support ticket with Zendesk to ask about this issue. I will let you guys know what I hear from them.

    Maybe the User's tags just aren't exposed? And I'll have to use the Organization's tags? (it wouldn't be the end of the world...but we'd prefer the flexibillity of having it at the individual user level...)

    Thanks,

    Dan

Please sign in to leave a comment.